/* ═══════════════════════════════════════════════════
   SUSHANT — THE COLLECTION · 3D scroll gallery
   palette: near-black #0c0b09 · cream #ded6cb · ember #c9802e
   ═══════════════════════════════════════════════════ */

:root {
  --ink: #0c0b09;
  --cream: #ded6cb;
  --cream-dim: rgba(222, 214, 203, 0.55);
  --ember: #c9802e;
  --serif: "Cormorant Garamond", Georgia, serif;
  --grot: "Space Grotesk", -apple-system, "PingFang SC", sans-serif;
}

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

html { scrollbar-width: none; }
html::-webkit-scrollbar, body::-webkit-scrollbar { display: none; }

html, body {
  background: var(--ink);
  color: var(--cream);
  font-family: var(--grot);
  overflow-x: hidden;
}

body { min-height: 100vh; }

::selection { background: var(--ember); color: var(--ink); }

/* ── scroll driver ── */
#scroll-space { height: 1600vh; width: 100%; pointer-events: none; }

/* ── canvas ── */
#scene {
  position: fixed; inset: 0;
  width: 100vw; height: 100vh;
  display: block; z-index: 1;
}

/* ══════════ PRELOADER ══════════ */
#preloader {
  position: fixed; inset: 0; z-index: 60;
  display: flex; align-items: center; justify-content: center;
}
.pre-curtain {
  position: absolute; top: 0; height: 100%; width: 50.5%;
  background: #0a0908;
}
.pre-curtain.left { left: 0; }
.pre-curtain.right { right: 0; }
.pre-inner { position: relative; z-index: 2; text-align: center; width: min(420px, 78vw); }
.pre-word {
  font-family: var(--serif); font-weight: 600;
  font-size: clamp(2.2rem, 7vw, 4rem);
  letter-spacing: 0.32em; text-indent: 0.32em;
  color: var(--cream);
  overflow: hidden;
}
.pre-row {
  display: flex; justify-content: space-between; align-items: baseline;
  margin-top: 1.6rem;
  font-size: 0.62rem; letter-spacing: 0.28em; color: var(--cream-dim);
}
.pre-count { font-size: 0.9rem; color: var(--ember); letter-spacing: 0.1em; font-variant-numeric: tabular-nums; }
.pre-bar { margin-top: 0.7rem; height: 1px; background: rgba(222,214,203,0.14); overflow: hidden; }
.pre-bar-fill { display: block; height: 100%; width: 100%; background: var(--ember); transform: scaleX(0); transform-origin: left; }

/* ══════════ HERO MASK ══════════ */
#hero-mask {
  position: fixed; inset: 0; z-index: 20;
  width: 100vw; height: 100vh;
  will-change: transform, opacity;
  pointer-events: none;
}
#mask-svg { width: 100%; height: 100%; display: block; }
#mask-letters text {
  font-family: var(--serif);
  font-weight: 700;
}

/* ══════════ CHROME ══════════ */
#chrome {
  position: fixed; top: 0; left: 0; right: 0; z-index: 30;
  display: flex; justify-content: space-between; align-items: center;
  padding: calc(1.1rem + env(safe-area-inset-top)) clamp(1.2rem, 4vw, 2.6rem) 1.1rem;
  font-size: 0.68rem; letter-spacing: 0.3em;
  opacity: 0;
  mix-blend-mode: difference;
}
.brand { font-family: var(--serif); font-size: 1rem; font-weight: 600; letter-spacing: 0.22em; color: #fff; }
.brand sup { font-size: 0.55em; }
.col-label { color: rgba(255,255,255,0.75); }

/* ══════════ PROGRESS RAIL ══════════ */
#progress-rail {
  position: fixed; z-index: 30;
  right: clamp(1.1rem, 3vw, 2.4rem); top: 50%;
  transform: translateY(-50%);
  display: flex; flex-direction: column; align-items: center; gap: 0.9rem;
  font-size: 0.62rem; letter-spacing: 0.2em; color: var(--cream-dim);
  opacity: 0;
}
.rail-num { color: var(--cream); font-variant-numeric: tabular-nums; }
.rail-line { width: 1px; height: 34vh; background: rgba(222,214,203,0.15); position: relative; overflow: hidden; }
#rail-fill { position: absolute; left: 0; top: 0; width: 100%; height: 100%; background: var(--ember); transform: scaleY(0); transform-origin: top; }

/* ══════════ HINT ══════════ */
#hint {
  position: fixed; z-index: 30; left: 50%; bottom: calc(1.6rem + env(safe-area-inset-bottom));
  transform: translateX(-50%);
  display: flex; flex-direction: column; align-items: center; gap: 0.85rem;
  font-size: 0.6rem; letter-spacing: 0.42em; text-indent: 0.42em; color: var(--cream-dim);
  opacity: 0;
}
.hint-line { width: 1px; height: 3.2rem; background: linear-gradient(var(--ember), transparent); animation: hintdrop 2.2s ease-in-out infinite; transform-origin: top; }
@keyframes hintdrop { 0% { transform: scaleY(0); } 45% { transform: scaleY(1); } 100% { transform: scaleY(0); transform-origin: bottom; } }

