/* LD Coda plug-in sites: motion, the hero worlds, glass and the scroll stages (v2). Identical on both sites.
   Classes on <html>, all set by script:
     js       scripts run
     motion   no reduced-motion preference
     gl       motion and WebGL: the hero world runs and the hero is pinned while it morphs
     io       no CSS scroll-driven animations: site.js reveals with IntersectionObserver and drives .sd keyframes (--vp)
     staged   the deep-dive stages are live (inactive steps dim)
     pointer  a mouse is over the page
   Without any of them the page is complete and still: no-JS, reduced motion and no-WebGL all get the static design. */

/* ── Ambient space behind everything; the cursor aura shines through the glass ───────────────────────── */
body::before { content: ""; position: fixed; inset: 0; z-index: -1; pointer-events: none; background: var(--ambient); }
.aura {
  position: fixed; left: 0; top: 0; z-index: 0; width: 600px; height: 600px; margin: -300px 0 0 -300px;
  border-radius: 50%; pointer-events: none; opacity: 0; transition: opacity .8s; will-change: transform;
  background: radial-gradient(closest-side, rgba(var(--accent-rgb), .14), rgba(var(--accent-2-rgb), .05) 55%, transparent);
}
html.pointer .aura { opacity: 1; }

/* ── Scroll progress, along the bottom edge of 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: linear-gradient(90deg, var(--cta-from), var(--cta-to));
  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, .56);
  -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);
}
.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(440px circle at var(--mx, 50%) var(--my, -40%), rgba(var(--accent-rgb), .17), transparent 46%);
  transition: opacity .5s;
}
.glass:hover::before { opacity: 1; }
.price-card.glass { background: radial-gradient(90% 60% at 50% 0%, rgba(var(--accent-rgb), .2), transparent 70%), rgba(14, 14, 17, .62); }
.spec-groups > .glass { padding: 22px 26px 8px; border-radius: var(--r-lg); }
.spec-groups > .glass .specs tr:last-child th, .spec-groups > .glass .specs tr:last-child td { border-bottom: 0; }

/* ── 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; }
.frame[data-tilt]::after, [data-tilt] > .frame::after {
  background: radial-gradient(700px circle at var(--gx, 50%) var(--gy, -20%), rgba(255, 255, 255, .09), transparent 42%),
              linear-gradient(180deg, rgba(255, 255, 255, .05), transparent 18%);
}
.sibling .frame[data-tilt] { transform: perspective(1400px) rotateY(calc(-9deg + var(--ry, 0deg))) rotateX(calc(3deg + var(--rx, 0deg))); }
.sibling:hover .frame[data-tilt] { transform: perspective(1400px) rotateY(calc(-4deg + var(--ry, 0deg))) rotateX(calc(1deg + var(--rx, 0deg))); }

/* ── The hero stage: a world behind the name, pinned while it becomes the display ──────────────────── */
.hero { position: relative; z-index: 2; margin-top: calc(-1 * var(--nav-h)); }
.hero-stage {
  position: relative; display: flex; flex-direction: column; justify-content: flex-end; isolation: isolate; overflow: hidden;
  height: 100vh; height: 100svh; min-height: 620px;
}
.hero-sky { position: absolute; inset: 0; z-index: -3; background: var(--sky); }
html:not(.gl) .hero-sky::before { /* the still of the world, for reduced motion and no WebGL */
  content: ""; position: absolute; inset: 0; background: var(--poster) center 22% / cover no-repeat;
}
@media (max-aspect-ratio: 4/5) { html:not(.gl) .hero-sky::before { background-image: var(--poster-m); background-position: center top; } }
.hero-stage::after { /* keeps the copy readable and fades the stage into the page */
  content: ""; position: absolute; inset: auto 0 0; height: 62%; z-index: -1; pointer-events: none;
  background: linear-gradient(180deg, transparent, rgba(9, 9, 11, .7) 55%, var(--bg));
}
.world { position: absolute; inset: 0; z-index: -2; width: 100%; height: 100%; opacity: 0; transition: opacity 1.6s var(--ease); }
.world.on { opacity: 1; }
.hero-copy { position: relative; padding-bottom: clamp(52px, 10vh, 112px); }
.hero-end { display: none; }
.scroll-cue {
  position: absolute; right: var(--gutter); bottom: 30px; display: inline-flex; align-items: center; gap: 12px;
  font-family: var(--mono); font-size: .7rem; letter-spacing: .22em; text-transform: uppercase; color: var(--muted);
}
.scroll-cue:hover { color: var(--text); }
.scroll-cue i { width: 1px; height: 42px; background: linear-gradient(var(--accent-2), transparent); transform-origin: top; }
html.motion .scroll-cue i { animation: cue 2.4s var(--ease) infinite; }
@keyframes cue { 0% { transform: scaleY(0); opacity: 1; } 60% { transform: scaleY(1); opacity: 1; } 100% { opacity: 0; } }

