:root{
  --ink:#fefefe;
  --void:#303030;
  --void-deep:#252525;
  --accent:#1e8ccd;
  --accent-a:#3972b2;
  --accent-b:#2aaae2;
  --display:"Neue Haas Grotesk Display Pro","NeueHaasDisplay","Helvetica Neue",Inter,Helvetica,Arial,sans-serif;
  --track-head:-0.04em;
  --track-cap:0.025em;
}

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

html,body{height:100%;}
html{background:var(--void);-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;}
body{
  background:radial-gradient(140% 120% at 50% 40%, var(--void) 0%, var(--void-deep) 100%);
  color:var(--ink);
  font-family:var(--display);
  overflow-x:hidden;
}

/* ---------------- film grain ---------------- */
.grain{
  position:fixed;inset:0;z-index:80;pointer-events:none;
  opacity:.055;mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  background-size:200px 200px;
}

/* ---------------- scarcity counter ---------------- */
.scarcity{
  position:fixed;top:clamp(20px,3vw,40px);right:clamp(20px,3vw,46px);
  z-index:70;text-align:right;transition:opacity .6s ease;isolation:isolate;
}
.scarcity::before{
  content:"";position:absolute;z-index:-1;inset:-26px -30px -30px -52px;
  background:radial-gradient(120% 130% at 78% 42%, rgba(16,16,16,.62) 0%, rgba(16,16,16,.30) 48%, transparent 74%);
  filter:blur(3px);
}
.scarcity .count{
  font-weight:700;font-size:clamp(21px,2vw,30px);
  letter-spacing:var(--track-head);line-height:1;color:var(--accent);display:block;
  text-shadow:0 1px 16px rgba(0,0,0,.55),0 0 1px rgba(0,0,0,.4);
}
.scarcity .label{
  font-style:italic;font-weight:400;font-size:clamp(9px,.85vw,11px);
  letter-spacing:var(--track-cap);text-transform:uppercase;
  color:var(--ink);opacity:.78;margin-top:8px;text-shadow:0 1px 12px rgba(0,0,0,.7);
}

/* ---------------- timeline (vertical, 12 beats) ---------------- */
.timeline{
  position:fixed;left:clamp(16px,2.6vw,38px);top:50%;transform:translateY(-50%);
  z-index:70;display:flex;flex-direction:column;gap:clamp(7px,1.1vh,12px);
  transition:opacity .55s ease;
}
.timeline .seg{
  background:none;border:0;cursor:pointer;padding:0;
  font-family:var(--display);font-style:italic;font-weight:400;
  font-size:11px;letter-spacing:var(--track-cap);
  color:var(--ink);opacity:.30;transition:opacity .45s ease;
  display:flex;align-items:center;gap:9px;text-shadow:0 1px 9px rgba(0,0,0,.6);
}
.timeline .seg .tick{width:12px;height:1px;background:var(--ink);opacity:.5;transition:width .45s ease,opacity .45s ease;}
.timeline .seg .num{width:1.4em;opacity:0;transition:opacity .45s ease;}
.timeline .seg:hover{opacity:.8;}
.timeline .seg:hover .num{opacity:.8;}
.timeline .seg.active{opacity:1;}
.timeline .seg.active .tick{width:30px;opacity:1;}
.timeline .seg.active .num{opacity:1;}

/* ---------------- scroll hint ---------------- */
.hint{
  position:fixed;left:50%;bottom:clamp(20px,4vh,40px);transform:translateX(-50%);
  z-index:70;display:flex;align-items:center;gap:11px;
  font-style:italic;font-weight:400;font-size:12px;letter-spacing:.22em;
  text-transform:uppercase;color:var(--ink);opacity:.62;
  transition:opacity .6s ease;text-shadow:0 1px 10px rgba(0,0,0,.6);
}
.hint .bar{width:46px;height:1px;background:var(--ink);opacity:.5;position:relative;overflow:hidden;}
.hint .bar::after{content:"";position:absolute;inset:0;background:var(--accent);transform:translateX(-100%);animation:sweep 2.6s cubic-bezier(.5,0,.2,1) infinite;}
@keyframes sweep{0%{transform:translateX(-100%);}55%{transform:translateX(100%);}100%{transform:translateX(100%);}}

