/* =========================================================
   牛来一梦 — NIU LAI'S DREAM
   A single continuous cinematic dream journey.
   ========================================================= */

@import url('https://fonts.googleapis.com/css2?family=Fraunces:opsz,wght@9..144,300;9..144,400;9..144,500;9..144,600&family=Noto+Serif+SC:wght@400;500;600;700&family=Inter:wght@300;400;500&display=swap');

:root{
  /* ---- color tokens ---- */
  --void:        #0a0715;
  --purple-deep: #1c0f30;
  --purple-mid:  #351b52;
  --purple-soft: #4f2a70;
  --gold:        #e3b451;
  --gold-bright: #ffdd8a;
  --gold-dim:    #8a6a2e;
  --green:       #1fa66d;
  --green-bright:#3fe89b;
  --wood-red:    #5c2029;
  --wood-red-dk: #2a0e13;
  --cream:       #f4e9cd;
  --ink:         #f1e6cc;
  --ink-dim:     rgba(241,230,204,0.62);

  /* ---- type ---- */
  --font-zh: 'Noto Serif SC', serif;
  --font-en: 'Fraunces', serif;
  --font-ui: 'Inter', sans-serif;

  --ease-dream: cubic-bezier(.19,1,.22,1);
}

*, *::before, *::after{ box-sizing: border-box; }

html{
  background: var(--void);
  scroll-behavior: auto;
}

body{
  margin: 0;
  background: var(--void);
  color: var(--ink);
  font-family: var(--font-ui);
  font-weight: 300;
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
}

body.locked{ overflow: hidden; height: 100vh; }

::selection{ background: var(--gold-dim); color: var(--void); }

a{ color: inherit; text-decoration: none; }

button{ font-family: inherit; cursor: pointer; }

img, video{ max-width: 100%; display: block; }

.hidden{ display: none !important; }

.sr-only{
  position: absolute; width: 1px; height: 1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap;
}

/* =========================================================
   ATMOSPHERE — fixed layered background driving the whole
   visual progression: darkness -> purple -> gold -> green ->
   sunrise. Opacity of each layer is driven by JS via
   --stage (0..1 across the whole page).
   ========================================================= */

#atmosphere{
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  overflow: hidden;
}

.atmo-layer{
  position: absolute;
  inset: -10%;
  opacity: 0;
  transition: opacity 1.2s ease;
  will-change: opacity;
}

#atmo-void{
  background: radial-gradient(ellipse at 50% 30%, #140a24 0%, var(--void) 70%);
}
#atmo-purple{
  background:
    radial-gradient(ellipse at 50% 20%, var(--purple-soft) 0%, transparent 55%),
    linear-gradient(180deg, var(--purple-deep) 0%, var(--void) 100%);
}
#atmo-gold{
  background:
    radial-gradient(ellipse at 50% 15%, rgba(227,180,81,0.55) 0%, transparent 50%),
    linear-gradient(180deg, var(--purple-mid) 0%, var(--purple-deep) 60%, var(--void) 100%);
}
#atmo-green{
  background:
    radial-gradient(ellipse at 50% 70%, rgba(63,232,155,0.28) 0%, transparent 55%),
    linear-gradient(180deg, var(--purple-deep) 0%, #150c28 60%, var(--void) 100%);
}
#atmo-sunrise{
  background:
    radial-gradient(ellipse at 50% 85%, rgba(255,221,138,0.75) 0%, rgba(227,180,81,0.35) 30%, transparent 60%),
    linear-gradient(180deg, #2a1740 0%, #4a2a3a 45%, #6e3a2e 75%, #a35a2c 100%);
}
#atmo-bullrun{
  background:
    radial-gradient(ellipse at 50% 55%, rgba(255,221,138,0.9) 0%, rgba(227,180,81,0.45) 35%, transparent 65%),
    linear-gradient(180deg, #3a2050 0%, #a35a2c 60%, #e3b451 100%);
}

#atmo-vignette{
  opacity: 1;
  background: radial-gradient(ellipse at 50% 50%, transparent 45%, rgba(0,0,0,0.55) 100%);
}

#stars{
  position: absolute; inset: 0;
}#stars span{
  position: absolute;
  width: 2px; height: 2px;
  background: var(--cream);
  border-radius: 50%;
  animation: twinkle 4s ease-in-out infinite;
}
@keyframes twinkle{
  0%, 100%{ opacity: .15; }
  50%{ opacity: .9; }
}

/* floating gold particles */
#particles{
  position: fixed; inset: 0; z-index: 1;
  pointer-events: none; overflow: hidden;
}
.particle{
  position: absolute;
  bottom: -5%;
  width: var(--s, 3px);
  height: var(--s, 3px);
  border-radius: 50%;
  background: radial-gradient(circle, var(--gold-bright) 0%, transparent 70%);
  opacity: 0;
  animation: rise linear infinite;
}
@keyframes rise{
  0%{ transform: translate(0,0); opacity: 0; }
  10%{ opacity: var(--o, .7); }
  90%{ opacity: var(--o, .7); }
  100%{ transform: translate(var(--dx,20px), -110vh); opacity: 0; }
}

