/* ============================================================
   TANG BỒNG 6 — LOGO HƯỞNG ỨNG CHÍNH THỨC
   Y2K interactive film — vanilla CSS
   ============================================================ */
:root{
  --bg-blue:#1A24FA;
  --neon-pink:#FF007F;
  --acid-yellow:#F7FF00;
  --mint-green:#A3F1D8;
  --pure-white:#FFFFFF;
  --font-main:'SomeTimeLater','SVN Gotham',sans-serif;
  --font-additional:'SVN Gotham',system-ui,sans-serif;
  --g:0; /* glitch magnitude, set by JS from scroll velocity */
}
@font-face{font-family:'SomeTimeLater';src:url('./fonts/DFVN-SomeTimeLater.otf') format('opentype');font-display:block;}
@font-face{font-family:'SVN Gotham';src:url('./fonts/SVN-Gotham Ultra.otf') format('opentype');font-weight:950;font-display:block;}
@font-face{font-family:'SVN Gotham';src:url('./fonts/SVN-Gotham Black.otf') format('opentype');font-weight:900;font-display:block;}
@font-face{font-family:'SVN Gotham';src:url('./fonts/SVN-Gotham Bold.otf') format('opentype');font-weight:700;font-display:block;}
@font-face{font-family:'SVN Gotham';src:url('./fonts/SVN-Gotham Book.otf') format('opentype');font-weight:400;font-display:block;}
/* guideline-name aliases — SVG <text> inside the artwork asks for these exact family names */
@font-face{font-family:'SVN-Gotham';src:url('./fonts/SVN-Gotham Ultra.otf') format('opentype');font-weight:950;font-display:block;}
@font-face{font-family:'SVN-Gotham';src:url('./fonts/SVN-Gotham Black.otf') format('opentype');font-weight:900;font-display:block;}
@font-face{font-family:'SVN-Gotham';src:url('./fonts/SVN-Gotham Bold.otf') format('opentype');font-weight:700;font-display:block;}
@font-face{font-family:'SVN-Gotham';src:url('./fonts/SVN-Gotham Book.otf') format('opentype');font-weight:400;font-display:block;}
@font-face{font-family:'DFVN-SomeTimeLater';src:url('./fonts/DFVN-SomeTimeLater.otf') format('opentype');font-display:block;}
@font-face{font-family:'DFVN SomeTimeLater';src:url('./fonts/DFVN-SomeTimeLater.otf') format('opentype');font-display:block;}

*{margin:0;padding:0;box-sizing:border-box;}
::-webkit-scrollbar{display:none;}
html{scrollbar-width:none;-ms-overflow-style:none;}
html,body{background:var(--bg-blue);color:var(--pure-white);font-family:var(--font-additional);overflow-x:hidden;}
html.lenis,html.lenis body{height:auto;}
.lenis.lenis-smooth{scroll-behavior:auto!important;}
body{cursor:none;}
a,button{cursor:none;}
img{-webkit-user-drag:none;user-select:none;}

/* diacritics safety for Vietnamese on massive type */
.vn-safe{line-height:1.3;padding:.12em 0;overflow-wrap:break-word;}

/* ============ CUSTOM CURSOR ============ */
#cursor{
  position:fixed;top:0;left:0;width:14px;height:14px;border-radius:50%;
  background:var(--acid-yellow);mix-blend-mode:difference;
  pointer-events:none;z-index:9999;transform:translate(-50%,-50%);
  transition:width .3s cubic-bezier(.22,1,.36,1),height .3s cubic-bezier(.22,1,.36,1),background .3s;
  will-change:transform;
}
#cursor.is-hover{width:74px;height:74px;background:var(--pure-white);}
#cursor.is-drag{width:44px;height:44px;background:var(--neon-pink);mix-blend-mode:normal;}
#cursor .cursor-label{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;font-size:9px;font-weight:900;letter-spacing:.12em;color:#000;opacity:0;transition:opacity .25s;}
#cursor.is-drag .cursor-label{opacity:1;}

