/* Motion layer. Everything here is additive: without motion.js the page renders as the static landing. */

/* Page copy stays visible while the decorative motion layer loads. */

/* The mascot canvas may reach past the viewport edge on narrow screens. Clipping on main (not body, whose overflow propagates to the viewport) keeps the page from gaining horizontal scroll. */
main{overflow-x:clip}
.hero-art{position:relative}
/* Larger than the artwork so the body and bubbles can leave the original box; keep in sync with PAD in mascot.js. */
.mascot-canvas{position:absolute;left:-16%;top:-16%;width:132%;height:132%;pointer-events:none}
.hero-art.is-live{cursor:pointer}
.hero-art.is-live img{visibility:hidden}
/* Line masks clip descenders at this tight leading unless they get room below. */
.hero-line-mask,.reveal-line-mask{padding-bottom:.14em;margin-bottom:-.14em}

/* Small things: the pearl dot shimmers, arrows lean into their direction on hover. */
.pearl-dot{background-size:220% 220%;animation:pearl-shift 7s ease-in-out infinite alternate}
@keyframes pearl-shift{from{background-position:0 0}to{background-position:100% 100%}}
.button span,.text-link span,.header-cta span{display:inline-block;transition:transform .45s cubic-bezier(.16,1,.3,1)}
.button:hover span,.text-link:hover span,.header-cta:hover span{transform:translate(3px,-3px)}
.text-link[data-arrow="down"]:hover span{transform:translateY(4px)}
/* `scale`, not `transform`: GSAP writes transform on these elements and a transition there would smear it. */
.button{transition:background var(--transition),scale .3s cubic-bezier(.16,1,.3,1)}
.button:active{scale:.98}
@media(prefers-reduced-motion:reduce){.pearl-dot{animation:none}}

