/* ── Direction A · MUSEUM · hi-fi shared stylesheet ─────────────────── */

/* ── Self-hosted variable fonts (Latin subset only).
      Each woff2 carries every weight in its axis range; the browser
      pulls the right weight from the single file. */
@font-face {
  font-family: 'Inter Tight';
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url('fonts/inter-tight.woff2') format('woff2');
}
@font-face {
  font-family: 'JetBrains Mono';
  font-style: normal;
  font-weight: 100 800;
  font-display: swap;
  src: url('fonts/jetbrains-mono.woff2') format('woff2');
}

:root{
  --bg: oklch(97% 0.005 80);
  --bg-2: oklch(94% 0.007 80);
  --bg-3: oklch(91% 0.01 75);
  --ink: oklch(18% 0.01 60);
  --ink-2: oklch(38% 0.012 60);
  --ink-3: oklch(62% 0.012 60);
  --rule: oklch(88% 0.008 70);
  --accent: oklch(55% 0.14 35);
  --accent-2: oklch(72% 0.1 35);
  --accent-3: oklch(82% 0.06 40);
  --sage: oklch(52% 0.09 155);
  --sage-2: oklch(68% 0.08 155);
  --radius: 14px;
  --radius-lg: 28px;
  --f-display: "Fraktion Mono", "Inter Tight", "Helvetica Neue", Helvetica, Arial, sans-serif;
  --f-sans: "Inter Tight", "Helvetica Neue", Helvetica, Arial, sans-serif;
  --f-mono: "JetBrains Mono", ui-monospace, "SF Mono", Menlo, monospace;
}

*{box-sizing:border-box;margin:0;padding:0}
html,body{background:var(--bg);color:var(--ink);font-family:var(--f-sans);
  -webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;
  font-feature-settings:"ss01","cv11";}
a{color:inherit;text-decoration:none}
img,svg{display:block;max-width:100%}

.wrap{max-width:1280px;margin:0 auto;padding:0 32px}
.rule{height:1px;background:var(--rule);border:0}

/* ── NAV ── */
.nav{position:sticky;top:0;z-index:50;background:color-mix(in oklab, var(--bg) 85%, transparent);
  backdrop-filter:saturate(160%) blur(14px);border-bottom:1px solid var(--rule)}
.nav-inner{display:flex;align-items:center;justify-content:space-between;height:64px}
.brand{display:flex;align-items:center;gap:10px;font-weight:600;letter-spacing:-0.01em}
.brand-dot{width:22px;height:22px;border-radius:6px;background:var(--ink);
  display:grid;place-items:center;color:var(--bg);font-size:12px;font-weight:700}
.nav-links{display:flex;gap:28px;font-size:14px;color:var(--ink-2);white-space:nowrap}
.nav-links a:hover{color:var(--ink)}
.btn{display:inline-flex;align-items:center;gap:8px;padding:10px 16px;border-radius:999px;
  font-size:14px;font-weight:500;border:1px solid transparent;cursor:pointer;
  white-space:nowrap;
  transition:all .15s ease}
.btn-primary{background:var(--ink);color:var(--bg)}
.btn-primary:hover{background:oklch(28% 0.02 60)}
.btn-ghost{border-color:var(--rule);color:var(--ink)}
.btn-ghost:hover{border-color:var(--ink)}

/* ── HERO ── */
.hero{padding:140px 0 40px;position:relative}
.eyebrow{font-family:var(--f-mono);font-size:12px;letter-spacing:.12em;text-transform:uppercase;
  color:var(--ink-3);display:inline-flex;gap:8px;align-items:center;margin-bottom:24px}
.eyebrow::before{content:"";width:24px;height:1px;background:var(--ink-3)}
.display{font-family:var(--f-display);font-weight:500;letter-spacing:-0.035em;
  line-height:0.95;font-size:clamp(52px, 8.5vw, 128px);color:var(--ink);
  text-wrap:balance}
.display em{font-style:normal;color:var(--accent)}
.lede{margin-top:28px;font-size:22px;line-height:1.4;color:var(--ink-2);max-width:620px}

