/* ==========================================================================
   Loom Forge Studios — Glassmorphism theme
   Shared design tokens, glass primitives and typography for the whole site.
   ========================================================================== */

:root {
  /* Brand */
  --brand-coral:      #F36F52;   /* logo coral, .st0 in the master SVG */
  --brand-coral-lift: #FF8A6E;   /* text accent on dark — 5.30:1 on the brightest glass */
  --brand-coral-deep: #C93E25;   /* button fill: white clears AA at 5.00:1 */
  --brand-teal:     #0F3B47;   /* logo teal, .st1 in the master SVG */

  /* Aurora field */
  --aurora-coral:  #F36F52;
  --aurora-rose:   #FF8A6E;
  --aurora-violet: #7C5CFF;
  --aurora-teal:   #27B8AE;

  /* Ground */
  --bg-deep:  #05070E;
  --bg-base:  #0A0F1C;
  --bg-lift:  #111a2e;

  /* Ink */
  --ink:        #EDF3FA;
  --ink-soft:   #B7C6D8;
  --ink-mute:   #9DAEC2;
  --ink-on-red: #FFFFFF;

  /* Glass */
  --glass-tint:    rgba(10, 20, 35, 0.46);
  --glass-tint-up: rgba(22, 36, 60, 0.58);
  --glass-edge:    rgba(255, 255, 255, 0.14);
  --glass-edge-up: rgba(255, 255, 255, 0.28);
  --glass-sheen:   rgba(255, 255, 255, 0.10);
  --glass-blur:    14px;

  /* Elevation */
  --shadow-1: 0 2px 10px rgba(0, 0, 0, .28);
  --shadow-2: 0 18px 44px rgba(0, 0, 0, .42), 0 2px 8px rgba(0, 0, 0, .3);
  --shadow-3: 0 34px 80px rgba(0, 0, 0, .55), 0 4px 14px rgba(0, 0, 0, .35);
  --glow-red: 0 14px 40px rgba(243, 111, 82, .34);

  /* Rhythm */
  --r-sm: 12px;
  --r-md: 18px;
  --r-lg: 26px;
  --r-xl: 34px;
  --r-pill: 999px;
  --gutter: clamp(20px, 5vw, 56px);
  --shell: 1180px;
  --section-y: clamp(72px, 11vw, 148px);

  /* Type */
  --font-display: "Space Grotesk", ui-sans-serif, system-ui, sans-serif;
  --font-body: "Outfit", ui-sans-serif, system-ui, -apple-system, sans-serif;

  /* Motion */
  --ease: cubic-bezier(.22, .9, .3, 1);
  --ease-out: cubic-bezier(.16, 1, .3, 1);
}