/* subtle cinematic film-grain, sits above everything, never blocks input */
#film-grain-layer{
  position: fixed;
  inset: 0;
  z-index: 60;
  pointer-events: none;
  filter: url(#film-grain);
  opacity: .5;
  mix-blend-mode: overlay;
}
@media (prefers-reduced-motion: reduce){
  #film-grain-layer{ display: none; }
}

/* =========================================================
   MAIN CONTENT
   ========================================================= */

main{
  position: relative;
  z-index: 2;
}

.scene{
  position: relative;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 8vh 6vw;
  overflow: hidden;
}

.scene-inner{
  position: relative;
  width: 100%;
  max-width: 980px;
  text-align: center;
}

.eyebrow-zh{
  font-family: var(--font-zh);
  font-size: clamp(1.1rem, 2vw, 1.5rem);
  color: var(--gold);
  letter-spacing: .08em;
  margin: 0 0 .3em;
  opacity: .92;
}

.reveal{
  opacity: 0;
  transform: translateY(28px);
  transition: opacity 1.4s var(--ease-dream), transform 1.4s var(--ease-dream);
}
.reveal.in-view{
  opacity: 1;
  transform: translateY(0);
}
.reveal.d1{ transition-delay: .15s; }
.reveal.d2{ transition-delay: .3s; }
.reveal.d3{ transition-delay: .45s; }
.reveal.d4{ transition-delay: .6s; }

/* --------- clouds (shared silhouette layer used in several scenes) --------- */
.cloud-field{
  position: absolute; inset: 0;
  pointer-events: none;
  overflow: hidden;
  z-index: 0;
}
.cloud{
  position: absolute;
  background: radial-gradient(ellipse at center, rgba(227,180,81,0.35) 0%, rgba(227,180,81,0) 70%);
  border-radius: 50%;
  filter: blur(6px);
  will-change: transform;
}

/* =========================================================
   INTRO GATE
   ========================================================= */

#intro{
  position: fixed;
  inset: 0;
  z-index: 100;
  background: radial-gradient(ellipse at 50% 60%, #170e28 0%, var(--void) 70%);
  display: flex;
  align-items: center;
  justify-content: center;
  transition: opacity .8s ease;
}
#intro.fading{ opacity: 0; pointer-events: none; }

.intro-scene{
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1.8rem;
}

.niu-sleeping-wrap{
  width: min(52vw, 260px);
  opacity: .92;
  filter: drop-shadow(0 0 30px rgba(227,180,81,0.25));
  animation: breathe 4.4s ease-in-out infinite;
  transform-origin: 50% 70%;
}
@keyframes breathe{
  0%, 100%{ transform: scale(1) translateY(0); }
  50%{ transform: scale(1.015, 0.985) translateY(1.5px); }
}
.niu-sleeping-wrap.stretching{
  animation: stretchAwake .5s ease-out forwards;
}
@keyframes stretchAwake{
  0%{ transform: scale(1); filter: drop-shadow(0 0 30px rgba(227,180,81,0.25)); }
  100%{ transform: scale(1.08) translateY(-6px); filter: drop-shadow(0 0 60px rgba(255,221,138,0.9)) brightness(1.5); }
}

.intro-waking{
  text-align: center;
}
.intro-waking .zh{
  font-family: var(--font-zh);
  font-size: clamp(1.4rem, 3vw, 2rem);
  color: var(--gold-bright);
  letter-spacing: .1em;
  margin: 0 0 .5rem;
  animation: pulseText 3.2s ease-in-out infinite;
}
.intro-waking .en{
  font-family: var(--font-en);
  font-weight: 300;
  font-size: clamp(.85rem, 1.6vw, 1.05rem);
  letter-spacing: .35em;
  text-transform: uppercase;
  color: var(--ink-dim);
}
@keyframes pulseText{
  0%, 100%{ opacity: .55; }
  50%{ opacity: 1; }
}

#hold-gate{
  background: none;
  border: none;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1rem;
  color: var(--gold-bright);
  -webkit-tap-highlight-color: transparent;
  touch-action: none;
}
.loading-line{
  position: relative;
  width: min(60vw, 280px);
  height: 1px;
  background: rgba(227,180,81,0.18);
  overflow: visible;
}
.loading-fill{
  position: absolute;
  top: 0; left: 0; bottom: 0;
  width: 0%;
  background: linear-gradient(90deg, var(--gold-dim), var(--gold-bright));
  box-shadow: 0 0 10px 1px var(--gold-bright);
}
#hold-gate.filling .loading-fill{ transition: width linear; }
#hold-gate .gate-label{
  display: block;
  font-family: var(--font-zh);
  font-size: 1rem;
  letter-spacing: .08em;
  color: var(--gold);
}
#hold-gate .gate-label-en{
  display: block;
  font-family: var(--font-ui);
  font-size: .68rem;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--ink-dim);
  margin-top: .25rem;
}