/* ══════════ CAPTION ══════════ */
#caption {
  position: fixed; z-index: 30;
  left: clamp(1.2rem, 4vw, 3rem); bottom: calc(2rem + env(safe-area-inset-bottom));
  max-width: min(430px, 74vw);
  opacity: 0;
}
.cap-index { display: flex; align-items: center; gap: 0.9rem; font-size: 0.66rem; letter-spacing: 0.3em; color: var(--ember); }
.cap-rule { width: 3.2rem; height: 1px; background: var(--ember); opacity: 0.7; }
#cap-title {
  font-family: var(--serif); font-weight: 500;
  font-size: clamp(1.9rem, 5.2vw, 3.4rem);
  line-height: 1.04; margin-top: 0.55rem;
  color: var(--cream);
}
#cap-sub { margin-top: 0.6rem; font-size: 0.72rem; letter-spacing: 0.14em; color: var(--cream-dim); font-weight: 300; }

/* ══════════ DIM + FINALE ══════════ */
#dim { position: fixed; inset: 0; z-index: 24; background: #060504; opacity: 0; pointer-events: none; }

#finale {
  position: fixed; inset: 0; z-index: 32;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  text-align: center; padding: 0 1.5rem;
  visibility: hidden;
}
.fin-label { font-size: 0.62rem; letter-spacing: 0.5em; text-indent: 0.5em; color: var(--ember); }
.fin-title { margin-top: 1.4rem; display: flex; flex-direction: column; align-items: center; gap: 0.4rem; }
.fin-small { font-family: var(--grot); font-weight: 300; font-size: clamp(0.72rem, 1.6vw, 0.9rem); letter-spacing: 0.5em; text-indent: 0.5em; color: var(--cream-dim); text-transform: uppercase; }
.fin-name {
  font-family: var(--serif); font-style: italic; font-weight: 600;
  font-size: clamp(3.4rem, 13vw, 9.5rem);
  line-height: 1; color: var(--cream);
  display: inline-flex; overflow: hidden; padding: 0 0.06em;
}
.fin-name .ch { display: inline-block; will-change: transform; }
.fin-name .ch.sp { width: 0.28em; }

.pill-btn {
  margin-top: 3rem;
  position: relative; overflow: hidden;
  background: transparent; cursor: pointer;
  border: 1px solid rgba(222,214,203,0.5);
  border-radius: 3em;
  padding: 1rem 2.4rem; min-height: 48px;
  color: var(--cream);
  font-family: var(--grot); font-size: 0.64rem; letter-spacing: 0.34em; text-indent: 0.34em;
  transition: color 0.45s ease, border-color 0.45s ease;
  -webkit-tap-highlight-color: transparent;
}
.pill-btn .circle {
  position: absolute; left: 0; top: 100%;
  width: 100%; height: 150%;
  border-radius: 50%;
  background: var(--cream);
  transition: top 0.45s cubic-bezier(0.65, 0, 0.35, 1);
}
.pill-btn .btn-text { position: relative; z-index: 1; }
.pill-btn:hover, .pill-btn:focus-visible { color: var(--ink); border-color: var(--cream); }
.pill-btn:hover .circle, .pill-btn:focus-visible .circle { top: -25%; }

/* ══════════ GRAIN + VIGNETTE ══════════ */
#grain {
  position: fixed; inset: -100%; z-index: 40; pointer-events: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='240'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  opacity: 0.05;
  animation: grainshift 0.9s steps(4) infinite;
}
@keyframes grainshift {
  0% { transform: translate(0,0); } 25% { transform: translate(-2%,3%); }
  50% { transform: translate(3%,-2%); } 75% { transform: translate(-3%,-3%); } 100% { transform: translate(2%,2%); }
}
#vignette {
  position: fixed; inset: 0; z-index: 22; pointer-events: none;
  background: radial-gradient(ellipse at center, transparent 52%, rgba(5,4,3,0.55) 100%);
}

/* ══════════ CURSOR ══════════ */
#cursor {
  position: fixed; z-index: 70; left: 0; top: 0;
  width: 10px; height: 10px; border-radius: 50%;
  background: #fff; mix-blend-mode: difference;
  pointer-events: none;
  transform: translate(-50%, -50%);
  opacity: 0;
}
@media (pointer: coarse) { #cursor { display: none; } }

/* ══════════ MOBILE TUNING ══════════ */
@media (max-width: 640px) {
  .col-label { display: none; }
  #progress-rail { right: 0.85rem; }
  .rail-line { height: 26vh; }
  #caption { bottom: calc(5.2rem + env(safe-area-inset-bottom)); }
  #cap-title { font-size: clamp(1.6rem, 8vw, 2.2rem); }
  #cap-sub { font-size: 0.66rem; }
}