/* ===================================================================
   Cerulean Chic — mobile-first landing
   =================================================================== */
:root{
  --teal-950:#072630;
  --teal-900:#0a3240;
  --teal-800:#0e4253;
  --teal-700:#104f63;
  --teal-600:#1f6f8b;
  --teal-400:#3f94ad;
  --gold:#c9a86a;
  --gold-soft:#e3cd9f;
  --ink:#f4f8f9;
  --ink-dim:#c6d6dc;
  --serif:"Cormorant Garamond", "Times New Roman", serif;
  --sans:"Jost", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --ease:cubic-bezier(.22,.61,.36,1);
}

*{ box-sizing:border-box; margin:0; padding:0; -webkit-tap-highlight-color:transparent; }

html,body{
  background:var(--teal-950);
  color:var(--ink);
  font-family:var(--sans);
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
  overscroll-behavior:none;
}
body{
  /* scroll driver */
  min-height:500vh;
  line-height:1.55;
  overflow-x:hidden;
}
body.is-locked{ overflow:hidden; }

/* ================= CANVAS STAGE (Layer 1) ================= */
#stage{
  position:fixed;
  top:0; left:0;
  width:100vw;
  height:100lvh; min-height:100lvh;
  z-index:1;
  pointer-events:none;
  background:
    radial-gradient(120% 90% at 50% 0%, var(--teal-700,#104f63) 0%, var(--teal-800) 34%, var(--teal-900) 62%, var(--teal-950) 100%);
  overflow:hidden;
}
#scroll-canvas{
  position:absolute; top:0; left:0;
  width:100%; height:100%;
  display:block;
}
/* vignette over canvas for text legibility */
.vignette{
  position:absolute; inset:0;
  background:
    radial-gradient(115% 70% at 50% 42%, rgba(0,0,0,0) 55%, rgba(4,18,24,.42) 100%);
}
/* continuous fixed legibility scrim — never banded, so no seam lines */
#stage::after{
  content:""; position:absolute; inset:0; pointer-events:none;
  background:linear-gradient(to bottom,
    rgba(4,18,24,.60) 0%,
    rgba(4,18,24,.20) 16%,
    rgba(4,18,24,0)   34%,
    rgba(4,18,24,0)   62%,
    rgba(4,18,24,.26) 80%,
    rgba(4,18,24,.74) 100%);
}

/* ================= PRELOADER ================= */
#preloader{
  position:fixed; inset:0; z-index:60;
  display:flex; align-items:center; justify-content:center;
  background:
    radial-gradient(120% 90% at 50% 30%, var(--teal-800) 0%, var(--teal-900) 55%, var(--teal-950) 100%);
  transition:opacity .6s var(--ease), visibility .6s;
}
#preloader.gone{ opacity:0; visibility:hidden; }
.pre-inner{ text-align:center; padding:0 24px; }
.pre-mark{
  font-family:var(--serif); font-weight:500;
  font-size:clamp(30px,9vw,46px); letter-spacing:.02em; line-height:1.1;
}
.pre-mark em{ font-style:italic; color:var(--gold-soft); }
.pre-bar{
  width:min(220px,60vw); height:2px; margin:26px auto 16px;
  background:rgba(255,255,255,.16); border-radius:2px; overflow:hidden;
}
#pre-fill{ display:block; height:100%; width:0%; background:linear-gradient(90deg,var(--teal-400),var(--gold)); transition:width .3s; }
.pre-hint{ font-size:12px; letter-spacing:.22em; text-transform:uppercase; color:var(--ink-dim); }

/* streaming progress (post-preloader) */
#stream-bar{
  position:fixed; top:0; left:0; right:0; height:2px; z-index:40;
  background:transparent; pointer-events:none;
}
#stream-fill{ display:block; height:100%; width:0%; background:linear-gradient(90deg,var(--teal-400),var(--gold)); opacity:.85; transition:width .25s; }
#stream-bar.done{ opacity:0; transition:opacity .6s; }

