/* SEEMAD landing v3 — "the film": gulir mengemudikan kamera, pindah babak = kedipan.
   Memakai token & komponen css/site.css; di sini hanya lapisan film + babak + lantai. */

/* ---------- lapisan film ---------- */
#film,#rain{position:fixed;inset:0;width:100%;height:100%;z-index:1;pointer-events:none;opacity:0;transition:opacity .6s ease}
#rain{z-index:2;mix-blend-mode:screen}
html.filming #film,html.filming #rain{opacity:1}
#actHud{position:fixed;left:50%;top:74px;transform:translateX(-50%);z-index:39;display:flex;align-items:center;gap:12px;font-size:10.5px;letter-spacing:.22em;text-transform:uppercase;color:var(--muted);opacity:0;transition:opacity .5s;pointer-events:none;white-space:nowrap}
html.filming #actHud{opacity:1}
#actHud b{color:var(--ice);font-weight:500}
#actHud span{color:var(--ink2)}
#actHud::before,#actHud::after{content:"";width:46px;height:1px;background:linear-gradient(90deg,transparent,var(--line3))}
#actHud::after{background:linear-gradient(90deg,var(--line3),transparent)}

/* lapisan konten harus di atas kanvas film */
.hero{z-index:3}
.finale{position:relative}
.foot{z-index:3}

/* ---------- babak ---------- */
#journey{position:relative;z-index:3}
/* babak ular dibuat panjang: tiap gulir ular terus melingkar (204 frame menyebar di ±9 layar) */
.act{position:relative;height:320vh}
#rise{height:310vh}
#offer{height:340vh}
#pour{height:330vh}
#reading{height:300vh}
.act-pin{position:sticky;top:0;height:100vh;height:100svh;display:flex;align-items:center;overflow:hidden}
.act-still{display:none}
.act-inner{position:relative;width:100%;padding:96px var(--pad) 40px;will-change:opacity,transform}
.act-center{display:flex;flex-direction:column;align-items:center;text-align:center}
.act-left{display:flex;justify-content:flex-start}
.act-label{display:flex;align-items:center;gap:10px;font-size:10.5px;letter-spacing:.24em;text-transform:uppercase;color:var(--ink2);margin-bottom:16px}
.act-label i{width:6px;height:6px;border-radius:50%;background:var(--ice);box-shadow:0 0 10px var(--ice)}
.act-center .act-label{justify-content:center}

/* manifesto di dalam babak I */
#rise .mani-text{max-width:1060px;text-shadow:0 2px 30px rgba(3,2,6,.9)}

