/* ════════════════════════════════════════════════════════════════════
   CELESTIAL DROP — styles.css
   Mobile-first. Taat kontrak skill scroll-scrub:
   · TIDAK ada overflow:hidden/auto/scroll di html/body/ancestor stage
   · .stage sticky 100svh; .track lebih tinggi; konten bawah opaque
   ════════════════════════════════════════════════════════════════════ */

:root {
  --bg0:      #0b0812;   /* twilight deep          */
  --bg1:      #120d1e;
  --ink:      #f1e7d4;
  --ink-dim:  rgba(241, 231, 212, .66);
  --ink-faint:rgba(241, 231, 212, .42);
  --gold:     #e2b04f;
  --gold-soft:#f4d491;
  --gold-deep:#c9862c;
  --violet:   #6f5fd0;
  --line:     rgba(241, 231, 212, .14);
  --serif: "Cormorant Garamond", "Times New Roman", Georgia, serif;
  --sans:  -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --ease:  cubic-bezier(.22, .61, .21, 1);
}

* { box-sizing: border-box; margin: 0; padding: 0; }

html { scroll-behavior: auto; }          /* jangan smooth — lawan easing engine */

body {
  background: var(--bg0);
  color: var(--ink);
  font-family: var(--sans);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

img, svg, canvas { display: block; max-width: 100%; }
a { color: inherit; }

/* ══════════════ SCRUB STAGE ══════════════ */

.track {
  position: relative;
  height: 420vh;            /* ← durasi scrub. Tuning rasa di sini. */
  width: 100%;
}

.stage {
  position: sticky;
  top: 0;
  /* SKILL §10 — unit tinggi stage.
     Hero ini full-bleed di puncak dokumen = "latar belakang penuh".
     Kalau stage cuma 100svh, saat URL bar menyusut viewport membesar
     (→lvh) dan muncul GAP HITAM di bawah film (area track transparan).
     SKILL: "lvh (largest) menjamin tidak ada celah saat URL bar
     menyusut — penting untuk latar belakang penuh."  Maka: lvh.
     (dvh tidak dipakai — memicu resize berulang / denyut.)
     Fallback: vh → svh → lvh. */
  height: 100vh;   /* fallback browser lama */
  height: 100svh;  /* fallback browser tanpa dukungan lvh */
  height: 100lvh;  /* memastikan film selalu menutup penuh → tanpa gap bawah */
  width: 100%;
  overflow: hidden;         /* clip aman DI stage sendiri (bukan ancestor) */
  background: var(--bg0);
}

/* SKILL §10 — "kanvas berdenyut saat URL bar menyusut":
   engine menulis px viewport ke canvas.style (getLiveSize), sedangkan
   stage memakai svh. Kalau kanvas dibiarkan mengikuti px itu, ukuran &
   crop-nya berubah tiap langkah URL bar → denyut.
   Solusi: ikat kotak tampilan canvas ke kotak stage (svh, stabil) dgn
   !important — engine tetap mengelola buffer & gambar internalnya,
   browser menskalakan buffer ke kotak stage yang tidak berubah. */
#film-canvas {
  position: absolute;
  inset: 0;
  width: 100% !important;
  height: 100% !important;
  /* Buffer internal engine mengikuti px viewport (getLiveSize) dan bisa
     berubah sesaat saat URL bar menyusut (visualViewport.resize beruntun).
     object-fit: cover memastikan buffer di-crop ke kotak stage yang
     stabil — bukan diregangkan — sehingga tak ada denyut/gembung. */
  object-fit: cover;
}

.poster {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 1;
  transition: opacity .7s var(--ease);
  z-index: 1;
  pointer-events: none;   /* non-interaktif: jangan menelan scroll (SKILL §10) */
}
.poster.done { opacity: 0; pointer-events: none; }

/* scrim — legibilitas teks di atas film */
.scrim { position: absolute; left: 0; right: 0; pointer-events: none; z-index: 2; }
.scrim.top {
  top: 0; height: 22%;
  background: linear-gradient(180deg, rgba(6,4,10,.55), rgba(6,4,10,0));
}
.scrim.bottom {
  bottom: 0; height: 34%;
  background: linear-gradient(0deg, rgba(6,4,10,.66), rgba(6,4,10,0));
}

