/* Générateurs d'images IA : un prompt, une image qui se dévoile, puis sa mention IA signée. */

/* Hero sombre : le gabarit commun est clair, on repasse les textes en clair. */
.sl-hero--gn {
  background: radial-gradient(ellipse 55% 65% at 75% 45%, rgba(244, 81, 30, 0.3), transparent 66%), #0f0805;
  color: #fff;
}

.sl-hero--gn .sl-crumbs,
.ps-page main .sl-hero--gn .sl-crumbs a {
  color: var(--ps-faint-dark);
}

.ps-page main .sl-hero--gn .sl-crumbs a:hover,
.sl-hero--gn .sl-crumbs [aria-current="page"] {
  color: #fff;
}

.ps-page .sl-hero--gn .sl-h1 {
  color: #fff;
}

.sl-hero--gn .f-out {
  -webkit-text-stroke-color: var(--ps-orange-light);
}

.sl-hero--gn .sl-lead {
  color: var(--ps-muted-dark);
}

.ps-page main .sl-hero--gn .sl-text-link {
  color: #fff;
}

/* ---------- Scène ---------- */

.gn-scene {
  display: flex;
  flex-direction: column;
  gap: 14px;
  padding: 16px;
  border: 1px solid rgba(255, 138, 76, 0.3);
  border-radius: 18px;
  background: #1c110b;
  box-shadow: 0 60px 100px -40px rgba(0, 0, 0, 0.9);
}

.gn-prompt {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 14px;
  border: 1px solid rgba(255, 138, 76, 0.25);
  border-radius: 12px;
  background: #120a06;
}

.gn-caret {
  color: var(--ps-orange-light);
}

/* Le prompt se tape : la largeur maximale s'ouvre caractère par caractère. */
.gn-type {
  display: inline-block;
  overflow: hidden;
  max-width: 0;
  border-right: 2px solid var(--ps-orange-light);
  color: #fff;
  font-size: 14px;
  white-space: nowrap;
  animation: gn-type 10s steps(45) infinite;
}

@keyframes gn-type {
  0% { max-width: 0; }
  22%, 92% { max-width: 45ch; }
  100% { max-width: 0; }
}

.gn-go {
  margin-left: auto;
  padding: 6px 12px;
  border-radius: 999px;
  background: var(--ps-orange);
  color: #fff;
  font-size: 12px;
  font-weight: 700;
  animation: gn-go 10s ease infinite;
}

@keyframes gn-go {
  0%, 22% { opacity: 0.4; }
  26%, 30% { opacity: 1; transform: scale(0.94); }
  34%, 100% { opacity: 1; transform: none; }
}

.gn-frame {
  position: relative;
  overflow: hidden;
  aspect-ratio: 4 / 3;
  border-radius: 12px;
}

.gn-img {
  position: absolute;
  inset: 0;
  animation: gn-den 10s ease infinite;
}

.gn-img img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

@keyframes gn-den {
  0%, 26% { opacity: 0.5; filter: blur(26px) saturate(0.3); }
  62%, 92% { opacity: 1; filter: none; }
  100% { opacity: 0.5; filter: blur(26px); }
}

.gn-noise {
  position: absolute;
  inset: 0;
  background:
    repeating-radial-gradient(circle at 30% 40%, rgba(255, 255, 255, 0.18) 0 1px, transparent 1px 3px),
    repeating-radial-gradient(circle at 70% 60%, rgba(0, 0, 0, 0.25) 0 1px, transparent 1px 4px);
  animation: gn-noise 10s ease infinite;
}

@keyframes gn-noise {
  0%, 26% { opacity: 1; }
  60%, 100% { opacity: 0; }
}

.gn-lab {
  position: absolute;
  bottom: 12px;
  left: 12px;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 12px;
  border-radius: 10px;
  background: #fff;
  box-shadow: 0 0 0 3px var(--ps-orange);
  color: var(--ps-ink);
  font-size: 13px;
  font-weight: 700;
  animation: gn-lab 10s cubic-bezier(0.2, 1.6, 0.4, 1) infinite both;
}

.gn-lab img {
  display: block;
  width: 18px;
  height: 18px;
}

@keyframes gn-lab {
  0%, 64% { opacity: 0; transform: translateY(10px) scale(0.9); }
  70%, 92% { opacity: 1; transform: none; }
  100% { opacity: 0; }
}

.gn-code {
  padding: 10px 14px;
  border-radius: 10px;
  background: #120a06;
  color: var(--ps-muted-dark);
  font-size: 12px;
  animation: gn-code 10s ease infinite both;
}

.gn-val {
  color: #ff9a66;
}

@keyframes gn-code {
  0%, 70% { opacity: 0.25; }
  76%, 92% { opacity: 1; }
  100% { opacity: 0.25; }
}

/* Mobile, écrans tactiles et mouvement réduit : la scène reste figée sur son état final. */
@media (max-width: 900px), (hover: none) {
  .gn-type,
  .gn-go,
  .gn-img,
  .gn-noise,
  .gn-lab,
  .gn-code {
    animation: none;
  }

  .gn-type {
    max-width: none;
    border-right: 0;
  }

  .gn-noise {
    opacity: 0;
  }
}

@media (max-width: 900px) {
  .sl-scene .gn-scene {
    zoom: 0.62;
  }
}

@media (max-width: 420px) {
  .sl-scene .gn-scene {
    zoom: 0.54;
  }
}

@media (prefers-reduced-motion: reduce) {
  .gn-type,
  .gn-go,
  .gn-img,
  .gn-noise,
  .gn-lab,
  .gn-code {
    animation: none;
  }

  .gn-type {
    max-width: none;
    border-right: 0;
  }

  .gn-noise {
    opacity: 0;
  }
}