/* ============================================================
   SOFTODOOR — base.css
   Design tokens · reset · typography · nav · buttons · ambient
   ============================================================ */

:root {
  /* palette */
  --bg:        #060814;
  --bg-2:      #0a0d20;
  --surface:   rgba(255,255,255,.035);
  --surface-2: rgba(255,255,255,.06);
  --line:      rgba(255,255,255,.09);
  --line-strong: rgba(255,255,255,.16);

  --text:      #eef1ff;
  --muted:     #9aa0c9;
  --faint:     #686d92;

  --violet:    #6d5efc;
  --cyan:      #2de2e6;
  --magenta:   #ff4d9d;

  --grad: linear-gradient(110deg, #6d5efc 0%, #2de2e6 52%, #ff4d9d 100%);
  --grad-soft: linear-gradient(135deg, rgba(109,94,252,.18), rgba(45,226,230,.10));

  /* type */
  --display: "Sora", system-ui, sans-serif;
  --body:    "Inter", system-ui, sans-serif;
  --mono:    "JetBrains Mono", ui-monospace, monospace;

  /* space + motion */
  --container: 1240px;
  --pad: clamp(20px, 5vw, 80px);
  --radius: 22px;
  --ease: cubic-bezier(.16,1,.3,1);
  --ease-out: cubic-bezier(.22,.61,.36,1);
}

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

html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }

body {
  background: var(--bg);
  color: var(--text);
  font-family: var(--body);
  font-size: 16px;
  line-height: 1.6;
  letter-spacing: -0.01em;
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

body.is-locked { overflow: hidden; }

::selection { background: rgba(109,94,252,.45); color: #fff; }

a { color: inherit; text-decoration: none; }
ul, ol { list-style: none; }
img, svg, canvas { display: block; max-width: 100%; }
button { font: inherit; cursor: pointer; border: none; background: none; color: inherit; }
:focus-visible { outline: 2px solid var(--cyan); outline-offset: 3px; border-radius: 6px; }

/* ── typography helpers ── */
.grad {
  background: var(--grad);
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent; color: transparent;
}

.eyebrow {
  display: inline-flex; align-items: center; gap: 10px;
  font-family: var(--mono); font-size: 12px; letter-spacing: .22em;
  text-transform: uppercase; color: var(--muted);
}
.eyebrow__dot {
  width: 7px; height: 7px; border-radius: 50%;
  background: var(--cyan); box-shadow: 0 0 12px var(--cyan);
  animation: pulse 2.4s var(--ease) infinite;
}
@keyframes pulse { 0%,100%{ opacity:1; transform:scale(1);} 50%{ opacity:.4; transform:scale(.7);} }

.section-title {
  font-family: var(--display);
  font-weight: 700;
  font-size: clamp(2rem, 5vw, 3.6rem);
  line-height: 1.04;
  letter-spacing: -0.03em;
  max-width: 18ch;
}
.section-lead {
  color: var(--muted);
  font-size: clamp(1rem, 1.6vw, 1.18rem);
  max-width: 56ch;
  margin-top: 22px;
}
.section-head { margin-bottom: clamp(40px, 6vw, 72px); }
.section-head .eyebrow { margin-bottom: 22px; }

/* ── layout primitives ── */
main { position: relative; z-index: 2; }
section { padding-inline: var(--pad); }
.capabilities, .process, .work, .stack, .quote, .cta {
  max-width: var(--container);
  margin-inline: auto;
  padding-block: clamp(80px, 12vw, 160px);
}

/* ── reveal ── */
[data-reveal] {
  opacity: 0;
  transform: translateY(34px);
  transition: opacity .9s var(--ease), transform .9s var(--ease);
  will-change: opacity, transform;
}
[data-reveal].in { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
  [data-reveal] { opacity: 1; transform: none; transition: none; }
  html { scroll-behavior: auto; }
  /* §7 — honored globally: silence every ambient/infinite loop, not just
     the scroll reveals. These run regardless of viewport, so they're the
     ones that actually bother motion-sensitive users. */
  .ambient__orb,
  .eyebrow__dot,
  .marquee__track,
  .preloader__ring,
  .preloader__word span,
  .hero__scroll-line::after { animation: none !important; }
  .hero__title .line__in { transform: none; transition: none; }
  .preloader__word span { opacity: 1; transform: none; }
}

/* ============================================================
   AMBIENT BACKGROUND
   ============================================================ */
.ambient { position: fixed; inset: 0; z-index: 0; pointer-events: none; overflow: hidden; }
.ambient__grid {
  position: absolute; inset: -2px;
  background-image:
    linear-gradient(var(--line) 1px, transparent 1px),
    linear-gradient(90deg, var(--line) 1px, transparent 1px);
  background-size: 64px 64px;
  mask-image: radial-gradient(ellipse 80% 60% at 50% 0%, #000 0%, transparent 75%);
  opacity: .5;
}
.ambient__orb {
  position: absolute; border-radius: 50%;
  filter: blur(90px); opacity: .42; mix-blend-mode: screen;
  animation: drift 22s ease-in-out infinite alternate;
}
.ambient__orb--1 { width: 50vw; height: 50vw; left: -12vw; top: -10vw;
  background: radial-gradient(circle, var(--violet), transparent 70%); }
.ambient__orb--2 { width: 44vw; height: 44vw; right: -14vw; top: 22vh;
  background: radial-gradient(circle, var(--cyan), transparent 70%); animation-delay: -6s; }
.ambient__orb--3 { width: 40vw; height: 40vw; left: 30vw; bottom: -12vw;
  background: radial-gradient(circle, var(--magenta), transparent 70%); animation-delay: -12s; opacity:.3;}
@keyframes drift {
  0%   { transform: translate(0,0) scale(1); }
  100% { transform: translate(6vw,4vh) scale(1.12); }
}
.ambient__noise {
  position: absolute; inset: 0; opacity: .035; mix-blend-mode: overlay;
  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='.9' numOctaves='3'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* ============================================================
   CUSTOM CURSOR
   ============================================================ */
.cursor, .cursor-dot { position: fixed; top:0; left:0; z-index: 9999; pointer-events:none; border-radius:50%; }
.cursor {
  width: 38px; height: 38px; border: 1px solid rgba(45,226,230,.55);
  transform: translate(-50%,-50%);
  transition: width .25s var(--ease), height .25s var(--ease), background .25s, border-color .25s;
  mix-blend-mode: difference;
}
.cursor-dot { width: 5px; height: 5px; background: var(--cyan); transform: translate(-50%,-50%); }
.cursor.is-hover { width: 64px; height: 64px; background: rgba(109,94,252,.18); border-color: transparent; }
@media (hover: none), (pointer: coarse) { .cursor, .cursor-dot { display: none; } }

/* ============================================================
   NAVIGATION
   ============================================================ */
.nav {
  position: fixed; inset: 0 0 auto 0; z-index: 100;
  display: flex; align-items: center; gap: 24px;
  padding: 18px var(--pad);
  transition: padding .4s var(--ease), background .4s, backdrop-filter .4s, border-color .4s;
  border-bottom: 1px solid transparent;
}
.nav.is-stuck {
  padding-block: 12px;
  background: rgba(6,8,20,.62);
  backdrop-filter: blur(18px) saturate(140%);
  -webkit-backdrop-filter: blur(18px) saturate(140%);
  border-bottom-color: var(--line);
}
.nav__brand { display: flex; align-items: center; gap: 11px; margin-right: auto; }
.nav__mark { display: grid; place-items: center; }
.nav__mark svg { transition: transform .6s var(--ease); }
.nav__brand:hover .nav__mark svg { transform: rotate(180deg); }
.nav__name { font-family: var(--display); font-weight: 700; font-size: 1.22rem; letter-spacing: -.02em; }

.nav__links { display: flex; gap: 30px; }
.nav__links a {
  position: relative; font-size: .92rem; color: var(--muted); font-weight: 500;
  transition: color .3s;
}
.nav__links a::after {
  content:""; position:absolute; left:0; bottom:-6px; height:2px; width:0;
  background: var(--grad); transition: width .35s var(--ease);
}
.nav__links a:hover, .nav__links a.is-active { color: var(--text); }
.nav__links a:hover::after, .nav__links a.is-active::after { width:100%; }

.nav__actions { display: flex; }
.nav__toggle { display: none; flex-direction: column; gap: 6px; width: 30px; }
.nav__toggle span { height: 2px; width: 100%; background: var(--text); border-radius: 2px; transition: transform .35s var(--ease), opacity .3s; }
.nav__toggle[aria-expanded="true"] span:first-child { transform: translateY(8px) rotate(45deg); }
.nav__toggle[aria-expanded="true"] span:last-child  { transform: translateY(-8px) rotate(-45deg); }

/* ============================================================
   BUTTONS
   ============================================================ */
.btn {
  position: relative; display: inline-flex; align-items: center; gap: 10px;
  padding: 14px 26px; border-radius: 100px; font-weight: 600; font-size: .95rem;
  letter-spacing: -.01em; transition: transform .3s var(--ease), box-shadow .3s, background .3s, color .3s;
  white-space: nowrap;
}
.btn svg { transition: transform .3s var(--ease); }
.btn:hover svg { transform: translateX(4px); }

.btn--primary { color: #050713; background: var(--grad); background-size: 180% 180%;
  box-shadow: 0 10px 40px -10px rgba(109,94,252,.7); }
.btn--primary:hover { box-shadow: 0 16px 50px -10px rgba(45,226,230,.7); transform: translateY(-2px); }

.btn--line { color: var(--text); border: 1px solid var(--line-strong); }
.btn--line:hover { border-color: var(--cyan); background: rgba(45,226,230,.06); }

.btn--ghost { color: var(--text); border: 1px solid var(--line);
  background: var(--surface); backdrop-filter: blur(8px); }
.btn--ghost:hover { border-color: var(--line-strong); background: var(--surface-2); }

.btn--block { width: 100%; justify-content: center; }

/* ── preloader ── */
.preloader {
  position: fixed; inset: 0; z-index: 10000; display: grid; place-content: center;
  gap: 30px; background: var(--bg); transition: opacity .8s var(--ease), visibility .8s;
}
.preloader.done { opacity: 0; visibility: hidden; }
.preloader__portal { position: relative; width: 120px; height: 120px; margin: 0 auto; }
.preloader__ring {
  position: absolute; inset: 0; border-radius: 50%;
  border: 2px solid transparent; border-top-color: var(--violet);
  animation: spin 1.4s linear infinite;
}
.preloader__ring:nth-child(2){ inset:14px; border-top-color: var(--cyan); animation-duration:1.9s; animation-direction:reverse;}
.preloader__ring:nth-child(3){ inset:28px; border-top-color: var(--magenta); animation-duration:2.4s;}
@keyframes spin { to { transform: rotate(360deg); } }
.preloader__word { display: flex; gap: 6px; justify-content: center; font-family: var(--display); font-weight: 700; font-size: clamp(1.4rem,5vw,2.2rem); letter-spacing:.1em; }
.preloader__word span { opacity:0; transform: translateY(14px); animation: rise .6s var(--ease) forwards; }
.preloader__word span:nth-child(n) { animation-delay: calc(var(--i, 0) * 60ms); }
@keyframes rise { to { opacity:1; transform:none; } }
.preloader__bar { width: min(220px, 50vw); height: 2px; margin: 0 auto; background: var(--line); border-radius: 2px; overflow: hidden; }
.preloader__bar i { display:block; height:100%; width:0; background: var(--grad); transition: width .3s var(--ease-out); }