/* ================= OVERLAY / CONTENT ================= */
#overlay{
  position:relative; z-index:10;
  pointer-events:none;            /* whole overlay non-blocking */
}
/* every scene = full viewport beat, content anchored within */
.scene{
  position:relative;
  min-height:100lvh;
  display:flex;
  align-items:center;
  padding:clamp(72px,12vh,120px) clamp(20px,6vw,48px)
           calc(92px + env(safe-area-inset-bottom));
}
.align-center{ justify-content:center; text-align:center; }
.align-top{ justify-content:flex-start; text-align:left; align-items:flex-start; padding-top:clamp(96px,16vh,150px); }

/* per-scene banded scrims removed — replaced by the continuous fixed
   scrim on #stage (no mid-screen seams). Kept classes as inert hooks. */
.scrim-top::before,
.scrim-bottom::before,
#footer::before{ content:none; }

.card{
  max-width:560px;
  width:100%;
  position:relative;
}
.card--pad{
  background:linear-gradient(160deg, rgba(9,38,48,.46), rgba(9,38,48,.20));
  border:1px solid rgba(201,168,106,.24);
  border-radius:18px;
  padding:clamp(24px,6vw,40px);
  /* glass panel: the scroll-jank root cause was frame decoding (now fixed
     by off-thread decode + idle pre-decode), so blur is smooth again */
  backdrop-filter:blur(7px) saturate(1.08);
  -webkit-backdrop-filter:blur(7px) saturate(1.08);
  box-shadow:0 18px 50px -30px rgba(0,0,0,.75);
  transform:translateZ(0); /* promote to its own layer */
}

/* ================= TYPOGRAPHY ================= */
.eyebrow{
  font-size:clamp(11px,3.2vw,13px);
  letter-spacing:.34em; text-transform:uppercase;
  color:var(--gold-soft); font-weight:400; margin-bottom:18px;
}
.wordmark{
  font-family:var(--serif); font-weight:500;
  font-size:clamp(46px,13vw,92px);
  line-height:.98; letter-spacing:.01em;
}
.wordmark em{ font-style:italic; color:var(--gold-soft); }
.wordmark--sm{ font-size:clamp(30px,7vw,44px); }
.tagline{
  font-family:var(--serif); font-style:italic; font-weight:300;
  font-size:clamp(20px,5.4vw,30px); color:var(--ink-dim);
  margin-top:14px; letter-spacing:.02em;
}
.tagline--sm{ font-size:clamp(15px,4vw,20px); margin-top:8px; }
.lede{
  margin:22px auto 0; max-width:40ch;
  font-size:clamp(15px,4vw,18px); font-weight:300; color:var(--ink-dim);
}
h2{
  font-family:var(--serif); font-weight:500;
  font-size:clamp(34px,9.5vw,58px); line-height:1.04; margin-bottom:20px;
}
h2 em{ font-style:italic; color:var(--gold-soft); }
h3{ font-family:var(--serif); font-weight:600; font-size:clamp(26px,7vw,34px); margin-bottom:18px; }
.body{ font-size:clamp(15px,4.2vw,17.5px); font-weight:300; color:var(--ink); margin-bottom:16px; }
.body strong{ color:var(--gold-soft); font-weight:500; }
.quote{
  font-family:var(--serif); font-style:italic; font-weight:400;
  font-size:clamp(18px,5vw,23px); color:var(--gold-soft);
  border-left:2px solid rgba(201,168,106,.5); padding-left:16px; margin-top:22px;
}

/* moments list */
.moments{ list-style:none; margin:6px auto 0; max-width:440px; text-align:left; }
.moments li{
  display:grid; grid-template-columns:auto 1fr; gap:4px 16px;
  padding:14px 0; border-bottom:1px solid rgba(255,255,255,.10); align-items:baseline;
}
.moments li:last-child{ border-bottom:0; }
.m-key{
  font-family:var(--serif); font-style:italic; font-weight:500;
  font-size:clamp(18px,5vw,22px); color:var(--gold-soft); white-space:nowrap;
}
.m-val{ font-size:clamp(13.5px,3.7vw,15.5px); font-weight:300; color:var(--ink-dim); }