/* Featured project with a process figure: story | figure, metrics in a row underneath. */
.project-featured.has-figure{grid-template-columns:minmax(0,1fr) minmax(0,440px);gap:44px 72px;align-items:center}
.project-figure{margin:0;min-width:0}
.project-figure svg{display:block;width:100%;height:auto;overflow:visible}
.project-featured.has-figure .project-metrics{grid-column:1/-1;align-self:auto;grid-template-columns:repeat(4,minmax(0,1fr));gap:40px;padding:30px 0 0;border-left:0;border-top:1px solid #d8dbe9}
.project-featured.has-figure .project-metrics div{justify-content:flex-end}
.project-metrics dd{font-variant-numeric:tabular-nums}

/* Other projects: the figure heads the card on a tinted panel. */
.project-card.has-figure:not(.project-featured){display:flex;flex-direction:column}
.project-card.has-figure:not(.project-featured) .project-story{height:auto;flex:1}
.project-card.has-figure:not(.project-featured) .project-figure{margin:0 0 28px;padding:16px 16px 14px;background:var(--surface);border-radius:14px}

/* Wide cards: story beside the figure across the whole row. */
.project-card.project-wide.has-figure{grid-column:1/-1;display:grid;grid-template-columns:minmax(0,1fr) minmax(0,440px);gap:40px 64px;align-items:center}
.project-card.project-wide.has-figure .project-figure{margin:0}
@media(min-width:901px) and (max-width:1100px){.project-card.project-wide.has-figure{grid-template-columns:minmax(0,1fr) minmax(0,360px);gap:32px 36px}}
@media(max-width:900px){.project-card.project-wide.has-figure{grid-template-columns:1fr;gap:26px}}

/* Figure vocabulary: white plates, hairline rails, one accent for work in progress, pearl gradients for messages. */
.fig-label{font:600 10.5px Manrope,system-ui,sans-serif;fill:var(--muted)}
.fig-num{font:600 9px Manrope,system-ui,sans-serif;fill:#737c95}
.fig-plate{fill:var(--canvas);stroke:#dfe2ee}
.fig-well{fill:#eceef7}
.fig-bar{fill:#dfe2ee}
.fig-bar-soft{fill:#eceef6}
.fig-rail{fill:none;stroke:#d3d7e6;stroke-width:1.25}
.fig-station{fill:var(--canvas);stroke:#dfe2ee;stroke-width:1.25}
.fig-ring{fill:none;stroke:var(--accent);stroke-width:2;stroke-linecap:round}
.fig-ring.is-failed{stroke:var(--error)}
.fig-retry{fill:none;stroke:var(--error);stroke-width:1.25;stroke-linecap:round;stroke-opacity:.55}
.fig-status{font:600 10px Manrope,system-ui,sans-serif;fill:var(--error)}
.fig-caret{fill:var(--accent)}
.fig-caption{font:600 9px Manrope,system-ui,sans-serif;fill:var(--muted)}
.fig-mobile{display:none}
.fig-value{font:700 10px Manrope,system-ui,sans-serif;fill:var(--ink);font-variant-numeric:tabular-nums}
.fig-value-muted{fill:var(--muted)}
.fig-accent-bar{fill:var(--accent)}
.fig-slot{fill:#e1e4ee}
.fig-slot.is-on,.fig-phase-dot.is-on{fill:var(--accent)}
.fig-phase-dot{fill:#cfd3e3}
.relayer-on{fill:#4d49c814;stroke:var(--accent);stroke-width:1.5}
.fig-check{fill:none;stroke:var(--accent);stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.fig-session{fill:none;stroke:var(--accent);stroke-width:1.5;stroke-opacity:.5}
.fig-node{fill:var(--canvas);stroke:#b9bfd6;stroke-width:1.25}
.fig-root{fill:var(--accent);stroke:none}
.fig-signature{fill:none;stroke:var(--ink);stroke-width:1.5;stroke-linecap:round}
.fig-route{fill:none;stroke:none}
.fig-scan{fill:var(--accent)}
.fig-error-bar{fill:var(--error);opacity:.7}
.fig-ring-rect{fill:none;stroke:var(--accent);stroke-width:2}
.fig-curve{fill:none;stroke:var(--accent);stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.fig-epochs circle{fill:var(--canvas);stroke:var(--accent);stroke-width:1.5}
.post-slot{fill:#eceef7}
.db-row{fill:#eceef6}
.post-level{fill:var(--accent)}
.post-level.post-free{fill:none;stroke:var(--accent);stroke-width:1.25}
.gpu-chip{fill:#eceef7}
.gpu-track{fill:#eceef6}
.gpu-progress{fill:var(--accent)}
.fig-packet path{fill:none;stroke:#fff;stroke-width:2;stroke-linecap:round;opacity:.85}

@media(min-width:901px) and (max-width:1100px){.project-featured.has-figure{grid-template-columns:minmax(0,1fr) minmax(0,340px);gap:32px 36px}.project-featured.has-figure .project-metrics{gap:24px;padding-top:24px}}
/* Below 900 px the story column would get too narrow next to the figure, so the figure goes underneath. */
@media(max-width:900px){.project-featured.has-figure{grid-template-columns:1fr;gap:30px}.project-figure{width:100%;max-width:440px}.project-featured.has-figure .project-metrics{grid-template-columns:1fr 1fr;gap:24px;padding-top:24px}}
/* Phones show compact case studies; keep this breakpoint in sync with the scene setup in index.js. */
@media(max-width:700px){
  .project-figure{display:none}
  .project-featured.has-figure{gap:26px}
  .project-featured.has-figure .project-metrics{grid-template-columns:1fr 1fr;gap:22px 12px}
  .project-featured.has-figure .project-metrics div:last-child{grid-column:auto}
}

/* Sections below the projects. */
.service-row{position:relative}
.service-row::before{content:"";position:absolute;left:0;right:0;top:-1px;height:1px;background:var(--accent);transform:scaleX(0);transform-origin:0 50%;transition:transform .6s cubic-bezier(.16,1,.3,1)}
.service-row:hover::before{transform:scaleX(1)}
.service-row .service-index{transition:color .3s}
.service-row:hover .service-index{color:var(--accent)}
.process-steps li{position:relative}
.step-line{position:absolute;left:0;right:0;top:-1px;height:2px;background:var(--accent);transform-origin:0 50%}
.faq-list summary span{transition:transform .45s cubic-bezier(.16,1,.3,1)}
@supports (interpolate-size:allow-keywords){
  .faq-list{interpolate-size:allow-keywords}
  .faq-list details::details-content{height:0;overflow:clip;transition:height .45s cubic-bezier(.16,1,.3,1),content-visibility .45s allow-discrete}
  .faq-list details[open]::details-content{height:auto}
}
@media(prefers-reduced-motion:reduce){.service-row::before{transition:none}.faq-list details::details-content{transition:none}}

/* Visitor control to stop all motion. */
.motion-toggle{min-height:44px;padding:0;border:0;background:none;color:var(--muted);font-size:12px;font-weight:600;text-decoration:underline;text-underline-offset:3px}
.motion-toggle:hover{color:var(--ink)}
.motion-paused .pearl-dot{animation-play-state:paused}

/* Review bar (?lab only). */
.lab-bar{position:fixed;left:50%;bottom:18px;z-index:10;transform:translateX(-50%);display:flex;align-items:center;gap:6px;padding:6px;border:1px solid var(--divider);border-radius:14px;background:#fffffff2;box-shadow:0 8px 30px #131b2e14;font-size:12px;font-weight:600;white-space:nowrap}
.lab-bar span{padding:0 10px 0 8px;color:var(--muted)}
.lab-bar button{min-height:36px;padding:8px 12px;border:0;border-radius:9px;background:transparent;color:var(--ink);font-weight:600}
.lab-bar button:hover{background:var(--surface)}
.lab-bar button[aria-pressed="true"]{background:var(--ink);color:#fff}
.lab-note{color:var(--error)!important}