/* ── SECTIONS ── */
.section{padding:96px 0;border-top:1px solid var(--rule);position:relative}
.section-label{display:grid;grid-template-columns:120px 1fr;gap:48px;margin-bottom:48px;align-items:baseline}
.section-num{font-family:var(--f-mono);font-size:13px;color:var(--ink-3);letter-spacing:.08em}
.section-title{font-family:var(--f-display);font-weight:500;letter-spacing:-0.025em;
  font-size:clamp(36px, 4.5vw, 64px);line-height:1;max-width:900px;text-wrap:balance}
.section-title em{font-style:normal;color:var(--accent);font-family:inherit;font-weight:inherit}

/* ── CARDS / TILES ── */
.card{background:var(--bg-2);border-radius:var(--radius-lg);padding:40px;
  border:1px solid var(--rule);display:flex;flex-direction:column;gap:24px;
  transition:transform .3s ease, box-shadow .3s ease}
.card:hover{transform:translateY(-4px);box-shadow:0 24px 60px -30px oklch(18% 0.01 60 / .25)}
.card h3{font-family:var(--f-display);font-weight:500;font-size:28px;letter-spacing:-0.02em;line-height:1.1}
.card p{color:var(--ink-2);font-size:16px;line-height:1.55}
.chip{font-family:var(--f-mono);font-size:11px;letter-spacing:.1em;text-transform:uppercase;
  color:var(--ink-2);padding:5px 10px;border:1px solid var(--rule);border-radius:999px;
  display:inline-block;width:fit-content}

/* ── IMAGERY (hi-fi SVG art) ── */
.art{position:relative;width:100%;aspect-ratio:16/10;border-radius:var(--radius);
  overflow:hidden;border:1px solid var(--rule);background:var(--bg-2)}
.art img{width:100%;height:100%;object-fit:cover;display:block}
.art.tall{aspect-ratio:3/4}
.art.wide{aspect-ratio:21/9}
.art.square{aspect-ratio:1/1}
.art.full{aspect-ratio:auto;height:100%}

/* Fallback placeholder — still used sparingly */
.ph{position:relative;width:100%;aspect-ratio:16/10;border-radius:var(--radius);
  background:
    repeating-linear-gradient(45deg, oklch(92% 0.01 70) 0 10px, oklch(94% 0.007 70) 10px 20px);
  border:1px solid var(--rule);overflow:hidden}

/* ── FOOTER ── */
.foot{padding:80px 0 48px;border-top:1px solid var(--rule);color:var(--ink-2);font-size:14px}
.foot-grid{display:grid;grid-template-columns:2fr 1fr 1fr 1fr;gap:48px}
.foot h4{font-family:var(--f-mono);font-size:11px;letter-spacing:.12em;text-transform:uppercase;
  color:var(--ink-3);margin-bottom:16px;font-weight:500}
.foot ul{list-style:none;display:flex;flex-direction:column;gap:10px}
.foot a:hover{color:var(--ink)}
.foot-mark{font-family:var(--f-display);font-size:96px;letter-spacing:-0.04em;color:var(--ink);line-height:.9;margin-top:48px}
.foot-legal{display:flex;justify-content:space-between;margin-top:32px;padding-top:24px;border-top:1px solid var(--rule);
  font-family:var(--f-mono);font-size:12px;color:var(--ink-3)}

/* ── UTIL ── */
.grid-2{display:grid;grid-template-columns:repeat(2,1fr);gap:24px}
.grid-3{display:grid;grid-template-columns:repeat(3,1fr);gap:24px}
.grid-4{display:grid;grid-template-columns:repeat(4,1fr);gap:16px}
.stack{display:flex;flex-direction:column;gap:12px}
.row{display:flex;gap:16px;align-items:center;flex-wrap:wrap}
.mono{font-family:var(--f-mono)}
.mt-s{margin-top:16px}.mt{margin-top:32px}.mt-l{margin-top:64px}
.muted{color:var(--ink-2)}
.fine{color:var(--ink-3);font-size:13px}
.accent{color:var(--accent)}
.sage{color:var(--sage)}
.chip-sage{color:var(--sage);border-color:color-mix(in oklab, var(--sage) 35%, transparent);
  background:color-mix(in oklab, var(--sage) 6%, transparent)}