/* features (Mengapa Cerulean) */
.features{ list-style:none; margin-top:4px; text-align:left; }
.features li{ display:grid; gap:4px; padding:13px 0; border-bottom:1px solid rgba(255,255,255,.10); }
.features li:last-child{ border-bottom:0; }
.f-title{ font-family:var(--serif); font-style:italic; font-weight:600; font-size:clamp(19px,5.4vw,23px); color:var(--gold-soft); }
.f-body{ font-size:clamp(13.5px,3.8vw,15.5px); font-weight:300; color:var(--ink-dim); }

/* catalog grid (Katalog Gaun) */
.card--catalog{ padding:clamp(20px,5vw,30px); }
.card--catalog h2{ margin-bottom:16px; }
.katalog-grid{
  display:grid; grid-template-columns:1fr 1fr;
  gap:clamp(10px,2.6vw,14px);
}
.dress{
  position:relative; margin:0; border-radius:13px; overflow:hidden;
  border:1px solid rgba(201,168,106,.22);
  aspect-ratio:3 / 4; background:var(--teal-900);
  box-shadow:0 14px 30px -20px rgba(0,0,0,.8);
}
.dress img{
  width:100%; height:100%; object-fit:cover; display:block;
  transition:transform .6s var(--ease);
}
.dress::after{
  content:""; position:absolute; inset:0; pointer-events:none;
  background:linear-gradient(to top, rgba(4,16,22,.82) 0%, rgba(4,16,22,.12) 42%, rgba(4,16,22,0) 62%);
}
.dress figcaption{
  position:absolute; left:0; right:0; bottom:0; z-index:1;
  padding:10px 11px 11px; text-align:left;
}
.d-name{
  display:block; font-family:var(--serif); font-style:italic; font-weight:600;
  font-size:clamp(16px,4.6vw,20px); color:var(--gold-soft); line-height:1.1;
}
.d-tag{ display:block; font-size:clamp(10px,2.8vw,11.5px); font-weight:300; color:var(--ink-dim); margin-top:2px; letter-spacing:.02em; }

/* steps (Cara Booking) */
.steps{ list-style:none; margin:4px 0 22px; text-align:left; counter-reset:step; }
.steps li{ display:flex; gap:16px; align-items:flex-start; padding:14px 0; border-bottom:1px solid rgba(255,255,255,.10); }
.steps li:last-child{ border-bottom:0; }
.steps li > div{ display:grid; gap:3px; }
.step-n{
  flex:0 0 auto; width:34px; height:34px; border-radius:50%;
  display:flex; align-items:center; justify-content:center;
  font-family:var(--serif); font-style:italic; font-weight:600; font-size:18px;
  color:#1a2b30; background:linear-gradient(135deg,var(--gold-soft),var(--gold));
  box-shadow:0 8px 20px -8px rgba(201,168,106,.7);
}

/* scroll cue */
.scroll-cue{ margin-top:clamp(40px,9vh,74px); display:flex; flex-direction:column; align-items:center; gap:12px; }
.scroll-cue span:first-child{
  font-size:11px; letter-spacing:.28em; text-transform:uppercase; color:var(--ink-dim);
}
.cue-line{ width:1px; height:42px; background:linear-gradient(var(--gold), transparent); animation:cue 2s var(--ease) infinite; transform-origin:top; }
@keyframes cue{ 0%{transform:scaleY(0);opacity:0} 35%{opacity:1} 100%{transform:scaleY(1);opacity:0} }