#skip-intro{
  position: absolute;
  bottom: 2rem; right: 2rem;
  background: none; border: none;
  color: var(--ink-dim);
  font-size: .68rem;
  letter-spacing: .18em;
  text-transform: uppercase;
  border-bottom: 1px solid transparent;
}
#skip-intro:hover{ color: var(--gold); border-color: var(--gold-dim); }

/* awaken flash — the moment loading completes and the video takes over */
#awaken-flash{
  position: fixed; inset: 0; z-index: 98;
  background: radial-gradient(ellipse at 50% 55%, #fff6df 0%, var(--gold-bright) 35%, transparent 75%);
  opacity: 0;
  pointer-events: none;
}
#awaken-flash.flash{
  animation: awakenFlash .7s ease-out forwards;
}
@keyframes awakenFlash{
  0%{ opacity: 0; }
  35%{ opacity: 1; }
  100%{ opacity: 0; }
}

/* video stage */
#video-stage{
  position: fixed; inset: 0; z-index: 99;
  background: #000;
  opacity: 0; pointer-events: none;
  transition: opacity .8s ease;
}
#video-stage.active{ opacity: 1; pointer-events: auto; }
#video-stage video{
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
}
.video-vignette{
  position: absolute; inset: 0;
  background: radial-gradient(ellipse at 50% 50%, transparent 40%, rgba(0,0,0,0.65) 100%);
  pointer-events: none;
}
.video-clouds{
  position: absolute; inset: 0;
  pointer-events: none;
  background-image:
    radial-gradient(ellipse 55% 30% at 10% 12%, rgba(255,255,255,0.05), transparent 70%),
    radial-gradient(ellipse 55% 30% at 90% 88%, rgba(255,255,255,0.05), transparent 70%);
  animation: driftClouds 30s linear infinite;
}
@keyframes driftClouds{
  0%{ transform: translateX(0); }
  100%{ transform: translateX(-3%); }
}

/* golden cloud transition overlay */
#cloud-transition{
  position: fixed; inset: 0; z-index: 101;
  pointer-events: none;
  opacity: 0;
}
#cloud-transition.active{ opacity: 1; }
.gold-cloud{
  position: absolute;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(255,221,138,0.95) 0%, rgba(227,180,81,0.55) 45%, rgba(227,180,81,0) 72%);
  filter: blur(2px);
}

/* =========================================================
   HERO
   ========================================================= */

#hero{
  min-height: 100vh;
  justify-content: flex-end;
  padding-bottom: 12vh;
}
.hero-mountains{
  position: absolute;
  bottom: 0; left: 0; right: 0;
  height: 42vh;
  z-index: 0;
  opacity: .8;
}
.hero-mountains svg{ width: 100%; height: 100%; display: block; }
.hero-mountains svg.hero-niu{ width: clamp(46px, 5vw, 70px); height: auto; }

