/* ============================================================
   Shared base for the 3D marketing pages (Landing3D, Coder3D).
   Page-specific rules live in landing-3d.css and coder-3d.css.

   Layers, back to front: .l3d-atmos (a CSS glow that is also the
   no-WebGL fallback), the fixed three.js canvas, the page content,
   then the header and the CTA dock.

   Content never depends on the canvas or on JavaScript. Rules that
   hide anything for an entrance animation sit under html.l3d-motion
   inside a no-preference media query and are CSS animations that
   finish visible on their own; rules that hide a "before" state for
   a script to reveal sit under html.l3d-ui, which only that script
   adds. See the ab-reveal note in aether-marketing.js for why.
   ============================================================ */

@font-face {
    font-family: 'Mona Sans Variable';
    font-style: normal;
    font-display: swap;
    font-weight: 200 900;
    font-stretch: 75% 125%;
    src: url('/fonts/mona-sans-latin-standard-normal.woff2') format('woff2');
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

:root {
    --l3d-signal: #0095FF;
    --l3d-signal-deep: #0077CC;
    --l3d-ion: #00D4FF;
    --l3d-indigo: #6366F1;
    --l3d-violet: #8B5CF6;

    --l3d-ink: var(--text-primary);
    --l3d-soft: var(--text-secondary);
    --l3d-muted: var(--text-muted);
    --l3d-rule: color-mix(in srgb, var(--text-primary) 10%, transparent);
    --l3d-rule-strong: color-mix(in srgb, var(--text-primary) 20%, transparent);
    --l3d-panel: color-mix(in srgb, var(--surface-1) 86%, transparent);
    --l3d-link: var(--l3d-signal);

    --l3d-display: 'Mona Sans Variable', 'Inter', ui-sans-serif, system-ui, sans-serif;
    --l3d-text: 'Inter', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', sans-serif;
    --l3d-mono: ui-monospace, 'SF Mono', 'JetBrains Mono', Menlo, Consolas, monospace;
    --l3d-ease: cubic-bezier(.2, .7, 0, 1);
    --l3d-gutter: clamp(1rem, 4vw, 2.5rem);
}
/* #0095FF on the light surface is 3.1:1, under AA for body-size link text. */
html.light { --l3d-link: var(--l3d-signal-deep); }

body { font-family: var(--l3d-text); }

/* ---------- Stage ---------- */
.l3d-stage { position: fixed; inset: 0; z-index: 0; pointer-events: none; overflow: hidden; }
.l3d-atmos {
    position: absolute; inset: -10%;
    background:
        radial-gradient(38% 34% at 76% 34%, rgba(0, 149, 255, .15), transparent 70%),
        radial-gradient(30% 28% at 88% 64%, rgba(139, 92, 246, .11), transparent 70%),
        radial-gradient(46% 36% at 8% 0%, rgba(0, 212, 255, .06), transparent 70%);
}
html.light .l3d-atmos { opacity: .75; }
.l3d-canvas {
    position: absolute; inset: 0; width: 100%; height: 100%; display: block;
    opacity: 0; transition: opacity 1.6s var(--l3d-ease);
}
html.l3d-live .l3d-canvas { opacity: 1; }
html.l3d-nogl .l3d-canvas, html.l3d-nogl .l3d-labels { display: none; }
/* Reduced motion: one still frame of the hero that scrolls away with it. */
html.l3d-still .l3d-stage { position: absolute; bottom: auto; height: 100vh; height: 100svh; }

/* Labels the stage pins to points in the scene. */
.l3d-labels { position: absolute; inset: 0; }
.l3d-tag {
    position: absolute; left: 0; top: 0; opacity: 0; white-space: nowrap;
    padding: .3rem .7rem; border-radius: 999px;
    font-family: var(--l3d-display); font-stretch: 110%; font-size: .8125rem; font-weight: 600; letter-spacing: .01em;
    color: var(--l3d-soft);
    border: 1px solid var(--l3d-rule-strong);
    background: color-mix(in srgb, var(--surface-base) 72%, transparent);
    will-change: transform, opacity;
}

/* Content and footer sit above the fixed canvas. */
.l3d-page { position: relative; z-index: 1; color: var(--l3d-ink); }
body.ab-scope > footer { position: relative; z-index: 1; }

.l3d-wrap { width: 100%; max-width: 80rem; margin-inline: auto; padding-inline: var(--l3d-gutter); }

/* ---------- Type ---------- */
.l3d-display {
    font-family: var(--l3d-display); font-stretch: 110%; font-weight: 640;
    letter-spacing: -.03em; color: var(--l3d-ink); text-wrap: balance;
}
.l3d-h1 { margin-top: 1.75rem; font-size: clamp(2.6rem, 1rem + 4.4vw, 5.25rem); line-height: .98; }
.l3d-line { display: block; overflow: hidden; padding-bottom: .08em; margin-bottom: -.08em; }
.l3d-line > span { display: block; }
.l3d-h2 { margin-top: 1.25rem; font-size: clamp(2rem, 1.1rem + 2.4vw, 3.4rem); line-height: 1.03; max-width: 20ch; }
.l3d-h3 {
    font-family: var(--l3d-display); font-stretch: 106%; font-weight: 600;
    font-size: clamp(1.2rem, 1rem + .6vw, 1.5rem); line-height: 1.22; letter-spacing: -.012em;
    color: var(--l3d-ink);
}
.l3d-lede { margin-top: 1.5rem; max-width: 36rem; font-size: clamp(1.0625rem, 1rem + .3vw, 1.25rem); line-height: 1.6; color: var(--l3d-soft); }
.l3d-lede strong { color: var(--l3d-ink); font-weight: 600; }
.l3d-copy { margin-top: .75rem; max-width: 38rem; line-height: 1.65; color: var(--l3d-soft); }
.l3d-label { display: inline-flex; align-items: center; gap: .75rem; font-size: .875rem; font-weight: 600; color: var(--l3d-muted); }
.l3d-label::before { content: ""; width: 1.5rem; height: 1px; background: var(--l3d-signal); }

.l3d-link {
    display: inline-flex; align-items: center; gap: .5rem; margin-top: 1.75rem; padding-bottom: 2px;
    font-weight: 600; color: var(--l3d-link); text-decoration: none;
    background: linear-gradient(currentColor, currentColor) 0 100% / 0 1px no-repeat;
    transition: background-size .45s var(--l3d-ease);
}
.l3d-link:hover { background-size: 100% 1px; }
.l3d-link:focus-visible { outline: 2px solid var(--l3d-ion); outline-offset: 4px; border-radius: 2px; }

/* ---------- Buttons ---------- */
.l3d-actions { margin-top: 2.5rem; display: flex; flex-wrap: wrap; gap: .875rem; }
.l3d-btn {
    position: relative; isolation: isolate; overflow: hidden;
    display: inline-flex; align-items: center; justify-content: center; gap: .6rem;
    min-height: 3.5rem; padding: 0 1.75rem; border-radius: .75rem;
    font-family: var(--l3d-text); font-size: 1.0625rem; font-weight: 600; letter-spacing: -.005em;
    text-decoration: none; white-space: nowrap;
    translate: var(--mx, 0px) var(--my, 0px);
    transition: background-color .3s ease, border-color .3s ease, color .3s ease, box-shadow .45s var(--l3d-ease), translate .6s var(--l3d-ease);
}
.l3d-btn svg { width: 1.2rem; height: 1.2rem; flex: none; }
.l3d-btn:focus-visible { outline: 2px solid var(--l3d-ion); outline-offset: 3px; }
.l3d-btn-primary {
    color: #fff; background: var(--l3d-signal);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .22), 0 0 0 1px rgba(0, 149, 255, .55), 0 14px 34px -12px rgba(0, 149, 255, .7);
}
.l3d-btn-primary:hover {
    background: var(--l3d-signal-deep);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .22), 0 0 0 1px rgba(0, 149, 255, .7), 0 20px 48px -14px rgba(0, 149, 255, .85);
}
.l3d-btn-quiet {
    color: var(--l3d-ink); border: 1px solid var(--l3d-rule-strong);
    background: color-mix(in srgb, var(--surface-1) 40%, transparent);
}
.l3d-btn-quiet:hover { border-color: color-mix(in srgb, var(--l3d-ink) 45%, transparent); background: color-mix(in srgb, var(--surface-1) 80%, transparent); }

