/* Step Into Wonder */

* { margin: 0; padding: 0; box-sizing: border-box; }

html, body {
  width: 100%;
  height: 100%;
  overflow: hidden;
  background: #0a0f0a;
  cursor: none;
  font-family: Georgia, 'Times New Roman', serif;
}

.hero {
  position: relative;
  width: 100vw;
  height: 100vh;
  overflow: hidden;
}

/* ---------- Layers ---------- */

.layer-wrap {
  position: absolute;
  inset: 0;
  pointer-events: none;
}

/* Couches "scène" : plein cadre */
.layer.scene {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  will-change: transform;
}

/* Objets indépendants : positionnés individuellement */
.overlay {
  position: absolute;
  will-change: transform;
}

#wrap-sky          { z-index: 1; }
#wrap-portal-left  { z-index: 2; }
#wrap-portal-right { z-index: 3; }
#wrap-full-scene   { z-index: 4; }
#fx-zoom           { position: absolute; inset: 0; z-index: 5; pointer-events: none; will-change: transform; }
#wrap-flowers      { z-index: 5; }
.foliage-wrap      { z-index: 6; }

/* Positionnement des objets (silhouettes organiques, débordent du cadre) */
#flowers     { bottom: -16vh; left: -4vw; width: 108vw; }
#foliage-tl  { top: -3vh;    left: -5vw;  width: 36vw; }
#foliage-tr  { top: -3vh;    right: -4vw; width: 31vw; }
#foliage-bl  { bottom: -5vh; left: -3vw;  width: 30vw; }
#foliage-br  { bottom: -4vh; right: -3vw; width: 29vw; }

/* États initiaux (frame 0) */
/* L'arrière-plan (image originale brute) est visible dès la frame 0 :
   jamais de départ noir derrière le trou. */
#wrap-sky          { opacity: 1; }
#wrap-portal-left,
#wrap-portal-right { opacity: 1; transition: opacity 1s ease; }
#wrap-full-scene   { opacity: 0; transition: opacity 1s ease; }
#wrap-flowers      { opacity: 0; transition: opacity 1.2s ease; } /* fondu SUR PLACE */
.foliage-wrap      { opacity: 0; transition: opacity 1s ease; }

/* États révélés (ajoutés par la timeline) */
#wrap-sky.on          { opacity: 1; }
/* Les moitiés sont coupées NET une fois full-scene opaque par-dessus
   (jamais de double fondu simultané : ça crée un creux d'opacité visible) */
#wrap-portal-left.off,
#wrap-portal-right.off { opacity: 0; transition: none; }
#wrap-full-scene.on   { opacity: 1; }
#wrap-flowers.on      { opacity: 1; }
.foliage-wrap.on      { opacity: 1; }

/* ---------- UI ---------- */

.nav {
  position: absolute;
  top: 36px;
  left: 50%;
  transform: translate(-50%, -14px);
  z-index: 10;
  display: flex;
  align-items: center;
  gap: 34px;
  opacity: 0;
  transition: opacity 0.8s ease, transform 0.8s cubic-bezier(0.16, 1, 0.3, 1);
}
.nav.on { opacity: 1; transform: translate(-50%, 0); }