.chip-accent{color:var(--accent);border-color:color-mix(in oklab, var(--accent) 35%, transparent);
  background:color-mix(in oklab, var(--accent) 6%, transparent)}

/* ── HI-FI ANIMATED HERO (architectural) ── */
.hifi-hero{position:relative !important;min-height:720px !important;height:min(88vh, 900px) !important;overflow:hidden !important;isolation:isolate;display:flex !important;align-items:center;padding-top:80px !important}
.hifi-hero-canvas{position:absolute;inset:0;z-index:0;pointer-events:none}
.hifi-hero-canvas svg{position:absolute;inset:0;width:100%;height:100%}
.hifi-hero-content{position:relative;z-index:2;width:100%;padding:0}
.hifi-hero-fade{position:absolute;inset:auto 0 0 0;height:160px;z-index:1;
  background:linear-gradient(180deg, transparent 0%, var(--bg) 100%)}

/* Floating geometric primitives — parallax drift */
.gp{position:absolute}
@keyframes gp-drift-y {
  0%,100% { transform: translateY(0); }
  50%     { transform: translateY(-14px); }
}
@keyframes gp-drift-x {
  0%,100% { transform: translateX(0); }
  50%     { transform: translateX(12px); }
}
@keyframes gp-rotate-slow {
  from { transform: rotate(0deg); }
  to   { transform: rotate(360deg); }
}
@keyframes gp-breathe {
  0%,100% { transform: scale(1); opacity: .9; }
  50%     { transform: scale(1.04); opacity: 1; }
}
@keyframes light-sweep {
  0%,100% { transform: translateX(-10%) rotate(-8deg); opacity: 0; }
  40%     { opacity: .25; }
  60%     { opacity: .25; }
  100%    { transform: translateX(110%) rotate(-8deg); opacity: 0; }
}
@media (prefers-reduced-motion: reduce){
  .gp, .light-sweep { animation: none !important; }
}

/* ────────────────────────────────────────────────────────────
   ✧ MOTION SYSTEM (shared)
   ──────────────────────────────────────────────────────────── */

/* Nav shrink + progressive blur */
.nav{transition:height .3s ease, background .3s ease, border-color .3s ease}
.nav.is-scrolled{
  background:color-mix(in oklab, var(--bg) 75%, transparent);
  border-bottom-color:color-mix(in oklab, var(--ink) 10%, transparent);
}
.nav.is-scrolled .nav-inner{height:56px}
.nav-inner{transition:height .3s ease}

/* Custom cursor */
.cursor-dot{
  position:fixed; top:0; left:0; width:10px; height:10px; border-radius:50%;
  background:var(--accent); pointer-events:none; z-index:9999;
  mix-blend-mode:multiply; transition:width .2s ease, height .2s ease, opacity .2s;
  transform:translate3d(-100px,-100px,0);
  margin-left:-5px; margin-top:-5px;
}
.cursor-dot.is-hover{width:28px; height:28px; margin-left:-14px; margin-top:-14px; opacity:.6}
@media (pointer: coarse){ .cursor-dot{display:none} }

/* Reveal — default slide + fade. Initial state, animated to visible via .is-in */
[data-reveal]{opacity:0; transform:translate3d(0, 18px, 0);
  transition:opacity .9s cubic-bezier(.2,.7,.2,1), transform .9s cubic-bezier(.2,.7,.2,1)}
[data-reveal].is-in{opacity:1; transform:none}
/* Safety: when JS isn't ready yet (or in some iframe contexts where document.timeline
   freezes transitions at t=0), always show content. JS removes .no-reveal on ready. */
html:not(.js-ready) [data-reveal]{opacity:1; transform:none; transition:none}

/* Text-split reveal: parent is visible immediately, children animate up */
[data-reveal][data-split]{opacity:1 !important; transform:none !important; transition:none}

/* Reveal variants */
[data-reveal="up"]{transform:translate3d(0, 36px, 0)}
[data-reveal="down"]{transform:translate3d(0, -24px, 0)}
[data-reveal="left"]{transform:translate3d(-28px, 0, 0)}
[data-reveal="right"]{transform:translate3d(28px, 0, 0)}
[data-reveal="scale"]{transform:scale(.96); transform-origin:center}
[data-reveal="scale"].is-in{transform:scale(1)}
[data-reveal="clip"]{clip-path:inset(0 0 100% 0); opacity:1; transform:none;
  transition:clip-path 1.1s cubic-bezier(.77,0,.18,1)}
