/* ═══════════════════════════════════════════════════════════
   BONDED — Chapter 01 / From Nothing
   ═══════════════════════════════════════════════════════════ */

:root{
  --black:#000;
  --ink:#050505;
  --bone:#F2F0EC;
  --dim:rgba(242,240,236,.42);
  --faint:rgba(242,240,236,.14);
  --red:#D0202F;
  --violet:#7B4FD6;

  --script:'Pinyon Script', cursive;
  --caps:'Jost', -apple-system, BlinkMacSystemFont, sans-serif;
  --block:'Anton', Impact, sans-serif;
  --mono:'JetBrains Mono', ui-monospace, Menlo, monospace;

  --ease:cubic-bezier(.16,1,.3,1);
  --gut:clamp(20px, 5vw, 72px);
}

*,*::before,*::after{box-sizing:border-box}
[hidden]{display:none !important}   /* our display rules would otherwise beat the UA default */
html{-webkit-text-size-adjust:100%}
body{
  margin:0; background:var(--black); color:var(--bone);
  font-family:var(--caps); font-weight:300;
  overflow-x:hidden;
  -webkit-font-smoothing:antialiased;
}
img{display:block; max-width:100%; height:auto}
button{font:inherit; color:inherit; background:none; border:0; cursor:pointer}
::selection{background:var(--red); color:var(--bone)}

/* ── type primitives ─────────────────────────────────────── */
.script{
  font-family:var(--script); font-weight:400; margin:0;
  line-height:1.05; letter-spacing:.01em;
}
.script--xl{font-size:clamp(2.6rem, 7.4vw, 7rem)}
.script--lg{font-size:clamp(2rem, 5.2vw, 4.6rem)}
.script--md{font-size:clamp(1.4rem, 3.2vw, 2.8rem)}
.script--sm{font-size:clamp(1.15rem, 2.4vw, 2rem)}
.script--number{font-size:clamp(4rem, 13vw, 11rem); color:var(--red); line-height:1}

.anton{font-family:var(--block); font-weight:400; margin:0; line-height:.86; letter-spacing:-.01em; text-transform:uppercase}
.anton--xl{font-size:clamp(4.5rem, 13vw, 11rem)}

.mono{
  font-family:var(--mono); font-size:10px; font-weight:400;
  letter-spacing:.22em; text-transform:uppercase; line-height:1.7;
}
.dim{color:var(--dim)}

/* per-character write-on */
[data-write] .word{display:inline-block}
[data-write] .char{display:inline-block; will-change:transform,opacity}
[data-write]{max-width:22ch; margin-left:auto; margin-right:auto}
.script--md[data-write], .script--sm[data-write]{max-width:32ch}

/* ── grain ───────────────────────────────────────────────── */
.grain{
  position:fixed; inset:-50%; z-index:60; pointer-events:none; opacity:.055;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.82' numOctaves='3'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  animation:grain 700ms steps(4) infinite;
}
@keyframes grain{
  0%{transform:translate(0,0)} 25%{transform:translate(-3%,2%)}
  50%{transform:translate(2%,-3%)} 75%{transform:translate(-2%,-2%)}
  100%{transform:translate(3%,1%)}
}

/* ── 00 · veil ───────────────────────────────────────────── */
.veil{
  position:fixed; inset:0; z-index:100; background:var(--black);
  display:grid; place-items:end center; padding-bottom:8vh;
}
.veil__mark{
  font-family:var(--mono); font-size:10px; letter-spacing:.42em;
  color:var(--faint); opacity:0;
}
.veil.is-gone{pointer-events:none}