.nav a {
  color: rgba(255, 255, 255, 0.85);
  text-decoration: none;
  font-size: 14px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  font-family: Verdana, sans-serif;
}
.nav a:hover { color: #fff; }
.nav-star { color: #fff; font-size: 18px; }

/* Révélation du titre ligne par ligne sous masque (entrée orchestrée) */
.hero-text {
  position: absolute;
  left: 6vw;
  top: 50%;
  transform: translateY(-50%);
  z-index: 11;
}

.hero-text h1 {
  color: #fff;
  font-size: clamp(48px, 7vw, 110px);
  line-height: 1.02;
  font-weight: 400;
  letter-spacing: 0.02em;
  text-shadow: 0 4px 30px rgba(0, 0, 0, 0.45);
}

.hero-text .line { display: block; overflow: hidden; padding-bottom: 0.06em; }
.hero-text .line-inner {
  display: inline-block;
  transform: translateY(112%);
  transition: transform 0.95s cubic-bezier(0.16, 1, 0.3, 1);
}
.hero-text.on .line:nth-child(1) .line-inner { transform: translateY(0); transition-delay: 0s; }
.hero-text.on .line:nth-child(2) .line-inner { transform: translateY(0); transition-delay: 0.12s; }
.hero-text.on .line:nth-child(3) .line-inner { transform: translateY(0); transition-delay: 0.24s; }

.subtitle {
  margin-top: 26px;
  color: rgba(255, 255, 255, 0.82);
  font-size: 15px;
  line-height: 1.6;
  font-family: Verdana, sans-serif;
  text-shadow: 0 2px 12px rgba(0, 0, 0, 0.5);
  opacity: 0;
  transform: translateY(14px);
  transition: opacity 0.9s ease 0.5s, transform 0.9s cubic-bezier(0.16, 1, 0.3, 1) 0.5s;
}
.hero-text.on .subtitle { opacity: 1; transform: translateY(0); }

/* ---------- Cards (dock-like) ---------- */

.cards {
  position: absolute;
  right: 4vw;
  bottom: 6vh;
  z-index: 12;
  display: flex;
  flex-direction: column;
  gap: 16px;
}

/* Cascade d'entrée depuis le bas, léger ressort, puis état STATIQUE.
   Keyframes une seule fois (l'interdit ne vise que le zoom du portail) ;
   après l'animation, l'élément revient à l'état de base -> le hover
   par transition refonctionne sans conflit. */
.cards .card { opacity: 0; }
.cards.on .card {
  opacity: 1;
  animation: cardIn 0.85s cubic-bezier(0.22, 1.42, 0.36, 1) backwards;
}
.cards.on .card:nth-child(2) { animation-delay: 0.12s; }
.cards.on .card:nth-child(3) { animation-delay: 0.24s; }

@keyframes cardIn {
  from { opacity: 0; transform: translateY(30px) scale(0.96); }
  to   { opacity: 1; transform: translateY(0) scale(1); }
}

.card {
  display: flex;
  align-items: center;
  gap: 12px;
  min-width: 210px;
  padding: 16px 22px;
  border-radius: 16px;
  background: rgba(255, 255, 255, 0.15);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border: 1px solid rgba(255, 255, 255, 0.25);
  color: #fff;
  font-family: Verdana, sans-serif;
  font-size: 14px;
  /* STATIQUE au repos - mouvement uniquement au survol */
  transition: transform 0.45s cubic-bezier(0.34, 1.56, 0.64, 1), box-shadow 0.45s ease;
}

.card:hover {
  transform: translateY(-15px) scale(1.25);
  box-shadow: 0 18px 50px rgba(0, 0, 0, 0.45);
  z-index: 10;
  position: relative;
}

/* Les voisines s'écartent (effet dock, sélecteur :has()) */
.card:has(+ .card:hover) { transform: translateY(-10px); }
.card:hover + .card { transform: translateY(10px); }

.card-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.25);
  font-size: 11px;
}

.card-num {
  font-size: 22px;
  font-weight: 700;
}

/* ---------- Transitions de démo ---------- */

#vignette {
  position: absolute;
  inset: 0;
  z-index: 8;
  pointer-events: none;
  opacity: 0;
  background: radial-gradient(ellipse at 50% 45%, transparent 28%, rgba(4, 9, 4, 0.85) 100%);
  transition: opacity 1.3s ease;
}
#vignette.show { opacity: 1; }

#bloom {
  position: absolute;
  inset: 0;
  z-index: 9;
  pointer-events: none;
  opacity: 0;
  background: radial-gradient(circle at 50.6% 42.4%, rgba(255, 242, 214, 0.95), rgba(255, 205, 145, 0.4) 45%, transparent 75%);
  transition: opacity 0.9s ease;
}
#bloom.show { opacity: 1; }
#bloom.dimmed { opacity: 0.22; transition: opacity 1.6s ease; }