.hero-headline{
  position: relative;
  z-index: 2;
}
.hero-zh{
  font-family: var(--font-zh);
  font-weight: 600;
  font-size: clamp(1.6rem, 4.4vw, 2.9rem);
  background: linear-gradient(115deg, var(--gold-dim) 10%, var(--gold-bright) 35%, #fff6df 50%, var(--gold-bright) 65%, var(--gold-dim) 90%);
  background-size: 240% 100%;
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  filter: drop-shadow(0 0 24px rgba(255,221,138,0.35));
  animation: foilShift 9s ease-in-out infinite;
  margin: 0 0 .5rem;
  letter-spacing: .03em;
}
@keyframes foilShift{
  0%, 100%{ background-position: 0% 50%; }
  50%{ background-position: 100% 50%; }
}
@media (prefers-reduced-motion: reduce){
  .hero-zh, .finale-zh{ animation: none !important; }
}
.hero-en{
  font-family: var(--font-en);
  font-weight: 600;
  font-size: clamp(1.7rem, 5.2vw, 3.6rem);
  line-height: 1.05;
  color: var(--cream);
  margin: 0 0 2.2rem;
  letter-spacing: -0.01em;
  text-shadow: 0 4px 30px rgba(0,0,0,0.4);
}
.hero-title{
  margin-top: 2.4rem;
}
.hero-title .zh{
  font-family: var(--font-zh);
  font-size: clamp(1.3rem, 2.8vw, 1.8rem);
  color: var(--gold);
  margin: 0 0 .2rem;
}
.hero-title .en{
  font-family: var(--font-en);
  font-style: italic;
  font-weight: 400;
  font-size: clamp(.95rem, 1.6vw, 1.15rem);
  letter-spacing: .25em;
  text-transform: uppercase;
  color: var(--ink-dim);
}
.hero-title .en.sub{
  font-style: normal;
  font-size: clamp(.7rem, 1.2vw, .85rem);
  letter-spacing: .4em;
  color: var(--gold-dim);
  margin-top: .3rem;
}
.scroll-cue{
  position: absolute;
  bottom: 3.5vh; left: 50%;
  transform: translateX(-50%);
  display: flex; flex-direction: column; align-items: center;
  gap: .5rem;
  color: var(--ink-dim);
  font-size: .65rem;
  letter-spacing: .3em;
  text-transform: uppercase;
}
.scroll-cue .line{
  width: 1px; height: 34px;
  background: linear-gradient(var(--gold), transparent);
  animation: scrollLine 2.2s ease-in-out infinite;
}
@keyframes scrollLine{
  0%{ transform: scaleY(0); transform-origin: top; }
  50%{ transform: scaleY(1); transform-origin: top; }
  50.01%{ transform-origin: bottom; }
  100%{ transform: scaleY(0); transform-origin: bottom; }
}

/* floating coins in hero */
.coin{
  position: absolute;
  border-radius: 50%;
  background: radial-gradient(circle at 35% 30%, var(--gold-bright), var(--gold) 55%, var(--gold-dim) 100%);
  box-shadow: 0 0 18px rgba(227,180,81,0.5);
  opacity: .85;
}

/* =========================================================
   STORY SCENE
   ========================================================= */

.story-fragment{
  font-family: var(--font-en);
  font-style: italic;
  font-size: clamp(1.1rem, 2.4vw, 1.5rem);
  line-height: 1.7;
  color: var(--ink);
  margin: 0 0 1.1rem;
}
.story-fragment.small{
  font-family: var(--font-ui);
  font-style: normal;
  font-weight: 300;
  font-size: clamp(.95rem, 1.6vw, 1.1rem);
  color: var(--ink-dim);
}
.scroll-fragment{
  position: relative;
  border: 1px solid rgba(227,180,81,0.2);
  border-radius: 2px;
  padding: 2.4rem clamp(1.5rem, 5vw, 3.5rem);
  background: linear-gradient(180deg, rgba(53,27,82,0.35), rgba(10,7,21,0.35));
  backdrop-filter: blur(2px);
  box-shadow: 0 20px 60px rgba(0,0,0,0.35), inset 0 1px 0 rgba(227,180,81,0.15);
}
.scroll-fragment::before,
.scroll-fragment::after{
  content: '';
  position: absolute;
  left: -1px; right: -1px;
  height: 14px;
  background: linear-gradient(90deg, transparent, var(--gold-dim), transparent);
  opacity: .5;
}
.scroll-fragment::before{ top: -14px; }
.scroll-fragment::after{ bottom: -14px; }

.meaning-pair{
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: clamp(1.5rem, 5vw, 4rem);
  margin-bottom: 1.6rem;
  padding-bottom: 1.6rem;
  border-bottom: 1px solid rgba(227,180,81,0.15);
}
.meaning-item{
  text-align: center;
  max-width: 220px;
}
.meaning-zh{
  display: block;
  font-family: var(--font-zh);
  font-size: clamp(2.2rem, 5vw, 3.2rem);
  color: var(--gold-bright);
  text-shadow: 0 0 24px rgba(255,221,138,0.4);
  line-height: 1;
}
.meaning-en{
  display: block;
  font-family: var(--font-ui);
  font-size: .72rem;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--gold);
  margin: .6rem 0 .5rem;
}
.meaning-desc{
  font-family: var(--font-ui);
  font-weight: 300;
  font-size: .88rem;
  color: var(--ink-dim);
  margin: 0;
  line-height: 1.5;
}

/* =========================================================
   DREAM MEMORY SCENES — img1 / img2 / img3
   ========================================================= */

.memory-scene{
  padding: 0;
  align-items: flex-end;
  justify-content: center;
}
.memory-image-wrap{
  position: absolute;
  inset: 0;
  overflow: hidden;
  z-index: 0;
}
.memory-image-bg{
  position: absolute;
  inset: -3%;
  background-size: cover;
  background-position: center;
  background-color: #140a24;
  filter: saturate(1.05) contrast(1.03);
  animation: kenburns 22s ease-in-out infinite alternate;
}
@keyframes kenburns{
  0%{ transform: scale(1) translate(0, 0); }
  100%{ transform: scale(1.1) translate(-1.5%, -1.5%); }
}
.memory-scene::before{
  content: '';
  position: absolute; inset: 0;
  z-index: 1;
  box-shadow: inset 0 0 18vw rgba(10,7,21,0.55);
  pointer-events: none;
}
.memory-scene::after{
  content: '';
  position: absolute; inset: 0;
  z-index: 1;
  background: linear-gradient(180deg, var(--void) 0%, transparent 12%, transparent 88%, var(--void) 100%);
  pointer-events: none;
}
.memory-caption{
  position: relative;
  z-index: 2;
  text-align: center;
  padding-bottom: 10vh;
}

/* =========================================================
   SCROLL-CONTROLLED CINEMATIC VIDEOS — video2 / video3
   ========================================================= */