/* ============ GRAIN / FLASH / PROGRESS ============ */
#grain{
  position:fixed;inset:-100px;z-index:9000;pointer-events:none;opacity:.07;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2'/%3E%3C/filter%3E%3Crect width='200' height='200' filter='url(%23n)'/%3E%3C/svg%3E");
  animation:grainShift .4s steps(2) infinite;
}
@keyframes grainShift{0%{transform:translate(0,0)}25%{transform:translate(-40px,30px)}50%{transform:translate(30px,-45px)}75%{transform:translate(-25px,-20px)}100%{transform:translate(0,0)}}
#flash{position:fixed;inset:0;background:var(--pure-white);z-index:8500;opacity:0;pointer-events:none;}
#progressbar{position:fixed;top:0;left:0;height:3px;width:100%;background:var(--acid-yellow);transform-origin:left;transform:scaleX(0);z-index:8100;}

/* ============ HEADER — official white lockup, horizontal ============ */
#site-header{
  position:fixed;top:0;left:0;right:0;z-index:8000;pointer-events:none;
  display:flex;align-items:center;justify-content:space-between;
  padding:18px 26px;
}
.header-lockup{display:flex;align-items:center;gap:16px;}
.header-lockup img{height:116px;width:auto;display:block;filter:drop-shadow(0 4px 18px rgba(255,0,127,.45));}
#hud-act{font-weight:900;font-size:12px;letter-spacing:.24em;text-align:right;line-height:1.5;}
#hud-act .act-name{color:var(--acid-yellow);}
#hud-act .act-sub{opacity:.6;font-size:10px;display:block;}
#hud-foot{position:fixed;bottom:20px;left:26px;z-index:8000;pointer-events:none;font-weight:900;font-size:10.5px;letter-spacing:.28em;opacity:.85;}

/* ============ PRELOADER ============ */
#preloader{position:fixed;inset:0;background:var(--bg-blue);z-index:9500;display:flex;align-items:center;justify-content:center;overflow:hidden;}
#preloader .count-wrap{position:relative;text-align:center;}
#preloader .count{
  font-family:var(--font-main);font-size:clamp(120px,32vw,460px);
  line-height:1.3;padding:.05em .1em;color:var(--acid-yellow);
  text-shadow:10px 10px 0 var(--neon-pink);will-change:transform;
}
#preloader .count sup{font-size:.28em;color:var(--pure-white);text-shadow:5px 5px 0 var(--neon-pink);}
#preloader .load-tick{font-size:12px;letter-spacing:.45em;font-weight:900;color:var(--mint-green);margin-top:-1.2em;}
#preloader .ring{position:absolute;top:50%;left:50%;width:130%;height:130%;transform:translate(-50%,-50%);border:2px dashed var(--pure-white);border-radius:50%;opacity:.35;animation:spin 14s linear infinite;}
@keyframes spin{to{transform:translate(-50%,-50%) rotate(360deg)}}
img.shard{position:absolute;top:50%;left:50%;height:auto;opacity:0;will-change:transform;z-index:2;filter:drop-shadow(0 8px 24px rgba(0,0,0,.3));}

/* ============ FIXED VIDEO LAYER (breach target) ============ */
#video-layer{position:fixed;inset:0;z-index:1;opacity:0;visibility:hidden;will-change:transform,filter,opacity;}
#video-layer video{width:100%;height:100%;object-fit:cover;}

/* ============ GLOBAL DNA LAYER — elements always present ============ */
#dna-layer{position:fixed;inset:0;z-index:99;pointer-events:none;overflow:hidden;}
.dna-float{position:absolute;will-change:transform;filter:drop-shadow(0 12px 34px rgba(255,0,127,.55));}
.dna-float img{width:100%;height:auto;display:block;}
.dna-float.f1{width:12vw;top:9vh;left:-2vw;}
.dna-float.f2{width:10vw;top:56vh;right:-1vw;}
.dna-float.f3{width:5vw;top:78vh;left:12vw;}
.dna-float.f4{width:3.5vw;top:22vh;right:22vw;}

/* ============ SECTIONS ============ */
main{position:relative;z-index:2;}
section{position:relative;overflow:hidden;}