/* One slow sheen on the hero's primary CTA, the only unprompted motion on a button. */
.l3d-sheen::after {
    content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
    background: linear-gradient(105deg, transparent 35%, rgba(255, 255, 255, .26) 50%, transparent 65%);
    translate: -120% 0;
}

/* ---------- Hero ---------- */
/* overflow: on narrow screens the (invisible) anchor hangs off the right edge on purpose, and
   must not widen the page. The scene itself is drawn on the canvas, so clipping costs nothing. */
.l3d-hero { display: flex; align-items: center; overflow: hidden; min-height: calc(100vh - 5rem); min-height: calc(100svh - 5rem); padding-block: clamp(3rem, 8vh, 6rem); }
.l3d-hero-grid { position: relative; display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: 2rem; align-items: center; }
.l3d-hero-copy { position: relative; }
.l3d-hero-anchor { width: 100%; max-width: 28rem; aspect-ratio: 1; justify-self: center; }
.l3d-badge {
    display: inline-flex; align-items: center; gap: .6rem;
    padding: .45rem .95rem .45rem .8rem; border-radius: 999px;
    font-size: .8125rem; font-weight: 600; color: var(--l3d-soft);
    border: 1px solid var(--l3d-rule-strong);
    background: color-mix(in srgb, var(--surface-1) 60%, transparent);
}
.l3d-badge-dot { width: .45rem; height: .45rem; border-radius: 50%; background: var(--l3d-signal); box-shadow: 0 0 0 3px rgba(0, 149, 255, .2); }