.scroll-video-scene{
  position: relative;
  height: 220vh;
}
.scroll-video-sticky{
  position: sticky;
  top: 0;
  height: 100vh;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--void);
}
.scroll-video-sticky video{
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.scroll-video-sticky::before,
.scroll-video-sticky::after{
  content: '';
  position: absolute;
  left: 0; right: 0;
  height: 18vh;
  z-index: 2;
  pointer-events: none;
}
.scroll-video-sticky::before{
  top: 0;
  background: linear-gradient(180deg, var(--void), transparent);
}
.scroll-video-sticky::after{
  bottom: 0;
  background: linear-gradient(0deg, var(--void), transparent);
}

/* =========================================================
   SUMMIT — quiet pause before the final awakening
   ========================================================= */

#summit{
  min-height: 70vh;
}
.summit-inner{
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1rem;
}
.summit-candle{
  --h: 340px;
}
.summit-niu{
  position: static;
  width: clamp(56px, 6vw, 88px);
  opacity: .85;
  z-index: 1;
  filter: drop-shadow(0 0 20px rgba(255,221,138,0.5));
}

/* =========================================================
   THE ANCIENT DOOR
   ========================================================= */

#door-scene{
  min-height: 130vh;
  padding-top: 6vh;
}
.door-heading{
  margin-bottom: 3rem;
}
.door-frame{
  position: relative;
  width: min(78vw, 620px);
  aspect-ratio: 3 / 4;
  perspective: 1400px;
  margin: 0 auto;
  touch-action: pan-y;
}
.door-panel{
  position: absolute;
  top: 0; bottom: 0;
  width: 50%;
  background:
    linear-gradient(90deg, rgba(0,0,0,0.25), transparent 12%),
    linear-gradient(180deg, var(--wood-red) 0%, var(--wood-red-dk) 100%);
  border: 1px solid rgba(227,180,81,0.35);
  will-change: transform;
  transform-origin: center;
  box-shadow: 0 0 40px rgba(0,0,0,0.6);
}
.door-panel.left{ left: 0; border-radius: 4px 0 0 4px; transform-origin: left center; }
.door-panel.right{ right: 0; border-radius: 0 4px 4px 0; transform-origin: right center; }
.door-panel .seal{
  position: absolute;
  top: 50%; left: 50%;
  transform: translate(-50%,-50%);
  width: 34%;
  opacity: .8;
}
.door-panel.left .seal{ left: 78%; }
.door-panel.right .seal{ left: 22%; }
.door-panel .grain{
  position: absolute; inset: 6%;
  border: 1px solid rgba(227,180,81,0.25);
}
.door-glow{
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse at 50% 50%, rgba(63,232,155,0.55) 0%, transparent 65%);
  opacity: 0;
  transition: opacity .6s ease;
  pointer-events: none;
  z-index: -1;
}
.door-frame[data-progress-glow="1"] .door-glow{ opacity: 1; }
.door-instruction{
  margin-top: 2.2rem;
  color: var(--ink-dim);
  font-size: .72rem;
  letter-spacing: .22em;
  text-transform: uppercase;
}
.door-instruction .zh{
  display: block;
  font-family: var(--font-zh);
  font-size: 1rem;
  color: var(--gold);
  letter-spacing: .06em;
  text-transform: none;
  margin-bottom: .3rem;
}

/* =========================================================
   CANDLE STAIRWAY (roadmap)
   ========================================================= */

#stairway{
  min-height: 260vh;
  padding: 10vh 6vw;
  align-items: stretch;
}
.stairway-heading{
  text-align: center;
  margin-bottom: 6vh;
}
.stairway-track{
  position: relative;
  max-width: 760px;
  margin: 0 auto;
}
.candle-step{
  position: relative;
  display: flex;
  align-items: flex-end;
  gap: clamp(1rem, 3vw, 2.4rem);
  margin-bottom: 16vh;
  opacity: 0;
  transform: translateY(40px);
  transition: opacity 1.1s var(--ease-dream), transform 1.1s var(--ease-dream);
}
.candle-step.in-view{ opacity: 1; transform: translateY(0); }
.candle-step:nth-child(odd){ flex-direction: row; margin-left: 0; }
.candle-step:nth-child(even){ flex-direction: row-reverse; margin-left: auto; }
.candle-step:nth-child(2){ transform: translate(6vw, 40px); }
.candle-step:nth-child(2).in-view{ transform: translate(6vw, 0); }
.candle-step:nth-child(3){ transform: translate(-2vw, 40px); }
.candle-step:nth-child(3).in-view{ transform: translate(-2vw, 0); }
.candle-step:nth-child(4){ transform: translate(9vw, 40px); }
.candle-step:nth-child(4).in-view{ transform: translate(9vw, 0); }
.candle-step:nth-child(5){ transform: translate(1vw, 40px); }
.candle-step:nth-child(5).in-view{ transform: translate(1vw, 0); }

