/* LD Coda: the world, glass, reveals and pointer effects.
   Classes on <html>, all set by script:
     js       scripts run
     motion   no reduced-motion preference
     gl       motion and WebGL: the world runs (one fixed canvas behind the page)
     io       no CSS scroll-driven animations: site.js reveals with IntersectionObserver
     pointer  a mouse is over the page
   Without them the page is complete and still: no-JS, reduced motion and no-WebGL get the static design. */

/* ── Space behind everything ─────────────────────────── */
body::before {
  content: ""; position: fixed; inset: 0; z-index: -1; pointer-events: none;
  background:
    radial-gradient(1.2px 1.2px at 8% 14%, rgba(255, 255, 255, .5), transparent),
    radial-gradient(1.2px 1.2px at 23% 61%, rgba(255, 255, 255, .3), transparent),
    radial-gradient(1.2px 1.2px at 37% 9%, rgba(255, 255, 255, .45), transparent),
    radial-gradient(1.2px 1.2px at 58% 32%, rgba(255, 255, 255, .3), transparent),
    radial-gradient(1.2px 1.2px at 71% 76%, rgba(255, 255, 255, .35), transparent),
    radial-gradient(1.2px 1.2px at 86% 22%, rgba(255, 255, 255, .45), transparent),
    radial-gradient(1.2px 1.2px at 93% 64%, rgba(255, 255, 255, .3), transparent),
    radial-gradient(1.2px 1.2px at 14% 88%, rgba(255, 255, 255, .35), transparent),
    radial-gradient(60% 45% at 86% 2%, rgba(124, 108, 246, .13), transparent 70%),
    radial-gradient(45% 40% at 2% 42%, rgba(34, 211, 238, .055), transparent 70%),
    radial-gradient(55% 45% at 82% 98%, rgba(59, 130, 246, .07), transparent 70%);
}
.world {
  position: fixed; inset: 0; z-index: 0; width: 100%; height: 100%; pointer-events: none;
  opacity: 0; transition: opacity 1.6s var(--ease);
}
.world.on { opacity: 1; }
.trail { position: fixed; inset: 0; z-index: 90; width: 100%; height: 100%; pointer-events: none; }
.aura {
  position: fixed; left: 0; top: 0; z-index: 0; width: 640px; height: 640px; margin: -320px 0 0 -320px;
  border-radius: 50%; pointer-events: none; opacity: 0; transition: opacity .8s; will-change: transform;
  background: radial-gradient(closest-side, rgba(var(--accent-rgb), .1), rgba(var(--accent-2-rgb), .035) 55%, transparent);
}
html.pointer .aura { opacity: 1; }
.drag-surface { cursor: grab; }
.drag-surface.dragging { cursor: grabbing; }

/* the world's own readout, like a plug-in display (desktop) */
.hud {
  position: fixed; left: 20px; bottom: 18px; z-index: 50; display: none; align-items: center; gap: 12px;
  padding: 8px 14px 8px 12px; border-radius: 999px; border: 1px solid var(--line-2); background: rgba(9, 9, 11, .6);
  -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); pointer-events: none;
  font-family: var(--mono); font-size: .68rem; letter-spacing: .14em; text-transform: uppercase; color: var(--muted);
  opacity: 0; transform: translateY(8px); transition: opacity .6s var(--ease), transform .6s var(--ease);
}
.hud b { font-weight: 500; color: var(--text); }
.hud i { width: 7px; height: 7px; border-radius: 50%; background: var(--hc, var(--accent-2)); box-shadow: 0 0 10px var(--hc, var(--accent-2)); transition: background-color .6s, box-shadow .6s; }
.hud.on { opacity: 1; transform: none; }
@media (min-width: 921px) and (hover: hover) { html.gl .hud { display: inline-flex; } }

/* ── Scroll progress along the nav ───────────────────── */
.progress {
  position: absolute; left: 0; right: 0; bottom: -1px; height: 2px; pointer-events: none; transform-origin: 0 50%;
  transform: scaleX(var(--scroll, 0)); background: var(--grad); box-shadow: 0 0 12px rgba(var(--accent-rgb), .8);
}
@supports (animation-timeline: scroll()) {
  .progress { animation: progress linear both; animation-timeline: scroll(root block); }
}
@keyframes progress { from { transform: scaleX(0); } to { transform: scaleX(1); } }

/* ── Glass ───────────────────────────────────────────── */
.glass {
  position: relative; isolation: isolate; border: 1px solid rgba(255, 255, 255, .085);
  background: linear-gradient(180deg, rgba(255, 255, 255, .05), rgba(255, 255, 255, .012)), rgba(14, 14, 17, .58);
  -webkit-backdrop-filter: blur(16px) saturate(150%); backdrop-filter: blur(16px) saturate(150%);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .07), 0 30px 80px -44px rgba(0, 0, 0, .9);
  transition: border-color .3s;
}
.glass::before { /* the glow under the cursor */
  content: ""; position: absolute; inset: 0; z-index: -1; border-radius: inherit; pointer-events: none; opacity: 0;
  background: radial-gradient(420px circle at var(--mx, 50%) var(--my, -40%), rgba(var(--c-rgb, var(--accent-rgb)), .2), transparent 46%);
  transition: opacity .5s;
}
.glass:hover::before { opacity: 1; }

/* ── Tilt (desktop pointer) ──────────────────────────── */
[data-tilt] { transform: perspective(1100px) rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg)); transition: transform .8s var(--ease); }
[data-tilt].tilting { transition: transform .18s linear; }