html.gl .hero { height: calc(100vh + 95vh); height: calc(100svh + 95vh); }
html.gl .hero-stage { position: sticky; top: 0; }
html.gl .hero-stage::after { opacity: clamp(0, calc(1 - var(--hp, 0) * 1.6), 1); }
html.gl .hero-copy { opacity: clamp(0, calc(1 - var(--hp, 0) * 3.2), 1); transform: translate3d(0, calc(var(--hp, 0) * -120px), 0); }
html.gl .scroll-cue { opacity: clamp(0, calc(1 - var(--hp, 0) * 10), 1); }
html.gl .hero-end {
  display: block; position: absolute; left: 0; right: 0; bottom: clamp(64px, 14vh, 140px); text-align: center; pointer-events: none;
  opacity: clamp(0, calc((var(--hp, 0) - .7) * 5), 1); transform: translate3d(0, calc((1 - var(--hp, 0)) * 40px), 0);
}
.hero-end p { display: flex; justify-content: center; gap: clamp(14px, 3vw, 28px); margin-top: 14px; font-family: var(--mono); font-size: .92rem; letter-spacing: .08em; color: var(--text); }
.hero-end p span { color: var(--c, var(--text)); text-shadow: 0 0 16px var(--c, transparent); }

/* ── Overview: the real UI rises and settles as it scrolls in ───────────────────────────────────────── */
.shot-3d { position: relative; perspective: 1800px; }
.shot-3d .glow {
  position: absolute; inset: 4% 7% -3%; z-index: -1; filter: blur(70px); opacity: .85; pointer-events: none;
  background: radial-gradient(50% 50% at 45% 45%, rgba(var(--accent-rgb), .55), transparent 70%),
              radial-gradient(35% 45% at 80% 65%, rgba(var(--accent-2-rgb), .35), transparent 70%);
}
.shot-3d .frame { transform-origin: 50% 100%; }
@keyframes tilt-in {
  0% { transform: rotateX(34deg) translate3d(0, 90px, -60px) scale(.86); opacity: .3; filter: saturate(.6); }
  36%, 100% { transform: none; opacity: 1; filter: none; }
}
.orb {
  position: absolute; z-index: -1; top: 4%; right: -14%; width: min(72vw, 920px); aspect-ratio: 1; border-radius: 50%; pointer-events: none;
  background: radial-gradient(closest-side, color-mix(in srgb, var(--c) 20%, transparent), transparent);
}
#pricing .orb { right: auto; left: 50%; top: -6%; margin-left: max(-36vw, -460px); }
@keyframes drift {
  from { transform: translate3d(0, calc(var(--depth, .4) * 280px), 0); }
  to { transform: translate3d(0, calc(var(--depth, .4) * -280px), 0); }
}
.clip { overflow-x: clip; }