.candle{
  flex: none;
  width: 34px;
  height: var(--h, 140px);
  border-radius: 3px 3px 1px 1px;
  background: linear-gradient(180deg, var(--green-bright) 0%, var(--green) 65%, #0c5636 100%);
  box-shadow: 0 0 24px rgba(63,232,155,0.55), inset 0 0 8px rgba(255,255,255,0.25);
  position: relative;
}
.candle::before{
  content: '';
  position: absolute;
  left: 50%; top: -10px;
  transform: translateX(-50%);
  width: 2px; height: 10px;
  background: var(--green-bright);
  box-shadow: 0 0 10px var(--green-bright);
}
.candle-copy{
  max-width: 380px;
}
.candle-copy .index{
  font-family: var(--font-en);
  color: var(--gold);
  font-size: .85rem;
  letter-spacing: .1em;
  display: block;
  margin-bottom: .4rem;
}
.candle-copy .zh{
  font-family: var(--font-zh);
  font-size: clamp(1.1rem, 2vw, 1.4rem);
  color: var(--gold-bright);
  margin: 0 0 .25rem;
}
.candle-copy .en{
  font-family: var(--font-en);
  font-size: clamp(1.3rem, 2.6vw, 1.8rem);
  color: var(--cream);
  margin: 0;
}

.niu-figure{
  position: absolute;
  width: clamp(80px, 10vw, 130px);
  opacity: .4;
  filter: drop-shadow(0 0 18px rgba(227,180,81,0.35));
  pointer-events: none;
  z-index: -1;
}

/* hero: small figure standing on the ridge for scale */
.hero-niu{
  position: absolute;
  bottom: 6%;
  left: 78%;
  transform: translateX(-50%);
  width: clamp(46px, 5vw, 70px);
  opacity: .8;
  z-index: 1;
  filter: drop-shadow(0 0 14px rgba(227,180,81,0.4));
}

/* door: figure standing before the gate */
.door-niu{
  position: absolute;
  bottom: -4%;
  left: 50%;
  transform: translateX(-50%);
  width: clamp(50px, 8vw, 84px);
  opacity: .85;
  z-index: 3;
  filter: drop-shadow(0 0 16px rgba(227,180,81,0.45));
}

/* community: gathered figures */
.community-gathering{
  position: absolute;
  bottom: 6%;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  align-items: flex-end;
  gap: 1.4rem;
  z-index: 0;
}
.community-gathering .niu-figure.gather{
  position: static;
  width: clamp(50px, 6vw, 90px);
  opacity: .5;
  z-index: auto;
}
.community-gathering .niu-figure.gather.small{
  width: clamp(38px, 4.5vw, 66px);
  opacity: .38;
}

/* finale: figure at the summit */
.finale-niu{
  position: relative;
  width: clamp(60px, 7vw, 96px);
  margin: 0 auto 1.2rem;
  opacity: .85;
  filter: drop-shadow(0 0 22px rgba(255,221,138,0.5));
}

/* =========================================================
   TOKENOMICS MOON
   ========================================================= */

#tokenomics{
  min-height: 120vh;
}
.moon{
  position: relative;
  width: min(46vw, 320px);
  aspect-ratio: 1;
  border-radius: 50%;
  margin: 4vh auto 6vh;
  background: radial-gradient(circle at 38% 32%, #fff6df 0%, var(--gold-bright) 22%, var(--gold) 55%, var(--gold-dim) 100%);
  box-shadow: 0 0 90px rgba(227,180,81,0.55), 0 0 200px rgba(227,180,81,0.25);
}
.moon-dim{
  position: absolute;
  top: 6%; left: 50%;
  transform: translateX(-50%);
  width: min(30vw, 200px);
  margin: 0;
  opacity: .3;
  box-shadow: 0 0 60px rgba(227,180,81,0.3), 0 0 140px rgba(227,180,81,0.15);
  z-index: 0;
}
.token-orbit{
  position: relative;
  max-width: 780px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 1px;
  background: rgba(227,180,81,0.18);
  border: 1px solid rgba(227,180,81,0.18);
}
.token-stat{
  background: linear-gradient(160deg, rgba(53,27,82,0.5), var(--void) 70%);
  padding: 1.7rem 1rem;
  text-align: center;
  transition: background .3s ease;
}
.token-stat:hover{
  background: linear-gradient(160deg, rgba(227,180,81,0.14), var(--void) 70%);
}
.token-stat .label{
  display: block;
  font-size: .66rem;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--ink-dim);
  margin-bottom: .5rem;
}
.token-stat .value{
  font-family: var(--font-en);
  font-size: clamp(1.05rem, 2vw, 1.35rem);
  color: var(--gold-bright);
}
.contract-line{
  margin-top: 2.2rem;
  display: inline-flex;
  align-items: center;
  gap: .8rem;
  border: 1px solid rgba(227,180,81,0.3);
  padding: .7rem 1.1rem;
  font-family: var(--font-ui);
  font-size: .78rem;
  color: var(--ink-dim);
  max-width: 100%;
}
.contract-line code{
  font-family: monospace;
  color: var(--cream);
  overflow-wrap: anywhere;
}
.copy-btn{
  background: none;
  border: 1px solid var(--gold-dim);
  color: var(--gold);
  font-size: .68rem;
  letter-spacing: .1em;
  text-transform: uppercase;
  padding: .35rem .7rem;
  border-radius: 2px;
  flex: none;
  transition: all .25s ease;
}
.copy-btn:hover{ background: var(--gold); color: var(--void); }

