/* ============================================================
   ANQAIR — monochrome kinetic studio site
   Palette: pure black + pure white only.
   ============================================================ */

:root{
  --ease: cubic-bezier(.22,1,.36,1);
  --pad: clamp(1.25rem, 4vw, 4.5rem);
}

/* ---- global mode: base palette + its inverse ---- */
html[data-mode="light"]{ --bg:#ffffff; --fg:#000000; --bg-inv:#000000; --fg-inv:#ffffff; }
html[data-mode="dark"] { --bg:#000000; --fg:#ffffff; --bg-inv:#ffffff; --fg-inv:#000000; }
/* fallback if the head script didn't run */
html:not([data-mode]){ --bg:#ffffff; --fg:#000000; --bg-inv:#000000; --fg-inv:#ffffff; }

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

html{ -webkit-text-size-adjust:100%; }
html.lenis, html.lenis body{ height:auto; }
.lenis.lenis-smooth{ scroll-behavior:auto !important; }
.lenis.lenis-stopped{ overflow:hidden; }

body{
  background:var(--bg);
  color:var(--fg);
  font-family:"Archivo", "Helvetica Neue", Helvetica, Arial, sans-serif;
  font-weight:400;
  line-height:1.15;
  overflow-x:hidden;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}

img{ max-width:100%; display:block; }
a{ color:inherit; text-decoration:none; }

/* ---- relative bands: base inherits the mode palette, invert swaps it ---- */
[data-band="base"]  { background:var(--bg); color:var(--fg); }
[data-band="invert"]{ --bg:var(--bg-inv); --fg:var(--fg-inv); background:var(--bg); color:var(--fg); }

/* smooth crossfade only while actively toggling mode (not during hero invert) */
html[data-switching] body,
html[data-switching] [data-band]{ transition:background-color .45s ease, color .45s ease; }

/* ---- theme toggle ---- */
.theme-toggle{
  position:fixed; top:clamp(.9rem,2.5vw,1.4rem); right:clamp(.9rem,2.5vw,1.4rem);
  z-index:120; display:inline-flex; align-items:center; gap:.55rem;
  padding:.55rem .8rem; min-height:44px;
  background:transparent; border:1px solid currentColor; border-radius:100px;
  color:var(--fg); cursor:pointer; mix-blend-mode:difference; color:#fff;
  transition:opacity .2s ease;
}
.theme-toggle:hover{ opacity:.7; }
.theme-toggle__dot{
  width:14px; height:14px; border-radius:50%;
  border:1.5px solid #fff;
  background:linear-gradient(90deg,#fff 0 50%, transparent 50% 100%);
}
.theme-toggle__label{ font-size:.62rem; letter-spacing:.16em; }
@media (max-width:520px){ .theme-toggle__label{ display:none; } .theme-toggle{ padding:.55rem; } }

/* ---- typography primitives ---- */
.mono{
  font-family:"Space Mono", ui-monospace, "Courier New", monospace;
  font-size:clamp(.66rem,1.1vw,.8rem);
  letter-spacing:.14em;
  text-transform:uppercase;
  font-weight:400;
}
.label{ display:block; opacity:.55; margin-bottom:clamp(1.5rem,4vw,3rem); }

.huge{
  font-weight:900;
  font-size:clamp(2.4rem, 8.5vw, 10rem);
  line-height:.94;
  letter-spacing:-.03em;
  text-transform:uppercase;
}
.big{
  font-weight:800;
  font-size:clamp(1.9rem, 5.5vw, 6rem);
  line-height:1.0;
  letter-spacing:-.025em;
  text-transform:uppercase;
}
.mega{
  font-weight:900;
  font-size:clamp(4rem, 26vw, 26rem);
  line-height:.8;
  letter-spacing:-.04em;
  text-transform:uppercase;
}
.center{ text-align:center; }

.lede{
  font-size:clamp(1rem,1.6vw,1.4rem);
  line-height:1.45;
  font-weight:400;
  max-width:46ch;
  margin-top:clamp(1.5rem,3vw,2.5rem);
  opacity:.82;
}
.lede.center{ margin-left:auto; margin-right:auto; }

/* ---- generic section ---- */
.section{
  position:relative;
  min-height:100svh;
  padding:clamp(4rem,10vh,9rem) var(--pad);
  display:flex;
  flex-direction:column;
  justify-content:center;
  overflow:hidden;
}

/* ============ HERO ============ */
.hero{
  position:relative;
  height:100svh;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  overflow:hidden;
  padding:var(--pad);
}
.anqa-glyph{
  position:absolute;
  inset:0;
  display:flex;
  align-items:center;
  justify-content:center;
  pointer-events:none;
  opacity:0;
}
.anqa-glyph img{
  width:min(78vh, 80vw);
  color:var(--fg);          /* SVG uses currentColor */
}

/* odometer roll */
.roll{
  position:relative;
  z-index:2;
  height:1.1em;
  display:flex;
  align-items:center;
  justify-content:center;
  font-weight:900;
  font-size:clamp(2.6rem, 12vw, 12rem);
  line-height:1;
  letter-spacing:-.03em;
  text-transform:uppercase;
}
.roll__viewport{
  height:1.1em;
  overflow:hidden;
  display:flex;
  justify-content:center;
}
.roll__list{ list-style:none; will-change:transform,filter; }
.roll__list li{
  height:1.1em;
  display:flex;
  align-items:center;
  justify-content:center;
  white-space:nowrap;
}

/* logo lockup (hidden until reveal) */
.lockup{
  position:absolute;
  z-index:3;
  inset:0;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:clamp(.5rem,1.5vw,1rem);
  opacity:0;
  visibility:hidden;
}
.wordmark{
  font-weight:900;
  font-size:clamp(3rem, 18vw, 18rem);
  line-height:.85;
  letter-spacing:-.04em;
}
.tagline{
  font-size:clamp(1rem,2.4vw,2rem);
  font-weight:600;
  letter-spacing:-.01em;
}

/* line-mask reveal wrapper */
.mask{ display:inline-block; overflow:hidden; vertical-align:bottom; }
.mask__inner{ display:inline-block; }

.hero__foot{
  position:absolute;
  left:var(--pad); right:var(--pad);
  bottom:clamp(1rem,3vh,2rem);
  display:flex;
  justify-content:space-between;
  align-items:flex-end;
  gap:1rem;
  z-index:4;
  opacity:0;
}
.hero__foot .mono{ opacity:.6; }
.hero__foot .mono:nth-child(2){ opacity:1; }
.scroll-cue{ animation:bob 1.8s var(--ease) infinite; }
@keyframes bob{ 0%,100%{ transform:translateY(0);} 50%{ transform:translateY(4px);} }

/* ============ STATEMENT ============ */
.statement .huge{ max-width:16ch; }

/* ============ BELIEF ============ */
.belief{ align-items:center; text-align:center; }
.belief .huge{ max-width:22ch; }

/* ============ VISION / MISSION ============ */
.split-block__row{ max-width:min(90rem,100%); }
.split-block .big{ max-width:20ch; margin-top:0; }

/* ============ FOUNDER ============ */
.founder__grid{
  display:grid;
  grid-template-columns:minmax(0,.9fr) minmax(0,1.4fr);
  gap:clamp(2rem,6vw,6rem);
  align-items:center;
}
.founder__portrait{ overflow:hidden; }
.founder__portrait img{ width:100%; display:block; }
/* the illustration is dark line-art on white — blend its background into the section,
   and invert it in dark mode so it reads as white line-art on black. */
html[data-mode="light"] .founder__portrait img{ mix-blend-mode:multiply; }
html[data-mode="dark"]  .founder__portrait img{ filter:invert(1); mix-blend-mode:screen; }
.role{ opacity:.55; margin:1.2rem 0; }

/* ============ PHILOSOPHY (pinned) ============ */
.pin-section{ position:relative; }
.pin-sticky{
  min-height:100svh;
  padding:clamp(4rem,10vh,9rem) var(--pad);
  display:flex;
  flex-direction:column;
  justify-content:center;
}
.principles{ position:relative; display:grid; }
.principle{
  grid-area:1/1;
  display:grid;
  grid-template-columns:auto 1fr;
  gap:clamp(1rem,4vw,4rem);
  align-items:baseline;
  opacity:0;
}
.principle__no{
  font-family:"Space Mono",monospace;
  font-size:clamp(.9rem,1.4vw,1.1rem);
  opacity:.5;
}
.principle h3{
  font-weight:900;
  font-size:clamp(2rem,7vw,7rem);
  line-height:.95;
  letter-spacing:-.03em;
  text-transform:uppercase;
}
.principle p{
  grid-column:2;
  font-size:clamp(1rem,1.6vw,1.5rem);
  margin-top:1rem;
  max-width:40ch;
  opacity:.8;
}

/* ============ WHAT WE BUILD ============ */
.builds__grid{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(min(100%,17rem),1fr));
  gap:1px;
  margin-top:clamp(2.5rem,6vw,5rem);
  background:currentColor;              /* becomes hairline grid lines */
  border:1px solid currentColor;
}
.build{
  background:var(--bg);
  padding:clamp(1.5rem,3vw,2.5rem);
  min-height:clamp(11rem,22vh,16rem);
  display:flex;
  flex-direction:column;
  justify-content:space-between;
  gap:1rem;
}
.build h3{
  font-weight:800; font-size:clamp(1.2rem,2.2vw,1.9rem);
  letter-spacing:-.02em; line-height:1.05; text-transform:uppercase;
}
.build p{ font-size:clamp(.9rem,1.2vw,1.05rem); opacity:.75; line-height:1.4; }

/* ============ MARQUEE ============ */
.marquee-section{ gap:clamp(1rem,2vw,2rem); justify-content:center; }
.marquee{ overflow:hidden; width:100%; white-space:nowrap; padding:.1em 0; }
.marquee__track{
  display:inline-flex; align-items:center; gap:clamp(1rem,3vw,3rem);
  will-change:transform;
  font-weight:900;
  font-size:clamp(2rem,7vw,6.5rem);
  letter-spacing:-.02em;
  text-transform:uppercase;
}
.marquee__track i{ font-style:normal; opacity:.4; font-size:.5em; }

/* ============ APPROACH (pinned horizontal) ============ */
.approach__sticky{ height:100svh; overflow:hidden; }
.approach__track{
  display:flex; align-items:center; gap:clamp(2rem,6vw,7rem);
  will-change:transform; height:100%;
}
.step{ flex:0 0 auto; display:flex; align-items:baseline; gap:1rem; }
.step__no{ font-family:"Space Mono",monospace; opacity:.45; font-size:clamp(.9rem,1.4vw,1.2rem); }
.step h3{
  font-weight:900; font-size:clamp(2.4rem,10vw,9rem); line-height:.9;
  letter-spacing:-.03em; text-transform:uppercase; white-space:nowrap;
}

/* ============ MEANING ============ */
.meaning{ align-items:center; text-align:center; }
.meaning .huge{ max-width:20ch; }

/* ============ GOALS ============ */
.goals__list{ list-style:none; margin-top:clamp(2rem,5vw,4rem); border-top:1px solid currentColor; }
.goals__list li{
  border-bottom:1px solid currentColor;
  padding:clamp(1rem,2.4vw,2rem) 0;
  font-weight:800;
  font-size:clamp(1.4rem,4.5vw,3.4rem);
  letter-spacing:-.02em;
  text-transform:uppercase;
  opacity:0;
}

/* ============ OUTRO ============ */
.outro{ align-items:center; justify-content:space-between; text-align:center; min-height:100svh; }
.outro__cycle{
  position:relative; height:1.6em; margin-top:clamp(2rem,6vh,4rem);
  font-size:clamp(1rem,2.4vw,2rem); font-weight:600; width:100%;
}
.outro__cycle span{
  position:absolute; left:0; right:0; top:0; opacity:0;
}
/* infinite extruded wordmark (WebGL) */
.extrude{
  position:relative; flex:1; width:100%; align-self:stretch;
  min-height:clamp(16rem, 46vh, 40rem);
  overflow:hidden;
}
#extrudeCanvas{ position:absolute; inset:0; width:100%; height:100%; display:block; }
.extrude__fallback{
  position:absolute; inset:0; display:flex; align-items:center; justify-content:center;
  font-weight:900; font-size:clamp(4rem,26vw,24rem); line-height:.8;
  letter-spacing:-.04em; text-transform:uppercase;
}
/* once the shader is live, the DOM fallback is hidden */
body.webgl-on .extrude__fallback{ display:none; }
.outro__foot{
  width:100%; display:flex; justify-content:space-between; align-items:center;
  gap:1rem; flex-wrap:wrap; padding-bottom:clamp(1rem,3vh,2rem);
}
.outro__foot .mono{ opacity:.6; }
.outro__foot a.mono:hover{ opacity:1; text-decoration:underline; }

/* ============ PROGRESS BAR ============ */
.progress{
  position:fixed; left:0; top:0; height:2px; width:100%;
  transform:scaleX(0); transform-origin:0 50%;
  background:#888; z-index:100; mix-blend-mode:difference;
}

/* ============ SPLIT UTILITY ============ */
.line-wrap{ display:block; overflow:hidden; }
.split-line{ display:block; will-change:transform,filter; }
.split-word{ display:inline-block; will-change:transform,filter; }
.split-char{ display:inline-block; will-change:transform; }

/* pre-reveal state (JS reveals on scroll). We hide via visibility — NOT
   transform — so gsap owns the transform from a clean baseline (a CSS
   transform pre-hide pollutes gsap's y cache and breaks yPercent tweens). */
.js [data-split]{ visibility:hidden; }
.js [data-reveal]{ transform:translateY(40px); opacity:0; }

/* ============ SELECTED WORK / PORTFOLIO ============ */
.work{ justify-content:flex-start; gap:0; }
.work .big{ max-width:18ch; margin-bottom:clamp(2.5rem,6vw,5rem); }

/* Featured in-house product (TDAI) */
.featured{
  display:grid;
  grid-template-columns:minmax(0,1fr) minmax(0,1.1fr);
  gap:clamp(1.5rem,4vw,4rem);
  align-items:center;
  border:1px solid currentColor;
  padding:clamp(1.25rem,3vw,2.5rem);
  margin-bottom:clamp(2.5rem,6vw,4.5rem);
}
.featured__media{
  aspect-ratio:16/10;
  display:flex; align-items:center; justify-content:center;
  background:#e9e9e9; overflow:hidden; border-radius:6px;
}
.featured__media img{ width:100%; height:100%; object-fit:cover; }
.featured__meta{ display:flex; flex-direction:column; gap:.6rem; }
.badge{
  align-self:flex-start;
  border:1px solid currentColor; border-radius:100px;
  padding:.35rem .7rem; font-size:.62rem; opacity:.9;
}
.featured__title{
  font-weight:900; font-size:clamp(2.5rem,7vw,5.5rem);
  line-height:.9; letter-spacing:-.03em;
}
.featured__sub{
  font-weight:700; font-size:clamp(1rem,2vw,1.6rem);
  text-transform:uppercase; letter-spacing:-.01em; opacity:.7;
}
.featured .lede{ margin-top:.4rem; }

.deck__label{ opacity:.5; margin-bottom:clamp(1rem,2vw,1.6rem); }

/* Client deck */
.deck{
  display:grid;
  grid-template-columns:repeat(auto-fill,minmax(min(100%,180px),1fr));
  gap:clamp(.6rem,1.4vw,1rem);
  perspective:1400px;
}
.card{
  aspect-ratio:1/1;
  border:1px solid currentColor;
  border-radius:8px; overflow:hidden;
  background:#f2f2f2;
  display:flex; align-items:center; justify-content:center;
  transform-style:preserve-3d; backface-visibility:hidden;
  transition:transform .5s var(--ease), box-shadow .5s var(--ease), filter .5s ease;
  will-change:transform;
}
.card img{
  width:100%; height:100%; object-fit:contain; padding:6%;
  filter:grayscale(1) contrast(1.02);
  transition:filter .5s ease, transform .5s var(--ease);
}
.card:hover, .card:focus-within{
  transform:translateY(-8px) scale(1.03);
  box-shadow:0 20px 45px rgba(0,0,0,.28);
  z-index:2;
}
.card:hover img, .card:focus-within img{ filter:grayscale(0) contrast(1); transform:scale(1.04); }

/* ============ 3D TEXT CUBE ============ */
.cube-section{ align-items:center; justify-content:center; text-align:center; gap:clamp(1.5rem,5vh,3rem); overflow:hidden; }
.cube-stage{
  perspective:1100px;
  width:100%; display:flex; align-items:center; justify-content:center;
  height:clamp(220px,42vh,440px);
}
.cube{
  --s: clamp(150px, 30vw, 300px);
  position:relative;
  width:var(--s); height:var(--s);
  transform-style:preserve-3d;
  will-change:transform;
}
.cube__face{
  position:absolute; inset:0;
  background:var(--fg); color:var(--bg);        /* faces invert the band for pop */
  border:2px solid var(--bg);
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  overflow:hidden; text-align:center;
  font-weight:900; letter-spacing:-.02em; text-transform:uppercase;
  font-size:calc(var(--s) * .1); line-height:1.02;
  backface-visibility:hidden;
}
.cube__face span{ display:block; opacity:.92; white-space:nowrap; }
.cube__face[data-face="front"] { transform:translateZ(calc(var(--s) / 2)); }
.cube__face[data-face="back"]  { transform:rotateY(180deg) translateZ(calc(var(--s) / 2)); }
.cube__face[data-face="right"] { transform:rotateY(90deg) translateZ(calc(var(--s) / 2)); }
.cube__face[data-face="left"]  { transform:rotateY(-90deg) translateZ(calc(var(--s) / 2)); }
.cube__face[data-face="top"]   { transform:rotateX(90deg) translateZ(calc(var(--s) / 2)); }
.cube__face[data-face="bottom"]{ transform:rotateX(-90deg) translateZ(calc(var(--s) / 2)); }
.cube-cap{ display:flex; flex-direction:column; align-items:center; }
.cube-cap .huge{ font-size:clamp(1.8rem,6vw,5rem); }

/* ============ RESPONSIVE ============ */
@media (max-width:760px){
  .founder__grid{ grid-template-columns:1fr; }
  .founder__portrait{ max-width:78%; margin:0 auto; }
  .hero__foot{ font-size:.6rem; }
  .hero__foot .mono:first-child,
  .hero__foot .mono:last-child{ display:none; }
  .principle p{ grid-column:1/-1; }
  .principle{ grid-template-columns:1fr; gap:.5rem; }
  .outro__foot{ justify-content:center; text-align:center; }

  /* Featured product stacks */
  .featured{ grid-template-columns:1fr; }

  /* Portfolio deck → horizontal snap row (thumb-friendly) */
  .deck{
    display:flex; perspective:none;
    overflow-x:auto; scroll-snap-type:x mandatory;
    gap:.75rem; padding-bottom:1rem;
    -webkit-overflow-scrolling:touch;
  }
  .deck .card{
    flex:0 0 62%; scroll-snap-align:center;
    aspect-ratio:4/3;
  }
  .card img{ filter:grayscale(0) contrast(1); }  /* color on mobile — no hover */
}

@media (max-width:420px){
  .deck .card{ flex-basis:74%; }
}

/* ============ REDUCED MOTION ============ */
@media (prefers-reduced-motion: reduce){
  *{ animation:none !important; transition:none !important; }
  .js [data-split]{ visibility:visible !important; }
  .js .split-word, .js .split-line{ transform:none !important; }
  .js [data-reveal]{ transform:none !important; opacity:1 !important; }
  .mask__inner{ transform:none !important; }
  .lockup{ position:static; opacity:1 !important; visibility:visible !important; }
  .roll, .anqa-glyph, .outro__cycle{ display:none !important; }
  .hero__foot{ opacity:1 !important; }
  .principle{ opacity:1 !important; position:relative; margin-bottom:2rem; }
  .principles{ display:block; }
  .goals__list li{ opacity:1 !important; }
  .scroll-cue{ animation:none !important; }
  /* cube: hold a static three-quarter view, no spin */
  .cube{ transform:rotateX(-24deg) rotateY(-34deg) !important; }
  .card img{ filter:grayscale(0) !important; }
}