/* ---- ACT 1+2 : HERO — native SVG reveal → breach ---- */
#act-hero{height:100vh;}
#act-hero .stage{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;background:var(--bg-blue);}
.logo-rig{position:relative;height:min(84vh,138vw);aspect-ratio:1864.51/2961.67;will-change:transform;}
.logo-rig svg{position:absolute;inset:0;width:100%;height:100%;overflow:visible;}
#logo-mount{position:absolute;inset:0;will-change:transform,opacity;}
/* cheap glow that doesn't force SVG re-rasterization while scaling */
.logo-glow{
  position:absolute;top:50%;left:50%;width:130%;height:110%;
  transform:translate(-50%,-50%);border-radius:50%;pointer-events:none;
  background:radial-gradient(circle,rgba(255,0,127,.28) 0%,transparent 65%);
}
#logo-mount svg .tb6-draw{stroke-linecap:round;stroke-linejoin:round;}
#shield-hole{will-change:transform;}
.hero-titles{position:absolute;inset:0;display:flex;flex-direction:column;justify-content:space-between;padding:12vh 4vw;pointer-events:none;}
.hero-titles .g-line{font-weight:950;font-size:clamp(14px,1.5vw,22px);letter-spacing:.32em;display:flex;justify-content:space-between;}
.hero-titles .mint{color:var(--mint-green);}
.hero-titles .pink{color:var(--neon-pink);}
.reveal-caption{
  position:absolute;bottom:5vh;left:50%;transform:translateX(-50%);
  text-align:center;white-space:nowrap;opacity:0;z-index:3;
  font-weight:950;letter-spacing:.3em;font-size:clamp(13px,1.4vw,20px);color:var(--acid-yellow);
}
.reveal-caption small{display:block;margin-top:.7em;color:var(--pure-white);font-weight:700;letter-spacing:.22em;font-size:.72em;}
.scroll-hint{position:absolute;bottom:4.5vh;left:50%;transform:translateX(-50%);font-size:11px;letter-spacing:.5em;font-weight:900;color:var(--acid-yellow);animation:hintPulse 1.6s ease-in-out infinite;}
@keyframes hintPulse{0%,100%{opacity:.35}50%{opacity:1}}

/* ---- ACT 3 : MANIFESTO — giant slamming typography ---- */
#act-manifesto{height:100vh;background:#0d14c9;} /* darker blue void */
#act-manifesto .void{position:absolute;inset:0;background:radial-gradient(circle at 50% 60%,#1A24FA 0%,#0a10a6 70%);}
.manifesto-stage{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;}
.mword{
  position:absolute;font-family:var(--font-main);font-weight:400;
  font-size:clamp(90px,17vw,300px);letter-spacing:.01em;
  line-height:1.3;padding:.06em .1em;white-space:nowrap;
  color:var(--pure-white);will-change:transform,opacity;opacity:0;
}
.mword::before,.mword::after{
  content:attr(data-text);position:absolute;inset:0;padding:.06em .1em;
  pointer-events:none;
}
.mword::before{color:var(--neon-pink);transform:translate(calc(var(--g)*-1.6px),calc(var(--g)*.7px));z-index:-1;}
.mword::after{color:var(--mint-green);transform:translate(calc(var(--g)*1.6px),calc(var(--g)*-.7px));z-index:-2;}
.mword .accent{color:var(--acid-yellow);}
.manifesto-tag{position:absolute;bottom:6vh;width:100%;text-align:center;font-size:11px;font-weight:900;letter-spacing:.5em;color:var(--mint-green);opacity:0;}