/* ---------- Sections ---------- */
.l3d-section { position: relative; padding-block: clamp(6rem, 14vh, 10rem); }
.l3d-split { display: grid; grid-template-columns: minmax(0, 6fr) minmax(0, 5fr); gap: clamp(2rem, 5vw, 5rem); }
.l3d-anchor-col { position: relative; }
.l3d-sticky-anchor {
    --a: clamp(14rem, 24vw, 21rem);
    position: sticky; top: calc(50vh - var(--a) / 2 + 2.5rem);
    width: var(--a); max-width: 100%; aspect-ratio: 1; margin-inline: auto;
}
/* A section header with the scene stepped back to a small anchor beside it. */
.l3d-head-row { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 2rem; }
.l3d-mini-anchor { width: clamp(6rem, 11vw, 9.5rem); aspect-ratio: 1; margin-right: clamp(0rem, 4vw, 4rem); }

/* Screenshot frames (each page decides how they move). */
.l3d-shot {
    margin: 0; overflow: hidden; cursor: zoom-in;
    border-radius: .875rem; border: 1px solid var(--l3d-rule-strong); background: var(--surface-2);
    box-shadow: 0 34px 70px -34px rgba(0, 0, 0, .65);
    transition: border-color .35s ease;
}
html.light .l3d-shot { box-shadow: 0 30px 60px -34px rgba(15, 23, 42, .35); }
.l3d-shot:hover { border-color: color-mix(in srgb, var(--l3d-signal) 55%, transparent); }
.l3d-shot:focus-visible { outline: 2px solid var(--l3d-ion); outline-offset: 4px; }
.l3d-shot-bar { padding: .7rem 1rem; font-size: .75rem; font-weight: 600; color: var(--l3d-muted); background: var(--surface-1); border-bottom: 1px solid var(--l3d-rule); }
.l3d-shot img { display: block; width: 100%; height: auto; }

