/* ============================================================
   Galaad — hero-anim.css
   Hero narrative animation: layered illustration + flip reveal.
   Positions calées via test-compositing.html
   ============================================================ */

/* ---------- Flip container ---------- */

.hero-flip {
  position: relative;
  width: 100%;
  min-height: 100vh;
  perspective: 1200px;
}

.hero-flip__face {
  position: absolute;
  inset: 0;
  backface-visibility: hidden;
  transition: transform 0.8s cubic-bezier(0.4, 0, 0.2, 1);
}

.hero-flip__face--front {
  z-index: 1;
}

.hero-flip__face--back {
  transform: rotateX(180deg);
  z-index: 0;
  display: flex;
  align-items: center;
}

.hero-flip--flipped .hero-flip__face--front {
  transform: rotateX(-180deg);
}

.hero-flip--flipped .hero-flip__face--back {
  transform: rotateX(0deg);
}

/* ---------- Scene container ---------- */

.hero-scene {
  position: relative;
  width: 100%;
  height: calc(100vh - 80px);
  overflow: hidden;
  background: var(--galaad-cream, #faf7f0);
}

/* Hero section: no extra padding, sits right under header */
[data-section="hero"] {
  padding-top: 0;
  padding-bottom: 0;
  min-height: auto;
}

[data-section="hero"] .hero-flip {
  min-height: calc(100vh - 80px);
}

[data-section="hero"] .hero-flip__face--back {
  min-height: calc(100vh - 80px);
}

.hero-scene img {
  position: absolute;
}

/* ---------- Monitor ---------- */

.hero-monitor {
  top: -2%;
  left: 50%;
  transform: translateX(-50%);
  width: 85%;
  height: auto;
  z-index: 0;
}

/* ---------- Screen overlays ---------- */

.hero-overlay {
  height: auto;
  opacity: 0;
  transition: opacity 0.8s ease;
}

.hero-bugs {
  width: 61%;
  top: 2%;
  left: 50%;
  transform: translateX(-50%);
  z-index: 5;
}

.hero-ai {
  width: 12%;
  top: 9%;
  left: 72%;
  transform: translateX(-50%);
  z-index: 5;
}

.hero-fond-ia {
  width: 45%;
  top: 15%;
  left: 52%;
  transform: translateX(-50%);
  z-index: 5;
  opacity: 0;
  transition: opacity 0.8s ease;
}

/* ---------- Blason ---------- */

.hero-blason {
  z-index: 6;
  top: 8%;
  left: 22%;
  width: 5%;
  height: auto;
  opacity: 0;
  transition: opacity 0.8s ease;
}

@keyframes hero-blason-blink {
  0% { opacity: 0.3; }
  50% { opacity: 1; }
  100% { opacity: 0.3; }
}

.hero-blason--blinking {
  animation: hero-blason-blink 1.5s ease-in-out 3;
}

/* ---------- Person poses ---------- */

.hero-person {
  z-index: 10;
  left: 50%;
  transform: translateX(-50%);
  height: auto;
  opacity: 0;
  transition: opacity 0.5s ease;
}

.hero-person--sit {
  bottom: -10%;
  width: 62%;
}

.hero-person--stand {
  bottom: -10%;
  width: 70%;
}

.hero-person--dream {
  bottom: -10%;
  width: 62%;
  left: 63%;
}

/* ---------- Dream phases ---------- */

.hero-dream {
  z-index: 15;
  height: auto;
  opacity: 0;
}

.hero-dream--small {
  width: 35%;
  top: -12%;
  left: -2%;
}

.hero-dream--medium {
  width: 44%;
  top: 9%;
  left: 10%;
}

.hero-dream--full {
  z-index: 16;
  top: -5%;
  left: -5%;
  width: 110%;
  min-height: 110%;
  object-fit: cover;
  opacity: 0;
  transition: opacity 1.5s ease;
}

.hero-dream--full.visible {
  opacity: 1;
}

/* ---------- Alfred interrupteur ---------- */

.alfred-switch {
  position: absolute;
  left: -20px;
  top: 50%;
  transform: translateY(-50%);
  width: 14px;
  height: 28px;
  opacity: 0;
  transition: opacity 300ms ease-out;
  pointer-events: none;
}

.alfred-switch.visible {
  opacity: 1;
}

.alfred-switch--on .alfred-switch__lever {
  transform: translateY(8px);
  transition: transform 200ms ease-out;
}

.alfred-arm {
  position: absolute;
  left: -16px;
  top: 52%;
  width: 20px;
  height: 6px;
  opacity: 0;
  transition: opacity 200ms ease-out;
  pointer-events: none;
}

.alfred-arm.visible {
  opacity: 1;
}

/* ---------- Scroll lock ---------- */

body.hero-scroll-locked {
  overflow: hidden;
}

/* ---------- Reduced motion ---------- */

@media (prefers-reduced-motion: reduce) {
  .hero-flip__face {
    transition: none;
  }

  .hero-flip__face--front {
    display: none;
  }

  .hero-flip__face--back {
    transform: none;
    position: relative;
  }
}

/* ---------- Responsive ---------- */

/* Positions calées pour viewport Tablette 768. */
@media (max-width: 1024px) {
  .hero-monitor       { width: 85%; top: 2%; }
  .hero-person--sit   { width: 59%; bottom: 46%; }
  .hero-person--dream { width: 59%; bottom: 48%; left: 65%; }
  .hero-person--stand { width: 69%; bottom: 49%; }
  .hero-bugs          { width: 61%; top: 3%; }
  .hero-ai            { width: 17%; top: 5%; left: 71%; }
  .hero-fond-ia       { width: 45%; top: 10%; left: 50%; }
  .hero-dream--small  { width: 34%; top: -2%; left: 5%; }
  .hero-dream--medium { width: 49%; top: 2%; left: 10%; }
  .hero-blason        { width: 6%;  top: 6%; left: 22%; }
}

/* ---------- Mobile : animation conservée, Alfred masqué -----------------
   On garde la scène narrative (monitor, personnage, bugs, IA, rêves) et
   le flip vers la face arrière (texte). Seul Alfred (compagnon, switch,
   bulles, transitions scénarisées) est caché pour ne pas passer sur le
   contenu. Le flip se déclenche tout seul par le setTimeout d'alfred.js
   même si le compagnon n'est pas visible.
   Positions des couches calées à la main via test-compositing.html en
   viewport Mobile 375. */
@media (max-width: 720px) {
  .alfred-companion,
  .alfred-switch,
  .galaad-bubble,
  #alfred-speech,
  .section-bubbles,
  .section-transition,
  .transition-crank,
  .transition-laptop,
  .transition-elevator {
    display: none !important;
  }

  /* Un peu d'air au-dessus de la scène (elle était collée au header). */
  [data-section="hero"] {
    padding-top: var(--space-40, 40px);
  }

  /* Espace haut aussi sur la face arrière une fois retournée. */
  .hero-flip__face--back .section__inner {
    padding-top: var(--space-48, 48px);
    padding-bottom: var(--space-40, 40px);
  }

  /* Positions calées pour 375 px (viewport Mobile). */
  .hero-monitor       { width: 85%; top: 2%; }
  .hero-person--sit   { width: 62%; bottom: 70%; }
  .hero-person--dream { width: 62%; bottom: 70%; left: 63%; }
  .hero-person--stand { width: 70%; bottom: 70%; }
  .hero-bugs          { width: 61%; top: 3%; }
  .hero-ai            { width: 17%; top: 4%; left: 71%; }
  .hero-fond-ia       { width: 45%; top: 6%; left: 48%; }
  .hero-dream--small  { width: 34%; top: -1%; left: 5%; }
  .hero-dream--medium { width: 44%; top: 4%; left: 10%; }
  .hero-blason        { width: 6%;  top: 4%; left: 22%; }
}