/* panel pos pemberhentian (pecahan obsidian, sedikit tembus) */
.station{width:min(560px,100%);padding:26px 26px 28px;position:relative}
.pane{clip-path:var(--bevel);background:linear-gradient(165deg,rgba(16,14,24,.86),rgba(6,5,10,.9))}
.pane::before{content:"";position:absolute;inset:0;clip-path:var(--bevel);padding:1px;background:linear-gradient(150deg,rgba(169,241,250,.5),rgba(225,222,255,.07) 40%,rgba(156,134,255,.3));-webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask-composite:exclude;pointer-events:none}
@supports (backdrop-filter: blur(1px)){.pane{background:linear-gradient(165deg,rgba(16,14,24,.68),rgba(6,5,10,.78));backdrop-filter:blur(14px) saturate(1.1);-webkit-backdrop-filter:blur(14px) saturate(1.1)}}
.st-t{font-family:var(--f-d);text-transform:uppercase;line-height:1.04;letter-spacing:-.03em;font-size:clamp(24px,2.6vw,40px);margin:0 0 12px}
.st-t span{display:block}
.st-sub{color:var(--muted);font-size:14.5px;margin-bottom:18px;max-width:46ch}
.st-steps{list-style:none;counter-reset:s;display:grid;gap:13px;margin:16px 0 22px}
.st-steps li{counter-increment:s;position:relative;padding-left:44px;color:var(--muted);font-size:15px}
.st-steps li::before{content:"0" counter(s);position:absolute;left:0;top:1px;font-family:var(--f-m);font-size:11.5px;color:var(--ice);letter-spacing:.1em}
.st-steps li b{color:var(--ink);font-weight:600}
.station .ctas{margin-top:0}
.st-tax{margin:14px 0 18px;gap:18px}
.st-tax b{font-size:clamp(54px,5vw,84px)}
.st-tax > span{font-size:14px;max-width:30ch}
.station .lens{min-height:0;padding:0;clip-path:none;background:none;margin-top:16px}
.station .lens::before{display:none}
.station .lens-idle,.station .lens-load,.station .lens-err{position:relative;inset:auto;padding:26px 0 10px;flex-direction:row;justify-content:flex-start;gap:16px}
.station .lens-eye{width:84px;height:44px;flex:0 0 auto}
.station .lens-eye i{height:30px}
.station .lens-eye.scanning i{animation-name:sweepS}
@keyframes sweepS{from{transform:translateX(-24px)}to{transform:translateX(24px)}}
.station .lens-res{margin-top:14px;gap:12px}
.station .r-text{max-height:72px;font-size:13.5px}
.station .r-rows{grid-template-columns:repeat(4,1fr)}
.station .r-rows b{font-size:14px}
.station .r-score .n{font-size:44px}
.st-streams{height:240px;gap:10px;margin:6px 0 14px}
.st-streams .s-pct{font-size:clamp(24px,2.2vw,34px)}
.st-streams .s-k{font-size:13px;margin-top:4px}
.st-streams .s-d{font-size:11.5px}
.station .fine{margin-top:12px;font-size:11.5px}
.station .try{margin-top:10px}

/* ---------- lantai ---------- */
.floor{position:relative;z-index:3;background:var(--bg);padding:clamp(90px,13vh,150px) 0 40px;border-top:1px solid var(--line)}
.floor .sec-label{margin-bottom:34px}
.floor .seat-grid{margin-bottom:16px}
.floor .seat-art{height:240px}
.score-mini{display:flex;flex-wrap:wrap;gap:8px;margin:0 0 16px;padding:16px 18px;border:1px solid var(--line);background:var(--bg2);font-size:11px;letter-spacing:.08em;color:var(--muted)}
.score-mini span{padding:6px 10px;border:1px solid var(--line);border-radius:999px;white-space:nowrap}
.score-mini b{color:var(--ice);font-weight:500}
.score-mini i{font-style:normal}
.floor .ledger{margin-bottom:16px}
.faq{position:relative;z-index:3;background:var(--bg)}
.finale{z-index:3;background:var(--bg)}
.finale-art{opacity:.8}

/* nav tersembunyi saat film supaya layar bersih? tidak — nav tetap, hanya lebih pekat */
html.filming .nav{background:rgba(6,5,9,.55);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px)}

/* ---------- HP ---------- */
@media (max-width:900px){
  .act{height:260vh}
  #rise,#offer,#pour{height:260vh}
  #reading{height:240vh}
  .act-inner{padding:84px 16px 90px}
  .station{width:100%;padding:20px 18px 22px}
  .st-steps li{font-size:14px}
  .station .r-rows{grid-template-columns:repeat(2,1fr)}
  .st-streams{height:190px}
  #actHud{top:auto;bottom:14px;font-size:9.5px}
  #actHud::before,#actHud::after{width:24px}
  .floor .seat-art{height:200px}
  .score-mini{padding:12px}
}

/* ---------- gerak dikurangi: film jadi poster diam ---------- */
@media (prefers-reduced-motion:reduce){
  #film,#rain,#blink,#actHud{display:none!important}
  .act{height:auto}
  #rise,#reading{height:auto}
  .act-pin{position:relative;height:auto;min-height:100svh}
  .act-still{display:block;position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:.5}
  .act-pin::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(6,5,9,.8),rgba(6,5,9,.35) 40%,rgba(6,5,9,.85))}
  .act-inner{z-index:2}
  #rise .mani-text .w{color:var(--ink)}
}