/* Hairline-separated points. */
.l3d-points { margin-top: 3.5rem; }
.l3d-point { padding-block: 2rem; border-top: 1px solid var(--l3d-rule); }

/* How it works: a real sequence, so it is numbered, on a rail that fills as you scroll. */
.l3d-steps { --p: 1; position: relative; margin-top: 4rem; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(1.5rem, 4vw, 4rem); }
.l3d-steps::before, .l3d-steps::after { content: ""; position: absolute; top: 1.25rem; left: 1.25rem; right: 0; height: 1px; background: var(--l3d-rule-strong); }
.l3d-steps::after { background: linear-gradient(90deg, var(--l3d-ion), var(--l3d-signal) 55%, var(--l3d-indigo)); transform-origin: left center; transform: scaleX(var(--p)); }
.l3d-step-n {
    position: relative; z-index: 1; display: inline-grid; place-items: center;
    width: 2.5rem; height: 2.5rem; border-radius: 50%;
    font-family: var(--l3d-display); font-weight: 600; font-size: .9375rem; color: var(--l3d-ink);
    background: var(--surface-base); border: 1px solid var(--l3d-signal);
    transition: border-color .5s ease, box-shadow .5s ease;
}
html.l3d-motion .l3d-step:not(.is-lit) .l3d-step-n { border-color: var(--l3d-rule-strong); box-shadow: none; }
.l3d-step.is-lit .l3d-step-n { box-shadow: 0 0 0 4px rgba(0, 149, 255, .16); }
.l3d-step .l3d-h3 { margin-top: 1.5rem; }

/* Finale */
.l3d-finale { display: flex; align-items: center; min-height: 100vh; min-height: 100svh; padding-block: 6rem; text-align: center; }
.l3d-finale-anchor { width: clamp(9rem, 19vw, 14rem); aspect-ratio: 1; margin: 0 auto 2.75rem; }
.l3d-finale .l3d-h2 { margin: 0 auto; max-width: 16ch; font-size: clamp(2.5rem, 1.2rem + 4vw, 5rem); }
.l3d-finale .l3d-lede { margin-inline: auto; }
.l3d-finale .l3d-actions { justify-content: center; }

/* ---------- CTA dock: appears once the hero CTA scrolls away ---------- */
.l3d-dock {
    position: fixed; z-index: 45;
    right: max(1.25rem, env(safe-area-inset-right)); bottom: max(1.25rem, env(safe-area-inset-bottom));
    translate: 0 calc(100% + 2rem); opacity: 0; visibility: hidden;
    transition: translate .7s var(--l3d-ease), opacity .45s ease, visibility 0s linear .7s;
}
.l3d-dock[data-shown] { translate: 0 0; opacity: 1; visibility: visible; transition: translate .7s var(--l3d-ease), opacity .45s ease, visibility 0s; }
.l3d-dock .l3d-btn { min-height: 3rem; padding: 0 1.4rem; font-size: .9375rem; }