/* ── Reveals: CSS scroll-driven where supported, IntersectionObserver elsewhere ── */
@supports (animation-timeline: view()) {
  html.motion .reveal { animation: reveal linear both; animation-timeline: view(); animation-range: entry 0% cover 22%; }
  html.motion .reveal.d1 { animation-range: entry 6% cover 26%; }
  html.motion .reveal.d2 { animation-range: entry 12% cover 30%; }
  html.motion .reveal.d3 { animation-range: entry 18% cover 34%; }
}
@keyframes reveal { from { opacity: 0; translate: 0 44px; scale: .985; } to { opacity: 1; translate: none; scale: none; } }
html.io .reveal { opacity: 0; translate: 0 34px; transition: opacity .9s var(--ease), translate .9s var(--ease); }
html.io .reveal.in { opacity: 1; translate: none; }
html.io .reveal.d1 { transition-delay: .08s; }
html.io .reveal.d2 { transition-delay: .16s; }
html.io .reveal.d3 { transition-delay: .24s; }

/* ── Still design: no WebGL or reduced motion ────────── */
html:not(.gl) .hero .art {
  background: radial-gradient(36% 42% at 50% 46%, rgba(var(--accent-rgb), .26), transparent 70%),
              radial-gradient(22% 26% at 62% 38%, rgba(var(--accent-2-rgb), .12), transparent 70%);
}
html:not(.gl) .hero .art::before {
  content: ""; position: absolute; left: 50%; top: 46%; width: min(78vh, 92vw); aspect-ratio: 1; translate: -50% -50%;
  background: var(--still) center / contain no-repeat; opacity: .9;
}
.art-icon { display: none; }
html:not(.gl) .stage .art { display: grid; place-items: center; }
html:not(.gl) .stage .art::before {
  content: ""; position: absolute; inset: 6%; border-radius: 50%;
  background: radial-gradient(closest-side, rgba(var(--c-rgb), .34), rgba(var(--c-rgb), .08) 60%, transparent);
}
html:not(.gl) .stage .art::after {
  content: ""; position: absolute; inset: 16%; border-radius: 50%; border: 1px solid rgba(var(--c-rgb), .35);
  box-shadow: 0 0 0 26px rgba(var(--c-rgb), .04), 0 0 0 27px rgba(var(--c-rgb), .16);
}
html:not(.gl) .art-icon { display: block; position: relative; width: 34%; border-radius: 22%; box-shadow: 0 30px 70px -20px rgba(var(--c-rgb), .9); }
html:not(.gl) .stage.wide .art-icon { width: 22%; }

@media (prefers-reduced-motion: reduce) {
  .progress, .aura, .trail, .hud { display: none; }
  [data-tilt] { transform: none; }
}
@media print {
  .world, .trail, .aura, .hud, .nav, .menu { display: none !important; }
  .reveal { opacity: 1 !important; translate: none !important; animation: none !important; }
}

/* Former style="" attributes, now classes: the strict Content-Security-Policy blocks inline styles. */
.sx-c-rgb-240-196-99 { --c-rgb:240,196,99 !important; }
.sx-c-rgb-249-115-22 { --c-rgb:249,115,22 !important; }
.sx-c-rgb-0-212-255 { --c-rgb:0,212,255 !important; }
.sx-c-rgb-224-184-98 { --c-rgb:224,184,98 !important; }
.sx-c-rgb-167-139-250 { --c-rgb:167,139,250 !important; }
.sx-c-rgb-199-210-254 { --c-rgb:199,210,254 !important; }
.sx-c-rgb-74-222-128 { --c-rgb:74,222,128 !important; }
.sx-c-rgb-248-113-113 { --c-rgb:248,113,113 !important; }
.sx-c-rgb-192-132-252 { --c-rgb:192,132,252 !important; }
.sx-c-rgb-214-176-122 { --c-rgb:214,176,122 !important; }
.sx-c-rgb-207-174-90 { --c-rgb:207,174,90 !important; }
.sx-c-rgb-96-165-250 { --c-rgb:96,165,250 !important; }
.sx-c-rgb-45-212-191 { --c-rgb:45,212,191 !important; }
.sx-f791cddd { --c:#f0c463 !important; --c-rgb:240,196,99 !important; --c-text:#f5d48a !important; }
.sx-b100aecc { --c:#f97316 !important; --c-rgb:249,115,22 !important; --c-text:#fdba74 !important; }
.sx-3ca9b7d5 { --c:#00d4ff !important; --c-rgb:0,212,255 !important; --c-text:#67e8f9 !important; }
.sx-227925c5 { --c:#e0b862 !important; --c-rgb:224,184,98 !important; --c-text:#ecd08f !important; }
.sx-2a83f420 { --c:#a78bfa !important; --c-rgb:167,139,250 !important; --c-text:#c4b5fd !important; }
.sx-117bce7e { --c:#c7d2fe !important; --c-rgb:199,210,254 !important; --c-text:#e0e7ff !important; }
.sx-ee39c821 { --c:#4ade80 !important; --c-rgb:74,222,128 !important; --c-text:#86efac !important; }
.sx-15527757 { --c:#f87171 !important; --c-rgb:248,113,113 !important; --c-text:#fca5a5 !important; }
.sx-b06c91dd { --c:#c084fc !important; --c-rgb:192,132,252 !important; --c-text:#d8b4fe !important; }
.sx-abe86054 { --c:#d6b07a !important; --c-rgb:214,176,122 !important; --c-text:#e8cfa6 !important; }
.sx-0f2e9feb { --c:#cfae5a !important; --c-rgb:207,174,90 !important; --c-text:#e4c77f !important; }
.sx-1ca3eb59 { --c:#60a5fa !important; --c-rgb:96,165,250 !important; --c-text:#93c5fd !important; }
.sx-a45c7de9 { --c:#2dd4bf !important; --c-rgb:45,212,191 !important; --c-text:#5eead4 !important; }