/* =========================================================
   COMMUNITY
   ========================================================= */

#community{ min-height: 105vh; }
.lantern-field{
  position: absolute; inset: 0;
  overflow: hidden;
  pointer-events: none;
}
.lantern{
  position: absolute;
  bottom: -10%;
  width: 26px; height: 34px;
  border-radius: 40% 40% 30% 30%;
  background: linear-gradient(180deg, var(--gold-bright), var(--wood-red));
  box-shadow: 0 0 16px rgba(255,221,138,0.7);
  animation: floatUp linear infinite;
  opacity: .8;
}
@keyframes floatUp{
  0%{ transform: translateY(0) translateX(0); opacity: 0; }
  10%{ opacity: .8; }
  90%{ opacity: .8; }
  100%{ transform: translateY(-115vh) translateX(var(--dx, 30px)); opacity: 0; }
}
.community-copy .en-big{
  font-family: var(--font-en);
  font-size: clamp(1.4rem, 3.4vw, 2.2rem);
  line-height: 1.3;
  color: var(--cream);
  margin: .4rem 0;
}
.social-seals{
  display: flex;
  justify-content: center;
  gap: 1.6rem;
  margin-top: 2.6rem;
  flex-wrap: wrap;
}
.seal-item{
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: .6rem;
}
.seal-link{
  width: 60px; height: 60px;
  border-radius: 50%;
  border: 1px solid var(--gold-dim);
  display: flex; align-items: center; justify-content: center;
  color: var(--gold-bright);
  position: relative;
  transition: all .35s ease;
  background: radial-gradient(circle at center, rgba(227,180,81,0.08), transparent 70%);
}
.seal-item:hover .seal-link{
  border-color: var(--gold-bright);
  box-shadow: 0 0 24px rgba(227,180,81,0.5);
  transform: translateY(-3px);
}
.seal-link svg{ width: 24px; height: 24px; }
.seal-caption{
  font-family: var(--font-ui);
  font-size: .64rem;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--ink-dim);
}
.seal-item:hover .seal-caption{ color: var(--gold); }

/* =========================================================
   HOW TO BUY — SCROLL
   ========================================================= */

#how-to-buy{ min-height: 130vh; }
.scroll-wrap{
  position: relative;
  max-width: 640px;
  margin: 0 auto;
}
.ancient-scroll{
  position: relative;
  border-left: 3px solid var(--gold-dim);
  border-right: 3px solid var(--gold-dim);
  background: linear-gradient(180deg, rgba(53,27,82,0.4), rgba(10,7,21,0.55));
  overflow: hidden;
  height: 0;
  transition: height 1.4s var(--ease-dream);
  box-shadow: 0 0 60px rgba(227,180,81,0.15);
}
.ancient-scroll.open{ height: var(--scroll-h, 620px); }
.scroll-content{
  padding: 3rem clamp(1.2rem, 5vw, 3rem) 2.4rem;
}
.buy-step{
  display: flex;
  gap: 1.2rem;
  align-items: baseline;
  margin-bottom: 1.6rem;
  text-align: left;
}
.buy-step .num{
  font-family: var(--font-en);
  color: var(--gold);
  font-size: 1.1rem;
  flex: none;
  width: 2.2rem;
}
.buy-step p{
  margin: 0;
  font-size: .95rem;
  letter-spacing: .04em;
  color: var(--ink);
}
.buy-cta{
  margin-top: 1.8rem;
  text-align: center;
}
.scroll-rod{
  position: absolute;
  left: -3px; right: -3px;
  height: 14px;
  background: linear-gradient(180deg, var(--gold), var(--gold-dim));
  border-radius: 8px;
  box-shadow: 0 2px 10px rgba(0,0,0,0.5);
}
.scroll-rod.top{ top: -7px; }
.scroll-rod.bottom{ top: calc(var(--scroll-h, 620px) - 7px); transition: top 1.4s var(--ease-dream); }

/* =========================================================
   BUTTONS
   ========================================================= */

.btn{
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 1.05rem 2.4rem;
  font-family: var(--font-ui);
  font-weight: 500;
  font-size: .78rem;
  letter-spacing: .18em;
  text-transform: uppercase;
  border-radius: 3px;
  border: 1px solid transparent;
  overflow: hidden;
  transition: transform .35s cubic-bezier(.19,1,.22,1), box-shadow .35s ease, border-color .35s ease, color .35s ease;
}
.btn::before{
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(115deg, transparent 20%, rgba(255,255,255,0.35) 42%, transparent 64%);
  transform: translateX(-120%);
  transition: transform .7s ease;
  pointer-events: none;
}
.btn:hover::before{ transform: translateX(120%); }
.btn:active{ transform: translateY(1px) scale(.98); }
.btn-primary{
  background: linear-gradient(180deg, var(--gold-bright) 0%, var(--gold) 55%, var(--gold-dim) 100%);
  color: #241305;
  box-shadow: 0 2px 4px rgba(0,0,0,0.25), 0 0 30px rgba(227,180,81,0.4), inset 0 1px 0 rgba(255,255,255,0.5);
}
.btn-primary:hover{
  transform: translateY(-2px);
  box-shadow: 0 8px 24px rgba(0,0,0,0.3), 0 0 42px rgba(227,180,81,0.65), inset 0 1px 0 rgba(255,255,255,0.6);
}
.btn-ghost{
  background: linear-gradient(180deg, rgba(38,24,58,0.6), rgba(16,10,26,0.6));
  border-color: rgba(227,180,81,0.35);
  color: var(--cream);
  backdrop-filter: blur(6px);
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.05);
}
.btn-ghost:hover{
  border-color: var(--gold-bright);
  color: var(--gold-bright);
  transform: translateY(-2px);
  box-shadow: 0 8px 20px rgba(0,0,0,0.35), 0 0 20px rgba(227,180,81,0.25), inset 0 1px 0 rgba(255,255,255,0.08);
}