/* debu cahaya — terlihat menjelang "nightfall" */
.fx {
  position: absolute; inset: 0; z-index: 2;
  pointer-events: none;
  opacity: 0;
  background-image:
    radial-gradient(1.4px 1.4px at 18% 22%, rgba(255,233,184,.9), transparent 55%),
    radial-gradient(1px 1px at 32% 12%, rgba(255,233,184,.7), transparent 55%),
    radial-gradient(1.6px 1.6px at 66% 18%, rgba(244,212,145,.9), transparent 55%),
    radial-gradient(1px 1px at 84% 30%, rgba(255,233,184,.6), transparent 55%),
    radial-gradient(1.3px 1.3px at 26% 38%, rgba(244,212,145,.75), transparent 55%),
    radial-gradient(1px 1px at 72% 42%, rgba(255,233,184,.65), transparent 55%),
    radial-gradient(1.4px 1.4px at 46% 26%, rgba(255,255,255,.55), transparent 60%),
    radial-gradient(1px 1px at 88% 60%, rgba(255,233,184,.5), transparent 55%);
  background-repeat: no-repeat;
  transition: opacity 1s ease;
}
.stage.chapB .fx { opacity: .9; }

/* overlay teks */
.overlay {
  position: absolute;
  top: 0; left: 0; right: 0;
  z-index: 3;
  /* Stage kini 100lvh (agar tanpa gap bawah saat URL bar menyusut).
     Overlay teks tetap di-anchor ke AREA TERLIHAT = 100svh dari atas,
     supaya elemen bawah (babak, scroll-cue) tidak ikut turun ke area
     yang hanya terlihat setelah URL bar menyusut. */
  height: 100vh;   /* fallback browser lama */
  height: 100svh;
  pointer-events: none;
  display: flex; flex-direction: column;
  align-items: center;
  padding: calc(env(safe-area-inset-top, 0px) + 22px) 22px calc(env(safe-area-inset-bottom, 0px) + 34px) 22px;
}
/* Gelap tipis di belakang zona teks — biar teks terbaca di atas video
   keemasan yang terang (masalah kontras, bukan opacity). */
.brand {
  font-family: var(--serif);
  font-weight: 500;
  font-size: clamp(17px, 4.6vw, 22px);
  letter-spacing: .34em;
  text-transform: uppercase;
  color: var(--gold-soft);
  text-shadow: 0 1px 6px rgba(0,0,0,.85), 0 2px 18px rgba(0,0,0,.6);
}
.brand::after {
  content: ""; display: block;
  width: 46px; height: 1px;
  margin: 9px auto 0;
  background: linear-gradient(90deg, transparent, var(--gold), transparent);
}

.hero {
  margin-top: clamp(34px, 11vh, 96px);    /* fallback browser lama */
  text-align: center;
  will-change: opacity, transform;
}
@supports (height: 1svh) {
  .hero { margin-top: clamp(34px, 11svh, 96px); }  /* svh: stabil saat URL bar menyusut */
}
.eyebrow {
  font-size: 10.5px;
  letter-spacing: .42em;
  text-transform: uppercase;
  color: var(--gold-soft);
}
.hero .eyebrow {
  color: #ffe6ae;
  text-shadow: 0 1px 4px rgba(0,0,0,.9), 0 0 16px rgba(0,0,0,.55);
}

