/* ═══ DEVLIN DEFENCE ═══ */
:root{
  --ink:#0b0d0c;
  --cream:#f6ece4;
  --green:#2b4035;
  --green-deep:#13201a;
  --acid:#b8cbbd;
  --champagne:#d9c5a5;
  --cream-muted:rgba(246,236,228,.62);
  --line:rgba(28,41,34,.16);
  --pad:clamp(24px,4.5vw,64px);
  --ease:cubic-bezier(.19,1,.22,1);
  --sans:"Manrope",system-ui,sans-serif;
  --mono:"DM Mono",monospace;
}
*{margin:0;padding:0;box-sizing:border-box}
html{-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;background:var(--ink)}
body{background:transparent;color:var(--green);font-family:var(--sans);font-size:16px;line-height:1.6;overflow-x:hidden}
::selection{background:var(--green);color:var(--cream)}
a{color:inherit;text-decoration:none}
img{display:block;max-width:100%}
.wrap{width:100%;padding:0 var(--pad)}
.eyebrow{font-family:var(--mono);font-weight:400;font-size:10px;letter-spacing:.16em;text-transform:uppercase}

.grain{position:fixed;inset:0;z-index:900;pointer-events:none;opacity:.05;
  background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 180 180' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.8'/%3E%3C/svg%3E")}

/* ── fixed ink ground behind everything ── */
#bgwash{position:fixed;inset:0;z-index:-1;background:var(--ink);overflow:hidden}

/* particle canvas — pointer-events:none so it never swallows clicks meant for
   the hero CTA; pointer tracking listens on window */
#cv{position:fixed;inset:0;width:100%;height:100%;display:block;z-index:2;touch-action:pan-y;opacity:0;will-change:opacity;pointer-events:none}

/* ── REVEALS ── */
.reveal{opacity:0;transform:translateY(26px);transition:opacity 1s var(--ease),transform 1s var(--ease)}
.reveal.in{opacity:1;transform:none}
.reveal-head{opacity:0;transform:translateY(38px);transition:opacity 1.1s var(--ease),transform 1.1s var(--ease);will-change:transform,opacity}
.reveal-head.in{opacity:1;transform:none}

/* word cascade masks (captions) */
.w{display:inline-block;overflow:hidden;vertical-align:top;padding:.1em .24em .16em .06em;margin:-.1em -.24em -.16em -.06em}
.wi{display:inline-block}

/* ── NAV — blend-difference chrome adapts across ink and cream ── */
.nav{position:fixed;z-index:800;top:0;left:0;width:100%;padding:22px var(--pad);
  display:flex;align-items:center;justify-content:space-between;mix-blend-mode:difference;color:#fff}
.brand img{width:32px;filter:brightness(0) invert(1)}
.nav-links{display:flex;align-items:center;gap:34px}
.btn{border:1px solid #fff;padding:9px 20px;border-radius:40px;color:#fff;
  font-family:var(--mono);font-size:10px;letter-spacing:.12em;text-transform:uppercase;
  transition:background .35s var(--ease),color .35s var(--ease),transform .45s var(--ease)}
.btn:hover{background:#fff;color:#000}

/* ── BOOT COVER ── */
#boot{position:fixed;inset:0;z-index:1000;display:flex;align-items:center;justify-content:center;
  background:var(--cream);transform-origin:top;transition:transform 1.1s cubic-bezier(.77,0,.18,1)}
#boot.gone{transform:translateY(-105%);pointer-events:none}
#ts-loader{position:absolute;inset:0;z-index:5;display:flex;align-items:center;justify-content:center;
  background:var(--ink);transition:opacity .6s}
#ts-loader .ts-load-logo{filter:brightness(0) invert(.92)}
#ts-loader .ts-load-bar{background:rgba(246,236,228,.14)}
#ts-loader.gone{opacity:0;pointer-events:none}
.ts-load-inner{display:flex;flex-direction:column;align-items:center;gap:22px}
.ts-load-logo{width:clamp(54px,6vw,76px);height:auto;animation:ts-logo-pulse 1.9s ease-in-out infinite}
@keyframes ts-logo-pulse{0%,100%{opacity:.4;transform:scale(.95)}50%{opacity:1;transform:scale(1)}}
.ts-load-bar{position:relative;width:120px;height:1px;overflow:hidden;background:var(--line)}
.ts-load-bar::after{content:"";position:absolute;top:0;left:0;height:100%;width:40%;background:var(--green);animation:ts-load-sweep 1.4s ease-in-out infinite}
#ts-loader .ts-load-bar::after{background:var(--acid)}
@keyframes ts-load-sweep{0%{left:-40%}100%{left:100%}}

/* ═══ CHAPTER ONE — PINNED HERO + SHAPESHIFTING STORY ═══ */
.ts-track{position:relative;width:100%;height:760vh;background:transparent}
.ts-stage{position:sticky;top:0;height:100vh;width:100%;overflow:hidden;background:transparent}

/* faint survey grid, parallaxed against scroll */
.ts-stage::before{content:"";position:absolute;inset:0;z-index:0;pointer-events:none;opacity:.08;
  background:repeating-linear-gradient(90deg,transparent 0 96px,rgba(43,64,53,.02) 96px 97px),
             repeating-linear-gradient(0deg,transparent 0 96px,rgba(43,64,53,.014) 96px 97px);
  background-position:var(--gp,0px) 0px,0px var(--gp,0px);
  -webkit-mask-image:radial-gradient(circle at 55% 50%,black 6%,transparent 70%);
          mask-image:radial-gradient(circle at 55% 50%,black 6%,transparent 70%)}

/* HERO */
.ts-hero{position:absolute;inset:0;z-index:6;display:flex;flex-direction:column;justify-content:center;
  padding:128px 0 64px;pointer-events:none;color:var(--cream);will-change:opacity,transform}
.ts-hero::before{content:"";position:absolute;inset:0;z-index:1;pointer-events:none;
  background:linear-gradient(90deg,rgba(11,13,12,.94) 0%,rgba(11,13,12,.7) 34%,rgba(11,13,12,0) 67%)}
.ts-hero .wrap{position:relative;z-index:2;pointer-events:auto;width:min(56vw,980px)}
.ts-hero .eyebrow{display:block;margin-bottom:28px;color:var(--cream-muted)}
h1.hero-title{font-weight:300;font-size:clamp(54px,6.25vw,108px);line-height:.92;letter-spacing:-.06em}
h1.hero-title .line{display:block;overflow:hidden;padding-bottom:.18em;margin-bottom:-.09em}
h1.hero-title .line>span{display:block;transform:translateY(115%);transition:transform 1.15s cubic-bezier(.22,1,.36,1)}
body.booted h1.hero-title .line>span{transform:none}
h1.hero-title .line:nth-child(2)>span{transition-delay:.08s}
h1.hero-title .line:nth-child(3)>span{transition-delay:.16s}
.hero-sub{margin-top:30px;max-width:62ch;font-size:clamp(.95rem,1.4vw,1.12rem);color:var(--cream-muted);line-height:1.6}
.hero-cta{margin-top:42px}
.cta{display:inline-flex;align-items:center;gap:12px;border:1px solid rgba(246,236,228,.5);color:var(--cream);
  padding:15px 28px;border-radius:48px;font-family:var(--mono);font-weight:400;font-size:11px;letter-spacing:.14em;text-transform:uppercase;
  transition:gap .4s var(--ease),background .4s var(--ease),color .4s var(--ease),border-color .4s var(--ease),transform .4s var(--ease)}
.cta:hover{gap:20px;background:var(--cream);color:var(--ink);border-color:var(--cream)}
.cta span{color:var(--champagne)}
.cta:hover span{color:var(--ink)}

/* static fallback for devices without WebGL */
.webgl-fallback #cv{display:none}
.webgl-fallback .ts-stage::after{content:"";position:absolute;inset:0;z-index:1;pointer-events:none;
  background:url("../../assets/hero-signal-form-v2.png") 68% 50%/cover no-repeat;
  opacity:.82;filter:saturate(.72) contrast(1.08)}
.webgl-fallback #ts-loader{display:none}
.webgl-fallback .ts-track{height:100vh}
.webgl-fallback .ts-hud{display:none}
.webgl-fallback .company-panel{margin-top:0}
.hero-foot{position:absolute;bottom:24px;left:var(--pad);right:var(--pad);padding-top:15px;
  border-top:0;display:flex;justify-content:flex-end;
  font-family:var(--mono);font-size:9px;letter-spacing:.12em;text-transform:uppercase;color:var(--cream-muted)}
.scroll-cue b{display:inline-block;margin-left:8px;font-weight:400;animation:drop 1.5s infinite}
@keyframes drop{50%{transform:translateY(5px)}}

/* staged hero entrance once the boot cover lifts */
.ts-hero .eyebrow,.ts-hero .hero-sub,.ts-hero .hero-cta,.ts-hero .hero-foot{opacity:0;transition:opacity 1.2s var(--ease)}
body.booted .ts-hero .eyebrow{opacity:1;transition-delay:.15s}
body.booted .ts-hero .hero-sub{opacity:1;transition-delay:.6s}
body.booted .ts-hero .hero-cta{opacity:1;transition-delay:.78s}
body.booted .ts-hero .hero-foot{opacity:1;transition-delay:.95s}

/* COMPANY STATEMENT — rides up over the pinned stage via native scroll; the
   negative margin overlaps the last 100vh of the track, and the sticky inner
   pins the text centred for ~100vh before releasing into the flow chapter */
.company-panel{position:relative;z-index:3;margin-top:-100vh;min-height:200vh;background:var(--cream)}
.company-panel__hold{position:sticky;top:0;height:100vh;display:flex;align-items:center;justify-content:center;padding:12vh var(--pad) 8vh}
.company-panel p{width:min(92vw,1950px);font-size:clamp(36px,4.9vw,104px);font-weight:300;line-height:1.055;letter-spacing:-.052em;color:var(--ink);text-align:left;text-wrap:balance}

/* STORY CAPTIONS — opacity/transform driven per-frame from animation.js */
.ts-hud{position:absolute;inset:0;z-index:3;pointer-events:none}
.ts-chapter{position:absolute;top:108px;left:var(--pad);color:var(--cream-muted);opacity:0;will-change:opacity,transform}
.ts-caption{position:absolute;inset:0;overflow:hidden;text-align:center}
.ts-cap{position:absolute;inset:0;width:100%;display:flex;flex-direction:column;justify-content:center;align-items:flex-start;gap:1.2rem;padding:0 var(--pad);opacity:0;text-align:left;will-change:opacity,transform,filter}
.ts-caption{ --ci:#f6ece4; --ci-soft:#d7cec1; }
.ts-cap h2{font-weight:300;font-size:clamp(1.7rem,3.1vw,3.05rem);line-height:1.06;letter-spacing:-.035em;color:var(--ci);max-width:15ch;margin:0}
.ts-cap h2 em{font-style:normal;font-weight:400;color:var(--ci-soft)}
.ts-cap h2 .cw{display:inline-block;opacity:0;transform:translateY(-.7em);will-change:transform,opacity}
.ts-side{width:min(34ch,28vw);margin:0;font-size:.95rem;line-height:1.6;color:var(--cream-muted)}

/* ═══ FLOW ═══ */
#flow{position:relative;z-index:auto;background:transparent}

/* ═══ CONTACT ═══ */
.contact{scroll-margin-top:80px;position:relative;z-index:1;background:var(--green-deep);color:var(--cream);
  text-align:center;min-height:100svh;display:flex;flex-direction:column;justify-content:center;padding:clamp(80px,14vh,160px) 0 0}
.contact .wrap{position:relative;z-index:2;margin:auto 0}
.contact .eyebrow{display:block;margin-bottom:30px;color:var(--cream-muted)}
.contact-title{font-weight:300;font-size:clamp(3rem,8.5vw,8.6rem);line-height:.92;letter-spacing:-.06em}
.contact-title em{font-style:normal;font-weight:400}
.mail{display:inline-flex;align-items:center;gap:14px;margin-top:clamp(32px,6vh,60px);
  font-family:var(--mono);font-weight:400;font-size:clamp(12px,1.6vw,15px);letter-spacing:.06em;
  border:1px solid var(--cream-muted);padding:16px 30px;border-radius:50px;
  transition:background .4s var(--ease),color .4s var(--ease),gap .4s var(--ease),transform .45s var(--ease)}
.mail:hover{background:var(--cream);color:var(--green-deep);gap:22px}

footer{color:var(--cream-muted);border-top:1px solid rgba(246,236,228,.12);padding:36px var(--pad);margin-top:12vh}
.foot{display:flex;justify-content:space-between;align-items:center;gap:22px;flex-wrap:wrap;
  font-family:var(--mono);font-size:10px;letter-spacing:.08em;text-transform:uppercase}
.foot .fb{display:flex;align-items:center;gap:12px}
.foot .fb img{width:30px;filter:brightness(0) invert(.92)}
.foot-social{display:flex;align-items:center;gap:16px}
.foot-social a{color:var(--cream-muted);transition:color .3s var(--ease);display:flex;align-items:center}
.foot-social a:hover{color:var(--cream)}
.foot-credit{flex-basis:100%;font-size:10px;text-transform:none;letter-spacing:.02em;opacity:.55}
.foot-credit a{text-decoration:underline;text-underline-offset:2px}
.foot-credit a:hover{color:var(--cream)}

/* ── SCROLL SIGNAL ── */
.scroll-signal{position:fixed;right:22px;top:0;height:100vh;width:1px;z-index:200;pointer-events:none;mix-blend-mode:difference}
.sig-track{position:absolute;top:80px;bottom:80px;left:0;width:1px;background:linear-gradient(to bottom,transparent,#fff 15%,#fff 85%,transparent);opacity:.14}
.sig-dot{position:absolute;left:-4px;width:9px;height:9px;border-radius:50%;background:#fff;margin-top:-4.5px;opacity:0;transition:opacity .6s}

/* ── RESPONSIVE ── */
@media(max-width:900px){
  .ts-track{height:820vh}
  h1.hero-title{font-size:clamp(34px,11.4vw - 4px,68px)}
  .ts-hero .wrap{width:100%}
  .ts-hero::before{background:linear-gradient(180deg,rgba(11,13,12,.9),rgba(11,13,12,.58) 62%,rgba(11,13,12,.12))}
  .ts-chapter{top:auto;bottom:26px;left:var(--pad)}
  .ts-cap{justify-content:flex-start;align-items:center;padding:9vh var(--pad) 0;text-align:center;gap:.9rem}
  .ts-cap h2{font-size:clamp(1.7rem,7.4vw,2.5rem);max-width:18ch}
  .ts-side{width:auto;max-width:36ch;margin:0;font-size:.85rem;line-height:1.5}
  .company-panel__hold{align-items:center;justify-content:center;padding:12vh var(--pad) 8vh}
  .company-panel p{font-size:clamp(32px,8.3vw,48px);width:100%;line-height:1.08}
}
@media(max-width:760px){
  .contact-title{font-size:clamp(2.4rem,11vw,3.6rem)}
  .foot{gap:16px}
}

/* ── REDUCED MOTION ── */
@media(prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *{animation:none!important;transition:none!important}
  #boot{display:none}
  h1.hero-title .line>span{transform:none!important}
  .ts-cap h2 .cw{opacity:1!important;transform:none!important}
  .ts-hero .eyebrow,.ts-hero .hero-sub,.ts-hero .hero-cta,.ts-hero .hero-foot{opacity:1}
  .reveal,.reveal-head{opacity:1;transform:none}
}