:root{
  --night:#070611;
  --night2:#15101f;
  --cream:#F4EFE6;
  --orange:#FF7A1A;
  --gold:#FFC93C;
  --ember:#D7263D;
  --line: rgba(244,239,230,0.14);
}
*{box-sizing:border-box; margin:0; padding:0;}
html{ height:100%; background:#000; }
body{ height:100%; background:var(--night); color:var(--cream);
  font-family:'Be Vietnam Pro', system-ui, sans-serif; overflow:hidden; -webkit-font-smoothing:antialiased;
  display:flex; align-items:center; justify-content:center; }
.mono{font-family:'JetBrains Mono', monospace;}

/* ===================================================================
   SHARED MOTIFS
   =================================================================== */
.grain{ position:absolute; inset:0; pointer-events:none; opacity:0.045; z-index:6;
  background-image: radial-gradient(circle, #fff 1px, transparent 1px);
  background-size:3px 3px; }

/* ===================================================================
   STAGE — the projector shell. Stays mounted and visible for the
   whole experience: crystal + beam + screen frame never disappear,
   every page is a "reel" swapped inside the same screen, like
   watching a filmstrip rather than 6 separate web pages.
   =================================================================== */
.stage{ position:relative; width:100%; height:100svh; overflow:hidden; flex-shrink:0;
  background: radial-gradient(120% 90% at 50% 92%, var(--night2) 0%, var(--night) 60%);
  display:flex; flex-direction:column;
}
@media (min-width:768px){
  .stage{
    width: min(100vw, calc(100vh * 16 / 9));
    height: min(100vh, calc(100vw * 9 / 16));
  }
}

.flash{ position:absolute; inset:0; z-index:50; background:#fff; opacity:0; pointer-events:none; }
.stage.fired .flash{ animation: bigFlash .5s ease-out forwards; animation-delay:.2s; }
@keyframes bigFlash{ 0%{opacity:0;} 45%{opacity:.85;} 100%{opacity:0;} }

/* ---- screen: outer positions/animates size, inner clips the reels ---- */
.screen{
  position:absolute;
  top:5%; left:50%; transform:translateX(-50%);
  width:88%;
  height:0;
  opacity:0;
  z-index:25;
  transition: height 1.05s cubic-bezier(.2,.85,.2,1), opacity .5s ease;
}
.stage.fired .screen{ height:80%; opacity:1; transition-delay:.55s; }

/* soft blurred glow hanging below the frame — blends the beam's light
   into the screen edge instead of a hard seam, like film light bleed */
.screen-blend{
  position:absolute; left:8%; right:8%; bottom:-70px; height:150px; z-index:1;
  background:radial-gradient(ellipse 70% 100% at 50% 0%, rgba(255,161,46,.5), rgba(255,140,30,0) 78%);
  filter: blur(22px); opacity:0; transition:opacity .9s ease; pointer-events:none;
}
.stage.fired .screen-blend{ opacity:1; transition-delay:.9s; }

.screen-frame{ position:relative; width:100%; height:100%; overflow:hidden; border-radius:14px; }

.screen-glow{
  position:absolute; inset:-1px;
  border-radius:15px;
  box-shadow: 0 0 0 1px rgba(255,201,60,0.35), 0 0 40px 6px rgba(255,140,30,0.22), 0 24px 70px rgba(0,0,0,0.55);
  pointer-events:none; z-index:4;
}
.screen-bg{
  position:absolute; inset:0;
  background-image:url('assets/hero-01.jpg');
  background-size:cover; background-position:center 28%;
  filter: blur(8px) brightness(0.6);
  transform:scale(1.1);
  transition: filter 1s ease 1.4s;
}
.stage.fired .screen-bg{ filter: blur(3px) brightness(0.45); }
.screen-fade{
  position:absolute; inset:0;
  background:linear-gradient(180deg, rgba(7,6,17,0.25) 0%, rgba(7,6,17,0.5) 48%, rgba(7,6,17,0.92) 92%);
}
.screen-flicker{ position:absolute; inset:0; z-index:41; pointer-events:none; background:rgba(255,255,255,0.04); opacity:0; }
.stage.fired .screen-flicker{ animation: flicker .2s steps(1) infinite; animation-delay:1.3s; }
@keyframes flicker{ 0%{opacity:.05;} 35%{opacity:0;} 60%{opacity:.09;} 100%{opacity:.05;} }

/* cinematic "changing reel" transition — scoped inside the frame */
.reel-flicker{
  position:absolute; inset:0; z-index:42; pointer-events:none;
  background:#fff; opacity:0;
}
.reel-flicker.sweep{ animation: reelSweep .42s steps(3) forwards; }
@keyframes reelSweep{
  0%{ opacity:0; } 15%{ opacity:.55; } 40%{ opacity:.08; } 70%{ opacity:.28; } 100%{ opacity:0; }
}
.reel-lightsweep{
  position:absolute; top:0; bottom:0; width:40%; z-index:41; pointer-events:none;
  background:linear-gradient(90deg, transparent, rgba(255,201,60,.4), transparent);
  left:-45%; opacity:0;
}
.reel-lightsweep.sweep{ animation: reelLightSweep .5s ease-out forwards; }
@keyframes reelLightSweep{ 0%{ left:-45%; opacity:.9; } 100%{ left:110%; opacity:0; } }

/* ===================================================================
   REELS — one per page, stacked inside the same screen frame
   =================================================================== */
.reel{ position:absolute; inset:0; opacity:0; pointer-events:none; transition: opacity .45s ease; z-index:3; }
.reel.active{ opacity:1; pointer-events:auto; z-index:10; }

/* ---------- REEL 1 — opening cinematic "9 năm là bao lâu?" ---------- */
/* số 9 phát sáng như mặt trăng/spotlight phía sau nhân vật */
.opening-moon{
  position:absolute; top:4%; left:50%; transform:translateX(-50%);
  width:min(66%,380px); aspect-ratio:1/1; border-radius:50%; z-index:0; pointer-events:none;
  background:radial-gradient(circle, rgba(255,201,60,.5) 0%, rgba(255,140,30,.14) 52%, transparent 72%);
  filter:blur(6px); animation: moonGlow 5.5s ease-in-out infinite;
}
@keyframes moonGlow{ 0%,100%{ opacity:.7; transform:translateX(-50%) scale(1); } 50%{ opacity:1; transform:translateX(-50%) scale(1.06); } }

/* camera: đẩy vào chậm (zoom) — wrapper lo zoom, mỗi nhân vật float riêng */
.hero-cam{ position:absolute; inset:0; z-index:1; pointer-events:none; transform:scale(1.02); }
.reel.active .hero-cam{ animation: heroZoom 16s ease-out forwards; }
@keyframes heroZoom{ from{ transform:scale(1.02); } to{ transform:scale(1.12); } }

.op-char{ position:absolute; height:auto; opacity:0; pointer-events:none;
  filter: drop-shadow(0 14px 34px rgba(0,0,0,.55)); transition: opacity 1.1s ease 1.2s; }
.stage.fired .op-char{ opacity:1; }
/* Kelly + memory wall — ảnh đã lệch sẵn (nhân vật giữa-phải, khoảng trống
   bên trái), neo theo mép phải/dưới và hạ nhẹ để chừa chỗ cho tiêu đề trên
   cùng bên trái; float rất nhẹ vì bản thân ảnh đã có rất nhiều chi tiết động */
.op-memorywall{ right:-5%; bottom:-7%; width:min(70%,580px);
  animation: floatMemoryWall 7s ease-in-out infinite; }
@keyframes floatMemoryWall{ 0%,100%{ transform:translateY(0); } 50%{ transform:translateY(-10px); } }

.reel-hero{ position:relative; z-index:2; display:flex; flex-direction:column; justify-content:flex-end;
  padding: clamp(20px,4vw,48px); height:100%; }
/* scrim tối phía sau khối chữ — độc lập với vignette chung của screen, để
   chữ to vẫn rõ dù nằm đè lên vùng bận rộn của ảnh minh hoạ phía sau */
.reel-hero::before{
  content:''; position:absolute; inset:0; z-index:0; pointer-events:none;
  background:linear-gradient(100deg, rgba(7,6,17,.88) 0%, rgba(7,6,17,.6) 40%, rgba(7,6,17,0) 70%);
}
.sc-eyebrow{ position:relative; font-family:'JetBrains Mono', monospace; font-size:16px; letter-spacing:.16em; text-transform:uppercase; color:var(--gold); margin-bottom:10px; }
.sc-title{ position:relative; font-weight:900; font-size:clamp(36px,6vw,58px); line-height:1.1; max-width:14ch; }
.sc-title span{ color:var(--orange); }
.sc-sub{ position:relative; margin-top:8px; font-size:clamp(20px,2.8vw,26px); line-height:1.5; max-width:36ch; color:rgba(244,239,230,.9); }
.op-subs{ margin-top:14px; }
.op-emphasis{ position:relative; font-weight:800; font-size:clamp(24px,3.6vw,34px); line-height:1.4; color:var(--cream); margin-top:6px; }
.op-emphasis:first-of-type{ margin-top:20px; }
.op-emphasis span{ color:var(--orange); }

/* reveal từng dòng theo nhịp subtitle — JS runOpening() gắn/tháo .in */
.op-line{ opacity:0; transform:translateY(12px); transition: opacity .6s ease, transform .6s cubic-bezier(.2,.8,.2,1); }
.op-line.in{ opacity:1; transform:translateY(0); }
/* con trỏ nhấp nháy — hiệu ứng gõ máy chữ, đứng cuối phần chữ đã gõ xong */
.type-cursor{ color:var(--gold); margin-left:1px; animation: caretBlink .85s steps(1,end) infinite; }
@keyframes caretBlink{ 0%,49%{ opacity:1; } 50%,100%{ opacity:0; } }

.beam-outer{
  position:absolute;
  bottom:18%; left:50%; transform:translateX(-50%);
  width:0; height:0;
  z-index:18;
  pointer-events:none;
  transition: width 1s cubic-bezier(.2,.8,.2,1), height 1s cubic-bezier(.2,.8,.2,1);
}
.stage.fired .beam-outer{ width:min(70%,560px); height:56%; transition-delay:.45s; }
.beam{
  position:absolute; inset:0;
  background: linear-gradient(0deg, rgba(255,201,60,0.5) 0%, rgba(255,140,30,0.22) 45%, rgba(255,140,30,0.04) 80%, transparent 100%);
  -webkit-mask-image: linear-gradient(0deg, #000 0%, #000 70%, transparent 100%),
                        radial-gradient(ellipse 60% 100% at 50% 100%, #000 55%, transparent 100%);
  -webkit-mask-composite: source-in;
  mask-image: linear-gradient(0deg, #000 0%, #000 70%, transparent 100%),
               radial-gradient(ellipse 60% 100% at 50% 100%, #000 55%, transparent 100%);
  mask-composite: intersect;
  clip-path: polygon(46% 100%, 54% 100%, 86% 0%, 14% 0%);
  filter: blur(12px);
  opacity:0;
  transition: opacity .6s ease;
}
.stage.fired .beam{ opacity:1; transition-delay:.5s; }

.dust{ position:absolute; border-radius:50%; background:#fff; opacity:0; z-index:19; pointer-events:none; }
.stage.fired .dust{ animation: floatUp linear infinite; opacity:.7; }
@keyframes floatUp{
  0%{ transform:translateY(0) translateX(0); opacity:0; }
  12%{ opacity:.7; }
  88%{ opacity:.4; }
  100%{ transform:translateY(-220px) translateX(10px); opacity:0; }
}

.source{
  position:absolute; bottom:6%; left:50%; transform:translateX(-50%);
  z-index:40;
  display:flex; flex-direction:column-reverse; align-items:center;
  cursor:pointer;
}
.crystal-wrap{ position:relative; width:clamp(100px,15vw,150px); height:clamp(100px,15vw,150px);
  display:flex; align-items:center; justify-content:center; }

.flare{
  position:absolute; border-radius:50%;
  background:radial-gradient(circle, rgba(255,201,60,0.55) 0%, rgba(255,140,30,0) 70%);
  opacity:0; pointer-events:none;
}
.flare1{ width:220%; height:220%; }
.flare2{ width:340%; height:340%; opacity:0; }
.stage.fired .flare1{ opacity:.9; transition: opacity .8s ease; transition-delay:.2s; }
.stage.fired .flare2{ opacity:.45; transition: opacity 1s ease; transition-delay:.4s; }

.crystal-img{
  position:relative; z-index:2;
  width:100%; height:100%; object-fit:contain;
  filter: drop-shadow(0 0 16px rgba(255,122,26,.45));
  animation: hover 3.4s ease-in-out infinite;
  transform-origin:50% 65%;
  transition: transform .18s cubic-bezier(.4,0,.6,1), filter .3s ease;
  will-change: transform;
}
@keyframes hover{ 0%,100%{transform:translateY(0) scale(1);} 50%{transform:translateY(-7px) scale(1);} }

.source.pressed .crystal-img{
  animation-play-state: paused;
  transform: scale(0.82, 0.7) translateY(4px);
  filter: drop-shadow(0 0 26px rgba(255,201,60,.8));
}
.source.bounce .crystal-img{
  animation: springBounce .62s cubic-bezier(.2,.9,.25,1.2) forwards;
}
@keyframes springBounce{
  0%{   transform: scale(0.82,0.7) translateY(4px); }
  35%{  transform: scale(1.22,1.3) translateY(-10px); }
  60%{  transform: scale(0.94,1.04) translateY(2px); }
  80%{  transform: scale(1.06,0.98) translateY(-2px); }
  100%{ transform: scale(1,1) translateY(0); }
}
.stage.fired .crystal-img{
  transform:scale(1.3);
  filter:drop-shadow(0 0 50px rgba(255,201,60,.95));
  transition: transform .5s cubic-bezier(.2,.9,.3,1.3) .62s, filter .5s ease .62s;
}
.crystal-wrap::after{
  content:'';
  position:absolute; left:50%; bottom:-6%;
  width:62%; height:14%;
  transform:translateX(-50%) scaleX(1);
  background:radial-gradient(ellipse, rgba(0,0,0,0.45) 0%, transparent 75%);
  border-radius:50%;
  transition: transform .18s ease, opacity .18s ease;
  opacity:0.6;
  z-index:1;
}
.source.pressed .crystal-wrap::after{ transform:translateX(-50%) scaleX(1.4); opacity:0.85; }

.prompt{
  margin-bottom:14px;
  font-family:'JetBrains Mono', monospace; font-size:12px; letter-spacing:.14em; text-transform:uppercase;
  color:var(--gold); display:flex; align-items:center; gap:8px;
  animation: pulseOpacity 1.8s ease-in-out infinite;
  transition: opacity .4s ease;
}
@keyframes pulseOpacity{ 0%,100%{opacity:.5;} 50%{opacity:1;} }
.prompt .ring{ width:7px; height:7px; border-radius:50%; background:var(--gold); box-shadow:0 0 8px 2px var(--orange); }
.stage.fired .prompt{ opacity:0; }
.stage.fired .source{ bottom:3%; transition: bottom .8s ease .9s; }
body[data-page="1"] .source .crystal-wrap,
body[data-page="2"] .source .crystal-wrap,
body[data-page="3"] .source .crystal-wrap{ width:clamp(48px,6vw,72px); height:clamp(48px,6vw,72px); transition:width .5s,height .5s; }
body[data-page="1"] .source{ bottom:0%; }
body[data-page="1"] .reel-inner{ padding-bottom:clamp(60px,9vw,100px); }
body[data-page="2"] .source{ bottom:0%; }
body[data-page="2"] .reel-inner{ padding-bottom:clamp(60px,9vw,100px); }
body[data-page="3"] .source{ bottom:0%; }
body[data-page="5"] .source{ opacity:0; pointer-events:none; transition:opacity .4s; }
/* vệt sáng máy chiếu — hình nón chiếu lên từ icon số 9 */
body[data-page="1"] .source::before,
body[data-page="2"] .source::before,
body[data-page="3"] .source::before{
  content:'';
  position:absolute;
  bottom:80%; left:50%;
  transform:translateX(-50%);
  width:0; height:0;
  border-left:clamp(60px,12vw,160px) solid transparent;
  border-right:clamp(60px,12vw,160px) solid transparent;
  border-bottom:clamp(80px,18vh,260px) solid rgba(255,210,80,.07);
  pointer-events:none;
  filter:blur(8px);
  animation:beamPulse 3s ease-in-out infinite;
}
@keyframes beamPulse{
  0%,100%{ opacity:.7; }
  50%{ opacity:1; }
}

/* ===================================================================
   NAVIGATION CHROME — fixed around the projector, revealed after fire
   =================================================================== */
body:not(.nav-ready) .nav-btn,
body:not(.nav-ready) .page-num,
body:not(.nav-ready) .chain-progress,
body:not(.nav-ready) .music-toggle{ display:none; }

/* nút tắt/bật nhạc nền — góc trên phải, đối xứng với page-num góc trái */
.music-toggle{
  position:absolute; top:clamp(14px,2.4vw,26px); right:clamp(14px,2.4vw,26px); z-index:80;
  width:34px; height:34px; border-radius:50%;
  background:rgba(244,239,230,0.06); border:1px solid var(--line);
  color:var(--gold); font-size:15px; cursor:pointer;
  display:flex; align-items:center; justify-content:center;
  transition: background .2s ease, opacity .2s ease;
}
.music-toggle:hover{ background:rgba(255,122,26,0.18); }
.music-toggle.muted{ color:rgba(244,239,230,.35); }

.nav-btn{
  position:absolute; top:50%; transform:translateY(-50%); z-index:80;
  width:44px; height:44px; border-radius:50%;
  background:rgba(244,239,230,0.06); border:1px solid var(--line);
  color:var(--cream); font-size:20px; cursor:pointer;
  display:flex; align-items:center; justify-content:center;
  transition: background .2s ease, opacity .2s ease, transform .15s ease;
}
.nav-btn:hover{ background:rgba(255,122,26,0.18); }
.nav-btn:active{ transform:translateY(-50%) scale(.9); }
.nav-btn[disabled]{ opacity:.25; pointer-events:none; }
.nav-prev{ left:clamp(10px,2.4vw,28px); }
.nav-next{ right:clamp(10px,2.4vw,28px); }

.page-num{
  position:absolute; top:clamp(14px,2.4vw,26px); left:clamp(14px,2.4vw,26px); z-index:80;
  font-size:12px; letter-spacing:.16em; color:rgba(244,239,230,.6);
}

.chain-progress{
  position:absolute; top:50%; right:clamp(10px,1.6vw,22px); transform:translateY(-50%); z-index:80;
  display:flex; flex-direction:column; align-items:center; gap:10px;
}
.chain-link{
  width:9px; height:9px; border-radius:3px; background:rgba(244,239,230,0.18);
  border:1px solid var(--line);
  transition: background .3s ease, box-shadow .3s ease, transform .3s ease;
}
.chain-link.visited{ background:rgba(255,122,26,0.45); }
.chain-link.current{ background:var(--orange); box-shadow:0 0 8px 2px rgba(255,122,26,.6); transform:scale(1.3); }

/* ===================================================================
   REEL CONTENT — shared layout for reels 2..6
   =================================================================== */
.reel-inner{ position:relative; z-index:3; height:100%; display:flex; flex-direction:column;
  justify-content:center; padding: clamp(20px,4.6vw,44px); gap:clamp(12px,2vw,18px);
  overflow-y:auto; -webkit-overflow-scrolling:touch; }
.reel-eyebrow{ font-family:'JetBrains Mono', monospace; font-size:15px; letter-spacing:.16em; text-transform:uppercase; color:var(--gold); }

/* placeholder image blocks — swap the whole element for <img> once real assets land */
.ph-box{
  position:relative; border:1.5px dashed rgba(244,239,230,.35); border-radius:10px;
  background: linear-gradient(135deg, rgba(255,122,26,.08), rgba(255,201,60,.05));
  display:flex; align-items:center; justify-content:center; text-align:center;
  color:rgba(244,239,230,.45); font-family:'JetBrains Mono', monospace; font-size:11px; letter-spacing:.05em;
  padding:8px; overflow:hidden;
}

/* ===================================================================
   SECTION 02 — "Chúng ta đã thật sự cùng nhau toả sáng"
   3 giai đoạn xếp chồng (script.js: runFacts điều phối tuần tự, tự
   động, không cần chạm): A) video sân khấu  B) 5 fact bật lớn
   C) câu dẫn + bubble vui. Mỗi giai đoạn ẩn/hiện bằng .show.
   =================================================================== */

/* ---------- Giai đoạn A — video mở màn ---------- */
.facts-hero{ position:absolute; inset:0; z-index:1; overflow:hidden; }
.facts-hero-video{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover;
  transition: filter 1.3s ease; }
.facts-hero.dim .facts-hero-video{ filter:brightness(.6); }
.facts-hero-veil{ position:absolute; inset:0;
  background:linear-gradient(180deg, rgba(7,6,17,.1) 0%, rgba(7,6,17,.35) 55%, rgba(7,6,17,.88) 100%); }
.facts-hero-text{ position:relative; z-index:2; height:100%; display:flex; flex-direction:column;
  align-items:center; justify-content:center; text-align:center; gap:14px;
  padding:0 clamp(20px,6vw,60px); opacity:0; transition:opacity 1.1s ease; }
.facts-hero-text.show{ opacity:1; }
.facts-hero-title{ font-weight:900; font-size:clamp(32px,5.5vw,52px); line-height:1.28; color:var(--gold);
  text-shadow:0 0 26px rgba(255,140,30,.45); }
.facts-hero-sub{ font-size:clamp(17px,2.2vw,21px); line-height:1.6; color:rgba(244,239,230,.88); max-width:40ch; }

/* ---------- Giai đoạn B — 5 fact bật lớn như "flash moment" ---------- */
.facts-pop-stage{ position:absolute; inset:0; z-index:2; display:flex; align-items:center; justify-content:center;
  opacity:0; pointer-events:none; transition:opacity .6s ease; }
.facts-pop-stage.show{ opacity:1; }
.facts-pop{ position:relative; text-align:center; display:flex; flex-direction:column; align-items:center;
  gap:8px; padding:clamp(24px,4vw,48px) clamp(20px,6vw,60px);
  background:radial-gradient(ellipse 80% 90% at 50% 50%, rgba(30,18,4,.78) 30%, rgba(30,18,4,0) 100%); }
.facts-pop-glow{ position:absolute; width:240%; height:240%; left:50%; top:50%; transform:translate(-50%,-50%);
  border-radius:50%; pointer-events:none;
  background:radial-gradient(circle, rgba(255,161,46,.4) 0%, rgba(255,140,30,0) 70%); opacity:0; }
.facts-pop.pop .facts-pop-glow{ opacity:1; animation: factsGlowPulse 2.6s ease-in-out infinite; }
@keyframes factsGlowPulse{ 0%,100%{ transform:translate(-50%,-50%) scale(1); } 50%{ transform:translate(-50%,-50%) scale(1.1); } }

/* confetti nhẹ bắn ra từ tâm mỗi lần 1 fact mới bật lên */
.facts-pop-confetti{ position:absolute; inset:0; pointer-events:none; }
.facts-pop-confetti span{ position:absolute; left:50%; top:50%; width:6px; height:6px; border-radius:50%;
  background:var(--gold); opacity:0; }
.facts-pop.pop .facts-pop-confetti span{ animation: confettiBurst 1.1s ease-out forwards; }
.facts-pop-confetti span:nth-child(1){ --ang:-60deg; --dist:90px; animation-delay:.05s; background:var(--orange); }
.facts-pop-confetti span:nth-child(2){ --ang:-20deg; --dist:120px; animation-delay:.1s; }
.facts-pop-confetti span:nth-child(3){ --ang:20deg; --dist:100px; animation-delay:.05s; background:var(--ember); }
.facts-pop-confetti span:nth-child(4){ --ang:60deg; --dist:130px; animation-delay:.15s; }
.facts-pop-confetti span:nth-child(5){ --ang:200deg; --dist:110px; animation-delay:.08s; background:var(--orange); }
.facts-pop-confetti span:nth-child(6){ --ang:240deg; --dist:95px; animation-delay:.12s; }
@keyframes confettiBurst{
  0%{ opacity:1; transform:translate(-50%,-50%) rotate(var(--ang)) translateX(0) scale(1); }
  100%{ opacity:0; transform:translate(-50%,-50%) rotate(var(--ang)) translateX(var(--dist)) scale(.4); }
}

.facts-pop-big{ position:relative; font-weight:900; font-size:clamp(52px,9vw,90px); line-height:1.05; color:var(--gold);
  text-shadow:0 0 40px rgba(255,140,30,.7); opacity:0; transform:scale(.5); }
.facts-pop-sub{ position:relative; font-weight:700; font-size:clamp(20px,3vw,26px); color:var(--cream); opacity:0; transform:translateY(10px); }
.facts-pop-detail{ position:relative; font-size:clamp(15px,2vw,18px); line-height:1.5; color:rgba(244,239,230,.72);
  max-width:46ch; opacity:0; transform:translateY(10px); }
.facts-pop.pop .facts-pop-big{ animation: factsPopBig .6s cubic-bezier(.2,.9,.25,1.3) forwards; }
.facts-pop.pop .facts-pop-sub{ animation: factsPopFade .5s ease forwards; animation-delay:.25s; }
.facts-pop.pop .facts-pop-detail{ animation: factsPopFade .5s ease forwards; animation-delay:.4s; }
@keyframes factsPopBig{ 0%{ opacity:0; transform:scale(.4) rotate(-3deg); } 60%{ opacity:1; transform:scale(1.12) rotate(1deg); } 100%{ opacity:1; transform:scale(1) rotate(0); } }
@keyframes factsPopFade{ to{ opacity:1; transform:translateY(0); } }
/* con dấu "KỶ LỤC THẾ GIỚI" — chỉ dùng cho fact 618,778, bật ra sau khi số
   lớn đã hiện, như đóng dấu certificate lên góc */
.facts-pop-stamp{
  position:absolute; top:6%; right:8%; z-index:3;
  border:3px solid var(--ember); color:var(--ember); border-radius:10px;
  padding:8px 14px; font-weight:900; font-size:clamp(14px,1.8vw,18px); line-height:1.15;
  text-align:center; text-transform:uppercase; letter-spacing:.04em;
  transform:rotate(-14deg) scale(0); opacity:0;
  transition: transform .5s cubic-bezier(.3,.6,.2,1.6), opacity .3s ease;
}
.facts-pop.show-stamp .facts-pop-stamp{ transform:rotate(-14deg) scale(1); opacity:.92; }

/* mỗi fact thu nhỏ lại (không biến mất đột ngột) trước khi dồn thành badge */
.facts-pop.shrink{ transition: transform .5s cubic-bezier(.4,0,.2,1), opacity .5s ease; transform:scale(.35); opacity:0; }

/* dải badge dồn dần ở cạnh dưới — thay cho dots, hiện đúng tên/số đã qua */
.facts-badges{ position:absolute; bottom:8%; left:50%; transform:translateX(-50%); z-index:2;
  display:flex; align-items:center; gap:10px; flex-wrap:wrap; justify-content:center; max-width:88%; }
.facts-badge{
  font-family:'JetBrains Mono', monospace; font-weight:700; font-size:clamp(13px,1.5vw,16px);
  color:var(--gold); border:1px solid rgba(255,201,60,.4); border-radius:20px; padding:5px 12px;
  background:rgba(255,161,46,.08); white-space:nowrap;
  opacity:0; transform:translateY(10px) scale(.7);
  transition: opacity .5s cubic-bezier(.2,.85,.25,1), transform .5s cubic-bezier(.2,.85,.25,1);
}
.facts-badge.show{ opacity:1; transform:translateY(0) scale(1); }

/* câu chốt "giữ chuỗi" — hiện ngắn ~1.5-2s, không cần chạm, rồi chữ
   "giữ chuỗi" sáng vàng/cam + hắt sáng lan ra màn hình trước khi tự
   chuyển sang Page 4 (credits), như spotlight mờ dần vào end-credit */
.facts-closer{
  position:absolute; left:50%; top:50%; transform:translate(-50%,-50%); z-index:4;
  text-align:center; font-size:clamp(20px,2.8vw,26px); font-weight:700;
  color:rgba(244,239,230,.92); opacity:0; transition:opacity .7s ease;
}
.facts-closer.show{ opacity:1; }
#factsCloserGlow{ color:rgba(244,239,230,.92); transition: color .6s ease, text-shadow .6s ease; }
.facts-closer.glow #factsCloserGlow{ color:var(--gold); text-shadow:0 0 22px rgba(255,161,46,.85); }
/* ánh sáng từ chữ lan ra toàn màn hình — phủ khắp reel, mờ dần khi bừng lên */
.facts-closer::after{
  content:''; position:absolute; left:50%; top:100%; transform:translate(-50%,-50%);
  width:0; height:0; border-radius:50%; pointer-events:none;
  background:radial-gradient(circle, rgba(255,161,46,.55) 0%, rgba(255,140,30,0) 70%);
  transition: width 1.1s ease, height 1.1s ease;
}
.facts-closer.glow::after{ width:1400px; height:1400px; }

/* ---------- Giai đoạn C — câu dẫn + bubble thoại vui ---------- */
.facts-fun-stage{ position:absolute; inset:0; z-index:3; opacity:0; pointer-events:none; transition:opacity .8s ease; }
.facts-fun-stage.show{ opacity:1; }
.facts-fun-lead{ position:absolute; left:50%; top:50%; transform:translate(-50%,-50%); text-align:center;
  font-size:clamp(18px,2.4vw,22px); font-weight:700; color:rgba(244,239,230,.92); line-height:1.6;
  max-width:36ch; padding:0 20px; opacity:0; transition:opacity .8s ease; }
.facts-fun-lead.show{ opacity:1; }
.facts-fun-lead.fade{ opacity:0; }

.facts-bubbles{ position:absolute; inset:0; }
.facts-bubble{
  position:absolute; transform:translate(-50%,-50%) scale(.7); max-width:min(70vw,260px);
  background:linear-gradient(160deg, var(--gold), var(--orange)); color:var(--night);
  font-weight:700; font-size:clamp(14px,1.8vw,17px); line-height:1.35; text-align:center;
  padding:10px 16px; border-radius:18px; box-shadow:0 8px 24px rgba(0,0,0,.4);
  opacity:0; transition: opacity .35s ease, transform .35s cubic-bezier(.3,.8,.3,1.3);
}
.facts-bubble::after{ content:''; position:absolute; left:50%; bottom:-8px; transform:translateX(-50%);
  border:8px solid transparent; border-top-color:var(--orange); }
.facts-bubble.show{ opacity:1; transform:translate(-50%,-50%) scale(1); }
.facts-bubble.out{ opacity:0; transform:translate(-50%,-50%) scale(.85) translateY(-18px); }

/* ---------- SECTION 03 — sợi dây ánh sáng toả ra từ số 9 ----------
   .filmstrip-stage phủ toàn bộ reel (không nằm trong .reel-inner có
   padding) để .filmstrip-canvas có thể chạm đúng mép ĐÁY của reel —
   đúng nơi luồng sáng thật từ crystal/beam bên ngoài đi vào màn chiếu,
   nên đường cong đọc liền mạch như "phát ra từ số 9" dù về kỹ thuật
   nó chỉ vẽ bên trong khung reel này. */
/* pointer-events chỉ bật sau khi đoạn dẫn mở page chạy xong (.ready),
   tránh lỡ chạm trúng sợi dây trong lúc còn đang hiện đoạn dẫn */
.filmstrip-stage{ position:absolute; inset:0; z-index:1; cursor:pointer; pointer-events:none;
  display:flex; align-items:flex-end; justify-content:center; }
.filmstrip-stage.ready{ pointer-events:auto; }
.filmstrip-canvas{ position:relative; width:min(94%,640px); aspect-ratio:640/480; }
.filmstrip-svg{ position:absolute; inset:0; width:100%; height:100%; overflow:visible; }
.filmstrip-path-bg{ fill:none; stroke:rgba(244,239,230,.16); stroke-width:5; stroke-linecap:round; }
.filmstrip-path-lit{ fill:none; stroke:url(#filmGrad); stroke-width:5; stroke-linecap:round;
  filter:drop-shadow(0 0 8px rgba(255,161,46,.7));
  transition: stroke-dashoffset .9s cubic-bezier(.3,.7,.2,1); }

.filmstrip-markers{ position:absolute; inset:0; pointer-events:none; }
.filmstrip-marker{ position:absolute; transform:translate(-50%,-50%); display:flex;
  flex-direction:column; align-items:center; gap:4px; }
.filmstrip-dot{ width:10px; height:10px; border-radius:50%; background:rgba(244,239,230,.22);
  border:1px solid var(--line); transition: background .4s ease, box-shadow .4s ease, transform .4s cubic-bezier(.3,.8,.3,1.3); }
.filmstrip-marker-year{ font-size:13px; letter-spacing:.06em; color:rgba(244,239,230,.4);
  opacity:0; transform:translateY(2px); transition: opacity .4s ease, transform .4s ease, color .4s ease; white-space:nowrap; }
/* mốc đã ghé qua — dot sáng cam nhỏ, để lại như dấu vết ánh sáng đã chảy qua */
.filmstrip-marker.visited .filmstrip-dot{ background:rgba(255,122,26,.55); }
.filmstrip-marker.visited .filmstrip-marker-year{ opacity:1; color:rgba(244,239,230,.55); }
/* mốc hiện tại — phóng to, phát sáng mạnh */
.filmstrip-marker.lit .filmstrip-dot{ background:var(--gold); transform:scale(1.8);
  box-shadow:0 0 14px 4px rgba(255,201,60,.7); }
.filmstrip-marker.lit .filmstrip-marker-year{ opacity:1; color:var(--gold); font-weight:700; transform:translateY(0); }

/* ---------- Outro (sau mốc "Hôm nay"): đánh thức, hút vào tâm, flash ---------- */
/* mốc "được đánh thức" lại lần cuối — mọi mốc (kể cả mờ) đều bừng sáng cam */
.filmstrip-marker.awaken .filmstrip-dot{ background:var(--gold); transform:scale(1.6);
  box-shadow:0 0 18px 6px rgba(255,201,60,.85); }
.filmstrip-marker.awaken .filmstrip-marker-year{ opacity:1; color:var(--gold); transform:translateY(0); }
/* mảnh ký ức bay vào tâm sáng (số 9 ở đáy khung) rồi biến mất */
.filmstrip-marker.fly-in{
  transition: transform .75s cubic-bezier(.3,.7,.2,1), opacity .7s ease .1s;
  transform: translate(var(--fly-x,0), var(--fly-y,0)) scale(.15);
  opacity:0;
}
/* sợi dây "chậm lại" — nhịp thở chậm, to nhẹ trước khi bừng sáng toàn bộ */
.filmstrip-canvas.slow-breathe{ animation: canvasSlowBreathe 1.8s ease-in-out infinite; }
@keyframes canvasSlowBreathe{ 0%,100%{ transform:scale(1); } 50%{ transform:scale(1.025); } }

/* câu bridge — thay chỗ caption, cùng vị trí neo trái giống caption/eyebrow */
.filmstrip-bridge{
  position:absolute; inset:0; z-index:2; pointer-events:none;
  display:flex; flex-direction:column; justify-content:center; gap:6px;
  padding: clamp(20px,4.6vw,44px); opacity:0; transition:opacity 1.1s ease;
}
.filmstrip-bridge.show{ opacity:1; }
.filmstrip-bridge p{ font-size:clamp(18px,2.4vw,24px); line-height:1.5; color:rgba(244,239,230,.9); max-width:36ch; }
.filmstrip-bridge-em{ font-weight:800; color:var(--gold) !important; font-size:clamp(22px,3.2vw,30px) !important; }

/* flash ấm vàng/cam bùng lên từ số 9 khi chuyển cảnh sang page kế —
   tái dùng đúng lớp .flash toàn site (Page 00 dùng bản trắng), chỉ đổi
   màu + animation riêng cho lúc này */
.flash.warm-flash{
  background: radial-gradient(circle at 50% 100%, rgba(255,201,60,1) 0%, rgba(255,122,26,.9) 40%, rgba(255,122,26,0) 75%);
  animation: warmFlash .8s ease-out forwards;
}
@keyframes warmFlash{ 0%{ opacity:0; } 45%{ opacity:1; } 100%{ opacity:0; } }

.filmstrip-caption{ position:absolute; z-index:10; pointer-events:none; width:48%;
  background:rgba(10,8,18,.72); backdrop-filter:blur(6px);
  border-radius:10px; padding:10px 14px;
  transition:left .3s,right .3s,top .3s; }
.filmstrip-year{ font-size:17px; letter-spacing:.1em; color:var(--orange); margin-bottom:4px; }
.filmstrip-title{ font-size:clamp(20px,2.8vw,26px); font-weight:800; line-height:1.35; max-width:34ch; color:var(--cream); }
.filmstrip-text{ margin-top:4px; font-size:clamp(16px,2vw,19px); font-weight:500; line-height:1.45; max-width:44ch; color:rgba(244,239,230,.8); }
@media (max-width:767px){
  .filmstrip-caption{ width:68%; }
  .filmstrip-title{ font-size:clamp(17px,4.5vw,22px); }
  .filmstrip-text{ font-size:clamp(13px,3.5vw,16px); }
}
.filmstrip-year, .filmstrip-title, .filmstrip-text{ opacity:0; transform:translateY(8px); }
.filmstrip-caption.pop .filmstrip-year, .filmstrip-caption.pop .filmstrip-title, .filmstrip-caption.pop .filmstrip-text{
  animation: captionPop .5s cubic-bezier(.2,.85,.25,1) forwards; }
.filmstrip-caption.pop .filmstrip-title{ animation-delay:.06s; }
.filmstrip-caption.pop .filmstrip-text{ animation-delay:.14s; }
@keyframes captionPop{ to{ opacity:1; transform:translateY(0); } }

/* dòng cuối page — lời mời gọi giọng nhân vật, không còn là hint kỹ
   thuật viết hoa nữa nên bỏ mono/uppercase, đọc như một câu thoại nhỏ */
.timeline-hint{ text-align:center; margin-top:12px; font-size:clamp(14px,1.8vw,17px);
  font-style:italic; color:rgba(244,239,230,.55); max-width:36ch; }
/* đẩy hint xuống sát cụm dots ở đáy khung — tránh đè lên giữa sợi dây */
.scene-timeline .timeline-hint{ margin-top:auto; margin-left:auto; margin-right:auto; margin-bottom:4px; }
.timeline-mini-progress{ display:flex; gap:6px; justify-content:center; margin-top:10px; }
.timeline-mini-dot{ width:6px; height:6px; border-radius:50%; background:rgba(244,239,230,.2); }
.timeline-mini-dot.done{ background:var(--orange); }

/* scene-timeline: reel-inner chỉ chứa chữ (eyebrow/caption/hint/dots),
   nằm trên filmstrip-stage; pointer-events:none để chạm xuyên xuống
   .filmstrip-stage bên dưới, trừ các dòng chữ tự thân không cần bắt sự kiện.
   Ẩn sẵn — chỉ hiện sau khi đoạn dẫn mở page (filmstrip-intro) chạy xong. */
.scene-timeline .reel-inner{ z-index:2; pointer-events:none; justify-content:space-between;
  opacity:0; transition:opacity .8s ease; }
.scene-timeline .reel-inner.show{ opacity:1; }

/* ---------- Giai đoạn 1 — mở page: đoạn dẫn gõ máy chữ ----------
   Neo xuống nửa dưới khung (không justify-content:center) để tránh đè
   lên mặt nhân vật nền — vốn nằm ở vùng giữa-trên của ảnh nền. */
.filmstrip-intro{
  position:absolute; inset:0; z-index:5; pointer-events:none;
  display:flex; flex-direction:column; align-items:center; justify-content:flex-end;
  text-align:center; gap:14px; padding:0 clamp(20px,6vw,60px) 16%;
  opacity:0; transition:opacity .9s ease;
}
.filmstrip-intro.show{ opacity:1; }
.filmstrip-intro.out{ opacity:0; transition-duration:.6s; }
/* scrim tối phía sau khối chữ — nền đang là ảnh/video bận rộn, không có
   lớp này chữ thường (không có text-shadow) sẽ khó đọc khi đè lên mặt/áo
   nhân vật sáng màu phía sau */
.filmstrip-intro::before{
  content:''; position:absolute; left:8%; right:8%; bottom:6%; top:38%; z-index:-1;
  background:radial-gradient(ellipse 80% 100% at 50% 100%, rgba(7,6,17,.82) 0%, rgba(7,6,17,0) 85%);
}
.filmstrip-intro-title{ font-weight:900; font-size:clamp(28px,5vw,44px); color:var(--gold);
  text-shadow:0 0 24px rgba(255,140,30,.4); }
.filmstrip-intro-body{ display:flex; flex-direction:column; gap:2px; max-width:38ch; }
.filmstrip-intro-body p{ font-size:clamp(16px,2.2vw,20px); line-height:1.6; color:rgba(244,239,230,.9);
  text-shadow:0 1px 6px rgba(0,0,0,.6); }
.filmstrip-intro-q{ font-size:clamp(16px,2.2vw,20px); font-weight:700; font-style:italic; color:var(--orange);
  text-shadow:0 1px 6px rgba(0,0,0,.6); }

/* ===================================================================
   SECTION 04 — credits dạng split-screen (script.js: runTribute)
   Ảnh trái cố định suốt trang (nghiêng nhẹ, "final frame"). Credit chạy
   1 LẦN (không lặp) từ dưới lên trong cột phải riêng, JS tính khoảng
   cách cuộn theo chiều cao nội dung thật rồi animate transform trực
   tiếp — không dùng @keyframes infinite như bản marquee cũ.
   =================================================================== */
.credits-split{ position:absolute; inset:0; display:flex; align-items:stretch;
  background: radial-gradient(120% 70% at 50% 118%, rgba(255,140,30,.10) 0%, transparent 65%); }

/* ---------- cột trái — ảnh nghiêng nhẹ, như 1 khung phim đặt trên bàn ---------- */
.credits-photo-col{ width:47%; display:flex; align-items:center; justify-content:center;
  padding: clamp(16px,3.4vw,32px); }
.credits-photo-frame{ position:relative; width:100%; max-width:340px; padding:0 13px;
  border-radius:4px; background:#0b0a12; transform:rotate(-3deg);
  box-shadow:0 0 0 1px rgba(244,239,230,.15), 0 22px 55px rgba(0,0,0,.6);
  opacity:0; transition:opacity 1s ease; }
.credits-photo-frame.show{ opacity:1; }
.credits-photo-frame::before, .credits-photo-frame::after{
  content:''; position:absolute; top:0; bottom:0; width:12px;
  background-image: radial-gradient(circle, #0b0a12 2.2px, transparent 2.8px);
  background-size:12px 16px; background-color:rgba(244,239,230,.85);
}
.credits-photo-frame::before{ left:0; border-radius:4px 0 0 4px; }
.credits-photo-frame::after{ right:0; border-radius:0 4px 4px 0; }
.credits-photo-img{ display:block; width:100%; height:auto; padding:14px 0; }

/* ---------- cột phải — title cố định + vùng credit cuộn riêng ---------- */
.credits-text-col{ width:53%; position:relative; display:flex; flex-direction:column;
  padding: clamp(22px,4vw,40px) clamp(20px,4vw,34px) clamp(20px,4vw,36px) 4px; }
.credits-title{ font-weight:800; font-size:clamp(18px,2.4vw,24px); color:var(--gold);
  line-height:1.4; margin-bottom:14px; opacity:0; transition:opacity 1s ease; }
.credits-title.show{ opacity:1; }

/* mask trên/dưới tạo hiệu ứng mờ dần ở 2 mép — chữ rõ nhất khi đi qua giữa */
.credits-scroll-mask{ position:relative; flex:1; overflow:hidden; opacity:0; transition:opacity .6s ease;
  -webkit-mask-image: linear-gradient(180deg, transparent, #000 20%, #000 80%, transparent);
  mask-image: linear-gradient(180deg, transparent, #000 20%, #000 80%, transparent); }
.credits-scroll-mask.show{ opacity:1; }
.credits-scroll-track{ position:absolute; top:0; left:0; width:100%; }
.credits-block{ margin-bottom:24px; }
.credits-block-head{ font-weight:700; font-size:clamp(14px,1.7vw,17px); color:var(--orange); margin-bottom:4px; line-height:1.4; }
.credits-block-body{ font-size:clamp(14px,1.7vw,17px); color:rgba(244,239,230,.78); line-height:1.5; }
.credits-names{ margin-top:8px; display:flex; flex-direction:column; gap:9px; }
.credits-item{ font-family:'JetBrains Mono', monospace; font-size:15px; letter-spacing:.05em;
  color:rgba(244,239,230,.68); text-align:left; }

/* câu kết — đứng yên 2-3s sau khi credit cuộn xong */
.credits-final{ opacity:0; transition:opacity 1s ease; margin-top:14px; }
.credits-final.show{ opacity:1; }
.credits-final p{ font-weight:800; font-size:clamp(20px,2.6vw,26px); color:var(--gold); line-height:1.4; }

/* ---------- ENDING → gửi lời chúc ---------- */
.ending-wrap{ position:absolute; inset:0; display:flex; flex-direction:column; align-items:center; justify-content:center;
  gap:16px; text-align:center; padding:0 20px; opacity:1; transition:opacity .9s ease; }
.ending-wrap.hide-fade{ opacity:0; pointer-events:none; }
/* video "phác thảo → hoàn thiện màu" thay cho số 9 tĩnh — hiệu ứng ăn mừng 9 năm */
.ending-video{ width:min(84%,420px); border-radius:10px; box-shadow:0 20px 50px rgba(0,0,0,.5);
  filter:drop-shadow(0 0 24px rgba(255,140,30,.35)); }
@keyframes endingPulse{ 0%,100%{ transform:scale(1); opacity:.92; } 50%{ transform:scale(1.08); opacity:1; } }
.ending-text{ font-size:clamp(16px,2.2vw,20px); line-height:1.55; max-width:42ch; color:rgba(244,239,230,.85); }
/* nút chạm để mở form gửi lời chúc — cùng ngôn ngữ mono/pulsing như các
   prompt "chạm để..." khác trên site */
.ending-cta{
  margin-top:6px; font-family:'JetBrains Mono', monospace; font-size:clamp(12px,1.5vw,14px);
  letter-spacing:.1em; text-transform:uppercase; color:var(--night); font-weight:700;
  background:linear-gradient(135deg, var(--gold), var(--orange)); border:none; border-radius:20px;
  padding:12px 28px; cursor:pointer; animation:pulseOpacity 1.8s ease-in-out infinite;
  transition:transform .15s ease;
}
.ending-cta:active{ transform:scale(.95); }

/* ---------- Gửi lời chúc — hiện sau khi đoạn kết mờ đi ---------- */
.wish-stage{ position:absolute; inset:0; display:flex; flex-direction:column; align-items:center; justify-content:center;
  gap:16px; padding:0 clamp(20px,6vw,60px); text-align:center;
  opacity:0; pointer-events:none; transition:opacity 1s ease; }
.wish-stage.show{ opacity:1; pointer-events:auto; }
.wish-crystal{ width:clamp(60px,9vw,90px); filter:drop-shadow(0 0 24px rgba(255,140,30,.6)); animation:endingPulse 2.6s ease-in-out infinite; }
.wish-prompt{ font-size:clamp(16px,2.1vw,20px); color:rgba(244,239,230,.88); max-width:40ch; }
.wish-form{ display:flex; flex-direction:column; align-items:center; gap:10px; width:min(90%,420px); transition:opacity .4s ease; }
.wish-form.hide{ opacity:0; pointer-events:none; position:absolute; }
.wish-input{ width:100%; min-height:70px; resize:none; background:rgba(244,239,230,.06); border:1px solid var(--line);
  border-radius:10px; padding:12px 14px; color:var(--cream); font-family:inherit; font-size:14px; line-height:1.5; }
.wish-input:focus{ outline:none; border-color:var(--orange); }
.wish-submit{ font-family:'JetBrains Mono',monospace; font-size:12px; letter-spacing:.1em; text-transform:uppercase;
  color:var(--night); background:linear-gradient(135deg,var(--gold),var(--orange)); border:none; border-radius:20px;
  padding:10px 26px; cursor:pointer; font-weight:700; transition:transform .15s ease; }
.wish-submit:active{ transform:scale(.94); }

/* chữ lời chúc bay vào số 9 lúc gửi — fixed để không bị .screen clip */
.wish-flying{ position:fixed; z-index:60; pointer-events:none; color:var(--gold); font-weight:700; font-size:14px;
  white-space:nowrap; max-width:70vw; overflow:hidden; text-overflow:ellipsis;
  transform:translate(-50%,-50%) scale(1); opacity:1;
  transition: transform 1s cubic-bezier(.3,.7,.2,1), opacity 1s ease; }
.wish-flying.fly{ transform: translate(calc(-50% + var(--fly-x,0)), calc(-50% + var(--fly-y,0))) scale(.1); opacity:0; }

.wish-confirm{ font-size:clamp(14px,1.9vw,17px); font-weight:700; color:var(--gold); max-width:40ch;
  opacity:0; transition:opacity 1s ease; }
.wish-confirm.show{ opacity:1; }

/* ===================================================================
   PAGE 00 — SCENE PROJECTOR (màn bật máy chiếu)
   Phủ toàn stage khi chưa "fired". Số 9 wordmark ở giữa, nền video
   anniversary tối mờ, tagline + prompt. Biến mất sau khi bật máy chiếu.
   =================================================================== */
.scene-projector{
  position:absolute; inset:0; z-index:45;
  display:flex; align-items:center; justify-content:center;
  cursor:pointer; overflow:hidden;
  transition: opacity .45s ease;
}
/* nền video: fireworks/anniversary, tối & mờ mạnh để giữ mood phòng chiếu
   và không chọi với số 9 wordmark phía trước */
.projector-video{
  position:absolute; inset:0; width:100%; height:100%; object-fit:cover;
  filter: brightness(.26) blur(3px) saturate(.95);
  opacity:0; transition: opacity 1.6s ease, filter .8s ease;
}
.scene-projector .projector-video{ opacity:1; }
/* vignette tối + tụ sáng nhẹ ở giữa cho số 9 nổi bật */
.projector-veil{
  position:absolute; inset:0; pointer-events:none;
  background:
    radial-gradient(60% 50% at 50% 46%, rgba(255,140,30,.14), transparent 70%),
    radial-gradient(120% 100% at 50% 50%, transparent 30%, rgba(7,6,17,.72) 100%);
}
/* ánh máy chiếu quét ngang màn hình — chỉ chạy lúc bấm (.firing) */
.projector-sweep{
  position:absolute; top:0; bottom:0; width:55%; left:-60%;
  z-index:3; pointer-events:none; opacity:0;
  background:linear-gradient(90deg, transparent, rgba(255,201,60,.55), rgba(255,255,255,.35), transparent);
  filter: blur(6px);
}
.scene-projector.firing .projector-sweep{ animation: projSweep .62s ease-out forwards; }
@keyframes projSweep{ 0%{ left:-60%; opacity:.9; } 100%{ left:110%; opacity:0; } }

.projector-center{
  position:relative; z-index:2;
  display:flex; flex-direction:column; align-items:center; text-align:center;
  padding:0 20px;
}
.projector-crystal-wrap{ position:relative; display:flex; align-items:center; justify-content:center; }
/* quầng sáng cam toả ra sau số 9 */
.projector-halo{
  position:absolute; width:150%; height:150%; border-radius:50%;
  background:radial-gradient(circle, rgba(255,161,46,.42) 0%, rgba(255,140,30,0) 68%);
  animation: haloBreath 3.6s ease-in-out infinite;
}
@keyframes haloBreath{ 0%,100%{ transform:scale(1); opacity:.7; } 50%{ transform:scale(1.12); opacity:1; } }

.projector-crystal{
  position:relative; z-index:2;
  width:clamp(240px,42vw,460px); height:auto;
  filter: drop-shadow(0 0 26px rgba(255,122,26,.5));
  animation: projFloat 4s ease-in-out infinite;
  transition: transform .5s cubic-bezier(.2,.9,.3,1.3), filter .4s ease;
  transform-origin:50% 44%;
}
@keyframes projFloat{ 0%,100%{ transform:translateY(0); } 50%{ transform:translateY(-10px); } }
/* hover: sáng hơn + viền rung nhẹ */
.scene-projector:hover .projector-crystal{
  filter: drop-shadow(0 0 40px rgba(255,201,60,.8));
  animation: projFloat 4s ease-in-out infinite, projJitter .18s steps(2) infinite;
}
@keyframes projJitter{ 0%{ transform:translate(0,0) rotate(0); } 100%{ transform:translate(.6px,-.6px) rotate(.15deg); } }
/* press: hơi lún */
.scene-projector.pressed .projector-crystal{ transform:scale(.96); animation-play-state:paused; }
/* firing: số 9 phát sáng mạnh, phóng + xoay nhẹ */
.scene-projector.firing .projector-crystal{
  animation: projFire .62s cubic-bezier(.2,.9,.3,1.2) forwards;
  filter: drop-shadow(0 0 70px rgba(255,201,60,1));
}
@keyframes projFire{
  0%{ transform:scale(1) rotate(0); }
  45%{ transform:scale(1.16) rotate(3deg); }
  100%{ transform:scale(1.34) rotate(0); }
}

.projector-tagline{
  margin-top:22px; font-weight:900; letter-spacing:.01em;
  font-size:clamp(36px,7vw,68px); color:var(--gold);
  text-transform:capitalize;
  text-shadow:0 0 24px rgba(255,140,30,.45);
}
.projector-prompt{
  margin-top:16px; font-size:clamp(14px,1.8vw,17px); letter-spacing:.16em; text-transform:uppercase;
  color:rgba(244,239,230,.7); display:flex; align-items:center; gap:8px;
  animation: pulseOpacity 1.8s ease-in-out infinite;
}
.projector-prompt .ring{ width:7px; height:7px; border-radius:50%; background:var(--gold); box-shadow:0 0 8px 2px var(--orange); }
/* firing/fired: fade tagline+prompt đi ngay, ẩn cả overlay dưới lớp flash trắng */
.scene-projector.firing .projector-tagline,
.scene-projector.firing .projector-prompt{ opacity:0; transition:opacity .3s ease; }
.stage.fired .scene-projector{ opacity:0; pointer-events:none; transition-delay:.2s; }

/* ẩn nguồn chiếu ở đáy trong lúc còn ở Page 00; nó hiện ra khi fired
   (đúng nhịp số 9 "bàn giao" xuống đáy thành máy chiếu) */
.stage:not(.fired) .source{ opacity:0; pointer-events:none; }
.source{ transition: opacity .5s ease; }

@media (max-width: 640px){
  .nav-btn{ width:38px; height:38px; }
  .chain-progress{ display:none; }
  .screen{ width:94vw; }
  .projector-crystal{ width:min(74vw,320px); }
  .projector-tagline{ margin-top:16px; }
}