/* Crépuscule : appliqué calque par calque, en cascade depuis le JS */
.duskfx { filter: brightness(0.36) saturate(0.72) hue-rotate(-8deg); }
.layer, .overlay { transition: filter 1.3s ease; }

.firefly {
  position: absolute;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(255, 238, 160, 1), rgba(255, 200, 90, 0.4) 60%, transparent);
  box-shadow: 0 0 14px 5px rgba(255, 220, 120, 0.45);
  z-index: 9;
  pointer-events: none;
  opacity: 0;
  transition: opacity 1.6s ease;
}
.firefly.show { opacity: 1; }

/* L'UI se retire pendant une transition */
.hero.demo-active .hero-text,
.hero.demo-active .nav,
.hero.demo-active .cards {
  opacity: 0 !important;
  pointer-events: none;
  transition: opacity 0.9s ease;
}

/* Texte final de démo : même révélation sous masque que le titre */
#demo-overlay {
  position: absolute;
  inset: 0;
  z-index: 40;
  display: flex;
  align-items: center;
  justify-content: center;
  pointer-events: none;
}
#demo-overlay.show { pointer-events: auto; }

.demo-text { text-align: center; color: #fff; }

.demo-text h2 {
  font-size: clamp(34px, 4.6vw, 72px);
  font-weight: 400;
  letter-spacing: 0.02em;
  text-shadow: 0 4px 30px rgba(0, 0, 0, 0.5);
}

.demo-text .line { display: block; overflow: hidden; padding-bottom: 0.06em; }
.demo-text .line-inner {
  display: inline-block;
  transform: translateY(112%);
  transition: transform 0.95s cubic-bezier(0.16, 1, 0.3, 1);
}
#demo-overlay.show .line:nth-child(1) .line-inner { transform: translateY(0); transition-delay: 0.05s; }
#demo-overlay.show .line:nth-child(2) .line-inner { transform: translateY(0); transition-delay: 0.17s; }

.demo-sub {
  margin-top: 18px;
  font-family: Verdana, sans-serif;
  font-size: 15px;
  color: rgba(255, 255, 255, 0.85);
  text-shadow: 0 2px 12px rgba(0, 0, 0, 0.6);
  opacity: 0;
  transform: translateY(12px);
  transition: opacity 0.8s ease 0.5s, transform 0.8s cubic-bezier(0.16, 1, 0.3, 1) 0.5s;
}
#demo-overlay.show .demo-sub { opacity: 1; transform: translateY(0); }

/* Navigation inter-sections : la boucle du site continue depuis chaque section */
.demo-nav {
  margin-top: 32px;
  display: flex;
  gap: 14px;
  justify-content: center;
  flex-wrap: wrap;
}
.demo-nav a {
  color: rgba(255, 255, 255, 0.75);
  font-family: Verdana, sans-serif;
  font-size: 12px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  text-decoration: none;
  border: 1px solid rgba(255, 255, 255, 0.3);
  padding: 9px 18px;
  border-radius: 999px;
  backdrop-filter: blur(8px);
  opacity: 0;
  transition: opacity 0.8s ease 0.9s, color 0.3s ease, border-color 0.3s ease;
}
#demo-overlay.show .demo-nav a { opacity: 1; }
.demo-nav a:hover { color: #fff; border-color: #fff; }
.demo-nav #back { border-style: dashed; }

.demo-caption {
  margin-top: 30px;
  font-family: Verdana, sans-serif;
  font-size: 11px;
  letter-spacing: 0.08em;
  color: rgba(255, 255, 255, 0.45);
  opacity: 0;
  transition: opacity 0.8s ease 1.25s;
}
#demo-overlay.show .demo-caption { opacity: 1; }

/* ---------- Intro cinématique ---------- */

/* Rideau opaque présent dès le HTML : aucun flash de scène mi-décodée.
   Le JS orchestre les cartons (machine à états sur l'horloge RAF) ; le
   rideau ne se lève qu'entre deux cartons, jamais en cours de phrase. */
#intro {
  position: absolute;
  inset: 0;
  z-index: 50;
  display: flex;
  align-items: center;
  justify-content: center;
  padding-bottom: 9vh; /* centre optique, légèrement au-dessus du milieu */
  background: #0a0f0a;  /* même noir que le fond de page : continuité parfaite */
}
#intro.reveal { opacity: 0; transition: opacity 1.15s cubic-bezier(0.45, 0.05, 0.25, 1); }
#intro.gone { display: none; }

.intro-content { text-align: center; }

.intro-star {
  display: inline-block;
  color: rgba(255, 255, 255, 0.55);
  font-size: 15px;
  opacity: 0;
  transform: scale(0.7);
  transition: opacity 0.7s ease, transform 0.9s cubic-bezier(0.22, 1, 0.36, 1);
}

.intro-kicker {
  margin-top: 20px;
  font-family: Verdana, sans-serif;
  font-size: 11px;
  letter-spacing: 0.32em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.5);
  opacity: 0;
  transform: translateY(8px);
  transition: opacity 0.9s ease 0.12s, transform 0.9s cubic-bezier(0.22, 1, 0.36, 1) 0.12s;
}