.hero h1 {
  margin-top: 16px;
  font-family: var(--serif);
  font-weight: 500;
  font-size: clamp(40px, 11.6vw, 62px);
  line-height: 1.04;
  text-shadow: 0 1px 3px rgba(0,0,0,.6), 0 2px 14px rgba(0,0,0,.45);
}
.grad {
  background: linear-gradient(180deg, #ffe9b8, var(--gold-deep));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  filter: drop-shadow(0 1px 2px rgba(0,0,0,.4));
}
.hero .sub {
  margin-top: 18px;
  font-family: var(--serif);
  font-style: italic;
  font-size: clamp(16px, 4.6vw, 20px);
  color: #f6eeda;
  line-height: 1.4;
  text-shadow: 0 1px 4px rgba(0,0,0,.85), 0 0 18px rgba(0,0,0,.5);
}

/* label babak */
.chapter {
  position: absolute;
  bottom: calc(env(safe-area-inset-bottom, 0px) + 27%);
  left: 0; right: 0;
  text-align: center;
  opacity: 0;
  will-change: opacity, transform;
}
.chapter .ch-no {
  display: block;
  font-family: var(--serif);
  font-size: 15px;
  letter-spacing: .5em;
  color: #ffd98f;
  margin-bottom: 10px;
  text-shadow: 0 1px 6px rgba(0,0,0,.85);
}
.chapter > span:not(.ch-no) {
  display: block;
  font-size: clamp(19px, 5.2vw, 26px);
  font-family: var(--serif);
  font-weight: 500;
  letter-spacing: .22em;
  text-transform: uppercase;
  text-shadow: 0 1px 5px rgba(0,0,0,.9), 0 3px 20px rgba(0,0,0,.6);
}
.chapter .ch-en {
  margin-top: 6px;
  font-size: clamp(11px, 3vw, 13px);
  letter-spacing: .34em;
  text-transform: uppercase;
  color: rgba(241,231,212,.8);
  text-shadow: 0 1px 5px rgba(0,0,0,.9);
}

/* isyarat gulir */
.scrollcue {
  margin-top: auto;
  text-align: center;
  color: var(--ink-dim);
  text-shadow: 0 1px 10px rgba(0,0,0,.6);
}
.scrollcue span { display: block; font-size: 11px; letter-spacing: .3em; text-transform: uppercase; }
.scrollcue .cue-en { color: var(--ink-faint); letter-spacing: .26em; margin-top: 3px; }
.scrollcue svg {
  width: 26px; height: 26px;
  margin: 14px auto 0;
  animation: bob 2.2s ease-in-out infinite;
}
@keyframes bob {
  0%, 100% { transform: translateY(0); opacity: .9; }
  50%      { transform: translateY(9px); opacity: .45; }
}

/* preload pill */
.preload {
  position: fixed;                /* dasar VIEWPORT, bukan stage (yg kini lvh) */
  left: 16px; bottom: calc(env(safe-area-inset-bottom,0px) + 16px);
  z-index: 40;
  display: flex; align-items: center; gap: 8px;
  font-size: 11px; letter-spacing: .14em; text-transform: uppercase;
  color: var(--ink-faint);
  transition: opacity .8s ease;
  pointer-events: none;   /* status, bukan kontrol — jangan menelan scroll */
}
.preload.hide { opacity: 0; }
.preload-dot {
  width: 7px; height: 7px; border-radius: 50%;
  background: var(--gold);
  animation: pulse 1.1s ease-in-out infinite;
}
@keyframes pulse { 0%,100% { opacity:.25; transform: scale(.85);} 50% { opacity:1; transform: scale(1.1);} }

/* garis progres scrub */
.progress {
  position: fixed;               /* dasar VIEWPORT, bukan stage (yg kini lvh) */
  left: 0; right: 0; bottom: 0;
  height: 2px; z-index: 40;
  background: rgba(241,231,212,.10);
  pointer-events: none;          /* visual saja */
  opacity: 0;                    /* dinyalakan onFrame selama fase scrub */
  transition: opacity .4s ease;
}
.progress i {
  display: block; height: 100%; width: 0%;
  background: linear-gradient(90deg, var(--gold-deep), var(--gold-soft));
  box-shadow: 0 0 10px rgba(226,176,79,.7);
}

/* ══════════════ KONTEN BAWAH (opaque, z-index ↑) ══════════════ */

.page {
  position: relative;
  z-index: 10;                          /* WAJIB: di atas kanvas yang sticky */
  isolation: isolate;                   /* kunci stacking context konten */
  background: #0b0812;                  /* fallback literal (opaque) */
  background: var(--bg0);               /* opaque — kanvas tidak tembus */
}

.section { position: relative; }
.wrap {
  width: 100%;
  max-width: 560px;
  margin: 0 auto;
  padding: clamp(64px, 15vh, 120px) 24px;
}

/* latar halus per section */
.manifesto { background: radial-gradient(120% 60% at 50% -10%, #1b1430 0%, var(--bg0) 62%); }
.ritual    { background: var(--bg0); }
.lineup    { background: radial-gradient(140% 70% at 50% 115%, #241636 0%, var(--bg0) 60%); }
.cta       { background: var(--bg0); }

.eyebrow { text-align: center; }
.eyebrow.center { margin-bottom: 26px; }
.eyebrow .sep { margin: 0 .55em; color: var(--ink-faint); }

.bigline {
  text-align: center;
  font-family: var(--serif);
  font-weight: 500;
}
.bigline .q {
  display: block;
  font-size: clamp(26px, 6.8vw, 40px);
  line-height: 1.22;
}
.bigline .q .grad-i {
  font-style: italic;
  background: linear-gradient(180deg, #ffe9b8, var(--gold-deep));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.bigline .q-en {
  display: block;
  margin-top: 18px;
  font-size: clamp(15px, 4vw, 18px);
  font-style: italic;
  color: var(--ink-dim);
}

.lede {
  margin-top: 30px;
  text-align: center;
  color: var(--ink-dim);
  font-size: 15px;
  max-width: 44ch;
  margin-left: auto; margin-right: auto;
}
.lede-en { color: var(--ink-faint); font-size: 13.5px; }

.section-title {
  text-align: center;
  font-family: var(--serif);
  font-weight: 500;
  font-size: clamp(27px, 7.2vw, 42px);
  line-height: 1.18;
  margin-bottom: clamp(34px, 7vh, 54px);
}
.section-title-en {
  display: block;
  margin-top: 14px;
  font-style: italic;
  font-size: clamp(14px, 4vw, 17px);
  color: var(--ink-dim);
  font-weight: 400;
}

/* ritual steps */
.steps { list-style: none; display: grid; gap: 14px; }
.step {
  position: relative;
  padding: 24px 24px 24px 78px;
  border: 1px solid var(--line);
  border-radius: 18px;
  background: linear-gradient(160deg, rgba(255,255,255,.045), rgba(255,255,255,.012));
}
.step-no {
  position: absolute; left: 22px; top: 22px;
  width: 40px; height: 40px;
  display: grid; place-items: center;
  border: 1px solid rgba(226,176,79,.5);
  border-radius: 50%;
  font-family: var(--serif);
  font-size: 17px; color: var(--gold);
  box-shadow: inset 0 0 14px rgba(226,176,79,.12);
}
.step h3 {
  font-family: var(--serif);
  font-weight: 500;
  font-size: 21px;
  letter-spacing: .02em;
}
.step h3 em {
  display: block;
  font-style: italic;
  font-size: 12px;
  letter-spacing: .3em;
  text-transform: uppercase;
  color: var(--gold);
  margin-top: 4px;
}
.step p { margin-top: 8px; font-size: 14px; color: var(--ink-dim); }
.step p.en { margin-top: 2px; color: var(--ink-faint); font-size: 12.5px; }

/* lineup cards */
.cards { display: grid; gap: 16px; }
.card {
  display: grid;
  grid-template-columns: 84px minmax(0, 1fr);
  gap: 18px;
  align-items: start;
  padding: 20px;
  border: 1px solid var(--line);
  border-radius: 18px;
  background: linear-gradient(165deg, rgba(255,255,255,.05), rgba(255,255,255,.01));
}
.drop { width: 76px; height: 76px; }
.drop svg { width: 100%; height: 100%; filter: drop-shadow(0 8px 16px rgba(0,0,0,.35)); }
.card-body { display: flex; flex-direction: column; gap: 8px; min-width: 0; }
.card h3 {
  font-family: var(--serif);
  font-weight: 600;
  font-size: 20px;
  line-height: 1.2;
  letter-spacing: .01em;
}
.card p { font-size: 13.5px; color: var(--ink-dim); }
.card p.en { color: var(--ink-faint); font-size: 12.5px; }
.card .tag {
  align-self: flex-start;
  margin-top: 2px;
  font-size: 10px;
  letter-spacing: .28em;
  text-transform: uppercase;
  color: var(--gold);
  border: 1px solid rgba(226,176,79,.4);
  border-radius: 999px;
  padding: 4px 10px;
}
.tiny-note { margin-top: 18px; text-align: center; font-size: 11px; color: var(--ink-faint); }

/* CTA */
.cta-card {
  border: 1px solid var(--line);
  border-radius: 26px;
  padding: clamp(28px, 8vw, 52px) clamp(20px, 6vw, 44px);
  text-align: center;
  background:
    radial-gradient(120% 90% at 50% 0%, rgba(226,176,79,.16), transparent 60%),
    linear-gradient(170deg, #171126, #0d0916);
}
.join { margin-top: 8px; display: grid; gap: 10px; }
.join input {
  width: 100%;
  padding: 16px 18px;
  border-radius: 999px;
  border: 1px solid rgba(241,231,212,.2);
  background: rgba(11,8,18,.7);
  color: var(--ink);
  font: 400 15px/1 var(--sans);
  outline: none;
  text-align: center;
}
.join input::placeholder { color: var(--ink-faint); }
.join input:focus { border-color: var(--gold); box-shadow: 0 0 0 3px rgba(226,176,79,.18); }
.join button {
  cursor: pointer;
  border: 0;
  border-radius: 999px;
  padding: 16px 20px;
  font: 600 13px/1 var(--sans);
  letter-spacing: .2em;
  text-transform: uppercase;
  color: #241505;
  background: linear-gradient(180deg, var(--gold-soft), var(--gold-deep));
  box-shadow: 0 10px 26px rgba(217,150,47,.28);
  transition: transform .25s var(--ease), box-shadow .25s var(--ease);
}
.join button:hover { transform: translateY(-2px); box-shadow: 0 14px 32px rgba(217,150,47,.4); }
.join button:active { transform: translateY(0); }

.form-ok { margin-top: 16px; font-size: 13.5px; color: var(--gold-soft); font-family: var(--serif); font-style: italic; }

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

/* footer */
.footer {
  border-top: 1px solid var(--line);
  background: #08050d;
  text-align: center;
}
.footer .wrap { padding-top: 48px; padding-bottom: calc(env(safe-area-inset-bottom,0px) + 40px); }
.brand-lg {
  font-family: var(--serif);
  font-size: 24px;
  letter-spacing: .32em;
  text-transform: uppercase;
  color: var(--gold-soft);
}
.foot-tag { margin-top: 8px; font-family: var(--serif); font-style: italic; color: var(--ink-dim); }
.social { list-style: none; display: flex; justify-content: center; gap: 22px; margin-top: 22px; }
.social a {
  font-size: 12px;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--ink-faint);
  text-decoration: none;
  border-bottom: 1px solid transparent;
  transition: color .2s ease, border-color .2s ease;
}
.social a:hover { color: var(--gold-soft); border-color: var(--gold); }
.foot-meta { margin-top: 26px; font-size: 11px; color: var(--ink-faint); }

/* reveal saat scroll (hanya di bawah film) */
.reveal {
  opacity: 0;
  transform: translateY(22px);
  transition: opacity .9s var(--ease), transform .9s var(--ease);
}
.reveal.in { opacity: 1; transform: none; }

/* desktop: mode contain berarti ada pillarbox — lebar konten tetap nyaman */
@media (min-width: 1024px) {
  .wrap { max-width: 640px; }
  .steps { grid-template-columns: repeat(3, 1fr); gap: 18px; }
  .step { padding: 26px 20px 26px 20px; text-align: center; }
  .step-no { position: static; margin: 0 auto 14px; }
  .cards { grid-template-columns: repeat(3, 1fr); gap: 18px; align-items: stretch; }
  .card { grid-template-columns: 1fr; justify-items: center; text-align: center; }
  .card-body { align-items: center; }
  .card-body h3, .card-body p { text-align: center; }
  .join { grid-template-columns: 1fr auto; }
}

/* aksesibilitas — SKILL Prinsip 10: blok global yang diwajibkan skill.
   Mematikan SEMUA animasi & transisi, bukan hanya yang dekoratif. */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .01ms !important;
    transition-duration: .01ms !important;
    animation-iteration-count: 1 !important;
  }
  .scrollcue svg, .preload-dot { animation: none; }
  /* konten tetap muncul (tanpa slide), poster tanpa fade panjang */
  .reveal { opacity: 1 !important; transform: none !important; }
}