/* ---------- reset ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body, h1, h2, h3, h4, p, figure, blockquote, ul, ol, dl, dd { margin: 0; }
ul[class], ol[class] { list-style: none; padding: 0; }
img, svg { display: block; max-width: 100%; }
button, input, select, textarea { font: inherit; color: inherit; }
a { color: inherit; }

html { scroll-behavior: smooth; scroll-padding-top: 132px; }

body {
  min-height: 100vh;
  font-family: var(--font-body);
  font-size: clamp(1rem, .96rem + .2vw, 1.075rem);
  line-height: 1.65;
  color: var(--ink);
  background: var(--bg-deep);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}

/* ---------- the aurora ---------- */
.field { position: fixed; inset: 0; z-index: -2; overflow: hidden; pointer-events: none; }
.field::after {
  /* vignette keeps text areas legible over bright orbs */
  content: ""; position: absolute; inset: -10%;
  background:
    radial-gradient(130% 86% at 50% 4%, transparent 38%, rgba(5,7,14,.42) 82%, rgba(5,7,14,.72) 100%),
    linear-gradient(180deg, transparent 62%, rgba(5,7,14,.38) 100%);
}
.field__base {
  position: absolute; inset: 0;
  background:
    radial-gradient(90% 60% at 18% 8%,  #1a1030 0%, transparent 62%),
    radial-gradient(80% 55% at 84% 22%, #0d2436 0%, transparent 60%),
    linear-gradient(168deg, #0B1020 0%, #070C16 46%, #05070E 100%);
}
.orb {
  position: absolute; border-radius: 50%;
  opacity: .5;
  will-change: transform;
  transform: translateZ(0);
}
.orb--a { width: 46vmax; height: 46vmax; left: -14vmax; top: -10vmax;
  background: radial-gradient(circle closest-side, var(--aurora-coral) 0%, rgba(243,111,82,.55) 34%, rgba(243,111,82,.16) 62%, transparent 82%); animation: drift-a 34s var(--ease) infinite alternate; }
.orb--b { width: 40vmax; height: 40vmax; right: -12vmax; top: 6vmax;
  background: radial-gradient(circle closest-side, var(--aurora-violet) 0%, rgba(124,92,255,.5) 34%, rgba(124,92,255,.15) 62%, transparent 82%); opacity: .46; animation: drift-b 42s var(--ease) infinite alternate; }
.orb--c { width: 42vmax; height: 42vmax; left: 12vmax; top: 46vmax;
  background: radial-gradient(circle closest-side, var(--aurora-teal) 0%, rgba(39,184,174,.45) 34%, rgba(39,184,174,.13) 62%, transparent 82%); opacity: .4; animation: drift-c 50s var(--ease) infinite alternate; }
.orb--d { width: 38vmax; height: 38vmax; right: 2vmax; top: 76vmax;
  background: radial-gradient(circle closest-side, var(--aurora-rose) 0%, rgba(255,138,110,.5) 34%, rgba(255,138,110,.15) 62%, transparent 82%); opacity: .4; animation: drift-d 38s var(--ease) infinite alternate; }

@keyframes drift-a { to { transform: translate3d(10vmax, 7vmax, 0) scale(1.16); } }
@keyframes drift-b { to { transform: translate3d(-9vmax, 11vmax, 0) scale(1.1); } }
@keyframes drift-c { to { transform: translate3d(11vmax, -8vmax, 0) scale(1.2); } }
@keyframes drift-d { to { transform: translate3d(-8vmax, -9vmax, 0) scale(1.12); } }

/* fine grain over the gradients — stops the orbs banding */
.field__grain {
  position: absolute; inset: 0; opacity: .035;
  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='.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)' opacity='.7'/%3E%3C/svg%3E");
}

/* ---------- glass primitives ---------- */
.glass {
  position: relative;
  background:
    linear-gradient(168deg, rgba(255,255,255,.075) 0%, rgba(255,255,255,.022) 34%, rgba(255,255,255,0) 62%),
    var(--glass-tint);
  border: 1px solid var(--glass-edge);
  border-radius: var(--r-lg);
  box-shadow: var(--shadow-2);
}
/* Real backdrop blur is expensive and is spent only where content passes underneath. */
.glass--blur {
  -webkit-backdrop-filter: blur(var(--glass-blur)) saturate(140%);
  backdrop-filter: blur(var(--glass-blur)) saturate(140%);
}
/* top-edge light catch: the single detail that makes a pane read as glass */
.glass::before {
  content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none;
  background: linear-gradient(180deg, var(--glass-sheen) 0%, transparent 42%);
  mask-image: linear-gradient(180deg, #000 0%, transparent 60%);
}
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .glass--blur { background: rgba(8, 14, 26, .9); }
}

/* pointer-tracked specular highlight */
.glass--live { overflow: hidden; }
.glass--live::after {
  content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none;
  opacity: 0; transition: opacity .45s var(--ease);
  background: radial-gradient(280px circle at var(--mx, 50%) var(--my, 0%), rgba(255,255,255,.13), transparent 62%);
}
.glass--live:hover::after, .glass--live:focus-within::after { opacity: 1; }

/* ---------- type ---------- */
h1, h2, h3, h4 { font-family: var(--font-display); font-weight: 700; line-height: 1.08; letter-spacing: -.02em; }
.h-display { font-size: clamp(2.9rem, 7.4vw, 5.4rem); }
.h-section { font-size: clamp(2rem, 4.4vw, 3.1rem); }
.h-card    { font-size: clamp(1.35rem, 2.4vw, 1.75rem); }

.eyebrow {
  font-family: var(--font-display);
  font-size: .78rem; font-weight: 600;
  letter-spacing: .3em; text-transform: uppercase;
  color: var(--brand-coral-lift);
}
.lede { font-size: clamp(1.05rem, 1.6vw, 1.25rem); color: var(--ink-soft); }
.muted { color: var(--ink-soft); }

.grad-text {
  background: linear-gradient(102deg, var(--brand-coral-lift) 0%, #C08BFF 46%, #3FD3C6 100%);
  -webkit-background-clip: text; background-clip: text;
  color: transparent; -webkit-text-fill-color: transparent;
}

/* ---------- controls ---------- */
.btn {
  display: inline-flex; align-items: center; gap: .6rem;
  padding: .95rem 1.7rem; border-radius: var(--r-pill);
  font-family: var(--font-display); font-weight: 600; font-size: 1rem;
  text-decoration: none; cursor: pointer; border: 1px solid transparent;
  transition: transform .3s var(--ease), box-shadow .3s var(--ease), background .3s var(--ease), border-color .3s var(--ease);
}
.btn--primary {
  color: var(--ink-on-red);
  background: linear-gradient(140deg, var(--brand-coral-deep), #B3311C 56%, #96271A);
  box-shadow: var(--glow-red);
}
.btn--primary:hover { transform: translateY(-2px); box-shadow: 0 20px 52px rgba(243,111,82,.5); filter: brightness(1.08); }
.btn--ghost {
  color: var(--ink);
  background: rgba(255,255,255,.06);
  border-color: var(--glass-edge);
}
.btn--ghost:hover { transform: translateY(-2px); background: rgba(255,255,255,.12); border-color: var(--glass-edge-up); }

/* status + meta chips */
.tag {
  display: inline-flex; align-items: center; gap: .5rem;
  padding: .38rem .85rem; border-radius: var(--r-pill);
  font-family: var(--font-display); font-size: .72rem; font-weight: 600;
  letter-spacing: .14em; text-transform: uppercase;
  color: var(--ink-soft);
  background: rgba(255,255,255,.07);
  border: 1px solid var(--glass-edge);
}
.tag__dot { width: 7px; height: 7px; border-radius: 50%; background: var(--aurora-teal); box-shadow: 0 0 10px currentColor; color: var(--aurora-teal); }
.tag--active .tag__dot { background: var(--brand-coral-lift); color: var(--brand-coral-lift); }
.tag--early  .tag__dot { background: #F0B429; color: #F0B429; }
.tag--flag {
  color: #fff; letter-spacing: .16em;
  background: linear-gradient(135deg, var(--brand-coral-deep), #A62C18);
  border-color: transparent; box-shadow: 0 6px 18px rgba(243,111,82,.4);
}

/* ---------- layout helpers ---------- */
.shell { width: min(100% - (var(--gutter) * 2), var(--shell)); margin-inline: auto; }
.section { padding-block: var(--section-y); position: relative; }
.stack > * + * { margin-top: var(--stack, 1rem); }

/* ---------- a11y ---------- */
:focus-visible { outline: 2px solid var(--brand-coral-lift); outline-offset: 3px; border-radius: 6px; }
.skip {
  position: absolute; left: 50%; top: 0; transform: translate(-50%, -140%);
  z-index: 200; padding: .8rem 1.4rem; border-radius: 0 0 var(--r-md) var(--r-md);
  background: var(--brand-coral-deep); color: #fff; font-weight: 600; text-decoration: none;
  transition: transform .25s var(--ease);
}
.skip:focus { transform: translate(-50%, 0); }
.visually-hidden {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

/* ---------- scroll reveal (JS-gated so no-JS still shows everything) ---------- */
.js [data-reveal] { opacity: 0; transform: translateY(26px); }
.js [data-reveal].is-in {
  opacity: 1; transform: none;
  transition: opacity .8s var(--ease-out), transform .8s var(--ease-out);
  transition-delay: var(--delay, 0ms);
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .orb { animation: none !important; }
  .js [data-reveal] { opacity: 1 !important; transform: none !important; transition: none !important; }
  *, *::before, *::after { animation-duration: .001ms !important; transition-duration: .001ms !important; }
}