.intro-main {
  margin-top: 24px;
  font-size: clamp(24px, 3vw, 42px);
  font-weight: 400;
  color: rgba(255, 255, 255, 0.95);
  letter-spacing: 0.14em;
  transition: letter-spacing 4.2s linear; /* dérive lente pendant toute la tenue */
  text-shadow: 0 2px 24px rgba(0, 0, 0, 0.6);
}
.intro-main .w { display: inline-block; white-space: pre; }
.intro-main .w + .w { margin-left: 0.45em; }
/* Chaque lettre "s'écrit" : flou -> net, montée douce ; le délai par lettre
   est posé inline par le JS (cascade d'écriture) */
.intro-main .l {
  display: inline-block;
  opacity: 0;
  transform: translateY(0.5em);
  filter: blur(8px);
  transition: opacity 0.85s cubic-bezier(0.22, 1, 0.36, 1),
              transform 0.85s cubic-bezier(0.22, 1, 0.36, 1),
              filter 0.85s cubic-bezier(0.22, 1, 0.36, 1);
}

.intro-content.in .intro-star { opacity: 1; transform: scale(1); }
.intro-content.in .intro-kicker { opacity: 1; transform: translateY(0); }
.intro-content.in .intro-main { letter-spacing: 0.19em; }
.intro-content.in .intro-main .l { opacity: 1; transform: translateY(0); filter: blur(0); }

/* Sortie de carton : le bloc entier s'efface d'une seule voix */
.intro-content.out {
  opacity: 0;
  transform: translateY(-10px);
  filter: blur(6px);
  transition: opacity 0.7s cubic-bezier(0.4, 0, 0.7, 1),
              transform 0.7s cubic-bezier(0.4, 0, 0.7, 1),
              filter 0.7s cubic-bezier(0.4, 0, 0.7, 1);
}

/* Rebrassage entre deux cartons : retour à l'état caché sans animation */
.intro-content.reset, .intro-content.reset * { transition: none !important; }

/* ---------- Custom cursor ---------- */

.cursor {
  position: fixed;
  top: 0;
  left: 0;
  width: 30px;
  height: 30px;
  margin: -15px 0 0 -15px;
  border: 1.5px solid #fff;
  border-radius: 50%;
  mix-blend-mode: difference;
  pointer-events: none;
  z-index: 999;
  transition: width 0.25s ease, height 0.25s ease, margin 0.25s ease;
}

.cursor.grow {
  width: 50px;
  height: 50px;
  margin: -25px 0 0 -25px;
}