/* ---------------- scroll engine ---------------- */
.rail{position:relative;width:100%;}
.stage{position:sticky;top:0;height:100vh;width:100%;overflow:hidden;perspective:1700px;perspective-origin:50% 50%;}
.track{position:absolute;top:0;left:0;height:100%;display:flex;transform-style:preserve-3d;will-change:transform;}

.panel{position:relative;height:100vh;flex:0 0 auto;transform-style:preserve-3d;}
.panel[data-kind="land"]{width:100vw;}
.panel[data-kind="portrait"]{width:82vw;}
.panel[data-kind="text"]{width:90vw;}
.panel[data-kind="close"]{width:100vw;}

.panel-inner{position:absolute;inset:0;transform-style:preserve-3d;will-change:transform,opacity;backface-visibility:hidden;}

/* giant ghost numeral */
.ghost{
  position:absolute;top:50%;left:50%;font-weight:800;font-size:82vh;line-height:.7;
  letter-spacing:-0.05em;color:var(--ink);opacity:.05;transform:translate(-50%,-50%);
  will-change:transform;pointer-events:none;user-select:none;white-space:nowrap;
}

.media{position:absolute;inset:0;overflow:hidden;will-change:transform;}
.scene-img{
  position:absolute;top:-16%;left:-16%;width:132%;height:132%;object-fit:cover;
  filter:grayscale(100%) contrast(1.03);will-change:transform;
}
.media::after{content:"";position:absolute;inset:0;pointer-events:none;background:radial-gradient(125% 125% at 50% 50%, transparent 50%, rgba(16,16,16,.52) 100%);}

.scrim{position:absolute;inset:0;pointer-events:none;}
.scrim.tl{background:linear-gradient(128deg, rgba(24,24,24,.80) 0%, rgba(24,24,24,.30) 33%, transparent 58%);}
.scrim.tr{background:linear-gradient(232deg, rgba(24,24,24,.78) 0%, rgba(24,24,24,.26) 35%, transparent 60%);}
.scrim.bl{background:linear-gradient(48deg, rgba(24,24,24,.82) 0%, rgba(24,24,24,.30) 34%, transparent 60%);}
.scrim.br{background:linear-gradient(312deg, rgba(24,24,24,.80) 0%, rgba(24,24,24,.28) 35%, transparent 60%);}

/* ---------------- copy ---------------- */
.copy{position:absolute;z-index:5;will-change:transform;max-width:min(94vw,1280px);}
.marker{
  font-style:italic;font-weight:400;font-size:clamp(11px,1.05vw,15px);
  letter-spacing:var(--track-cap);text-transform:uppercase;color:var(--ink);opacity:.72;
  margin-bottom:clamp(14px,1.7vw,26px);text-shadow:0 1px 14px rgba(0,0,0,.5);
}
h1.head{
  font-weight:800;line-height:.78;letter-spacing:var(--track-head);
  font-size:clamp(3rem,10.5vw,9.4rem);text-shadow:0 2px 44px rgba(0,0,0,.42);
  transform-origin:left center;
}
.line{display:block;overflow:hidden;}
.line > span{display:block;will-change:transform;}

/* alignment helpers */
.copy.pos-tl{top:clamp(54px,10vh,128px);left:clamp(22px,5vw,96px);text-align:left;}
.copy.pos-tr{top:clamp(54px,10vh,128px);right:clamp(22px,5vw,96px);text-align:right;}
.copy.pos-bl{bottom:clamp(60px,12vh,150px);left:clamp(22px,5vw,96px);text-align:left;}
.copy.pos-br{bottom:clamp(60px,12vh,150px);right:clamp(22px,5vw,96px);text-align:right;}
.copy.pos-tr h1.head,.copy.pos-br h1.head{transform-origin:right center;margin-left:auto;}
.copy.pos-tr h1.head,.copy.pos-br h1.head{max-width:15ch;}
.copy.tight h1.head{font-size:clamp(2.2rem,6vw,6rem);}
.copy.pos-tr.tight h1.head,.copy.pos-br.tight h1.head{max-width:none;}

/* ---------------- portrait asymmetric ---------------- */
.panel[data-kind="portrait"] .panel-inner{display:flex;align-items:stretch;}
.p3-type{flex:1 1 42%;display:flex;align-items:center;padding:0 clamp(26px,4vw,72px);position:relative;z-index:5;}
.p3-shot{flex:1 1 58%;position:relative;overflow:hidden;}
.p3-shot .scene-img{top:-10%;left:-10%;width:120%;height:120%;}
.p3-shot::after{content:"";position:absolute;inset:0;pointer-events:none;background:radial-gradient(120% 120% at 50% 50%, transparent 58%, rgba(16,16,16,.42) 100%);}
.panel[data-kind="portrait"] .copy{position:relative;top:auto;left:auto;text-align:left;max-width:none;}
.panel[data-kind="portrait"] h1.head{font-size:clamp(2.6rem,7vw,7rem);}

