/* ============================================================
   JING 静 · APERTURE — a quiet film in ten reels
   ============================================================ */

:root{
  --ink:#0E0D0B;
  --ink-2:#16140F;
  --cream:#F8F2E5;
  --paper:#F2EADA;
  --walnut:#5C4533;
  --jade:#7A8B73;
  --clay:#C68A6B;
  --shadow:rgba(0,0,0,.35);
  --ease:cubic-bezier(.16,1,.3,1);
  --fade:780ms;
}

*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html,body{height:100%}
html{scroll-behavior:smooth;-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}
body{
  background:var(--ink);
  color:var(--cream);
  font-family:'Inter',system-ui,sans-serif;
  font-weight:300;
  overflow-x:hidden;
  min-height:100vh;
}
img,svg{display:block;max-width:100%}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer}
input{font:inherit;color:inherit;background:none;border:0;outline:none}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

/* ============================================================
   THRESHOLD
   ============================================================ */
.threshold{
  position:fixed;inset:0;z-index:200;
  background:var(--ink);
  display:flex;align-items:center;justify-content:center;
  cursor:pointer;
  transition:opacity 900ms var(--ease),visibility 900ms var(--ease);
}
.threshold.is-gone{opacity:0;visibility:hidden;pointer-events:none}
.threshold-inner{display:flex;flex-direction:column;align-items:center;gap:2.2rem;animation:thresholdIn 1400ms var(--ease) both}
.threshold-jing{
  font-family:'Noto Serif SC',serif;
  font-weight:300;
  font-size:clamp(7rem,28vw,12rem);
  color:var(--cream);
  line-height:1;
  letter-spacing:.02em;
  animation:jingBreathe 4s ease-in-out infinite;
}
.threshold-cta{
  font-family:'JetBrains Mono',monospace;
  font-size:.6rem;
  letter-spacing:.42em;
  color:rgba(248,242,229,.5);
  text-transform:uppercase;
  animation:pulseFade 2.4s ease-in-out infinite;
}
@keyframes thresholdIn{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
@keyframes jingBreathe{0%,100%{opacity:.92}50%{opacity:.75}}
@keyframes pulseFade{0%,100%{opacity:.35}50%{opacity:.8}}

/* ============================================================
   CHROME — persistent metadata around the frame
   ============================================================ */
.chrome{
  position:fixed;inset:0;z-index:50;
  pointer-events:none;
}
.chrome > div{
  position:absolute;
  font-family:'JetBrains Mono',monospace;
  font-size:.58rem;
  letter-spacing:.22em;
  text-transform:uppercase;
  color:rgba(248,242,229,.55);
  transition:opacity 500ms var(--ease);
}
.chrome-tl{top:1.1rem;left:1.1rem;max-width:55vw;line-height:1.4}
.chrome-tr{top:1.1rem;right:1.1rem;text-align:right;display:flex;gap:.5em;align-items:center}
.chrome-tr .reel-name{font-family:'Noto Serif SC',serif;letter-spacing:.18em;font-size:.62rem}
.chrome-tr .reel-sep{opacity:.4}
.chrome-bl{bottom:1.1rem;left:1.1rem}
.chrome-bc{bottom:1.1rem;left:50%;transform:translateX(-50%);text-align:center;font-size:.52rem;letter-spacing:.34em;opacity:.4}
.chrome-status{
  position:absolute;top:50%;left:1rem;transform:translateY(-50%) rotate(-90deg);transform-origin:left top;
  font-family:'JetBrains Mono',monospace;font-size:.52rem;letter-spacing:.34em;text-transform:uppercase;
  color:rgba(248,242,229,.4);
  display:flex;align-items:center;gap:.6em;
  white-space:nowrap;
}
.status-dot{
  width:5px;height:5px;border-radius:50%;background:var(--cream);
  box-shadow:0 0 8px rgba(248,242,229,.6);
  animation:dot 2.4s ease-in-out infinite;
}
@keyframes dot{0%,100%{opacity:.7}50%{opacity:.25}}

/* scrub bar — bottom-right vertical */
.chrome-br{
  bottom:1.1rem;right:1.1rem;
  width:14px;height:34vh;
  display:flex;align-items:flex-end;justify-content:center;
}
.scrub{position:relative;width:1px;height:100%;background:rgba(248,242,229,.12)}
.scrub-fill{position:absolute;left:-.5px;top:0;width:2px;background:var(--cream);height:0;transition:height 300ms var(--ease)}
.scrub-ticks{position:absolute;inset:0;display:flex;flex-direction:column;justify-content:space-between}
.scrub-ticks span{display:block;width:5px;height:1px;background:rgba(248,242,229,.35);transform:translateX(-2px)}
.scrub-ticks span.is-active{background:var(--cream);width:8px;transform:translateX(-3.5px)}

/* ============================================================
   APERTURE FRAME (fixed, centered)
   ============================================================ */
.aperture{
  position:fixed;inset:0;z-index:20;
  display:flex;align-items:center;justify-content:center;
  pointer-events:none;
}
.aperture-frame{
  position:relative;
  width:84vw;height:74vh;
  max-width:480px;max-height:720px;
  background:var(--paper);
  border:1px solid rgba(248,242,229,.18);
  box-shadow:
    0 0 0 1px rgba(0,0,0,.4),
    0 30px 80px -20px rgba(0,0,0,.6),
    inset 0 0 60px rgba(0,0,0,.18),
    inset 0 0 140px rgba(0,0,0,.08);
  overflow:hidden;
  pointer-events:auto;
  border-radius:2px;
}
/* tiny corner ticks */
.frame-corner{position:absolute;width:14px;height:14px;border:1px solid rgba(248,242,229,.55);pointer-events:none;z-index:10}
.frame-corner.tl{top:-1px;left:-1px;border-right:0;border-bottom:0}
.frame-corner.tr{top:-1px;right:-1px;border-left:0;border-bottom:0}
.frame-corner.bl{bottom:-1px;left:-1px;border-right:0;border-top:0}
.frame-corner.br{bottom:-1px;right:-1px;border-left:0;border-top:0}

/* ============================================================
   REELS — absolute layers that cross-fade
   ============================================================ */
.reel{
  position:absolute;inset:0;
  opacity:0;visibility:hidden;
  transition:opacity var(--fade) var(--ease),visibility var(--fade) var(--ease);
  display:flex;align-items:center;justify-content:center;
  padding:1.6rem 1.4rem;
  overflow:hidden;
}
.reel.is-active{opacity:1;visibility:visible}
.reel-bg{position:absolute;inset:0;z-index:0}
.reel-grain{
  position:absolute;inset:0;z-index:1;pointer-events:none;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='180' height='180'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 0.95 0 0 0 0 0.91 0 0 0 0 0.82 0 0 0 0.18 0'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>");
  mix-blend-mode:multiply;
  opacity:.55;
}
.reel-content{position:relative;z-index:2;width:100%;height:100%;display:flex;flex-direction:column}

/* Backgrounds per reel */
.bg-open{background:radial-gradient(120% 90% at 50% 35%,#F6EEDD 0%,#E8DCC2 70%,#D9C9A8 100%)}
.bg-note{background:linear-gradient(180deg,#F6EEDD 0%,#EDE2CB 100%)}
.bg-living{background:radial-gradient(120% 90% at 50% 40%,#F4EAD3 0%,#E6D5B3 75%,#D6C195 100%)}
.bg-hall{background:linear-gradient(170deg,#D8DCC9 0%,#B5BFA6 60%,#8B9C82 100%)}
.bg-balcony{background:linear-gradient(180deg,#F0CDB0 0%,#D89E78 55%,#7A4A33 100%)}
.bg-bed{background:radial-gradient(110% 90% at 70% 35%,#5C4533 0%,#2F231B 75%,#181210 100%)}
.bg-lab{background:linear-gradient(180deg,#16140F 0%,#0E0D0B 100%)}
.bg-colors{background:linear-gradient(180deg,#F6EEDD 0%,#EADFC6 100%)}
.bg-object{background:radial-gradient(120% 100% at 50% 45%,#F6EEDD 0%,#E2D4B6 75%,#C9B68F 100%)}
.bg-reserve{background:linear-gradient(180deg,#16140F 0%,#3B2E22 100%)}

/* ============================================================
   REEL 1 — OPEN
   ============================================================ */
.reel-open-content{justify-content:space-between;align-items:center;text-align:center;padding:1rem 0}
.open-eyebrow{
  font-family:'JetBrains Mono',monospace;
  font-size:.52rem;letter-spacing:.42em;
  color:rgba(28,22,14,.55);text-transform:uppercase;
  padding-top:1.6rem;
}
.open-title{
  font-family:'Fraunces',serif;font-weight:300;
  font-size:clamp(2.8rem,11vw,4.6rem);
  line-height:.96;letter-spacing:-.02em;
  color:#1C160E;
}
.open-title em{font-style:italic;font-weight:300;color:var(--walnut)}
.open-zh{
  font-family:'Noto Serif SC',serif;font-style:italic;
  font-weight:300;
  font-size:1.5rem;letter-spacing:.32em;
  color:rgba(28,22,14,.55);
  margin-top:1.1rem;
}
.open-meta{
  font-family:'JetBrains Mono',monospace;font-size:.52rem;letter-spacing:.42em;
  color:rgba(28,22,14,.45);text-transform:uppercase;
  display:flex;gap:.6em;justify-content:center;
  padding-bottom:1.4rem;
}
.open-meta .dot{opacity:.4}

/* ============================================================
   REEL 2 — HOUSE NOTE
   ============================================================ */
.reel-note-content{justify-content:center;gap:1.4rem;padding:1.8rem 1.2rem}
.note-label{
  font-family:'JetBrains Mono',monospace;font-size:.52rem;letter-spacing:.42em;
  color:rgba(28,22,14,.5);text-transform:uppercase;
  border-top:1px solid rgba(28,22,14,.2);padding-top:.9rem;
}
.note-body{
  font-family:'Fraunces',serif;font-weight:300;font-style:italic;
  font-size:clamp(1.05rem,4.4vw,1.4rem);
  line-height:1.42;letter-spacing:-.005em;
  color:#1C160E;
}
.note-body.dim{color:rgba(28,22,14,.7);font-style:normal}
.note-body .zh-inline{font-family:'Noto Serif SC',serif;color:var(--walnut);font-style:normal;letter-spacing:.04em}
.note-sign{
  font-family:'JetBrains Mono',monospace;font-size:.55rem;letter-spacing:.4em;
  color:rgba(28,22,14,.45);text-transform:uppercase;
  margin-top:.4rem;
}

/* ============================================================
   REEL 3-6 — ROOMS (shared)
   ============================================================ */
.reel-room-content{justify-content:space-between;padding:.4rem 0}
.room-head{display:flex;justify-content:space-between;align-items:baseline;padding-top:.4rem}
.room-zh{font-family:'Noto Serif SC',serif;font-size:1.1rem;letter-spacing:.16em;color:rgba(28,22,14,.75)}
.room-en{font-family:'JetBrains Mono',monospace;font-size:.5rem;letter-spacing:.36em;color:rgba(28,22,14,.5);text-transform:uppercase}
.room-foot{display:flex;flex-direction:column;gap:.7rem;padding-bottom:.3rem}
.room-title{
  font-family:'Fraunces',serif;font-weight:300;
  font-size:clamp(1.7rem,7.2vw,2.4rem);
  line-height:1.04;letter-spacing:-.02em;color:#1C160E;
}
.room-title em{font-style:italic;color:var(--walnut)}
.room-lede{
  font-family:'Inter',sans-serif;font-weight:300;
  font-size:.85rem;line-height:1.55;color:rgba(28,22,14,.7);
  max-width:32ch;
}
.room-lede .zh-inline{font-family:'Noto Serif SC',serif;color:var(--walnut)}

/* DARK rooms (balcony, bedroom) flip text */
.reel[data-reel="5"] .room-zh,.reel[data-reel="5"] .room-en,
.reel[data-reel="5"] .room-title,.reel[data-reel="5"] .room-lede,
.reel[data-reel="6"] .room-zh,.reel[data-reel="6"] .room-en,
.reel[data-reel="6"] .room-title,.reel[data-reel="6"] .room-lede{color:var(--cream)}
.reel[data-reel="5"] .room-zh{color:rgba(248,242,229,.85)}
.reel[data-reel="5"] .room-en,.reel[data-reel="6"] .room-en{color:rgba(248,242,229,.55)}
.reel[data-reel="5"] .room-lede,.reel[data-reel="6"] .room-lede{color:rgba(248,242,229,.7)}
.reel[data-reel="5"] .room-title em,.reel[data-reel="6"] .room-title em{color:#E6C9A8}

/* Balcony skyline */
.reel-skyline{position:absolute;left:0;right:0;bottom:38%;height:14%;z-index:1;display:flex;align-items:flex-end;gap:6px;padding:0 8%}
.reel-skyline span{display:block;flex:1;background:rgba(20,12,8,.55);border-top:1px solid rgba(20,12,8,.75)}
.reel-skyline span:nth-child(1){height:55%}
.reel-skyline span:nth-child(2){height:78%}
.reel-skyline span:nth-child(3){height:42%}
.reel-skyline span:nth-child(4){height:88%}
.reel-skyline span:nth-child(5){height:65%}
.reel-skyline span:nth-child(6){height:95%}
.reel-skyline span:nth-child(7){height:50%}
.reel-skyline span:nth-child(8){height:72%}

/* Bedroom lamp glow */
.reel-lamp{
  position:absolute;top:-15%;right:-10%;width:80%;height:80%;
  background:radial-gradient(circle at 65% 30%,rgba(255,200,140,.4) 0%,rgba(255,180,100,.18) 25%,transparent 55%);
  z-index:1;pointer-events:none;
}

/* ============================================================
   BALL — CSS-rendered, finishes per colorway
   ============================================================ */
.ball{
  position:relative;
  width:62%;aspect-ratio:1/1;
  border-radius:50%;
  align-self:center;
  margin:0 auto;
}
.ball-highlight{
  position:absolute;inset:6% 8% 30% 14%;
  border-radius:50%;
  background:radial-gradient(circle at 30% 25%,rgba(255,255,255,.55) 0%,rgba(255,255,255,.18) 30%,transparent 60%);
  pointer-events:none;
}
.ball-seam{
  position:absolute;inset:0;border-radius:50%;
  background:
    radial-gradient(circle at 50% 50%,transparent 56%,rgba(0,0,0,.06) 57%,transparent 58%),
    radial-gradient(circle at 50% 50%,transparent 38%,rgba(0,0,0,.04) 39%,transparent 40%);
  pointer-events:none;
}
.ball-shadow{
  position:absolute;left:50%;bottom:-14%;transform:translateX(-50%);
  width:78%;height:14%;
  background:radial-gradient(ellipse,rgba(0,0,0,.35) 0%,rgba(0,0,0,.12) 45%,transparent 70%);
  filter:blur(4px);
  pointer-events:none;
}

/* finishes */
.ball-paper{
  background:
    radial-gradient(circle at 32% 28%,#FAF6EE 0%,#EFE5CE 35%,#D8C8A3 75%,#A88B5A 100%);
  box-shadow:
    inset -14px -22px 40px rgba(80,55,20,.28),
    inset 8px 10px 22px rgba(255,250,235,.5);
}
.ball-jade{
  background:
    radial-gradient(circle at 32% 28%,#C8D2BD 0%,#9DAD93 35%,#74866C 75%,#3F5238 100%);
  box-shadow:
    inset -14px -22px 40px rgba(30,50,28,.45),
    inset 8px 10px 22px rgba(230,240,222,.35);
}
.ball-clay{
  background:
    radial-gradient(circle at 32% 28%,#EBC0A2 0%,#D2916C 35%,#A6603F 75%,#5E311B 100%);
  box-shadow:
    inset -14px -22px 40px rgba(60,25,12,.45),
    inset 8px 10px 22px rgba(255,222,200,.32);
}
.ball-walnut{
  background:
    radial-gradient(circle at 32% 28%,#A98869 0%,#7D5A3C 35%,#4D341F 75%,#22150C 100%);
  box-shadow:
    inset -14px -22px 40px rgba(0,0,0,.55),
    inset 8px 10px 22px rgba(230,200,160,.18);
}
.ball-ink{
  background:
    radial-gradient(circle at 32% 28%,#2A2622 0%,#1A1714 35%,#0E0C0A 75%,#000 100%);
  box-shadow:
    inset -14px -22px 40px rgba(0,0,0,.7),
    inset 8px 10px 22px rgba(120,110,95,.22);
}

/* ============================================================
   REEL 7 — QUIET LAB
   ============================================================ */
.reel-lab-content{justify-content:space-between;color:var(--cream);padding:.4rem 0;gap:.8rem}
.lab-head{display:flex;justify-content:space-between;align-items:baseline;
  font-family:'JetBrains Mono',monospace;font-size:.52rem;letter-spacing:.4em;
  color:rgba(248,242,229,.6);text-transform:uppercase;padding-top:.5rem;
}
.lab-head .lab-zh{font-family:'Noto Serif SC',serif;font-size:.95rem;letter-spacing:.22em;text-transform:none;color:rgba(248,242,229,.8)}
.lab-title{
  font-family:'Fraunces',serif;font-weight:300;
  font-size:clamp(1.5rem,6.4vw,2.1rem);
  line-height:1.08;letter-spacing:-.015em;color:var(--cream);
}
.lab-diagram{align-self:center;width:62%;max-width:240px}
.lab-body{
  font-family:'Fraunces',serif;font-weight:300;font-style:italic;
  font-size:1rem;line-height:1.5;color:rgba(248,242,229,.8);
  max-width:34ch;
}
.lab-body em{color:var(--cream);font-style:italic}
.lab-note{
  font-family:'JetBrains Mono',monospace;font-size:.5rem;letter-spacing:.36em;
  color:rgba(248,242,229,.45);text-transform:uppercase;
  border-top:1px solid rgba(248,242,229,.18);padding-top:.7rem;
}

/* ============================================================
   REEL 8 — COLORWAYS
   ============================================================ */
.reel-colors-content{justify-content:space-between;padding:.5rem 0}
.colors-head{display:flex;justify-content:space-between;align-items:baseline;
  font-family:'JetBrains Mono',monospace;font-size:.52rem;letter-spacing:.4em;
  color:rgba(28,22,14,.55);text-transform:uppercase;padding-top:.4rem;
}
.colors-head .colors-zh{font-family:'Noto Serif SC',serif;font-size:1rem;letter-spacing:.22em;text-transform:none;color:rgba(28,22,14,.75)}
.swatches{display:flex;flex-direction:column;gap:.55rem;padding:.6rem 0}
.swatch{display:flex;align-items:center;gap:.9rem;padding:.35rem 0;border-bottom:1px solid rgba(28,22,14,.12)}
.swatch:last-child{border-bottom:0}
.sw{width:34px;height:34px;border-radius:50%;flex:0 0 34px;
  box-shadow:inset -4px -6px 10px rgba(0,0,0,.25),inset 3px 4px 6px rgba(255,250,235,.25),0 1px 2px rgba(0,0,0,.2)}
.sw-paper{background:radial-gradient(circle at 32% 28%,#FAF6EE,#D8C8A3 70%,#A88B5A)}
.sw-jade{background:radial-gradient(circle at 32% 28%,#C8D2BD,#74866C 70%,#3F5238)}
.sw-clay{background:radial-gradient(circle at 32% 28%,#EBC0A2,#A6603F 70%,#5E311B)}
.sw-walnut{background:radial-gradient(circle at 32% 28%,#A98869,#4D341F 70%,#22150C)}
.sw-ink{background:radial-gradient(circle at 32% 28%,#2A2622,#0E0C0A 70%,#000)}
.sw-name{font-family:'Fraunces',serif;font-style:italic;font-weight:300;font-size:1.15rem;color:#1C160E;flex:1}
.sw-code{font-family:'JetBrains Mono',monospace;font-size:.55rem;letter-spacing:.28em;color:rgba(28,22,14,.45);text-transform:uppercase}
.colors-foot{font-family:'Fraunces',serif;font-style:italic;font-weight:300;font-size:.95rem;line-height:1.4;color:rgba(28,22,14,.7);padding-top:.4rem;border-top:1px solid rgba(28,22,14,.15)}

/* ============================================================
   REEL 9 — OBJECT / SPECS
   ============================================================ */
.reel-object-content{justify-content:space-between;padding:.4rem 0;gap:.5rem}
.obj-head{display:flex;justify-content:space-between;align-items:baseline;
  font-family:'JetBrains Mono',monospace;font-size:.52rem;letter-spacing:.4em;
  color:rgba(28,22,14,.55);text-transform:uppercase;padding-top:.4rem;
}
.obj-head .obj-zh{font-family:'Noto Serif SC',serif;font-size:1rem;letter-spacing:.22em;text-transform:none;color:rgba(28,22,14,.75)}
.obj-title{
  font-family:'Fraunces',serif;font-weight:300;
  font-size:clamp(1.8rem,7.6vw,2.5rem);
  line-height:1.02;letter-spacing:-.02em;color:#1C160E;
}
.obj-title em{font-style:italic;color:var(--walnut)}
.obj-ball{width:46%;margin:.2rem auto}
.obj-lede{font-family:'Fraunces',serif;font-style:italic;font-weight:300;font-size:.95rem;line-height:1.45;color:rgba(28,22,14,.75);max-width:34ch}
.spec{
  display:grid;grid-template-columns:1fr;gap:.2rem;
  font-family:'JetBrains Mono',monospace;font-size:.55rem;letter-spacing:.18em;
  color:rgba(28,22,14,.7);text-transform:uppercase;
  border-top:1px solid rgba(28,22,14,.18);padding-top:.55rem;
}
.spec > div{display:flex;justify-content:space-between;gap:1em;padding:.18rem 0;border-bottom:1px dashed rgba(28,22,14,.1)}
.spec > div:last-child{border-bottom:0}
.spec dt{opacity:.5;flex:0 0 auto}
.spec dd{text-align:right;color:#1C160E;font-weight:400}

/* ============================================================
   REEL 10 — RESERVE
   ============================================================ */
.reel-reserve-content{justify-content:space-between;padding:.6rem 0;color:var(--cream)}
.reserve-eyebrow{
  font-family:'JetBrains Mono',monospace;font-size:.52rem;letter-spacing:.42em;
  color:rgba(248,242,229,.55);text-transform:uppercase;
  border-top:1px solid rgba(248,242,229,.18);padding-top:.7rem;
}
.reserve-title{
  font-family:'Fraunces',serif;font-weight:300;
  font-size:clamp(2.2rem,9vw,3.2rem);
  line-height:.98;letter-spacing:-.02em;color:var(--cream);
}
.reserve-title em{font-style:italic;color:#E6C9A8}
.reserve-sub{font-family:'Fraunces',serif;font-style:italic;font-weight:300;font-size:1rem;line-height:1.45;color:rgba(248,242,229,.7);max-width:34ch}
.reserve-form{display:flex;flex-direction:column;gap:.6rem}
.reserve-form input{
  width:100%;
  background:rgba(248,242,229,.06);
  border:1px solid rgba(248,242,229,.2);
  padding:.85rem 1rem;
  font-family:'Inter',sans-serif;font-size:.92rem;
  color:var(--cream);
  letter-spacing:.01em;
  border-radius:1px;
  transition:border-color 300ms var(--ease),background 300ms var(--ease);
}
.reserve-form input::placeholder{color:rgba(248,242,229,.35);font-style:italic;font-family:'Fraunces',serif}
.reserve-form input:focus{border-color:rgba(248,242,229,.6);background:rgba(248,242,229,.1)}
.reserve-form button{
  display:flex;align-items:center;justify-content:space-between;
  width:100%;
  background:var(--cream);color:var(--ink);
  padding:.9rem 1rem;
  font-family:'JetBrains Mono',monospace;font-size:.65rem;letter-spacing:.38em;text-transform:uppercase;
  border-radius:1px;
  transition:transform 300ms var(--ease),background 300ms var(--ease);
}
.reserve-form button .arrow{font-family:'Inter',sans-serif;font-size:1rem;transition:transform 400ms var(--ease)}
.reserve-form button:hover{background:#fff}
.reserve-form button:hover .arrow{transform:translateX(6px)}
.form-msg{font-family:'JetBrains Mono',monospace;font-size:.55rem;letter-spacing:.32em;color:rgba(248,242,229,.6);text-transform:uppercase;min-height:1em;text-align:center}
.form-msg.ok{color:#D4E6C0}
.reserve-foot{
  display:flex;justify-content:center;gap:.6em;
  font-family:'JetBrains Mono',monospace;font-size:.5rem;letter-spacing:.4em;
  color:rgba(248,242,229,.4);text-transform:uppercase;
  border-top:1px solid rgba(248,242,229,.15);padding-top:.7rem;
}
.reserve-foot .dot{opacity:.5}

/* ============================================================
   SCROLL DRIVER + HINT
   ============================================================ */
.scroll-driver{position:relative;width:100%}
.driver{height:100vh;width:100%}
.scroll-hint{
  position:fixed;left:50%;bottom:3rem;transform:translateX(-50%);
  z-index:55;pointer-events:none;
  display:flex;flex-direction:column;align-items:center;gap:.6rem;
  font-family:'JetBrains Mono',monospace;font-size:.5rem;letter-spacing:.42em;
  color:rgba(248,242,229,.5);text-transform:uppercase;
  transition:opacity 600ms var(--ease);
  animation:hintBob 2.4s ease-in-out infinite;
}
.scroll-hint.is-hidden{opacity:0}
.hint-line{width:1px;height:30px;background:linear-gradient(180deg,rgba(248,242,229,.5),transparent)}
@keyframes hintBob{0%,100%{transform:translateX(-50%) translateY(0)}50%{transform:translateX(-50%) translateY(6px)}}

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media (min-width:640px){
  .aperture-frame{width:78vw;height:78vh;max-width:520px;max-height:760px}
  .chrome > div{font-size:.62rem}
  .chrome-bc{font-size:.55rem}
}
@media (min-width:900px){
  .aperture-frame{width:520px;height:740px}
  .reel{padding:2rem 1.8rem}
}

/* Reduced motion */
@media (prefers-reduced-motion:reduce){
  *{animation:none!important;transition-duration:.01ms!important}
  .threshold{display:none}
}