[data-reveal="clip"].is-in{clip-path:inset(0 0 0 0)}

/* Stagger — applied on parent via [data-stagger] */
[data-stagger] > *{transition-delay:calc(var(--i, 0) * 60ms + 100ms)}

/* Split text reveals — word-level slide-up (no overflow clip, rely on line-height) */
.sp-w{display:inline-block; vertical-align:baseline; line-height:1; padding-right:.04em}
.sp-w-in{display:inline-block;
  transition:transform .9s cubic-bezier(.2,.8,.2,1) calc(var(--i, 0) * 40ms);
  will-change:transform}
.sp-w-in{transform:translateY(0)}
html.js-ready [data-reveal]:not(.is-in) .sp-w-in{transform:translateY(0.35em); opacity:0}
html.js-ready [data-reveal].is-in .sp-w-in{transform:translateY(0); opacity:1}
.sp-w-in{opacity:1; transition:transform .9s cubic-bezier(.2,.8,.2,1) calc(var(--i, 0) * 40ms),
  opacity .6s ease calc(var(--i, 0) * 40ms)}

.sp-ch{display:inline-block; opacity:0; transform:translateY(8px);
  transition:opacity .6s ease, transform .6s cubic-bezier(.2,.7,.2,1);
  transition-delay:calc(var(--i, 0) * 12ms)}
[data-reveal].is-in .sp-ch{opacity:1; transform:none}

/* Page enter */
html.page-in body{opacity:1; transition:opacity .5s ease}

/* Buttons — refined motion */
.btn{position:relative; overflow:hidden; will-change:transform}
.btn::after{
  content:""; position:absolute; inset:0; border-radius:inherit;
  background:linear-gradient(110deg, transparent 40%, oklch(100% 0 0 / .22) 50%, transparent 60%);
  transform:translateX(-100%); transition:transform .7s ease;
  pointer-events:none;
}
.btn:hover::after{transform:translateX(100%)}
.btn-primary:hover{transform:translateY(-1px)}
[data-magnet]{transition:transform .4s cubic-bezier(.2,.7,.2,1)}

/* Card hover refined */
.card{transition:transform .5s cubic-bezier(.2,.7,.2,1),
  box-shadow .5s ease, border-color .3s ease, background .3s ease}
.card:hover{border-color:color-mix(in oklab, var(--ink) 22%, transparent)}

/* Reel marquee baseline */
.marquee{display:flex; gap:20px; width:max-content;
  animation:marquee linear infinite; animation-duration:40s}
@keyframes marquee{from{transform:translateX(0)} to{transform:translateX(-50%)}}
@media (prefers-reduced-motion: reduce){.marquee{animation:none}}

/* Scene scrub — consumers use var(--p) ranging 0→1 */
[data-scene]{--p:0}

/* Link underline animated */
.ulink{position:relative; display:inline-block; padding-bottom:2px}
.ulink::after{
  content:""; position:absolute; left:0; right:0; bottom:0; height:1px;
  background:currentColor; transform:scaleX(.2); transform-origin:left;
  transition:transform .5s cubic-bezier(.2,.7,.2,1);
}
.ulink:hover::after{transform:scaleX(1)}

/* Grain overlay helper */
.grain{position:relative}
.grain::before{
  content:""; position:absolute; inset:0; pointer-events:none; opacity:.06;
  mix-blend-mode:multiply;
  background-image:url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0naHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmcnIHdpZHRoPScyMDAnIGhlaWdodD0nMjAwJz48ZmlsdGVyIGlkPSduJz48ZmVUdXJidWxlbmNlIHR5cGU9J2ZyYWN0YWxOb2lzZScgYmFzZUZyZXF1ZW5jeT0nLjknIG51bU9jdGF2ZXM9JzInIHN0aXRjaFRpbGVzPSdzdGl0Y2gnLz48L2ZpbHRlcj48cmVjdCB3aWR0aD0nMTAwJScgaGVpZ2h0PScxMDAlJyBmaWx0ZXI9J3VybCgjbiknIG9wYWNpdHk9Jy45Jy8+PC9zdmc+");
}