/* =========================================================
   FINALE
   ========================================================= */

#finale{
  min-height: 115vh;
}
.finale-zh{
  font-family: var(--font-zh);
  font-weight: 600;
  font-size: clamp(1.6rem, 4vw, 2.6rem);
  background: linear-gradient(115deg, var(--gold-dim) 10%, var(--gold-bright) 35%, #fff6df 50%, var(--gold-bright) 65%, var(--gold-dim) 90%);
  background-size: 240% 100%;
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  filter: drop-shadow(0 0 30px rgba(255,221,138,0.45));
  animation: foilShift 9s ease-in-out infinite;
  margin: 0 0 .3rem;
}
.finale-zh.sub{ font-size: clamp(1.3rem, 3vw, 2rem); margin-top: 1.2rem; }
.finale-en{
  font-family: var(--font-en);
  font-size: clamp(1.5rem, 4.6vw, 3rem);
  color: var(--cream);
  margin: 0 0 .2rem;
  line-height: 1.1;
}
.finale-en.sub{ font-size: clamp(1.1rem, 2.6vw, 1.6rem); margin-top: .6rem; color: var(--ink-dim); font-style: italic;}
.finale-ctas{
  margin-top: 3.2rem;
  display: flex;
  gap: 1rem;
  justify-content: center;
  flex-wrap: wrap;
}
.finale-ctas .btn{
  flex-direction: column;
  gap: .3rem;
  padding-top: .9rem;
  padding-bottom: .9rem;
}
.finale-ctas .btn span.zh{
  display: block;
  font-family: var(--font-zh);
  font-size: .7rem;
  letter-spacing: .1em;
  opacity: .75;
}

/* =========================================================
   AMBIENT TOGGLE + FOOTER
   ========================================================= */

#ambient-toggle{
  position: fixed;
  bottom: 1.6rem; left: 1.6rem;
  z-index: 40;
  width: 46px; height: 46px;
  border-radius: 50%;
  border: 1px solid rgba(227,180,81,0.35);
  background: rgba(10,7,21,0.5);
  backdrop-filter: blur(4px);
  color: var(--gold);
  display: flex; align-items: center; justify-content: center;
  transition: all .3s ease;
}
#ambient-toggle:hover{ border-color: var(--gold-bright); }
#ambient-toggle svg{ width: 20px; height: 20px; }
#ambient-toggle .icon-off{ display: block; }
#ambient-toggle .icon-on{ display: none; }
#ambient-toggle.on .icon-off{ display: none; }
#ambient-toggle.on .icon-on{ display: block; }

footer{
  position: relative;
  z-index: 2;
  text-align: center;
  padding: 4rem 2rem 3rem;
  color: var(--ink-dim);
  font-size: .7rem;
  letter-spacing: .12em;
}
footer .zh{
  display: block;
  font-family: var(--font-zh);
  font-size: .95rem;
  color: var(--gold-dim);
  margin-bottom: .5rem;
}

/* =========================================================
   ACCESSIBILITY / MOTION
   ========================================================= */

@media (prefers-reduced-motion: reduce){
  *{
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .3s !important;
    scroll-behavior: auto !important;
  }
  .reveal{ transform: none; }
}

:focus-visible{
  outline: 2px solid var(--gold-bright);
  outline-offset: 3px;
}

/* =========================================================
   RESPONSIVE
   ========================================================= */

@media (max-width: 720px){
  .scene{ padding: 6vh 6vw; }
  .candle-step,
  .candle-step:nth-child(2),
  .candle-step:nth-child(3),
  .candle-step:nth-child(4),
  .candle-step:nth-child(5){
    flex-direction: column !important;
    align-items: flex-start;
    transform: translateY(40px) !important;
    margin-left: 0 !important;
  }
  .candle-step.in-view{ transform: translateY(0) !important; }
  .candle{ width: 26px; height: calc(var(--h, 140px) * .7); }
  .stairway-track > .niu-figure{ display: none; }
  .door-niu{ width: 46px; bottom: -3%; }
  .community-gathering{ display: none; }
  #ambient-toggle{ bottom: 1rem; left: 1rem; width: 40px; height: 40px; }
}