/* Open Dimension. Everything visual (backgrounds, grid, wireframes, glass) is drawn by WebGL2 in #gl;
   this file styles the text and layout on top, plus a plain CSS fallback for browsers without WebGL2. */

:root {
  --serif: 'Instrument Serif', Georgia, 'Times New Roman', serif;
  --sans: 'Inter', -apple-system, BlinkMacSystemFont, 'SF Pro Text', system-ui, sans-serif;
  --mono: ui-monospace, 'SF Mono', SFMono-Regular, Menlo, Consolas, monospace;

  --black: #000;
  --white: #f5f5f7;
  --light: #f5f5f7;
  --ink: #1d1d1f;
  --cyan: #64d2ff;
  --blue: #0a84ff;
  --muted-dark: rgba(245,245,247,.62);
  --muted-light: rgba(29,29,31,.6);
  --ease: cubic-bezier(.22, .9, .2, 1);
  --ease-io: cubic-bezier(.76, 0, .24, 1);
  /* Motion scale: feedback / state / reveal / cinematic */
  --t-fast: .3s; --t-base: .6s; --t-slow: 1.2s; --t-cine: 1.6s; --t-loop: 2s;
  --pad: clamp(18px, 4vw, 56px);
  --vh: 100vh;
}
@supports (height: 100svh) { :root { --vh: 100svh; } }

* { box-sizing: border-box; }
html { background: var(--black); }
body {
  margin: 0; background: transparent; color: var(--white);
  font-family: var(--sans); font-size: 17px; line-height: 1.45;
  -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale;
}
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: pointer; }
h1, h2, h3, p { margin: 0; }
main { position: relative; z-index: 1; }