/* Divider with motion */
.rule-anim{height:1px; background:var(--rule); position:relative; overflow:hidden}
.rule-anim::after{
  content:""; position:absolute; inset:0; width:120px;
  background:linear-gradient(90deg, transparent, var(--accent), transparent);
  animation:rule-sweep 6s ease-in-out infinite;
}
@keyframes rule-sweep{
  0%{transform:translateX(-120px)} 50%{transform:translateX(100vw)} 100%{transform:translateX(100vw)}
}

/* Kbd style */
.kbd{font-family:var(--f-mono); font-size:11px; padding:2px 6px; border:1px solid var(--rule);
  border-radius:6px; background:var(--bg-2); color:var(--ink-2)}

/* Tag row */
.tag-row{display:flex; flex-wrap:wrap; gap:8px}

/* Section number mark */
.num-mark{font-family:var(--f-mono); font-size:11px; letter-spacing:.12em; color:var(--ink-3);
  text-transform:uppercase}

/* ── SHARED CLOSING CTA + FOOTER ─────────────────────────────── */
.cta3{padding:160px 0 200px; background:var(--ink); color:var(--bg);
  position:relative; overflow:hidden; isolation:isolate}
.cta3::before{
  content:""; position:absolute; inset:0; z-index:0;
  background:
    radial-gradient(ellipse 60% 60% at 80% 30%, oklch(55% 0.14 35 / .35), transparent 70%),
    radial-gradient(ellipse 50% 60% at 10% 80%, oklch(52% 0.09 155 / .18), transparent 70%);
  animation:cta3-drift 22s ease-in-out infinite}
@keyframes cta3-drift{
  0%, 100%{transform:scale(1) translate(0,0)}
  50%{transform:scale(1.08) translate(2%, -2%)}
}
.cta3::after{
  content:""; position:absolute; inset:0; z-index:0;
  background-image:
    linear-gradient(to right, oklch(100% 0 0 / .03) 1px, transparent 1px),
    linear-gradient(to bottom, oklch(100% 0 0 / .03) 1px, transparent 1px);
  background-size:64px 64px; opacity:.5}
.cta3 .wrap{position:relative; z-index:2}
.cta3-grid{display:grid; grid-template-columns:1.4fr 1fr; gap:80px; align-items:center}
.cta3 h2{
  font-family:var(--f-sans); font-weight:500; letter-spacing:-0.045em;
  font-size:clamp(56px, 9vw, 152px); line-height:0.92;
  color:var(--bg); text-wrap:balance; margin:0}
.cta3 h2 em{font-style:normal; color:var(--accent-2)}
.cta3 .right{display:flex; flex-direction:column; gap:32px}
.cta3 .pitch{font-size:18px; line-height:1.5; color:oklch(85% 0.008 60); max-width:36ch}
.cta3 .pitch strong{color:var(--bg); font-weight:500}
.cta3 .ctas{display:flex; gap:14px; flex-wrap:wrap}
.cta3 .btn-primary{background:var(--bg); color:var(--ink); padding:16px 26px; font-size:15px}
.cta3 .btn-primary:hover{background:var(--accent-2); color:var(--ink)}
.cta3 .btn-ghost{border:1px solid oklch(48% 0.01 60); color:var(--bg); padding:16px 26px; font-size:15px}
.cta3 .btn-ghost:hover{border-color:var(--bg); background:oklch(28% 0.01 60)}
.cta3 .meta-row{display:flex; gap:32px; flex-wrap:wrap;
  font-family:var(--f-mono); font-size:11px; letter-spacing:.1em;
  color:oklch(70% 0.01 60); text-transform:uppercase; margin-top:32px;
  padding-top:32px; border-top:1px solid oklch(28% 0.01 60)}
.cta3 .meta-row span{display:flex; align-items:center; gap:8px}
.cta3 .meta-row span::before{content:""; width:6px; height:6px; border-radius:50%;
  background:var(--sage); box-shadow:0 0 0 4px oklch(52% 0.09 155 / .15)}