/* ── nav ─────────────────────────────────────────────────── */
.nav{
  position:fixed; top:0; left:0; right:0; z-index:50;
  display:flex; align-items:center; justify-content:space-between;
  padding:22px var(--gut);
  font-family:var(--mono); font-size:10px; letter-spacing:.32em;
  text-transform:uppercase; mix-blend-mode:difference;
  opacity:0;
}
.nav__brand{letter-spacing:.52em}
.nav__meta{color:var(--dim); display:none}
@media(min-width:860px){.nav__meta{display:block}}
.nav__right{display:flex; align-items:center; gap:14px}
.nav__sound{
  display:flex; align-items:center; gap:9px; padding:9px 14px;
  border:1px solid rgba(242,240,236,.2); color:var(--dim);
  letter-spacing:.28em; transition:.5s var(--ease);
}
.nav__sound:hover{border-color:rgba(242,240,236,.5); color:var(--bone)}
.nav__sound[aria-pressed="true"]{color:var(--bone); border-color:rgba(242,240,236,.5)}
.nav__eq{display:flex; align-items:flex-end; gap:2px; height:9px}
.nav__eq i{width:2px; height:2px; background:currentColor; transition:height .3s var(--ease)}
.nav__sound[aria-pressed="true"] .nav__eq i{animation:eq .9s ease-in-out infinite}
.nav__sound[aria-pressed="true"] .nav__eq i:nth-child(2){animation-delay:.15s}
.nav__sound[aria-pressed="true"] .nav__eq i:nth-child(3){animation-delay:.3s}
@keyframes eq{0%,100%{height:2px}50%{height:9px}}
@media(max-width:430px){.nav__sound-label{display:none} .nav__sound{padding:9px 11px}}

.nav__cta{
  color:inherit; text-decoration:none; padding:9px 16px;
  border:1px solid rgba(242,240,236,.34); transition:.5s var(--ease);
}
.nav__cta:hover{background:var(--bone); color:var(--black); border-color:var(--bone)}

/* ── 01 · hero ───────────────────────────────────────────── */
.s-hero{
  min-height:100svh; display:grid; place-items:center;
  padding:14vh var(--gut) 12vh; position:relative; text-align:center;
}
.s-hero__inner{max-width:1200px; width:100%; position:relative; z-index:2}
.star{width:clamp(34px,4.4vw,54px); margin:0 auto clamp(28px,5vh,56px); color:var(--bone); opacity:0}
.star svg{width:100%; height:auto; display:block}
.star--red{color:var(--red)}
.star--sm{width:16px; margin-top:clamp(48px,9vh,110px); margin-bottom:0}
.s-hero .script--md{margin-top:.35em; color:rgba(242,240,236,.9)}
.s-hero__foot{margin-top:clamp(60px,11vh,140px); color:var(--faint)}
.s-hero__foot .mono{letter-spacing:.42em}