/* buttons — interactive (re-enable pointer events) */
.btn{
  font-family:var(--sans); font-weight:500; cursor:pointer;
  pointer-events:auto;
  border:none; border-radius:999px;
  padding:16px 34px; font-size:15px; letter-spacing:.04em;
  transition:transform .25s var(--ease), box-shadow .25s, background .25s;
}
.btn--gold{
  color:#1a2b30;
  background:linear-gradient(135deg, var(--gold-soft), var(--gold) 60%, #b3914f);
  box-shadow:0 14px 34px -12px rgba(201,168,106,.7);
  margin-top:6px;
}
.btn--gold:hover{ transform:translateY(-2px); box-shadow:0 20px 42px -14px rgba(201,168,106,.85); }
.btn--gold:active{ transform:translateY(0) scale(.98); }
.btn--block{ width:100%; margin-top:8px; }
.micro{ margin-top:16px; font-size:12px; letter-spacing:.06em; color:var(--ink-dim); font-weight:300; }

/* footer — full viewport so its scrim junction never lands mid-screen */
.scene--footer{ min-height:100lvh; align-items:center; justify-content:center; padding-top:clamp(90px,14vh,140px); padding-bottom:calc(46px + env(safe-area-inset-bottom)); }
.foot{ max-width:520px; margin:0 auto; position:relative; }
/* soft radial legibility halo behind footer text (fades radially -> no seam) */
.foot::before{
  content:""; position:absolute; z-index:-1;
  inset:-48px -70px; border-radius:50%;
  background:radial-gradient(ellipse 60% 62% at 50% 50%,
    rgba(4,16,22,.66) 0%, rgba(4,16,22,.34) 52%, rgba(4,16,22,0) 74%);
}
.socials{ margin:26px 0 6px; display:flex; gap:14px; justify-content:center; align-items:center; flex-wrap:wrap; }
.socials a{
  pointer-events:auto; color:var(--ink-dim); text-decoration:none;
  font-size:13px; letter-spacing:.14em; text-transform:uppercase;
  border-bottom:1px solid transparent; transition:color .2s,border-color .2s;
}
.socials a:hover{ color:var(--gold-soft); border-color:var(--gold); }
.socials .dot{ width:3px; height:3px; border-radius:50%; background:rgba(255,255,255,.35); }

/* reveal on scroll */
.reveal{ opacity:0; transform:translateY(28px); transition:opacity .9s var(--ease), transform .9s var(--ease); }
.reveal.in{ opacity:1; transform:none; }

/* ================= BOOKING MODAL ================= */
.modal{
  position:fixed; inset:0; z-index:80;
  display:flex; align-items:center; justify-content:center; padding:20px;
  visibility:hidden; opacity:0; transition:opacity .3s var(--ease), visibility .3s;
  pointer-events:none;
}
.modal.open{ visibility:visible; opacity:1; pointer-events:auto; }
.modal-backdrop{ position:absolute; inset:0; background:rgba(3,14,19,.62); backdrop-filter:blur(3px); }
.modal-card{
  position:relative; width:100%; max-width:420px;
  background:linear-gradient(170deg, var(--teal-800), var(--teal-900));
  border:1px solid rgba(201,168,106,.3);
  border-radius:20px; padding:clamp(26px,7vw,36px);
  box-shadow:0 40px 90px -30px rgba(0,0,0,.85);
  transform:translateY(16px) scale(.98); transition:transform .35s var(--ease);
}
.modal.open .modal-card{ transform:none; }
.modal-x{
  position:absolute; top:10px; right:14px; background:none; border:none;
  color:var(--ink-dim); font-size:30px; line-height:1; cursor:pointer; pointer-events:auto;
}
.modal label{ display:block; font-size:12.5px; letter-spacing:.08em; text-transform:uppercase; color:var(--ink-dim); margin:14px 0 6px; }
.modal input, .modal select{
  width:100%; padding:13px 14px; font-size:16px; /* 16px prevents iOS zoom */
  font-family:var(--sans); color:var(--ink);
  background:rgba(5,22,29,.6); border:1px solid rgba(255,255,255,.14);
  border-radius:11px; outline:none; pointer-events:auto;
}
.modal input:focus, .modal select:focus{ border-color:var(--gold); }
.modal .micro{ text-align:center; }

/* ================= REDUCED MOTION ================= */
@media (prefers-reduced-motion: reduce){
  .cue-line{ animation:none; }
  .reveal{ transition:none; opacity:1; transform:none; }
}

/* ================= LANDSCAPE / WIDE ================= */
@media (min-width:820px){
  .card{ max-width:600px; }
  .card--pad{ padding:44px 48px; }
  .align-top{ padding-left:clamp(48px,10vw,120px); }
}