/* ---------- kedipan asli: kelopak sang ular menutup & membuka ---------- */
#blink{position:fixed;inset:0;width:100%;height:100%;z-index:38;pointer-events:none;opacity:0}

/* ---------- hero: mata bernapas (pupil realistis) ---------- */
.hero-film img{width:100%;height:100%;object-fit:cover;object-position:50% 46%;display:block;animation:breathe 9s ease-in-out infinite;transform-origin:50% 46%}
@keyframes breathe{0%,100%{transform:scale(1.02)}50%{transform:scale(1.065)}}
.hero-film{overflow:hidden}

/* ---------- segel ritual ---------- */
html.asleep .cur{display:none}
html.asleep body{cursor:auto}
.wake-mid{bottom:clamp(40px,8vh,96px)}
.wake-line{margin-bottom:18px}
.seal{--p:0;--o:0;position:relative;display:flex;flex-direction:column;align-items:center;gap:16px;margin:0 auto;padding:0;background:none;border:0;cursor:pointer;touch-action:none;-webkit-user-select:none;user-select:none;-webkit-touch-callout:none;-webkit-tap-highlight-color:transparent;outline:none}
.seal-body{position:relative;width:min(270px,58vw);aspect-ratio:1;display:block;transition:transform .6s var(--ease)}
.seal:hover .seal-body{transform:scale(1.03)}
.seal.on .seal-body{transform:scale(.975)}
.seal:focus-visible .seal-body{filter:drop-shadow(0 0 0 2px var(--ice)) drop-shadow(0 0 22px rgba(169,241,250,.55))}
.seal-aura{position:absolute;left:50%;top:calc(min(270px,58vw) / 2);width:min(440px,96vw);aspect-ratio:1;transform:translate(-50%,-50%);border-radius:50%;pointer-events:none;
  background:radial-gradient(closest-side,rgba(169,241,250,calc(.06 + var(--o) * .32)),rgba(156,134,255,calc(var(--o) * .12)) 55%,transparent 72%)}