/* scroll-driven keyframes: native where supported, otherwise driven from --vp by site.js */
html.motion .sd { animation-duration: 1s; animation-timing-function: linear; animation-fill-mode: both; }
html.motion .shot-3d .frame.sd { animation-name: tilt-in; }
html.motion .orb.sd { animation-name: drift; }
@supports (animation-timeline: view()) {
  html.motion .sd { animation-timeline: view(); }
  html.motion .reveal { animation: reveal linear both; animation-timeline: view(); animation-range: entry 0% cover 24%; }
  html.motion .reveal.d1 { animation-range: entry 8% cover 28%; }
  html.motion .reveal.d2 { animation-range: entry 16% cover 32%; }
}
@supports not (animation-timeline: view()) {
  html.motion:not(.io) .sd { animation-name: none; }
  html.io .sd { animation-play-state: paused; animation-delay: calc(var(--vp, 0) * -1s); }
}
@keyframes reveal { from { opacity: 0; translate: 0 46px; 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; }

/* the signal flowing along the chain */
.chain::after {
  content: ""; position: absolute; left: 0; right: 0; top: 50%; z-index: -1; height: 2px; margin-top: -1px; pointer-events: none;
  background: linear-gradient(90deg, transparent, rgba(var(--accent-2-rgb), .95), transparent) no-repeat; background-size: 90px 100%;
  background-position: -90px 0;
}
html.motion .chain::after { animation: signal 3.8s linear infinite; }
@keyframes signal { to { background-position: calc(100% + 90px) 0; } }

/* ── Deep dive: steps on the left, a sticky stage on the right ───────────────────────────────────────── */
.story-grid { display: grid; grid-template-columns: minmax(0, .92fr) minmax(0, 1.08fr); gap: clamp(32px, 5vw, 84px); align-items: start; }
.step { min-height: 92vh; padding: 12vh 0; display: flex; flex-direction: column; justify-content: center; }
.step:first-child { min-height: 80vh; padding-top: 4vh; }
.step h3 { margin-top: 16px; font-size: clamp(1.75rem, 3.1vw, 2.45rem); letter-spacing: -.035em; line-height: 1.07; }
.step > p { margin-top: 16px; font-size: 1.04rem; }
.step .facts { margin-top: 24px; }
.step .readout { margin-top: 26px; }
html.staged .step { opacity: .32; transition: opacity .6s var(--ease); }
html.staged .step.is-active { opacity: 1; }
.crop { margin-top: 26px; }
.crop .frame { box-shadow: 0 30px 70px -40px rgba(0, 0, 0, .95), 0 20px 60px -40px rgba(var(--accent-rgb), .6); }
.crop.medium .frame { max-width: 360px; }
.crop.narrow .frame { max-width: 210px; }
.crop figcaption { margin-top: 12px; font-family: var(--mono); font-size: .72rem; letter-spacing: .05em; color: var(--muted); }

.story-stage { position: sticky; top: calc(var(--nav-h) + 3vh); height: calc(100vh - var(--nav-h) - 6vh); display: flex; align-items: center; }
html:not(.js) .story-stage, .no-scene .story-stage { display: none; }
.stage-panel {
  width: 100%; aspect-ratio: 1.12; max-height: 100%; display: grid; grid-template-rows: auto minmax(0, 1fr) auto; gap: 14px;
  padding: 18px; border-radius: 24px;
}
.stage-head { display: flex; justify-content: space-between; align-items: center; gap: 16px; min-height: 26px; font-family: var(--mono); font-size: .74rem; letter-spacing: .12em; text-transform: uppercase; color: var(--sub); }
.stage-title { display: inline-flex; align-items: center; gap: 10px; color: var(--text); }
.stage-title i { width: 34px; height: 3px; border-radius: 2px; background: var(--stage-key, var(--accent)); box-shadow: 0 0 12px rgba(var(--accent-rgb), .6); }
.stage-title b { font-weight: 500; }
.stage-read { color: var(--text); letter-spacing: .06em; text-align: right; text-transform: none; }
.stage-read em { font-style: normal; color: var(--muted); }
.stage-body { position: relative; overflow: hidden; border-radius: 14px; border: 1px solid var(--line); background: var(--bg-well); }
.stage-canvas { position: absolute; inset: 0; width: 100%; height: 100%; }
.stage-steps { display: flex; gap: 8px; list-style: none; font-family: var(--mono); font-size: .66rem; letter-spacing: .1em; text-transform: uppercase; color: var(--muted); }
.stage-steps li { flex: 1; padding-top: 10px; border-top: 2px solid var(--line-2); transition: color .4s, border-color .4s; }
.story-stage[data-step="0"] li:nth-child(1), .story-stage[data-step="1"] li:nth-child(2), .story-stage[data-step="2"] li:nth-child(3),
.story-stage[data-step="3"] li:nth-child(4), .story-stage[data-step="4"] li:nth-child(5) { color: var(--text); border-color: var(--accent); }

/* ── Pinned sections (AuroraX Stretch, Freeze and Shimmer): copy beside a held stage ─────────────────── */
.pin { position: relative; z-index: 1; padding-top: clamp(88px, 10vw, 128px); }
.pin-grid { display: grid; grid-template-columns: minmax(0, .82fr) minmax(0, 1.18fr); gap: clamp(32px, 5vw, 80px); align-items: start; }
.pin-copy { position: sticky; top: calc(var(--nav-h) + 10vh); padding-bottom: 6vh; }
.pin-copy h2 { margin-top: 16px; font-size: clamp(2rem, 4vw, 3.1rem); letter-spacing: -.04em; line-height: 1.05; }
.pin-copy > p { margin-top: 18px; font-size: 1.05rem; }
.pin-track { height: 270vh; }
.pin-stage { position: sticky; top: calc(var(--nav-h) + 3vh); height: calc(100vh - var(--nav-h) - 6vh); display: flex; align-items: center; }
html:not(.motion) .pin-track { height: auto; }
html:not(.motion) .pin-stage { position: relative; top: 0; height: min(78vh, 680px); }
html:not(.js) .pin-stage, .no-scene .pin-stage { display: none; }

/* AuroraX stage parts: the Stretch amount and its scale, the Freeze switch and the Shimmer intervals */
.stage-panel.wide { aspect-ratio: 1.3; }
.amount { font-family: var(--mono); font-size: clamp(1.5rem, 2.6vw, 2.1rem); font-weight: 500; line-height: 1; letter-spacing: -.03em; color: var(--text); text-transform: none; }
.amount-v { color: #f9a8d4; text-shadow: 0 0 18px rgba(236, 72, 153, .6); }
.amount-scale { position: relative; height: 34px; margin: 0 8px; border-top: 2px solid var(--line-2); font-family: var(--mono); font-size: .68rem; color: var(--muted); }
.amount-scale span:not(.amount-marker) { position: absolute; top: 10px; left: calc(var(--at) * 100%); transform: translateX(-50%); white-space: nowrap; }
.amount-scale span:nth-child(2) { transform: none; }
.amount-scale span:last-child { transform: translateX(-100%); }
.amount-marker { position: absolute; left: 0; top: -2px; height: 2px; width: calc(var(--a, 0) * 100%); background: linear-gradient(90deg, var(--purple), var(--pink)); box-shadow: 0 0 12px rgba(236, 72, 153, .8); }
.amount-marker::after { content: ""; position: absolute; right: -6px; top: -5px; width: 12px; height: 12px; border-radius: 50%; background: #f9a8d4; box-shadow: 0 0 14px #ec4899; }
.stage-foot { display: flex; justify-content: space-between; align-items: center; gap: 12px; min-height: 30px; font-family: var(--mono); font-size: .72rem; letter-spacing: .08em; color: var(--sub); }
.stage-foot .stage-read { text-align: left; }
.intervals { display: flex; gap: 6px; list-style: none; }
.intervals li { padding: 4px 9px; border-radius: 8px; border: 1px solid var(--line-2); color: var(--muted); transition: color .3s, border-color .3s, background-color .3s, box-shadow .3s; }
.intervals li.on { color: var(--text); border-color: rgba(var(--accent-rgb), .6); background: rgba(var(--accent-rgb), .18); box-shadow: 0 0 14px rgba(var(--accent-rgb), .45); }
.led-freeze { opacity: .5; transition: opacity .3s, box-shadow .3s; }
.led-freeze::before { background: var(--muted); box-shadow: none; }
.led-freeze.on { opacity: 1; box-shadow: 0 0 18px rgba(var(--accent-rgb), .55); }
.led-freeze.on::before { background: var(--accent); box-shadow: 0 0 10px var(--accent); }

/* ── Small screens ─────────────────────────────────────────────────────────────────────────────────── */
@media (max-width: 920px) {
  .story-grid, .pin-grid { grid-template-columns: minmax(0, 1fr); }
  .story-stage {
    order: -1; z-index: 3; top: var(--nav-h); height: auto; margin: 0 calc(-1 * var(--gutter)); padding: 10px var(--gutter) 18px;
    background: linear-gradient(180deg, var(--bg) 84%, rgba(9, 9, 11, 0));
  }
  .stage-panel { height: 40vh; min-height: 250px; padding: 12px; gap: 10px; border-radius: 18px; }
  .stage-steps { display: none; }
  .step, .step:first-child { min-height: 0; padding: 34px 0 16vh; }
  .pin-copy { position: static; padding-bottom: 0; }
  .pin-track { height: 230vh; }
  .pin-stage { height: calc(100svh - var(--nav-h) - 24px); }
  .stage-panel.wide { aspect-ratio: auto; height: 100%; max-height: 640px; }
  .intervals li { padding: 3px 6px; }
  .scroll-cue { display: none; }
  .chain::after { display: none; }
  .sibling .frame[data-tilt] { transform: none; }
}
@media (max-width: 640px) {
  .hero-stage { min-height: 560px; }
  .amount-scale span:nth-child(3), .amount-scale span:nth-child(5), .amount-scale span:nth-child(7) { display: none; }
  .stage-head { font-size: .66rem; }
  .hero-end p { font-size: .8rem; }
}
@media (prefers-reduced-motion: reduce) {
  .progress, .aura { display: none; }
  [data-tilt] { transform: none; }
  .sibling .frame[data-tilt] { transform: perspective(1400px) rotateY(-9deg) rotateX(3deg); }
}

/* Former style="" attributes, now classes: the strict Content-Security-Policy blocks inline styles. */
.sx-c-cyan { --c: var(--cyan) !important; }
.sx-c-a78bfa { --c: #a78bfa !important; }
.sx-c-c4b5fd { --c: #c4b5fd !important; }
.sx-c-pink { --c: var(--pink) !important; }
.sx-f78f8455 { --depth: .5 !important; --c: var(--accent) !important; }
.sx-c-purple { --c: var(--purple) !important; }
.sx-c-sub { --c: var(--sub) !important; }
.sx-c-e4e4e7 { --c: #e4e4e7 !important; }
.sx-c-blue { --c: var(--blue) !important; }
.sx-at-0 { --at: 0 !important; }
.sx-at-234 { --at: .234 !important; }
.sx-at-398 { --at: .398 !important; }
.sx-at-563 { --at: .563 !important; }
.sx-at-728 { --at: .728 !important; }
.sx-at-893 { --at: .893 !important; }
.sx-at-1 { --at: 1 !important; }
.sx-d1fe064d { --depth: .35 !important; --c: var(--accent-2) !important; }