@font-face{font-family:"Rush Driver";src:url("fonts/RushDriver-Italic.otf") format("opentype");font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:"Racing Engine";src:url("fonts/RacingEngine-Regular.otf") format("opentype");font-weight:400;font-style:normal;font-display:swap}
:root{
  --bg:#07060a; --ink:#f4ece0; --mute:#a69fae; --hot:#a6f500; --hot2:#d6ff5c; --lime:#c6ff3d; --cy:#27e4ff;
  --line:rgba(244,236,224,.14);
  --bass:0; /* diisi script.js: 0..1 mengikuti ketukan */
  --fd:Anton,Impact,sans-serif; --fl:"Rush Driver","Racing Engine","Racing Sans One",Anton,Impact,sans-serif; --fc:"Barlow Condensed",sans-serif;
}
*{box-sizing:border-box;margin:0;padding:0}
html,body{height:100%;background:var(--bg);color:var(--ink);font-family:Inter,system-ui,sans-serif;overflow:hidden}
button{font:inherit;color:inherit;cursor:pointer;border:0;background:none}

/* ===== Hero ===== */
.hero{position:fixed;inset:0;display:grid;place-items:center;text-align:center;padding:24px 24px 90px;overflow:hidden}
.bg-video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;filter:saturate(1.1) brightness(.6);transform:scale(1.04)}
.bg-video[hidden]{display:none}
/* Video YouTube sebagai latar (cover, tanpa kontrol) */
.bg-yt{position:absolute;inset:0;overflow:hidden;opacity:0;transition:opacity 1.2s;pointer-events:none;background:#000}
.hero.has-video .bg-yt{opacity:1}
.bg-yt iframe{position:absolute;top:50%;left:50%;width:max(100vw,177.78vh);height:max(56.25vw,100vh);transform:translate(-50%,-50%) scale(1.08);border:0;filter:saturate(1.1) brightness(.6)}
.stage,.embers{position:absolute;inset:0;width:100%;height:100%;pointer-events:none}
.stage{z-index:0}
.hero.has-video .stage{opacity:.0}
.embers{z-index:2}
.hero::before{content:"";position:absolute;inset:0;z-index:1;pointer-events:none;
  background:radial-gradient(ellipse at 50% 45%,rgba(7,6,10,.55) 0%,rgba(7,6,10,.2) 45%,rgba(7,6,10,.8) 100%),linear-gradient(180deg,rgba(7,6,10,.7),transparent 25%,rgba(7,6,10,.85))}
.fog{position:absolute;left:-10%;right:-10%;bottom:0;height:42%;z-index:1;pointer-events:none;
  background:radial-gradient(ellipse at 50% 100%,rgba(170,255,0,.28),transparent 65%),radial-gradient(ellipse at 20% 100%,rgba(255,255,255,.1),transparent 55%);
  filter:blur(18px);animation:fog 9s ease-in-out infinite alternate}
@keyframes fog{to{transform:translateX(5%) scaleY(1.2)}}
.strobe{position:absolute;inset:0;z-index:2;pointer-events:none;background:#fff;opacity:0;mix-blend-mode:overlay}
.grain{position:absolute;inset:0;z-index:4;pointer-events:none;opacity:.1;mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='160' height='160'><filter id='n'><feTurbulence baseFrequency='.9' numOctaves='2'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>");
  animation:grain 1s steps(4) infinite}
@keyframes grain{25%{transform:translate(-3%,2%)}50%{transform:translate(2%,-3%)}75%{transform:translate(-2%,-1%)}}

/* brand */
.brand{position:absolute;top:24px;left:0;right:0;z-index:5;font:700 18px/1 var(--fc);letter-spacing:.45em;display:flex;flex-direction:column;align-items:center;gap:6px;
  opacity:0;animation:fade 1.2s .2s forwards}
.brand small{font-size:11px;letter-spacing:.5em;color:var(--mute);font-weight:500}
.rec{position:absolute;left:24px;top:4px;width:10px;height:10px;border-radius:50%;background:var(--hot);box-shadow:0 0 12px var(--hot);animation:blink 1s steps(2) infinite}
@keyframes blink{50%{opacity:.2}}

/* content */
.content{position:relative;z-index:5;max-width:980px;transform:scale(calc(1 + var(--bass)*.012))}
.eyebrow{display:flex;justify-content:center;align-items:center;gap:14px;flex-wrap:wrap;font:italic 700 15px/1 var(--fc);letter-spacing:.3em;text-transform:uppercase;color:var(--hot2);margin-bottom:20px}
.eyebrow i{width:5px;height:5px;background:var(--lime);transform:rotate(45deg);box-shadow:0 0 8px var(--lime)}
/* Judul bergaya logo: isian gradasi + outline putih + outline hitam tebal + ekstrusi */
h1{font-family:var(--fl);font-weight:400;line-height:.78;text-transform:uppercase;font-size:clamp(44px,min(11vw,19vh),180px);letter-spacing:.02em;
  filter:drop-shadow(0 0 calc(6px + var(--bass)*34px) rgba(170,255,0,.45))}
h1 .l1{position:relative;display:block;isolation:isolate;padding:0;line-height:.8;white-space:nowrap;transform:translateY(calc(var(--bass)*-4px))}
h1 .l1::before,h1 .l1::after{content:attr(data-t);position:absolute;left:0;right:0;top:0;z-index:-1;pointer-events:none}
h1 .l1::before{z-index:-2;color:#000;-webkit-text-stroke:.2em #000;text-shadow:.07em .09em 0 #000,.12em .15em 0 #000}
h1 .l1::after{color:#fff;-webkit-text-stroke:.1em #fff}
h1 .l1 b{position:relative;font-weight:400;background:linear-gradient(180deg,#fff 8%,#e9e9e9 42%,#9a9a9a 52%,#cfcfcf 100%);-webkit-background-clip:text;background-clip:text;color:transparent}
h1 .hot b{background:linear-gradient(180deg,#eaff9a 6%,#b9ff1a 40%,#7fd400 52%,#a6f500 100%);-webkit-background-clip:text;background-clip:text;color:transparent}
/* tagline seperti pita "BANYUWANGI" di logo */
.tagline{display:inline-block;font:700 clamp(16px,2.6vw,26px)/1 var(--fl);letter-spacing:.16em;text-transform:uppercase;margin:30px 0 16px;padding:10px 30px;
  background:#000;color:var(--hot);border:2px solid #fff;outline:3px solid #000;transform:skewX(-14deg);box-shadow:6px 6px 0 var(--hot)}
.sub{margin:0 auto 34px;max-width:580px;color:var(--mute);font-weight:300;line-height:1.7;font-size:clamp(14px,1.8vw,16px)}

.reveal{opacity:0;transform:translateY(34px) scale(.98);animation:up .9s cubic-bezier(.16,.9,.25,1) forwards}
.d1{animation-delay:.4s}.d2{animation-delay:.65s}.d3{animation-delay:1s}.d4{animation-delay:1.3s}
#title.reveal{animation-name:slam}
@keyframes up{to{opacity:1;transform:none}}
@keyframes slam{0%{opacity:0;transform:scale(1.5);filter:blur(14px)}60%{opacity:1;transform:scale(.97);filter:none}100%{opacity:1;transform:none}}
@keyframes fade{to{opacity:1}}

/* button */
.btn{position:relative;display:inline-flex;align-items:center;gap:16px;padding:20px 46px;font:700 19px/1 var(--fc);letter-spacing:.22em;text-transform:uppercase;color:#1a0a02;
  background:linear-gradient(180deg,var(--hot2),var(--hot));
  clip-path:polygon(14px 0,100% 0,calc(100% - 14px) 100%,0 100%);overflow:hidden;transition:.3s;
  filter:drop-shadow(0 0 calc(8px + var(--bass)*26px) rgba(170,255,0,.7));animation:none}
.btn::after{content:"";position:absolute;top:0;left:-120%;width:50%;height:100%;background:linear-gradient(100deg,transparent,rgba(255,255,255,.55),transparent);animation:shine 3s 2s infinite}
@keyframes shine{40%,100%{left:140%}}
.btn:hover{background:linear-gradient(180deg,#fff,var(--hot2));transform:translateY(-3px) scale(1.04)}
.btn .arr{font-weight:700;transition:transform .3s}.btn:hover .arr{transform:translateX(8px)}

/* equalizer */
.meter{position:absolute;left:0;right:0;bottom:46px;height:90px;z-index:3;display:flex;align-items:flex-end;gap:3px;padding:0 3vw;pointer-events:none;opacity:.85}
.meter i{flex:1;height:4%;background:linear-gradient(180deg,var(--lime),var(--hot2) 45%,var(--hot));border-radius:2px 2px 0 0;transform-origin:bottom;will-change:height}

/* marquee */
.marquee{position:absolute;left:0;right:0;bottom:0;z-index:5;background:var(--hot);color:#1a0a02;overflow:hidden;white-space:nowrap;padding:11px 0;
  font:700 15px/1 var(--fc);letter-spacing:.3em;border-top:2px solid #000;box-shadow:0 -10px 40px rgba(170,255,0,.35)}
.marquee__t{display:inline-flex;gap:30px;animation:mq 26s linear infinite;padding-left:30px}
@keyframes mq{to{transform:translateX(-50%)}}

/* tombol aktifkan audio */
.audio{display:inline-flex;align-items:center;gap:10px;margin-top:18px;padding:12px 24px;font:700 15px/1 var(--fc);letter-spacing:.2em;text-transform:uppercase;color:var(--ink);
  background:rgba(7,6,10,.65);border:2px solid var(--hot);backdrop-filter:blur(6px);transform:skewX(-12deg);transition:.25s;touch-action:manipulation}
.audio>span{display:inline-block;transform:skewX(12deg)}
.audio__ic{font-size:18px}
.audio:hover{background:rgba(170,255,0,.15);box-shadow:0 0 22px rgba(170,255,0,.45)}
.audio:not(.on){animation:nudge 2.4s ease-in-out infinite}
.audio.on{background:var(--hot);color:#1a0a02;box-shadow:0 0 24px rgba(170,255,0,.6)}
@keyframes nudge{0%,100%{box-shadow:0 0 0 0 rgba(170,255,0,.5)}50%{box-shadow:0 0 0 10px rgba(170,255,0,0)}}

/* ===== Overlay ===== */
.overlay{position:fixed;inset:0;z-index:20;display:grid;place-items:center;padding:20px;background:rgba(5,4,8,.84);backdrop-filter:blur(14px);
  opacity:0;visibility:hidden;transition:opacity .5s,visibility .5s}
.overlay.on{opacity:1;visibility:visible}
.card{position:relative;width:min(480px,100%);padding:46px 34px 38px;text-align:center;border:1px solid var(--line);
  background:linear-gradient(180deg,rgba(28,20,24,.95),rgba(10,8,12,.97));box-shadow:0 30px 120px rgba(0,0,0,.8),0 0 90px rgba(170,255,0,.1);
  transform:translateY(40px) scale(.95);transition:transform .6s cubic-bezier(.16,.9,.25,1)}
.overlay.on .card{transform:none}
.card::before,.card::after{content:"";position:absolute;width:20px;height:20px;border:2px solid var(--hot)}
.card::before{top:-2px;left:-2px;border-right:0;border-bottom:0}
.card::after{bottom:-2px;right:-2px;border-left:0;border-top:0}
.age{position:relative;width:88px;height:88px;margin:0 auto 22px;border-radius:50%;border:3px solid #2d2530;display:grid;place-items:center;
  background:repeating-radial-gradient(circle,#150f14 0 5px,#0b080c 5px 10px);box-shadow:0 0 40px rgba(170,255,0,.35);animation:thumpS 1s infinite}
.age b{width:30px;height:30px;border-radius:50%;background:radial-gradient(circle at 35% 30%,#ffc48a,var(--hot) 50%,#5a1800)}
.age i{position:absolute;inset:-3px;border-radius:50%;border:2px solid var(--hot);animation:ripple 1.6s infinite}
@keyframes thumpS{0%,100%{transform:scale(1)}12%{transform:scale(1.08)}}
@keyframes ripple{0%{transform:scale(1);opacity:.8}100%{transform:scale(1.7);opacity:0}}
.card h2{font:400 28px/1 var(--fd);letter-spacing:.08em;margin-bottom:14px}
.card p{color:var(--mute);font-size:14px;line-height:1.7;font-weight:300;margin-bottom:26px}
.card .btn{width:100%;justify-content:center;padding:18px 16px;font-size:16px;letter-spacing:.14em;animation:none}
.note{margin:18px 0 0!important;font-size:11px!important;opacity:.7}
.leave{display:inline-block;margin-top:14px;font:600 14px/1 var(--fc);color:var(--mute);letter-spacing:.2em;text-decoration:underline;text-underline-offset:5px;text-transform:uppercase}
.leave[hidden]{display:none}
.check{width:96px;height:96px;margin:0 auto 22px}
.check circle{fill:none;stroke:var(--hot);stroke-width:3;stroke-dasharray:290;stroke-dashoffset:290}
.check path{fill:none;stroke:var(--lime);stroke-width:5;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:60;stroke-dashoffset:60}
#unlocked.on .check circle{animation:draw .9s .2s forwards}
#unlocked.on .check path{animation:draw .5s .9s forwards}
@keyframes draw{to{stroke-dashoffset:0}}

@media(max-height:760px){
  .hero{padding-top:70px}
  .sub{display:none}
  .tagline{margin:14px 0 22px}
  .eyebrow{margin-bottom:12px}
}
@media(max-height:560px){.eyebrow,.meter{display:none}}
@media(max-width:560px){
  .hero{padding:78px 16px calc(64px + env(safe-area-inset-bottom))}
  .brand{top:calc(18px + env(safe-area-inset-top));font-size:15px;letter-spacing:.3em;padding-left:22px}
  .brand small{font-size:9px;letter-spacing:.32em}
  .rec{left:18px;top:3px;width:8px;height:8px}
  .eyebrow{font-size:12px;letter-spacing:.18em;gap:10px;margin-bottom:14px}
  .eyebrow i,.eyebrow span:nth-child(3){display:none}
  h1{font-size:min(10.5vw,15vh)}
  h1 .l1::before{-webkit-text-stroke:.17em #000;text-shadow:.06em .08em 0 #000}
  h1 .l1::after{-webkit-text-stroke:.085em #fff}
  .tagline{max-width:94%;white-space:normal;font-size:13px;letter-spacing:.08em;line-height:1.25;padding:9px 16px;margin:22px 0 22px;box-shadow:4px 4px 0 var(--hot)}
  .btn{padding:17px 28px;font-size:16px;letter-spacing:.16em}
  .audio{margin-top:16px;padding:11px 20px;font-size:14px;letter-spacing:.14em}
  .card{padding:36px 18px 26px}
  .card h2{font-size:24px}
  .meter{height:56px;bottom:38px}
  .marquee{padding:9px 0;font-size:13px;padding-bottom:calc(9px + env(safe-area-inset-bottom))}
}
@media(max-width:560px) and (max-height:660px){.eyebrow{display:none}.tagline{margin:14px 0}.audio{margin-top:12px}}
@media(max-width:360px){.btn{padding:15px 20px;font-size:15px}.audio{font-size:13px}}
@media(prefers-reduced-motion:reduce){*{animation-duration:.01s!important;animation-delay:0s!important;transition-duration:.01s!important}}