/* ---------------- text-only reveal panels ---------------- */
.panel[data-kind="text"] .panel-inner{display:flex;align-items:center;justify-content:center;padding:0 clamp(28px,6vw,120px);background:radial-gradient(120% 120% at 50% 42%, var(--void) 0%, var(--void-deep) 100%);}
.panel[data-kind="text"] .copy{position:relative;text-align:left;max-width:min(92vw,1400px);}
.panel[data-kind="text"] h1.head{font-size:clamp(3.2rem,11.5vw,11rem);}
.panel[data-kind="text"] .marker{opacity:.6;}

/* ---------------- closing ---------------- */
.panel[data-kind="close"] .panel-inner{
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  text-align:center;padding:clamp(28px,6vw,80px);
  background:radial-gradient(120% 120% at 50% 38%, var(--void) 0%, var(--void-deep) 100%);
}
.lede{max-width:min(92vw,1180px);font-weight:700;font-size:clamp(28px,4.7vw,64px);line-height:1.0;letter-spacing:var(--track-head);color:var(--ink);opacity:.96;text-wrap:balance;}
.subline{margin-top:clamp(16px,2.4vh,26px);font-style:italic;font-weight:400;font-size:clamp(14px,1.4vw,19px);line-height:1.1;letter-spacing:var(--track-cap);color:var(--ink);opacity:.78;}
.form{margin-top:clamp(34px,5vh,60px);display:flex;align-items:stretch;width:min(460px,84vw);border-bottom:1px solid rgba(254,254,254,.28);}
.form input[type=email]{flex:1 1 auto;background:none;border:0;outline:none;color:var(--ink);font-family:var(--display);font-size:clamp(15px,1.4vw,18px);font-weight:400;letter-spacing:0;padding:14px 4px;}
.form input::placeholder{color:rgba(254,254,254,.40);}
.form button{
  flex:0 0 auto;cursor:pointer;border:0;font-family:var(--display);font-weight:700;
  font-size:clamp(12px,1.05vw,14px);letter-spacing:.01em;color:var(--ink);
  background:linear-gradient(90deg,var(--accent-a),var(--accent-b));
  padding:0 22px;border-radius:2px;margin:5px 0 5px 12px;white-space:nowrap;
  transition:filter .35s ease,transform .15s ease;
}
.form button:hover{filter:brightness(1.13);}
.form button:active{transform:translateY(1px);}
.confirm{margin-top:clamp(34px,5vh,60px);font-style:italic;font-weight:400;font-size:clamp(13px,1.2vw,16px);letter-spacing:var(--track-cap);color:var(--accent);opacity:0;height:0;overflow:hidden;transition:opacity .7s ease;}
.confirm.show{opacity:1;height:auto;}
.wordmark{margin-top:clamp(46px,8vh,98px);}
.wordmark img{height:clamp(26px,3vw,40px);width:auto;display:block;opacity:.95;}

/* ---------------- mobile ---------------- */
@media (max-width:780px){
  .panel[data-kind="portrait"]{width:100vw;}
  .panel[data-kind="portrait"] .panel-inner{display:block;}
  .p3-shot{position:absolute;inset:0;}
  .p3-shot .scene-img{top:-12%;left:-12%;width:124%;height:124%;}
  .p3-type{position:absolute;inset:0;align-items:flex-end;z-index:5;padding:0 0 clamp(56px,13vh,120px) clamp(22px,6vw,40px);}
  .p3-shot::after{content:"";position:absolute;inset:0;background:linear-gradient(0deg, rgba(24,24,24,.80) 0%, rgba(24,24,24,.16) 42%, transparent 66%);}
  .panel[data-kind="portrait"] h1.head{font-size:clamp(2.6rem,10vw,4.6rem);}
  .panel[data-kind="text"] h1.head{font-size:clamp(2.8rem,12vw,5.4rem);}
  .copy.pos-tr h1.head,.copy.pos-br h1.head{max-width:12ch;}
  .ghost{font-size:54vh;}
}
::-webkit-scrollbar{width:0;height:0;}