/* ---- ACT 4 : DECONSTRUCT — zoom into 99% laptop & WOW ---- */
#act-decon{height:100vh;background:var(--bg-blue);}
#act-decon .decon-stage{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;overflow:hidden;}
.focus-art{width:100vw;height:auto;max-width:none;will-change:transform;filter:drop-shadow(0 0 44px rgba(255,0,127,.5));}
.decon-txt{
  position:absolute;z-index:5;max-width:44vw;
  font-family:var(--font-main);font-weight:400;
  font-size:clamp(34px,5vw,84px);letter-spacing:.01em;
  text-shadow:6px 6px 0 rgba(0,0,0,.25);
}
.decon-txt small{display:block;font-family:var(--font-additional);font-weight:700;font-size:.28em;letter-spacing:.3em;margin-top:1em;color:var(--mint-green);}
.decon-txt.t-left{left:6vw;top:50%;transform:translateY(-50%);color:var(--acid-yellow);}
.decon-txt.t-right{right:6vw;top:50%;transform:translateY(-50%);text-align:right;color:var(--neon-pink);}
.decon-kicker{position:absolute;top:12vh;width:100%;text-align:center;font-weight:900;letter-spacing:.5em;font-size:12px;color:var(--pure-white);opacity:.8;z-index:5;}

/* ---- ACT 5 : MERCH TUNNEL ---- */
#act-tunnel{height:100vh;background:var(--bg-blue);}
.tunnel{position:absolute;inset:0;perspective:900px;transform-style:preserve-3d;overflow:hidden;}
.tunnel-ghost{
  position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);
  font-family:var(--font-main);font-size:30vh;line-height:1.3;padding:.05em 0;white-space:nowrap;
  color:transparent;-webkit-text-stroke:2px rgba(255,255,255,.14);will-change:transform;
}
.merch-card{
  position:absolute;top:50%;left:50%;width:46vw;max-width:820px;aspect-ratio:4/3;
  margin:-17vw 0 0 -23vw;transform-style:preserve-3d;will-change:transform;
  filter:drop-shadow(0 30px 70px rgba(255,0,127,.55));
}
.merch-card img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;border-radius:14px;border:3px solid var(--pure-white);}
.merch-card .m-tag{
  position:absolute;top:-24px;left:-16px;background:var(--acid-yellow);color:#000;
  font-weight:950;font-size:12px;letter-spacing:.18em;padding:.65em 1.2em;border-radius:100px;border:3px solid #000;transform:rotate(-6deg);
}
.merch-card .m-cap{position:absolute;bottom:-52px;left:0;font-weight:900;font-size:clamp(13px,1.4vw,20px);letter-spacing:.28em;color:var(--mint-green);}
.merch-card .m-cap .idx{color:var(--neon-pink);margin-right:1em;}
.tunnel-kicker{position:absolute;top:10vh;width:100%;text-align:center;font-weight:900;letter-spacing:.5em;font-size:12px;color:var(--pure-white);opacity:.8;}