#gl { position: fixed; inset: 0; width: 100vw; height: 100vh; z-index: 0; pointer-events: none; display: block; }
@supports (height: 100svh) { #gl { height: 100svh; } }

/* Lenis */
html.lenis, html.lenis body { height: auto; }
.lenis.lenis-smooth { scroll-behavior: auto !important; }
.lenis.lenis-stopped { overflow: hidden; }

/* ---------- Line masks: text rises out of a clip, line by line ---------- */
.mk { display: block; overflow: hidden; padding: .08em .04em .2em; margin: -.08em 0 -.2em; }
.mk > span { display: block; }
.motion .mk > span { transform: translateY(115%); transition: transform var(--t-slow) var(--ease); }
.motion .in .mk > span, .motion .mk.in > span { transform: none; }

/* ---------- Scenes ---------- */
.scene { position: relative; overflow: clip; }
.scene[data-theme="light"] { background: var(--light); color: var(--ink); }
.scene[data-theme="dark"]  { background: var(--black); color: var(--white); }
.gl .scene { background: transparent !important; }
.eyebrow { font: 500 12px/1 var(--mono); letter-spacing: .14em; text-transform: uppercase; margin-bottom: 20px; }
[data-theme="dark"]  .eyebrow { color: var(--muted-dark); }
[data-theme="light"] .eyebrow { color: var(--muted-light); }
.stage { position: sticky; top: 0; height: var(--vh); overflow: clip; }

/* ---------- Glass: CSS fallback; with WebGL2 the shader draws the pane and the element only holds content ---------- */
.glass {
  position: relative; overflow: hidden;
  background: linear-gradient(135deg, rgba(255,255,255,.2), rgba(255,255,255,.04));
  -webkit-backdrop-filter: blur(12px) saturate(180%); backdrop-filter: blur(12px) saturate(180%);
  border: 1px solid rgba(255,255,255,.4); border-radius: 32px;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.7), 0 20px 44px -16px rgba(0,0,0,.45);
}
.gl .glass { background: none !important; border-color: transparent !important; box-shadow: none !important; -webkit-backdrop-filter: none !important; backdrop-filter: none !important; }
@media (prefers-reduced-transparency: reduce) {
  .glass { background: rgba(24,24,30,.94); -webkit-backdrop-filter: none; backdrop-filter: none; color: #fff; border-color: rgba(255,255,255,.18); }
  .scene[data-theme="light"] .glass, .bar[data-theme="light"] .glass { background: rgba(255,255,255,.95); color: var(--ink); border-color: rgba(0,0,0,.12); }
}

/* ---------- Top bar: wordmark + two pills ---------- */
.bar {
  position: fixed; z-index: 120; top: 0; left: 0; right: 0; height: 84px; padding: 0 var(--pad);
  display: flex; align-items: center; justify-content: space-between; pointer-events: none;
  color: #fff; transition: color var(--t-base) var(--ease);
}
.bar > * { pointer-events: auto; }
.bar[data-theme="light"] { color: var(--ink); }
.wordmark { font: 600 14px/1 var(--sans); letter-spacing: .12em; text-transform: uppercase; }
.bar-right { display: flex; gap: 8px; }
.pill {
  display: inline-flex; align-items: center; gap: 10px; height: 40px; padding: 0 18px; border-radius: 999px;
  font: 500 12px/1 var(--sans); letter-spacing: .08em; text-transform: uppercase; color: inherit;
  transition: transform var(--t-base) var(--ease), background-color var(--t-fast) linear, border-color var(--t-fast) linear;
}
.pill:hover { transform: translateY(-1px); }
.pd { width: 5px; height: 5px; border-radius: 50%; background: currentColor; }
.dots { display: inline-flex; gap: 4px; }
.dots i { width: 5px; height: 5px; border-radius: 50%; background: currentColor; transition: transform var(--t-base) var(--ease); }
.menu-open .dots i:first-child { transform: translateX(4.5px) scale(1.15); } .menu-open .dots i:last-child { transform: translateX(-4.5px) scale(1.15); }
.menu-open .bar { color: #fff; }
.menu-open .pill { background: rgba(255,255,255,.1) !important; border: 1px solid rgba(255,255,255,.22) !important; }

/* ---------- Menu overlay ---------- */
.menu { position: fixed; inset: 0; z-index: 100; pointer-events: none; visibility: hidden; color: #f5f5f7; transition: visibility 0s linear 1s; }
.menu.open { pointer-events: auto; visibility: visible; transition-delay: 0s; }
.menu-bg { position: absolute; inset: 0; background: radial-gradient(120% 90% at 85% 10%, #0d0f16 0%, #06060a 55%); clip-path: circle(0px at var(--ox, 90%) var(--oy, 40px)); transition: clip-path var(--t-slow) var(--ease-io); }
.menu.open .menu-bg { clip-path: circle(150vmax at var(--ox, 90%) var(--oy, 40px)); }
.menu-links { position: absolute; left: var(--pad); right: var(--pad); top: 50%; transform: translateY(-48%); display: flex; flex-direction: column; }
.menu-links a { position: relative; display: flex; align-items: baseline; gap: clamp(14px, 3vw, 36px); padding: 4px 0; transition: opacity var(--t-base) var(--ease); }
.menu-links .n { font: 500 12px/1 var(--mono); letter-spacing: .12em; color: var(--muted-dark); width: 2.2em; }
.menu-links .mk { font: 400 clamp(48px, min(11vw, 15vh), 150px)/1 var(--serif); letter-spacing: -.035em; }
.menu-links:hover a { opacity: .28; } .menu-links a:hover { opacity: 1; }
.menu-links a.is-active .mk > span::after { content: ""; display: inline-block; width: .09em; height: .09em; margin-left: .18em; border-radius: 50%; background: var(--blue); vertical-align: .55em; }
.menu .mk > span { transform: translateY(115%); transition: transform var(--t-slow) var(--ease) 0s; }
.menu.open .mk > span { transform: none; transition-duration: 1.3s; }
.menu.open a:nth-child(1) .mk > span { transition-delay: .32s; } .menu.open a:nth-child(2) .mk > span { transition-delay: .4s; }
.menu.open a:nth-child(3) .mk > span { transition-delay: .48s; } .menu.open a:nth-child(4) .mk > span { transition-delay: .56s; }
.menu-foot { position: absolute; left: var(--pad); right: var(--pad); bottom: 26px; display: flex; justify-content: space-between; font: 500 11px/1 var(--mono); letter-spacing: .12em; text-transform: uppercase; color: var(--muted-dark); opacity: 0; transition: opacity var(--t-base) ease; }
.menu.open .menu-foot { opacity: 1; transition-delay: .7s; }

/* ---------- Section indicator (bottom-left) ---------- */
.where { position: fixed; z-index: 55; left: var(--pad); bottom: 26px; display: flex; align-items: center; gap: 12px; font: 500 11px/1 var(--mono); letter-spacing: .14em; text-transform: uppercase; color: #fff; transition: color var(--t-base) var(--ease), opacity var(--t-base) ease; pointer-events: none; }
.where[data-theme="light"] { color: var(--ink); }
.where-n { opacity: .55; font-variant-numeric: tabular-nums; }
.where-t { display: block; overflow: hidden; height: 1.2em; line-height: 1.2em; }
.where-t > span { display: block; transition: transform var(--t-base) var(--ease), opacity var(--t-base); }
.where-t > span.out { transform: translateY(-110%); opacity: 0; }
.where-t > span.pre { transform: translateY(110%); opacity: 0; transition: none; }
.where-bar { position: relative; width: 56px; height: 1px; background: currentColor; opacity: .25; }
.where-bar b { position: absolute; left: 0; top: 0; height: 1px; width: 100%; background: currentColor; transform-origin: left; transform: scaleX(0); }
.menu-open .where { opacity: 0; }

/* ---------- Loader ---------- */
.loader { position: fixed; inset: 0; z-index: 200; pointer-events: none; display: none; }
.lp { position: absolute; inset: 0; background: #000; transition: transform var(--t-slow) var(--ease-io); }
.lp.a { clip-path: polygon(0 0, 100% 0, 0 100%); }
.lp.b { clip-path: polygon(100% 0, 100% 100%, 0 100%); }
.loader-ui { position: absolute; inset: 0; display: flex; align-items: flex-end; justify-content: space-between; padding: 0 var(--pad) 30px; color: #fff; transition: opacity var(--t-base) ease; }
.loader-t { font: 600 14px/1 var(--sans); letter-spacing: .12em; text-transform: uppercase; align-self: flex-start; margin-top: 34px; }
.loader-n { font: 400 clamp(80px, 16vw, 220px)/.8 var(--serif); letter-spacing: -.04em; font-variant-numeric: tabular-nums; }
.loader.done { pointer-events: none; }
.loader.done .loader-ui { opacity: 0; }
.loader.done .lp.a { transform: translate(-101%, -101%); } .loader.done .lp.b { transform: translate(101%, 101%); }
.no-motion .loader, .motion .loader.gone { display: none; }
@keyframes loaderfail { to { visibility: hidden; } }
.motion .loader { display: block; animation: loaderfail 0s 7s forwards; }

/* ---------- 1. Hero ---------- */
.hero { height: var(--vh); min-height: 0; display: grid; place-items: center; text-align: center; }
.tess { position: absolute; inset: 0; margin: auto; width: min(80vmin, 800px); height: min(80vmin, 800px); pointer-events: none; }
.hero-inner { position: relative; z-index: 2; padding: 0 20px; will-change: transform, opacity; }
h1 { font: 400 clamp(76px, 17vw, 210px)/.84 var(--serif); letter-spacing: -.04em; text-shadow: 0 2px 40px rgba(0,0,0,.55); }
.ln { display: block; overflow: hidden; padding: .06em .04em .16em; margin: -.06em 0 -.16em; }
.ln > span { display: block; }
.grad { background: linear-gradient(100deg, #fff 10%, #9cd0ff 55%, #ffd2a8 100%); -webkit-background-clip: text; background-clip: text; color: transparent; }
.dot { color: var(--blue); }
.tagline { display: inline-block; margin-top: 30px; padding: 14px 30px; border-radius: 999px; font: 400 clamp(22px, 3vw, 34px)/1.1 var(--serif); letter-spacing: -.01em; color: #fff; }
.scroll-hint { position: absolute; z-index: 2; bottom: 22px; left: 50%; transform: translateX(-50%); display: flex; flex-direction: column; align-items: center; gap: 10px; font: 500 11px/1 var(--mono); letter-spacing: .14em; text-transform: uppercase; color: rgba(245,245,247,.7); }
.scroll-hint i { display: block; width: 1px; height: 26px; background: linear-gradient(rgba(255,255,255,.7), transparent); transform-origin: top; animation: hint var(--t-loop) var(--ease) infinite; }
@keyframes hint { 0% { transform: scaleY(0); opacity: 1; } 55% { transform: scaleY(1); opacity: 1; } 100% { transform: scaleY(1); opacity: 0; } }

/* Intro (starts when the loader leaves): headline lines rise out of a mask, then everything else fades in. */
.motion .ln > span { transform: translateY(112%); }
.motion.ready .ln > span { animation: rise var(--t-cine) var(--ease) .4s forwards; }
.motion.ready .ln:nth-child(2) > span { animation-delay: .54s; }
.motion .tagline, .motion .scroll-hint { opacity: 0; }
.motion.ready .tagline { animation: fadeup var(--t-slow) var(--ease) 1.2s forwards; }
.motion.ready .scroll-hint { animation: fadein var(--t-cine) ease 1.5s forwards; }
@keyframes rise { to { transform: none; } }
@keyframes fadeup { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }
@keyframes fadein { to { opacity: 1; } }

/* ---------- 2. Vision ---------- */
.vision { height: 300vh; }
.vision .stage { display: grid; place-items: center; }
.vision-copy { position: relative; z-index: 2; width: min(980px, calc(100% - 40px)); }
.statement { font: 400 clamp(38px, 6.2vw, 84px)/1.02 var(--serif); letter-spacing: -.025em; }
.word { opacity: .14; }
.schematic { position: absolute; z-index: 0; width: min(78vmin, 760px); height: min(78vmin, 760px); right: 2vw; top: 50%; margin-top: calc(min(78vmin, 760px) / -2); color: #2a2a2e; }
@media (min-width: 900px) {
  .vision .stage { justify-items: start; }
  .vision-copy { width: min(720px, 50vw); margin-left: max(var(--pad), 7vw); }
  .statement { font-size: clamp(38px, 4.8vw, 76px); }
}

/* ---------- 3. Products: pinned index ---------- */
.products { height: calc(var(--vh) * 3.35); }
.products .stage { display: flex; align-items: center; padding: 84px var(--pad) 72px; }
.products-in { position: relative; z-index: 1; width: 100%; max-width: 1400px; margin: 0; }
.products-top { display: flex; justify-content: space-between; align-items: flex-end; gap: 24px; }
.products h2 { font: 400 clamp(38px, min(7vw, 11vh), 100px)/.94 var(--serif); letter-spacing: -.035em; }
.pcount { font: 500 12px/1 var(--mono); letter-spacing: .14em; color: var(--muted-dark); font-variant-numeric: tabular-nums; padding-bottom: .7em; }
.plist { position: relative; list-style: none; margin: clamp(14px, 3.6vh, 40px) 0 0; padding: 0; }
.hl { position: absolute; z-index: 0; left: -18px; right: -18px; top: 0; height: 110px; border-radius: 26px; pointer-events: none; }
.row {
  position: relative; z-index: 1; display: grid; grid-template-columns: 56px 1fr auto; align-items: baseline; column-gap: 18px;
  padding: clamp(10px, 1.9vh, 24px) 6px clamp(11px, 2.1vh, 26px); opacity: .5;
  transition: opacity var(--t-base) var(--ease), transform var(--t-base) var(--ease);
}
.row::before, .row:last-child::after { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 1px; background: rgba(255,255,255,.16); }
.row:last-child::after { top: auto; bottom: 0; }
.motion .row::before, .motion .row:last-child::after { transform: scaleX(0); transform-origin: left; transition: transform var(--t-cine) var(--ease); }
.motion .row.in::before, .motion .row.in:last-child::after { transform: none; }
.row .n { font: 500 12px/1 var(--mono); letter-spacing: .12em; color: var(--muted-dark); }
.row .t { font: 400 clamp(28px, min(5vw, 7.6vh), 68px)/1 var(--serif); letter-spacing: -.03em; }
.row .d { grid-column: 2; margin-top: 4px; font: 500 15px/1.3 var(--sans); color: var(--muted-dark); }
.row .go { grid-column: 3; grid-row: 1; font: 500 11px/1 var(--mono); letter-spacing: .14em; text-transform: uppercase; color: var(--muted-dark); }
.row .go::after { content: "\2197"; margin-left: 8px; display: inline-block; transition: transform var(--t-base) var(--ease); }
.motion .row .mk > span { transition-delay: calc(var(--i, 0) * .08s + .1s); }
.row.active { opacity: 1; transform: translateX(14px); }
.row.active .go::after { transform: translate(3px, -3px); }
.no-motion .row { opacity: 1; }

/* ---------- 4. Studio ---------- */
.studio { height: calc(var(--vh) * 3.4); text-align: center; }
.studio .stage { display: grid; place-items: center; padding: 0 20px; }
.studio-inner { position: relative; z-index: 1; }
.studio h2 { font: 400 clamp(52px, 10vw, 140px)/.9 var(--serif); letter-spacing: -.035em; }
.chips { display: flex; justify-content: center; flex-wrap: wrap; gap: 12px; margin-top: 44px; }
.chip { position: relative; z-index: 2; padding: 14px 28px; border-radius: 999px; font: 600 16px/1 var(--sans); color: var(--ink); }
.rings { position: absolute; width: min(120vmin, 1100px); height: min(120vmin, 1100px); left: 50%; top: 50%; margin: calc(min(120vmin, 1100px) / -2) 0 0 calc(min(120vmin, 1100px) / -2); pointer-events: none; }

/* ---------- 5. Contact ---------- */
.contact { min-height: var(--vh); display: grid; place-items: center; text-align: center; padding: 14vh 20px 90px; }
.contact-inner { position: relative; z-index: 1; }
.contact h2 { font: 400 clamp(72px, 15vw, 220px)/.88 var(--serif); letter-spacing: -.04em; }
.contact-inner p { margin-top: 18px; color: var(--muted-dark); font: 400 clamp(22px, 3vw, 32px)/1.1 var(--serif); }
.legal { position: absolute; z-index: 1; bottom: 64px; left: var(--pad); right: var(--pad); text-align: center; text-wrap: balance; font: 11px/1.4 var(--mono); letter-spacing: .06em; color: rgba(245,245,247,.58); }
@media (min-width: 900px) { .legal { bottom: 26px; } }

/* ---------- Fades ---------- */
.motion [data-fade] { opacity: 0; transform: translate3d(0, 40px, 0); transition: opacity var(--t-slow) var(--ease), transform var(--t-slow) var(--ease); }
.motion [data-fade].in { opacity: 1; transform: none; }

/* ---------- Reduced motion: plain scrolling, nothing pinned ---------- */
.no-motion .scene { height: auto; min-height: 0; }
.no-motion .stage { position: static; height: auto; padding: 14vh 0; }
.no-motion .word { opacity: 1; }
.no-motion .no-motion .scroll-hint i { animation: none; }
.no-motion .hero { height: var(--vh); }
.no-motion .menu *, .no-motion .menu-bg { transition: none !important; }

/* ---------- Small screens ---------- */
@media (max-width: 640px) {
  .wordmark { font-size: 12px; }
  .pill { padding: 0 14px; height: 38px; }
    .schematic { right: -22vmin; opacity: .8; }
  .vision { height: 300vh; }
  .row { grid-template-columns: 34px 1fr; }
  .row .go { display: none; }
  .where-bar { display: none; }
}

/* Keyboard focus */
:focus-visible { outline: 2px solid var(--cyan); outline-offset: 4px; }
.scene[data-theme="light"] :focus-visible { outline-color: var(--blue); }
.bar[data-theme="light"] :focus-visible { outline-color: var(--blue); }
.menu-open .bar :focus-visible, .menu :focus-visible { outline-color: var(--cyan); }
.scene:focus, #main:focus { outline: none; }
button:focus:not(:focus-visible) { outline: none; }

/* Skip link + screen-reader-only text */
.skip { position: fixed; z-index: 300; top: 14px; left: 14px; padding: 12px 18px; border-radius: 999px; background: #fff; color: #000; font: 600 13px/1 var(--sans); transform: translateY(-220%); transition: transform var(--t-fast) var(--ease); }
.skip:focus { transform: none; }
.sr-only { position: absolute !important; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.totop { position: absolute; z-index: 2; right: var(--pad); bottom: 24px; font: 500 11px/1.4 var(--mono); letter-spacing: .12em; text-transform: uppercase; color: rgba(245,245,247,.55); transition: color var(--t-fast) var(--ease); }
.totop:hover, .totop:focus-visible { color: #fff; }
.totop::after { content: "\2191"; margin-left: 8px; }

html.menu-open, html.menu-open body { overflow: hidden; }

/* Reduced motion: keep decoration out of the text. */
.no-motion .vision .stage { padding: 18vh 0 28vh; }

/* Short screens (landscape phones, small windows) */
@media (max-height: 620px) {
  .where, .scroll-hint { display: none; }
  .products .stage { padding: clamp(64px, 14vh, 96px) var(--pad) clamp(40px, 8vh, 72px); }
  .products h2 { font-size: clamp(30px, 9vh, 56px); }
  .row { padding-block: clamp(6px, 1.2vh, 14px); }
  .products-in .eyebrow { display: none; }
}
@media (max-height: 560px) {
  .statement { font-size: clamp(28px, 10vh, 60px); }
  .vision-copy { width: min(60%, 560px); }
  .schematic { width: 62vmin; height: 62vmin; margin-top: -31vmin; right: 0; }
}

@media (max-width: 640px) {
  .wordmark { font-size: 11px; letter-spacing: .09em; }
  .pill { padding: 0 12px; height: 38px; gap: 8px; font-size: 11px; letter-spacing: .06em; }
  .bar-right { gap: 6px; }
  .vision .stage { align-content: start; padding-top: calc(88px + 8vh); }
  .statement { font-size: clamp(32px, 9vw, 44px); }
  .schematic { width: 88vw; height: 88vw; right: -20vw; top: 70%; margin-top: -44vw; opacity: .55; }
  .hl { left: -8px; right: -8px; border-radius: 22px; }
  .row { grid-template-columns: 24px 1fr; column-gap: 12px; }
  .row.active { transform: translateX(6px); }
  .contact h2 { font-size: clamp(64px, 17vw, 96px); }
}

/* Menu: a quiet one-line preview appears on the right for the hovered/focused link */
.menu-links .peek { position: absolute; right: 0; top: 50%; max-width: 30ch; text-align: right; font: 400 clamp(20px, 2.4vw, 32px)/1.15 var(--serif); letter-spacing: -.01em; color: var(--muted-dark); opacity: 0; transform: translate3d(14px, -50%, 0); transition: opacity var(--t-base) var(--ease), transform var(--t-slow) var(--ease); pointer-events: none; }
.menu-links a:hover .peek, .menu-links a:focus-visible .peek { opacity: 1; transform: translate3d(0, -50%, 0); }
@media (max-width: 900px) { .menu-links .peek { display: none; } }

/* Studio chips step in with scroll while the scene is pinned */
.motion .chip { opacity: 0; transform: translateY(18px) scale(.96); transition: opacity var(--t-slow) var(--ease), transform var(--t-slow) var(--ease); }
.motion .chip.on { opacity: 1; transform: none; }