.seal-half{position:absolute;inset:0;display:block;
  -webkit-mask:radial-gradient(circle at 50% 50%,#000 44%,transparent 50%);mask:radial-gradient(circle at 50% 50%,#000 44%,transparent 50%);
  transition:transform 1.1s cubic-bezier(.6,0,.2,1),opacity 1.1s ease}
.seal-half.l{clip-path:inset(0 50% 0 0)}
.seal-half.r{clip-path:inset(0 0 0 50%)}
.seal-half img{position:absolute;inset:0;width:100%;height:100%;transform:rotate(calc(var(--p) * 38deg));transition:none}
.seal-glow{mix-blend-mode:screen;
  -webkit-mask:conic-gradient(from -90deg,#000 calc(var(--p) * 360deg),transparent calc(var(--p) * 360deg + 14deg));
  mask:conic-gradient(from -90deg,#000 calc(var(--p) * 360deg),transparent calc(var(--p) * 360deg + 14deg));
  filter:drop-shadow(0 0 6px rgba(169,241,250,.75)) brightness(calc(1 + var(--o) * .6))}
.seal-rift{position:absolute;left:50%;top:4%;bottom:4%;width:2px;margin-left:-1px;opacity:0;transform:scaleY(.15);transform-origin:50% 50%;
  background:linear-gradient(180deg,transparent,rgba(243,254,255,.95) 18%,#fff 50%,rgba(243,254,255,.95) 82%,transparent);
  box-shadow:0 0 10px 1px rgba(169,241,250,.95),0 0 34px 6px rgba(169,241,250,.45),0 0 90px 20px rgba(156,134,255,.22);
  transition:opacity .25s ease,transform .5s cubic-bezier(.2,.8,.2,1)}
  background:linear-gradient(180deg,transparent,#F3FEFF 20%,#A9F1FA 50%,#F3FEFF 80%,transparent);box-shadow:0 0 18px #A9F1FA,0 0 44px rgba(169,241,250,.7);transition:opacity .4s,width .9s,margin .9s}
.seal.on .seal-body{animation:tremble .09s linear infinite}
@keyframes tremble{0%{translate:0 0}25%{translate:.6px -.4px}50%{translate:-.5px .5px}75%{translate:.4px .6px}100%{translate:0 0}}
/* terbelah dua mengikuti celah pupil */
.seal.broken .seal-body{animation:none}
.seal.broken .seal-rift{opacity:1;transform:scaleY(1);animation:riftFade 1s .45s ease forwards}
@keyframes riftFade{to{opacity:0;transform:scaleY(1.25)}}
.seal.broken .seal-half.l{transform:translateX(-34%) rotate(-5deg);opacity:0;transition-delay:.18s}
.seal.broken .seal-half.r{transform:translateX(34%) rotate(5deg);opacity:0;transition-delay:.18s}
.seal.broken .seal-txt{opacity:0}
.seal-txt{display:flex;align-items:baseline;gap:12px;font-family:var(--f-m);font-size:11px;letter-spacing:.24em;text-transform:uppercase;color:var(--ink2);transition:opacity .4s}
.seal-txt b{font-weight:500}
.seal-txt i{font-style:normal;color:var(--ice);min-width:4ch;opacity:calc(.35 + var(--o))}
.hint{margin-top:14px}
#wake.breaking #wakeFilm{filter:brightness(1.25)}
@media (prefers-reduced-motion:reduce){.hero-film img{animation:none}.seal.on .seal-body{animation:none}}

/* ---------- logo baru: simbol ouroboros + wordmark serif ---------- */
.lockup,.brand-sm{display:flex;align-items:center;gap:12px;letter-spacing:0}
.lk-sym{width:34px;height:auto;display:block;filter:drop-shadow(0 0 6px rgba(169,241,250,.35))}
.lk-word{height:18px;width:auto;display:block}
.brand-sm .lk-sym{width:28px}.brand-sm .lk-word{height:15px}
.foot .lockup .lk-sym{width:40px}.foot .lockup .lk-word{height:21px}
@media (max-width:640px){.nav .lk-word{display:none}}
.aperture{font-size:0;padding:3vw 0}
.ap-word{display:block;width:min(1100px,88vw);aspect-ratio:1425/329;margin:0 auto;
  -webkit-mask:url(../assets/brand/wordmark.png) center/contain no-repeat;mask:url(../assets/brand/wordmark.png) center/contain no-repeat;
  background:linear-gradient(180deg,#F4FEFF 0%,#A9F1FA 45%,#7C6BE0 100%);filter:drop-shadow(0 0 30px rgba(169,241,250,.25))}

/* ---------- HERO v5: mata = pusat bersih; teks kiri bawah, kartu CA kanan bawah ---------- */
.hero{display:block}
.hero video.hero-film{object-fit:cover;object-position:56% 40%;width:100%;height:100%}
.hero-veil{background:
  linear-gradient(90deg,rgba(6,5,9,.86) 0%,rgba(6,5,9,.55) 30%,rgba(6,5,9,0) 55%),
  linear-gradient(180deg,rgba(6,5,9,.6) 0%,rgba(6,5,9,0) 14%,rgba(6,5,9,0) 52%,rgba(6,5,9,.85) 88%,var(--bg) 100%)!important}
.hbase{position:absolute;z-index:4;left:var(--pad);right:var(--pad);bottom:76px;display:flex;justify-content:space-between;align-items:flex-end;gap:40px;transition:opacity 1s 1s,transform 1.2s 1s var(--ease)}
html.asleep .hbase{opacity:0;transform:translateY(24px)}
.hcopy{max-width:600px}
.htitle{margin:14px 0 14px;font-family:var(--f-d);text-transform:uppercase;letter-spacing:-.03em;line-height:1.02;font-size:clamp(30px,3.5vw,56px)}
.htitle span{display:block}
.htitle .thin{font-weight:200;color:var(--ink2)}
.htitle .bold{font-weight:800}
.hcopy .hero-sub{font-size:15px;color:var(--ink2);opacity:.82;max-width:470px}
.hcopy .ctas{margin-top:22px}
.hplate{width:320px;padding:16px}
.hplate .plate-n{display:none}
.hplate .plate-btns{margin-top:12px}
.hfacts{position:absolute;z-index:4;left:var(--pad);right:var(--pad);bottom:22px;transition:opacity 1s 1.3s}
html.asleep .hfacts{opacity:0}
.mark{display:none}
/* layar laptop pendek: rapatkan */
@media (min-width:901px) and (max-height:820px){
  .htitle{font-size:clamp(28px,3vw,44px);margin:10px 0}
  .hcopy .hero-sub{font-size:14px}
  .hcopy .ctas{margin-top:16px}
  .btn.lg{height:48px}
  .hbase{bottom:64px}
  .hplate{width:300px;padding:14px}
}
@media (max-width:900px){
  .hero{min-height:0}
  .hero video.hero-film{position:relative;height:58svh;display:block}
  .hero-veil{background:linear-gradient(180deg,rgba(6,5,9,.55) 0%,rgba(6,5,9,0) 16%,rgba(6,5,9,0) 40%,var(--bg) 58svh)!important}
  .hbase{position:relative;left:auto;right:auto;bottom:auto;flex-direction:column;align-items:stretch;padding:0 16px;margin-top:-18vw;gap:26px}
  .hplate{width:100%}
  .hfacts{position:relative;left:auto;right:auto;bottom:auto;margin:26px 16px 0;flex-wrap:wrap;gap:10px 22px}
}
.hero .side-r{top:34%}
@media (min-width:901px) and (max-height:820px){.hero .side-r{top:30%}}

/* ---------- tipografi Cinzel: serif tajam sekeluarga dengan logo ---------- */
.h1,.h2,.htitle,.st-t,h3,.le-t,.plate-t{letter-spacing:.015em!important}
.thin,.htitle .thin,.st-t .thin{font-weight:400!important;color:var(--ink2)}
.bold,.htitle .bold,.st-t .bold{font-weight:800!important}
.htitle{font-size:clamp(30px,3.4vw,54px);line-height:1.08}
.st-t{font-size:clamp(26px,2.6vw,42px);line-height:1.08}
.mani-text{font-weight:400!important;letter-spacing:.01em!important;line-height:1.32}
.faq-list summary{font-weight:600!important;letter-spacing:.02em}
.tax b,.st-tax b,.s-pct,.score{font-weight:700;letter-spacing:0}

/* footer: wordmark asli lewat mask (batalkan background-clip:text bawaan .aperture span) */
.aperture .ap-word{-webkit-background-clip:border-box!important;background-clip:border-box!important;color:initial}
/* manifesto babak I: rata kiri, tidak menimpa pilar cahaya */
#rise .act-center{align-items:flex-start;text-align:left}
#rise .act-center .act-label{justify-content:flex-start}
#rise .mani-text{max-width:min(620px,52vw);font-size:clamp(22px,2.3vw,36px);text-shadow:0 2px 24px rgba(3,2,6,.95),0 0 60px rgba(3,2,6,.8)}
#rise .act-pin::before{content:"";position:absolute;inset:0;z-index:0;pointer-events:none;background:linear-gradient(90deg,rgba(6,5,9,.82) 0%,rgba(6,5,9,.45) 38%,rgba(6,5,9,0) 60%)}
@media (max-width:900px){#rise .mani-text{max-width:100%;font-size:22px}#rise .act-pin::before{background:linear-gradient(180deg,rgba(6,5,9,.2),rgba(6,5,9,.75))}}