@media (max-width: 980px){
  .cta3-grid{grid-template-columns:1fr; gap:40px}
}

.foot3{padding:80px 0 40px; background:var(--bg)}
.foot3 .top{display:grid; grid-template-columns:2fr 3fr; gap:80px; margin-bottom:64px;
  padding-bottom:64px; border-bottom:1px solid var(--rule)}
.foot3 .brand-row{display:flex; flex-direction:column; gap:16px}
.foot3 .brand-row .b{display:flex; align-items:center; gap:10px; font-weight:600; font-size:18px}
.foot3 .brand-row .desc{color:var(--ink-2); font-size:15px; line-height:1.5; max-width:34ch}
.foot3 .brand-row .em{color:var(--ink); font-family:var(--f-sans); font-weight:500;
  font-size:14px; margin-top:8px; display:inline-block}
.foot3 .links{display:grid; grid-template-columns:repeat(3, 1fr); gap:48px}
.foot3 h4{font-family:var(--f-mono); font-size:11px; letter-spacing:.12em;
  text-transform:uppercase; color:var(--ink-3); font-weight:500; margin-bottom:18px}
.foot3 ul{list-style:none; padding:0; margin:0; display:flex; flex-direction:column; gap:10px}
.foot3 ul a{color:var(--ink-2); font-size:14px; text-decoration:none}
.foot3 ul a:hover{color:var(--ink)}
.foot3 .legal{display:flex; justify-content:space-between; align-items:center;
  flex-wrap:wrap; gap:16px; padding-top:24px;
  font-family:var(--f-mono); font-size:11px; letter-spacing:.08em;
  color:var(--ink-3); text-transform:uppercase}
@media (max-width: 980px){
  .foot3 .top{grid-template-columns:1fr; gap:48px}
  .foot3 .links{grid-template-columns:1fr 1fr; gap:32px}
}

/* ── Mobile nav (shared) ─────────────────────────── */
.nav-burger{display:none; width:40px; height:40px; border:0;
  border-radius:10px; background:var(--ink); cursor:pointer; align-items:center;
  justify-content:center; padding:0; flex-shrink:0}
.nav-burger:hover{background:oklch(28% 0.02 60)}
.nav-burger span{display:block; width:16px; height:2px; background:var(--bg); position:relative; border-radius:1px}
.nav-burger span::before, .nav-burger span::after{content:""; position:absolute;
  left:0; width:16px; height:2px; background:var(--bg); border-radius:1px}
.nav-burger span::before{top:-6px}
.nav-burger span::after{top:6px}
.nav-drawer{display:none; position:fixed; top:100%; left:0; width:100%;
  height:calc(100vh - var(--nav-h, 64px)); z-index:49;
  background:var(--bg); padding:32px; flex-direction:column; gap:8px;
  border-top:1px solid var(--rule); overflow-y:auto}
.nav-drawer a{display:block; padding:18px 0; font-family:var(--f-sans); font-weight:500;
  font-size:24px; letter-spacing:-0.02em; border-bottom:1px solid var(--rule);
  color:var(--ink); text-decoration:none}
.nav-drawer.is-open{display:flex}

/* ── Phone breakpoints (shared) ───────────────────── */
@media (max-width: 720px){
  .wrap{padding:0 20px}
  .section{padding:64px 0}
  .nav-links, .nav-cta, .nav .btn{display:none !important}
  .nav-burger{display:inline-flex !important}
  .grid-2, .grid-3, .grid-4{grid-template-columns:1fr !important}
  .foot3{padding:56px 0 32px}
  .foot3 .top{grid-template-columns:1fr; gap:40px; padding-bottom:40px; margin-bottom:40px}
  .foot3 .links{grid-template-columns:1fr 1fr; gap:32px}
  /* Hide Legal column on mobile — Terms/Privacy/Security are repeated below the divider */
  .foot3 .links > div:nth-child(3){display:none}
  .foot3 .legal{flex-direction:column; align-items:flex-start; gap:12px; text-align:left}
}
@media (max-width: 480px){
  .wrap{padding:0 16px}
  .section{padding:48px 0}
  .foot3 .links{grid-template-columns:1fr; gap:24px}
}