.streak{position:absolute; inset:0; overflow:hidden; pointer-events:none; z-index:1}
.streak span{
  position:absolute; top:38%; left:-40%; width:80%; height:2px;
  background:linear-gradient(90deg,transparent,var(--violet) 45%,#fff 62%,transparent);
  filter:blur(1.5px) drop-shadow(0 0 22px var(--violet));
  opacity:0; transform:rotate(-7deg);
}

.scroll-hint{
  position:absolute; bottom:26px; left:50%; transform:translateX(-50%);
  color:var(--faint); letter-spacing:.42em; opacity:0;
}

/* ── 02 · the film ───────────────────────────────────────── */
.s-film{
  min-height:100svh; display:grid; align-content:center;
  padding:14vh 0 10vh; position:relative;
}
.s-film__frame{overflow:hidden; width:100%}
.s-film__v{
  width:100%; height:auto; display:block;
  filter:contrast(1.04);
}


/* ── 03 · quote ──────────────────────────────────────────── */
.s-quote{min-height:110svh; display:grid; place-items:center; padding:0 var(--gut); text-align:center}
.s-quote__inner{max-width:1100px}
.s-quote .script--sm{margin-top:.4em; color:rgba(242,240,236,.82)}
.s-quote .star--sm{margin-left:auto; margin-right:auto}

/* ── 04 · city ───────────────────────────────────────────── */
.s-city{padding:16vh 0 12vh}
.s-city__head{padding:0 var(--gut) clamp(48px,8vh,96px); text-align:center}
.s-city__head .mono{display:block; margin-top:1.6em; color:var(--dim)}

.rail{overflow:hidden; cursor:grab; user-select:none}
.rail.is-drag{cursor:grabbing}
.rail__track{display:flex; gap:clamp(14px,2.4vw,34px); padding:0 var(--gut); will-change:transform}
.rail__item{flex:0 0 auto; width:clamp(230px,26vw,360px); margin:0}
.rail__frame{overflow:hidden}
.rail__item img{
  /* one height across the rail so the captions sit on a single baseline */
  width:100%; height:clamp(300px,52vh,560px); object-fit:cover; pointer-events:none;
  filter:grayscale(.25) contrast(1.06);
  transition:filter .8s var(--ease);
}
.rail__item:hover img{filter:grayscale(0) contrast(1.06)}
.rail__item figcaption{margin-top:14px; color:var(--faint)}
.rail__hint{text-align:center; margin-top:clamp(36px,6vh,72px); color:var(--faint); letter-spacing:.42em}

/* ── 05 · the drop ───────────────────────────────────────── */
.s-drop{padding:18vh 0 10vh}
.s-drop__label{
  display:flex; justify-content:space-between; gap:20px;
  padding:0 var(--gut) clamp(56px,9vh,120px); color:var(--dim);
  border-top:1px solid var(--faint); padding-top:22px;
  margin:0 var(--gut) clamp(56px,9vh,120px);
}

.piece{
  display:grid; gap:clamp(40px,6vw,90px); align-items:center;
  padding:0 var(--gut); margin-bottom:22vh;
}
@media(min-width:920px){
  .piece{grid-template-columns:1.15fr .85fr}
  .piece--flip .piece__stage{order:2}
  .piece--flip .piece__info{order:1}
}
.piece__stage{position:relative}
.piece__info h2{margin-bottom:.25em}
.piece__sub{color:var(--dim); margin:0 0 clamp(28px,4vh,44px)}
.piece--flip .piece__sub{color:var(--red)}
.star-inline{color:var(--red); font-size:.5em; vertical-align:.35em}

.specs{list-style:none; margin:0; padding:0; border-top:1px solid var(--faint)}
.specs li{
  display:flex; justify-content:space-between; gap:20px;
  padding:13px 0; border-bottom:1px solid var(--faint);
}
.specs li span:first-child{color:var(--dim)}
.specs li:last-child span{color:var(--bone)}

/* cap sequence */
.cap-seq{position:relative; aspect-ratio:1/1}
.cap-seq img{
  width:100%; height:100%; object-fit:contain;
  /* the frames are opaque black, which would punch a hole in the atmosphere.
     Screen drops their ground so the cap sits inside the same air. */
  mix-blend-mode:screen;
}
.atmos__v.is-on{opacity:1}
.turn-hint{
  position:absolute; bottom:2%; left:50%; transform:translateX(-50%);
  color:var(--faint); letter-spacing:.42em; pointer-events:none;
}

/* the real photographs, at a size where the material actually reads.
   These are the sharpest assets on the page (1700px); they used to sit in a
   180px thumbnail strip, which is why nothing looked premium. */
.material{padding:0 var(--gut) clamp(80px,14vh,180px)}
.material__head{
  display:flex; justify-content:space-between; gap:20px; flex-wrap:wrap;
  padding-bottom:22px; margin-bottom:clamp(16px,2.5vh,28px);
  border-top:1px solid var(--faint); padding-top:22px; color:var(--dim);
}
.material__grid{display:grid; gap:clamp(10px,1.6vw,22px); grid-template-columns:1fr}
@media(min-width:760px){.material__grid{grid-template-columns:1fr 1fr}}
.material figure{margin:0; position:relative}
.material figure > img{
  width:100%; aspect-ratio:4/3; object-fit:contain;
  transition:transform 1s var(--ease);   /* no panel: the smoke passes behind them */
}
.material figure:hover > img{transform:scale(1.03)}
.material figcaption{margin-top:14px; color:var(--faint)}

/* tee reveal */
.reveal-mask{overflow:hidden}
.reveal-mask img{width:100%; transform:scale(1.14); will-change:transform}

.flip{position:relative}
.flip img{transition:opacity .7s var(--ease)}
.flip img:not(.is-on){position:absolute; inset:0; opacity:0}
.flip img.is-on{opacity:1; position:relative}
.flip__ctl{display:flex; gap:8px; justify-content:center; margin-top:22px}
.flip__ctl button{
  padding:9px 18px; border:1px solid var(--faint); color:var(--dim);
  transition:.45s var(--ease);
}
.flip__ctl button:hover{border-color:rgba(242,240,236,.5); color:var(--bone)}
.flip__ctl button.is-active{background:var(--bone); color:var(--black); border-color:var(--bone)}

/* ── 06 · the bond ───────────────────────────────────────── */
.s-bond{
  min-height:100svh; display:grid; place-items:center;
  padding:16vh var(--gut); text-align:center;
  border-top:1px solid var(--faint);
}
.s-bond__inner{width:100%; max-width:660px}
.s-bond__lede{color:var(--dim); margin:2.2em 0 clamp(44px,7vh,80px)}

.field{position:relative; margin-bottom:18px; text-align:left}
.field input{
  width:100%; padding:20px 2px 12px; background:none; color:var(--bone);
  border:0; border-bottom:1px solid rgba(242,240,236,.3);
  font-family:var(--mono); font-size:14px; letter-spacing:.06em;
  outline:none; transition:border-color .5s var(--ease);
}
.field input:focus{border-bottom-color:var(--bone)}
.field label{
  position:absolute; left:2px; top:20px; color:var(--dim);
  pointer-events:none; transition:.45s var(--ease);
}
.field input:focus + label,
.field input:not(:placeholder-shown) + label{
  top:0; font-size:9px; color:var(--faint);
}
.field--invalid input{border-bottom-color:var(--red)}

/* opt-in, and it has to look as considered as the rest of the page */
.consent{
  display:flex; align-items:flex-start; gap:12px; margin-top:26px;
  cursor:pointer; text-align:left;
}
.consent input{position:absolute; opacity:0; width:0; height:0}
.consent__box{
  flex:0 0 auto; width:15px; height:15px; margin-top:2px;
  border:1px solid rgba(242,240,236,.34); position:relative;
  transition:.4s var(--ease);
}
.consent__box::after{
  content:''; position:absolute; inset:3px;
  background:var(--bone); transform:scale(0); transition:.35s var(--ease);
}
.consent:hover .consent__box{border-color:rgba(242,240,236,.7)}
.consent input:checked + .consent__box{border-color:var(--bone)}
.consent input:checked + .consent__box::after{transform:scale(1)}
.consent input:focus-visible + .consent__box{outline:2px solid var(--red); outline-offset:3px}
.consent__text{color:var(--dim); line-height:1.6; transition:color .4s var(--ease)}
.consent:hover .consent__text{color:var(--bone)}

.cf-turnstile{margin-top:26px; display:flex; justify-content:center; min-height:0}
.cf-turnstile:empty{display:none}

.btn{
  display:inline-block; margin-top:clamp(32px,5vh,56px);
  padding:17px 56px; border:1px solid rgba(242,240,236,.55);
  font-family:var(--mono); font-size:10px; letter-spacing:.42em;
  position:relative; overflow:hidden; transition:color .55s var(--ease), border-color .55s var(--ease);
}
.btn span{position:relative; z-index:2}
.btn::before{
  content:''; position:absolute; inset:0; background:var(--bone);
  transform:scaleY(0); transform-origin:bottom; transition:transform .6s var(--ease);
}
.btn:hover{color:var(--black); border-color:var(--bone)}
.btn:hover::before{transform:scaleY(1); transform-origin:top}
.btn:disabled{opacity:.4; pointer-events:none}
.btn--ghost{border-color:var(--faint); margin-top:clamp(36px,6vh,64px)}

.form-note{margin-top:26px; color:var(--faint)}
.form-note.is-error{color:var(--red)}

.done__label{color:var(--dim); margin:0 0 1.6em}
.bond-state--done .script--sm{margin-top:.6em; color:var(--dim)}
.done__body{margin-top:clamp(40px,6vh,72px); color:var(--dim); line-height:2.2}

/* the chain — tout est lié, made literal */
.chain{
  margin-top:clamp(48px,8vh,96px); padding-top:30px;
  border-top:1px solid var(--faint);
}
.chain__label{color:var(--faint)}
.chain .script--sm{margin-top:.5em; color:var(--bone)}
.chain .btn{margin-top:clamp(26px,4vh,40px)}
.invited{
  display:inline-block; margin:-1.4em 0 2.6em;
  padding:8px 14px; border:1px solid var(--faint); color:var(--red);
}

/* ── 07 · the block ──────────────────────────────────────── */
.s-block{
  display:grid; gap:clamp(40px,6vw,80px); align-items:center;
  padding:16vh var(--gut); border-top:1px solid var(--faint);
}
@media(min-width:920px){.s-block{grid-template-columns:.85fr 1.15fr}}
.s-block__art{overflow:hidden}
.s-block__art img{width:100%; filter:contrast(1.05)}
.s-block__body > .mono:first-child{color:var(--dim); display:block; margin-bottom:1.8em}
.s-block__body [data-write]{margin-left:0; max-width:16ch; text-align:left}
.s-block__key{
  display:inline-block; margin-top:clamp(28px,4vh,44px); color:var(--red);
  text-decoration:none; border-bottom:1px solid currentColor; padding-bottom:5px;
  transition:opacity .8s var(--ease);
}
.s-block__key.is-hidden{opacity:0; pointer-events:none}
.locked{
  margin-top:clamp(40px,6vh,72px); padding-top:26px;
  border-top:1px solid var(--faint);
  filter:blur(5px); opacity:.4;
  transition:filter 1.1s var(--ease), opacity 1.1s var(--ease);
}
.locked.is-open{filter:none; opacity:1}
.locked p{margin:0 0 .9em}

/* ── 08 · foot ───────────────────────────────────────────── */
.s-foot{
  padding:14vh var(--gut) 8vh; text-align:center;
  border-top:1px solid var(--faint);
}
.s-foot__mark{color:rgba(242,240,236,.6)}
.s-foot__row{
  display:flex; flex-wrap:wrap; gap:18px 40px; justify-content:center;
  margin-top:clamp(48px,8vh,96px); color:var(--faint);
}

/* ── post-drop ───────────────────────────────────────────── */
.gone{
  position:fixed; inset:0; z-index:90; background:var(--black);
  display:grid; place-content:center; text-align:center; gap:.2em;
}
.gone__next{margin-top:16vh; color:var(--faint); letter-spacing:.42em}

/* ── optional assets — each stays dark until its file exists ── */
/* one continuous body of light and dust behind the whole page.
   Fixed, so it never scrolls — the page moves through it instead. */
.atmos{
  position:fixed; inset:0; z-index:0; pointer-events:none;
  opacity:0; transition:opacity 2.4s var(--ease);
}
.atmos.is-live{opacity:1}
.atmos__v{
  /* One continuous clip. Two attempts at varying the light's direction —
     mirroring with scaleX, then crossfading to a second clip lit from the
     other side — both read as the picture spinning at a section boundary. */
  position:absolute; inset:0; opacity:0;
  transition:opacity 2.6s var(--ease);
  width:100%; height:100%; object-fit:cover;
  transform-origin:center;
  will-change:transform, opacity;
  /* the clip's ground is #0B0B0B, not black. Screen drops it to nothing against
     the page, so only the light and the dust are added and the black stays black. */
  mix-blend-mode:screen;
}
main{position:relative; z-index:1}

.macro{
  margin:0 0 clamp(70px,11vh,150px); padding:0 var(--gut);
  opacity:0; transition:opacity 1.4s var(--ease);
}
.macro.is-live{opacity:1}
.macro img{
  width:100%; height:clamp(200px,34vh,380px); object-fit:cover;
  filter:contrast(1.08);
}
.macro figcaption{margin-top:14px; color:var(--faint)}

.s-block__art{position:relative}
.s-block__video{
  position:absolute; inset:0; width:100%; height:100%; object-fit:cover;
  opacity:0; transition:opacity 1.6s var(--ease);
}
.s-block__video.is-live{opacity:1}

.gone__tex{
  position:absolute; inset:0; width:100%; height:100%; object-fit:cover;
  opacity:0; z-index:-1; transition:opacity 2.4s var(--ease);
}
.gone__tex.is-live{opacity:.55}
.gone{position:fixed; overflow:hidden}

/* ── immersion: cursor, magnifier, inspector ─────────────── */
.cursor{
  position:fixed; top:0; left:0; z-index:70; pointer-events:none;
  display:grid; place-items:center; width:84px; height:84px; margin:-42px 0 0 -42px;
  border:1px solid rgba(242,240,236,.55); border-radius:50%;
  color:var(--bone); letter-spacing:.24em; font-size:9px;
  opacity:0; transform:scale(.4); backdrop-filter:blur(2px);
}
.cursor.is-on{opacity:1; transform:scale(1); transition:opacity .4s var(--ease), transform .5s var(--ease)}
body.has-mag .cursor{opacity:0}
@media(hover:none),(pointer:coarse){.cursor{display:none}}

[data-zoom]{cursor:none}
[data-zoom] img{transition:filter .7s var(--ease)}

/* the magnifier that reads the stitching */
.mag{
  position:absolute; z-index:8; width:280px; height:280px; margin:-140px 0 0 -140px;
  border-radius:50%; border:1px solid rgba(242,240,236,.16);
  background-repeat:no-repeat; pointer-events:none;
  opacity:0; transform:scale(.7); box-shadow:0 30px 80px rgba(0,0,0,.8);
}
.mag.is-on{opacity:1; transform:scale(1); transition:opacity .35s var(--ease), transform .5s var(--ease)}

/* fullscreen inspector */
.lens{
  position:fixed; inset:0; z-index:95; background:rgba(0,0,0,.97);
  display:grid; place-items:center; overflow:hidden; cursor:grab;
}
.lens.is-drag{cursor:grabbing}
.lens img{
  max-width:92vw; max-height:82svh; width:auto; height:auto;
  will-change:transform; user-select:none; -webkit-user-drag:none;
}
.lens__bar{
  position:absolute; bottom:0; left:0; right:0;
  display:flex; justify-content:space-between; gap:20px;
  padding:22px var(--gut); color:var(--dim);
}
.lens__hint{color:var(--faint)}
@media(max-width:700px){.lens__hint{display:none}}
.lens__close{
  position:absolute; top:18px; right:var(--gut);
  color:var(--dim); letter-spacing:.28em; padding:10px;
}
.lens__close:hover{color:var(--bone)}

/* ── reduced motion ──────────────────────────────────────── */
@media (prefers-reduced-motion:reduce){
  *{animation-duration:.01ms !important; transition-duration:.01ms !important}
  .grain{animation:none}
  .veil{display:none}
  .nav,.star,.scroll-hint{opacity:1 !important}
  [data-write] .char{opacity:1 !important; transform:none !important}
}


/* ── no animation library: show everything, pin nothing ───── */
.no-motion .veil,
.no-motion .atmos,
.no-motion .cursor,
.no-motion .streak,
.no-motion .turn-hint{display:none !important}
.no-motion .nav,
.no-motion .star,
.no-motion .scroll-hint,
.no-motion [data-write] .char{opacity:1 !important; transform:none !important; filter:none !important}
.no-motion .locked{filter:none; opacity:1}
.no-motion .cap-seq img{mix-blend-mode:normal}
.no-motion .reveal-mask img{transform:none}
.no-motion .s-quote,
.no-motion .s-film{min-height:auto}