/* ---- ACT 6 : ENDLESS MARQUEE FOOTER ---- */
#act-footer{min-height:220vh;background:var(--bg-blue);}
.bands{position:absolute;top:0;left:0;right:0;height:120vh;overflow:hidden;}
.band{
  position:absolute;left:-30vw;width:160vw;white-space:nowrap;
  font-family:var(--font-main);font-size:clamp(40px,6.4vw,110px);
  line-height:1.3;padding:.08em 0;will-change:transform;pointer-events:none;
}
.band .m-inner{display:inline-block;will-change:transform;}
.band.b1{top:4vh;transform:rotate(15deg);color:var(--acid-yellow);}
.band.b2{top:24vh;transform:rotate(-10deg);color:transparent;-webkit-text-stroke:2px var(--pure-white);}
.band.b3{top:46vh;transform:rotate(6deg);color:var(--neon-pink);background:rgba(0,0,0,.14);}
.band.b4{top:68vh;transform:rotate(-18deg);color:var(--mint-green);}
.band.b5{top:88vh;transform:rotate(3deg);color:transparent;-webkit-text-stroke:2px var(--acid-yellow);}
.sticker{position:absolute;will-change:transform;z-index:60;}
.sticker img{width:100%;height:auto;pointer-events:none;filter:drop-shadow(0 14px 40px rgba(255,0,127,.55));}
.sticker.draggable{cursor:none;}
.sticker.draggable::after{
  content:'KÉO TUI ĐI ↯';position:absolute;top:-14px;left:50%;transform:translateX(-50%) rotate(-4deg);
  background:var(--neon-pink);color:#fff;font-weight:950;font-size:11px;letter-spacing:.14em;
  padding:.55em 1em;border-radius:100px;border:2px solid #fff;white-space:nowrap;
}
.sticker.s-a{width:17vw;top:18vh;left:6vw;}
.sticker.s-b{width:14vw;top:58vh;right:9vw;}
.finale{
  position:relative;z-index:70;min-height:100vh;margin-top:120vh;
  display:flex;align-items:center;justify-content:center;text-align:center;
}
.finale .halo{position:absolute;top:50%;left:50%;width:120vmin;height:120vmin;border-radius:50%;transform:translate(-50%,-50%);background:radial-gradient(circle,rgba(255,0,127,.35) 0%,transparent 60%);pointer-events:none;}
.finale-inner{position:relative;padding:8vh 6vw;}
.finale-logo{
  height:46vh;aspect-ratio:1864.51/2961.67;display:inline-block;
  filter:drop-shadow(0 0 34px rgba(255,0,127,.45));will-change:transform; /* same pink glow as the hero reveal */
}
.finale-logo svg{width:100%;height:100%;display:block;}
.finale h2{
  font-family:var(--font-main);font-size:clamp(38px,6.6vw,104px);
  line-height:1.3;padding:.1em 0;color:var(--acid-yellow);
  text-shadow:7px 7px 0 var(--neon-pink);overflow-wrap:break-word;
}
.finale .replay{
  margin-top:5vh;display:inline-block;background:var(--acid-yellow);color:#000;
  font-weight:950;letter-spacing:.28em;font-size:14px;padding:1.2em 2.6em;
  border:3px solid #000;border-radius:100px;box-shadow:8px 8px 0 var(--neon-pink);
  transition:transform .25s,box-shadow .25s;text-decoration:none;
}
.finale .replay:hover{transform:translate(4px,4px);box-shadow:2px 2px 0 var(--neon-pink);}

/* ---------- MULTI-DEVICE ---------- */
/* dynamic viewport units where supported (mobile URL-bar safe) */
@supports (height:100svh){
  #act-hero,#act-manifesto,#act-decon,#act-tunnel{height:100svh;}
  .logo-rig{height:min(84svh,138vw);}
}
/* touch devices: native cursor, no custom dot */
@media (hover:none),(pointer:coarse){
  body,a,button,.sticker.draggable{cursor:auto;}
  #cursor{display:none;}
  #grain{opacity:.05;}
}
@media (max-width:820px){
  #site-header{padding:12px 16px;}
  .header-lockup img{height:72px;}
  #hud-act{font-size:10px;}
  #hud-act .act-sub{display:none;}
  #hud-foot{display:none;}
  .hero-titles{padding:10vh 5vw;}
  .hero-titles .g-line{font-size:10px;letter-spacing:.22em;}
  .reveal-caption{white-space:normal;width:88vw;}
  .mword{font-size:clamp(64px,20vw,160px);}
  .decon-txt{max-width:82vw;font-size:clamp(30px,9vw,60px);}
  .decon-txt.t-left{left:6vw;top:auto;bottom:12vh;transform:none;}
  .decon-txt.t-right{right:6vw;top:auto;bottom:12vh;transform:none;}
  .merch-card{width:82vw;margin:-31vw 0 0 -41vw;}
  .merch-card .m-cap{font-size:11px;letter-spacing:.2em;}
  .band{font-size:clamp(34px,9vw,64px);}
  .sticker.s-a{width:38vw;}
  .sticker.s-b{width:30vw;}
  .finale-logo{height:30vh;}
  .finale h2{font-size:clamp(34px,9.5vw,64px);}
  .dna-float.f1{width:24vw;}
  .dna-float.f2{width:20vw;}
  .dna-float.f3{width:11vw;}
  .dna-float.f4{width:8vw;}
  .tunnel-ghost{font-size:18vh;}
}
@media (max-width:480px){
  #preloader .count{font-size:38vw;}
  .mword{font-size:22vw;}
  .merch-card{width:88vw;margin:-33vw 0 0 -44vw;}
}