/* ---------- Lightbox (same markup and script as the classic pages) ---------- */
.cd-lightbox {
    position: fixed; inset: 0; z-index: 100; display: flex; align-items: center; justify-content: center; padding: 1.5rem;
    background: rgba(4, 8, 20, .92); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
    opacity: 1; visibility: visible; transition: opacity .2s ease, visibility 0s linear 0s;
}
.cd-lightbox[aria-hidden="true"] { opacity: 0; pointer-events: none; visibility: hidden; transition: opacity .2s ease, visibility 0s linear .2s; }
.cd-lightbox-fig { margin: 0; max-width: min(92vw, 1280px); max-height: 88vh; display: flex; flex-direction: column; align-items: center; gap: .9rem; }
.cd-lightbox-fig img { max-width: 100%; max-height: 78vh; width: auto; height: auto; border: 1px solid rgba(255, 255, 255, .14); border-radius: .75rem; box-shadow: 0 24px 70px rgba(0, 0, 0, .55); }
.cd-lightbox-cap { margin: 0; font-size: .85rem; line-height: 1.5; color: #CBD5E1; text-align: center; }
.cd-lightbox-close, .cd-lightbox-arrow {
    position: absolute; display: inline-flex; align-items: center; justify-content: center; border-radius: 9999px; cursor: pointer;
    background: rgba(255, 255, 255, .12); color: #E7ECF5; border: 1px solid rgba(255, 255, 255, .2); transition: background .2s ease;
}
.cd-lightbox-close { top: 1rem; right: 1rem; width: 2.5rem; height: 2.5rem; }
.cd-lightbox-close svg { width: 1.2rem; height: 1.2rem; }
.cd-lightbox-arrow { top: 50%; transform: translateY(-50%); width: 3rem; height: 3rem; }
.cd-lightbox-arrow svg { width: 1.4rem; height: 1.4rem; }
.cd-lightbox-arrow.prev { left: 1rem; }
.cd-lightbox-arrow.next { right: 1rem; }
.cd-lightbox-close:hover, .cd-lightbox-arrow:hover { background: rgba(255, 255, 255, .22); }
body.cd-lightbox-open { overflow: hidden; }

/* ---------- Motion (CSS only, finishes visible without any script) ---------- */
@media (prefers-reduced-motion: no-preference) {
    html.l3d-motion .l3d-line > span { animation: l3d-rise 1.25s var(--l3d-ease) both; animation-delay: calc(.2s + var(--i, 0) * .12s); }
    html.l3d-motion .l3d-rise-in { animation: l3d-fade 1.2s var(--l3d-ease) both; animation-delay: calc(.55s + var(--i, 0) * .1s); }
    html.l3d-motion .l3d-sheen::after { animation: l3d-sheen 8s var(--l3d-ease) 2.6s infinite; }
}
@keyframes l3d-rise { from { transform: translateY(108%); } to { transform: none; } }
@keyframes l3d-fade { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }
@keyframes l3d-sheen { 0% { translate: -120% 0; } 16%, 100% { translate: 120% 0; } }

@media (prefers-reduced-motion: reduce) {
    .l3d-btn, .l3d-dock, .l3d-dock[data-shown] { transition: none; }
}

/* ---------- Narrow layouts ---------- */
@media (max-width: 1023px) {
    .l3d-hero-grid, .l3d-split { grid-template-columns: minmax(0, 1fr); }
    /* Phones and tablets: the copy settles to the bottom of the hero and the scene takes the
       space above it, half off the right edge, rather than sitting behind the headline. */
    .l3d-hero { position: relative; align-items: flex-end; }
    .l3d-hero-grid { position: static; }
    .l3d-hero-anchor { position: absolute; top: 0; right: -20%; width: 72%; max-width: 26rem; }
    .l3d-anchor-col, .l3d-mini-anchor { display: none; }
    .l3d-head-row { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 767px) {
    .l3d-steps { grid-template-columns: minmax(0, 1fr); padding-left: 3.75rem; gap: 2.5rem; }
    .l3d-steps::before, .l3d-steps::after { top: 1.25rem; bottom: 0; left: 1.25rem; right: auto; width: 1px; height: auto; }
    .l3d-steps::after { transform-origin: center top; transform: scaleY(var(--p)); }
    .l3d-step { position: relative; }
    .l3d-step-n { position: absolute; left: -3.75rem; top: -.35rem; }
    .l3d-step .l3d-h3 { margin-top: 0; }
    .l3d-dock { left: 1rem; right: 1rem; }
    .l3d-dock .l3d-btn { width: 100%; }
    .l3d-actions .l3d-btn { flex: 1 1 100%; }
}