/* ==========================================================================
   YRproject — fx.css (V2 motion + the homepage's living parts). Loaded on every page after site.css.
   Sections: 1 view transitions · 2 page-load choreography · 3 scroll reveals · 4 spotlight ·
   5 hero aurora · 6 flow + odometer + step event · 7 the world · 8 bento · 9 closing + mega wordmark ·
   10 logo · 11 reduced motion.  Everything here is decoration: content is readable with this file missing.
   ========================================================================== */

/* ---------- 1. Cross-document view transitions --------------------------- */
@view-transition { navigation: auto; }
::view-transition-old(root) { animation: vt-out 180ms cubic-bezier(.4, 0, 1, 1) both; }
::view-transition-new(root) { animation: vt-in 380ms cubic-bezier(.16, 1, .3, 1) both; }
::view-transition-group(site-header) { animation-duration: 0s; }
@keyframes vt-out { to { opacity: 0; transform: translateY(-8px); } }
@keyframes vt-in { from { opacity: 0; transform: translateY(14px); } }

/* ---------- 2. Page-load choreography (CSS only) -------------------------- */
@media (prefers-reduced-motion: no-preference) {
  .in { animation: rise .9s var(--ease-out) both; }
  .in-1 { animation-delay: 60ms; } .in-4 { animation-delay: 320ms; } .in-5 { animation-delay: 460ms; }
  .hero-title .ln { display: inline-block; animation: settle 1.2s var(--ease-out) both; transform-origin: 0 100%; }
  .hero-title .in-3 { animation-delay: 140ms; }
  .pagehead h1 { animation: settle 1s var(--ease-out) both; }
  .pagehead .lead, .pagehead .eyebrow { animation: rise .9s var(--ease-out) 160ms both; }
}
@keyframes rise { from { opacity: 0; transform: translateY(1.25rem); } }
/* kinetic headline: heavy and tight on arrival, settles to its reading weight (Geist is variable). No opacity: the h1 is the LCP element. */
@keyframes settle { from { font-weight: 800; letter-spacing: -.075em; transform: translateY(.18em) skewY(1.5deg); } }

/* ---------- 3. Scroll reveals -------------------------------------------- */
/* Native scroll-driven where supported; IntersectionObserver fallback (html.fx-io, fx/core.js); otherwise visible. */
@media (prefers-reduced-motion: no-preference) {
  @supports (animation-timeline: view()) {
    .rv { animation: reveal linear both; animation-timeline: view(); animation-range: entry 0% entry 38%; }
    .rv-2 { animation-range: entry 8% entry 46%; } .rv-3 { animation-range: entry 16% entry 54%; }
  }
  .fx-io .rv { opacity: 0; transform: translateY(2rem) scale(.985); transition: opacity .8s var(--ease-out), transform .8s var(--ease-out); }
  .fx-io .rv-2 { transition-delay: 90ms; } .fx-io .rv-3 { transition-delay: 180ms; }
  .fx-io .rv.is-in { opacity: 1; transform: none; }
}
@keyframes reveal { from { opacity: 0; transform: translateY(2.5rem) scale(.985); } }

/* ---------- 4. Spotlight (fx/core.js sets --mx/--my on [data-spot]) ------- */
[data-spot] { position: relative; }
[data-spot]::after { content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none; opacity: 0; transition: opacity 300ms; background: radial-gradient(22rem circle at var(--mx, 50%) var(--my, 0), color-mix(in srgb, var(--c, var(--pro)) 20%, transparent), transparent 60%); }
[data-spot]:hover::after { opacity: 1; }

/* ---------- 5. Hero aurora ------------------------------------------------ */
.hero { padding-block: clamp(2rem, 4vw, 3.5rem) var(--s8); position: relative; isolation: isolate; overflow: clip; }
.hero__aurora { position: absolute; inset: -12rem -10% auto; height: 58rem; z-index: -1; pointer-events: none; filter: blur(60px) saturate(1.25); transform: translate3d(calc(var(--px, 0) * -2.5rem), calc(var(--py, 0) * -1.5rem), 0); transition: transform 1.2s var(--ease-out); -webkit-mask-image: linear-gradient(#000 55%, transparent); mask-image: linear-gradient(#000 55%, transparent); }
.hero__aurora i { position: absolute; border-radius: 50%; opacity: .55; will-change: transform; }
.hero__aurora i:nth-child(1) { left: -5%; top: 8rem; width: 46rem; height: 26rem; background: radial-gradient(closest-side, rgb(56 225 214 / .75), transparent); animation: drift-a 26s ease-in-out infinite alternate; }
.hero__aurora i:nth-child(2) { right: -8%; top: 0; width: 54rem; height: 32rem; background: radial-gradient(closest-side, rgb(124 108 255 / .85), transparent); animation: drift-b 32s ease-in-out infinite alternate; }
.hero__aurora i:nth-child(3) { left: 38%; top: 20rem; width: 40rem; height: 22rem; background: radial-gradient(closest-side, rgb(255 90 42 / .6), transparent); animation: drift-c 22s ease-in-out infinite alternate; }
@keyframes drift-a { to { transform: translate3d(14rem, 5rem, 0) rotate(12deg) scale(1.2); } }
@keyframes drift-b { to { transform: translate3d(-16rem, 7rem, 0) rotate(-10deg) scale(.85); } }
@keyframes drift-c { to { transform: translate3d(-10rem, -6rem, 0) scale(1.3); } }
.hero::after { content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none; background-image: var(--grain); opacity: .16; mix-blend-mode: overlay; }
@media (max-width: 40rem) { .hero__aurora { filter: blur(40px); height: 40rem; } .hero__aurora i { opacity: .45; animation-duration: 40s !important; } }
/* The globe as the hero's living backdrop (>= 60rem only; docs/DESIGN.md "Globe stage"). First paint / no JS: the CSS
   sphere. globe-embed.js parks the one MapLibre stage in .hero__globe-box; the live globe is sized to the sphere
   (HERO_FILL = 92% of the box), so the cross-fade does not jump. Non-interactive: inert + pointer-events none. */
.hero__globe { display: none; }
@media (min-width: 60rem) {
  .hero__globe { display: block; position: absolute; inset: 0 0 auto 0; height: min(100%, max(100svh, 46rem)); z-index: -1; pointer-events: none; overflow: clip; contain: layout paint;
    -webkit-mask-image: linear-gradient(#000 52%, transparent 88%); mask-image: linear-gradient(#000 52%, transparent 88%); }
  /* right of the headline, cropped by the viewport edge, dissolving into the flow below */
  .hero__globe-box { --s: clamp(38rem, 57vw, 62rem); position: absolute; width: var(--s); height: var(--s); right: calc(var(--s) * -.12); top: -1rem; }
  .hero__globe-box::before { content: ""; position: absolute; inset: 4%; border-radius: 50%; z-index: 2; pointer-events: none;
    box-shadow: inset 0 0 0 1px rgb(125 200 255 / .22), inset 0 1.5rem 5rem rgb(91 157 255 / .28), inset 0 0 12rem rgb(3 6 15 / .55), 0 -1rem 6rem rgb(56 225 214 / .16), 0 0 10rem rgb(124 108 255 / .22); }
  .hero__globe-box .globe-ph { transition: opacity .9s ease; }
  .hero__globe-box .globe-ph__ball { width: 92%; }
  .hero__globe.has-stage .globe-ph { opacity: 0; }
  .hero__globe.has-stage .globe-ph__sweep { animation-play-state: paused; }
  .hero__globe .maplibregl-control-container { display: none; }
  .hero__globe .maplibregl-canvas { cursor: default; }
  /* scrim: the message stays in front. Left = headline column, centre-right = the lead. */
  .hero__globe::after { content: ""; position: absolute; inset: 0; pointer-events: none;
    background: linear-gradient(90deg, rgb(3 6 15 / .9) 0, rgb(3 6 15 / .7) 36%, rgb(3 6 15 / .22) 56%, transparent 74%); }
  @supports (animation-timeline: view()) {
    @media (prefers-reduced-motion: no-preference) {
      /* scroll-driven, no scroll-jacking: the globe lags behind the page and dissolves on its way down to the world section */
      .hero__globe { animation: hero-globe-out linear both; animation-timeline: view(); animation-range: exit 0% exit 72%; }
      .world #world-globe { animation: world-globe-in linear both; animation-timeline: view(); animation-range: entry 0% entry 80%; }
    }
  }
}
/* Phones / tablets (< 60rem): no MapLibre in the hero. The CSS sphere itself is the backdrop, carrying real project
   locations (.globe-ph__dots, server-rendered from data/world by yr/pages/home.py) - the world above the fold for the
   price of one SVG. The live globe follows right after the figures (.home-top order below). */
.globe-ph__dots { display: none; }
@media (max-width: 59.99rem) {
  .hero__globe { display: block; position: absolute; inset: 0 0 auto 0; height: 30rem; z-index: -1; pointer-events: none; overflow: clip; contain: layout paint;
    -webkit-mask-image: linear-gradient(#000 45%, transparent 92%); mask-image: linear-gradient(#000 45%, transparent 92%); }
  .hero__globe-box { --s: clamp(21rem, 96vw, 34rem); position: absolute; width: var(--s); height: var(--s); right: calc(var(--s) * -.34); top: -2.5rem; }
  .hero__globe-box .globe-ph { overflow: visible; }
  .hero__globe-box .globe-ph__ball { width: 100%; }
  .hero__globe .globe-ph__dots { display: block; position: absolute; inset: 0; width: 100%; height: 100%; filter: drop-shadow(0 0 2px rgb(125 245 217 / .7)); }
  .hero__globe::after { content: ""; position: absolute; inset: 0; pointer-events: none; background: linear-gradient(90deg, rgb(3 6 15 / .78) 0, rgb(3 6 15 / .45) 45%, rgb(3 6 15 / .05) 80%); }
  @media (prefers-reduced-motion: no-preference) {
    .globe-ph__dots g g { animation: dot-pulse 3.6s ease-in-out infinite; }
    .globe-ph__dots g g:nth-child(2) { animation-delay: -1.2s; } .globe-ph__dots g g:nth-child(3) { animation-delay: -2.4s; }
  }
}
@keyframes dot-pulse { 50% { opacity: .35; } }
/* .home-top = hero, hero-more (step chart, note, doors), world. Wide: DOM order. Narrow: the world moves up, right
   after the three figures - CSS order only, nothing is moved in the DOM. */
.hero-more { position: relative; padding-bottom: var(--s8); }
.hero:has(+ .hero-more) { padding-bottom: 0; }
.hero-more .sb__scale { margin-top: calc(var(--s6) + clamp(1rem, 2vw, 1.5rem)); }
@media (max-width: 59.99rem) {
  /* world on phones: title, then the globe straight away, then the explanation and the links */
  .home-top .world { flex-direction: column; }
  .home-top .world__over, .home-top .world__over > .wrap { display: contents; }
  .home-top .world__over .wrap > * { order: 4; width: 100%; max-width: 100%; padding-inline: var(--gutter); box-sizing: border-box; }
  .home-top .world__over .wrap > .eyebrow { order: 1; padding-top: var(--s7); }
  .home-top .world__over .wrap > .world__title { order: 2; margin-bottom: var(--s4); }
  .home-top .world #world-globe { order: 3; height: clamp(26rem, 74svh, 38rem); }
  .home-top .world__cta { padding-bottom: var(--s6); }
  .home-top { display: flex; flex-direction: column; }
  .home-top > .hero { order: 1; padding-bottom: var(--s6); } .home-top > .world { order: 2; } .home-top > .hero-more { order: 3; padding-top: var(--s5); }
}
@keyframes hero-globe-out { 45% { opacity: .8; } to { opacity: 0; transform: translate3d(0, 16%, 0) scale(.93); } }
@keyframes world-globe-in { from { opacity: .25; transform: translate3d(0, -7%, 0) scale(.95); } to { opacity: 1; transform: none; } }
.hero__top { display: grid; gap: var(--s5); margin-bottom: clamp(1.5rem, 3vw, 2.5rem); }
.hero__top .eyebrow { margin-bottom: var(--s4); }
/* wide: one column - the right half of the hero belongs to the globe backdrop */
@media (min-width: 60rem) { .hero__top { max-width: min(44rem, 54vw); gap: var(--s4); } .hero__top > div { width: max-content; max-width: 90vw; } .hero__top .lead { text-shadow: 0 1px 14px rgb(3 6 15 / .9); } }
.hero__top .lead { color: var(--mist); font-size: clamp(1.0625rem, 1rem + .35vw, 1.3125rem); }
.hero__top .lead b { color: var(--fg); font-weight: 500; }
.hero-title { text-shadow: 0 0 80px rgb(124 108 255 / .35); }
.hero-title em { font-style: normal; background: var(--g-fee); -webkit-background-clip: text; background-clip: text; color: transparent; -webkit-text-fill-color: transparent; filter: drop-shadow(0 0 28px rgb(255 90 42 / .45)); padding-right: .06em; }
.hero__doors { margin-top: var(--s8); }
.hero__note { margin-top: var(--s5); }

/* ---------- 6. Flow, odometer, step event --------------------------------- */
.sb__flow { position: relative; height: clamp(11.5rem, 25vw, 20rem); margin-bottom: var(--s2); border-radius: var(--r); overflow: hidden; background: linear-gradient(90deg, rgb(157 140 255 / .06), transparent 40%), rgb(3 6 15 / .55); border: 1px solid rgb(255 255 255 / .07); box-shadow: var(--hi), inset 0 0 80px rgb(0 0 0 / .5), var(--lift); }
.sb__flow canvas { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.sb--flow .sb__bar { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
@media (min-width: 44rem) { .sb--flow .sb__barwrap { position: relative; } }   /* phones: sticky (site.css), also a containing block */
.sb__lane { position: absolute; font-size: var(--fs-small); line-height: 1; white-space: nowrap; transform: translateY(-50%); display: flex; align-items: baseline; gap: .6em; font-weight: 500; text-shadow: 0 1px 8px rgb(3 6 15 / .9), 0 0 2px rgb(3 6 15 / .9); transition: top 120ms linear; pointer-events: none; }
.sb__lane b { font-weight: 500; letter-spacing: -.04em; }
.sb__lane--in { left: clamp(.75rem, 2vw, 1.5rem); color: #C9C0FF; font-family: var(--font-mono); font-size: var(--fs-micro); letter-spacing: .1em; text-transform: uppercase; }
.sb__lane--pro { right: clamp(.75rem, 2vw, 1.5rem); color: var(--pro-hi); }
.sb__lane--pro b { font-size: clamp(1.75rem, 1rem + 3vw, 3.5rem); color: var(--fg); text-shadow: 0 0 30px rgb(56 225 214 / .8), 0 1px 8px rgb(3 6 15 / .9); }
.sb__lane--yr { right: clamp(.75rem, 2vw, 1.5rem); color: var(--flare-hi); transform: none; }
.sb__lane--yr b { font-size: clamp(1.125rem, .8rem + 1.2vw, 1.75rem); color: var(--fg); text-shadow: 0 0 24px rgb(255 90 42 / .9), 0 1px 8px rgb(3 6 15 / .9); }
.sb__now { position: absolute; right: clamp(.75rem, 2vw, 1.5rem); transform: translateY(-50%); transition: top 120ms linear; font-family: var(--font-mono); font-size: .6875rem; letter-spacing: .08em; text-transform: uppercase; color: var(--mist); background: rgb(3 6 15 / .8); border: 1px solid rgb(255 125 82 / .45); border-radius: 99px; padding: .4em .8em; line-height: 1; white-space: nowrap; pointer-events: none; }
.sb__now b { color: var(--flare-hi); font-weight: 600; font-size: 1.15em; margin-left: .3em; display: inline-block; }
@media (max-width: 43.99rem) { .sb__lane--in { display: none; } .sb__lane--pro { font-size: .8125rem; } }   /* the total line above the flow already says "client pays" */
@media (max-width: 40rem) { .sb__now { font-size: .625rem; padding: .3em .6em; } }

.odo { display: inline-flex; line-height: 1; vertical-align: baseline; }
.odo__c { display: inline-block; height: 1em; overflow: hidden; position: relative; padding-block: .06em; box-sizing: content-box; margin-block: -.06em; }
.odo__r { display: block; white-space: pre; line-height: 1; text-align: center; transition: transform 700ms cubic-bezier(.2, 1.15, .3, 1); will-change: transform; }
.odo__s { display: inline-block; }

/* the step event: splitbar.js puts .is-step on the form for 900 ms when the marginal band changes */
.sb.is-step .sb__now { animation: step-chip .9s var(--ease-out); }
.sb.is-step .sb__now b { animation: step-roll .7s var(--ease-out); }
.sb.is-step .sb__marker span { animation: step-chip .9s var(--ease-out); }
.sb.is-step .sb__col { animation: step-band .9s var(--ease-out); }
.sb.is-step .sb__flow { animation: step-frame .9s var(--ease-out); }
.sb.is-step .sb__figs > div:nth-child(3) { animation: step-card .9s var(--ease-out); }
@keyframes step-chip { 0% { transform: translateY(-50%) scale(1); } 25% { transform: translateY(-50%) scale(1.18); background: var(--flare); color: var(--ink); } 100% { transform: translateY(-50%) scale(1); } }
.sb.is-step .sb__marker span { animation-name: step-mark; }
@keyframes step-mark { 25% { background: var(--pro-hi); box-shadow: 0 0 30px var(--pro); } }
@keyframes step-roll { from { transform: translateY(-1em); opacity: 0; } }
@keyframes step-band { 25% { filter: brightness(2.2) saturate(1.4); } }
@keyframes step-frame { 20% { border-color: rgb(125 245 217 / .8); box-shadow: var(--hi), inset 0 0 80px rgb(56 225 214 / .25), 0 0 60px rgb(56 225 214 / .3); } }
@keyframes step-card { 25% { border-color: var(--flare); box-shadow: var(--hi), 0 0 50px rgb(255 90 42 / .45); } }

/* ---------- 7. The world, live -------------------------------------------- */
/* #world-globe itself (frame, chips, card, footer) is styled by static/css/map.css + mounted by map/globe-embed.js.
   Here: full-bleed placement, the title overlay and the no-JS placeholder. Title overlay lets pointer events through. */
.world { position: relative; isolation: isolate; overflow: hidden; border-block: 1px solid var(--line-soft); background: var(--abyss); }
.world #world-globe { border-radius: 0; height: clamp(34rem, 92vh, 62rem); height: clamp(34rem, 92svh, 62rem); }
.world__over { position: absolute; inset: 3.75rem 0; z-index: 2; pointer-events: none; display: flex; align-items: center; background: linear-gradient(90deg, rgb(3 6 15 / .8), rgb(3 6 15 / .3) 42%, transparent 62%); }
.world__over .wrap > * { max-width: min(34rem, 44vw); }
.world__over a, .world__over .btn { pointer-events: auto; }
.world__title { text-shadow: 0 2px 30px rgb(3 6 15 / .9); font-size: clamp(2.75rem, 1.2rem + 4.6vw, 5.5rem); }
.world__lead { color: #C3CEDF; margin-top: var(--s5); text-shadow: 0 1px 12px rgb(3 6 15), 0 0 2px rgb(3 6 15); font-size: clamp(1.0625rem, 1rem + .3vw, 1.25rem); }
.world__cta { margin-top: var(--s6); }
.world__legend { list-style: none; display: flex; flex-wrap: wrap; gap: var(--s2); margin: var(--s6) 0 0; padding: 0; }
@media (max-width: 59.99rem) {
  .world__over { position: relative; inset: auto; display: block; padding-block: var(--section) var(--s6); background: radial-gradient(40rem 20rem at 80% 0, rgb(91 157 255 / .2), transparent 70%); }
  .world__over .wrap > * { max-width: 38rem; }
  .world { display: flex; flex-direction: column-reverse; }
  .world #world-globe { height: clamp(28rem, 80svh, 40rem); }
}

.globe-ph { position: absolute; inset: 0; display: grid; place-items: center; overflow: hidden; }
.globe-ph__ball { position: relative; width: min(70vh, 90vw, 44rem); aspect-ratio: 1; border-radius: 50%; color: rgb(125 200 255 / .38);
  background: radial-gradient(circle at 32% 28%, rgb(91 157 255 / .5), rgb(20 40 96 / .55) 42%, rgb(5 10 26 / .9) 72%);
  box-shadow: 0 0 0 1px rgb(125 200 255 / .3), 0 0 90px 10px rgb(56 140 255 / .35), 0 0 220px 60px rgb(124 108 255 / .22), inset -3rem -3rem 8rem rgb(3 6 15 / .85), inset 1rem 1rem 4rem rgb(125 245 217 / .16); }
.globe-ph__ball svg { position: absolute; inset: 0; width: 100%; height: 100%; }
.globe-ph__sweep { position: absolute; inset: 0; border-radius: 50%; background: conic-gradient(from 0deg, transparent 0 78%, rgb(56 225 214 / .22) 96%, rgb(125 245 217 / .5) 100%); animation: sweep 9s linear infinite; -webkit-mask-image: radial-gradient(closest-side, #000 98%, transparent); mask-image: radial-gradient(closest-side, #000 98%, transparent); }
@keyframes sweep { to { transform: rotate(360deg); } }
@media (max-width: 59.99rem) { .globe-ph__ball { width: min(92vw, 60svh, 34rem); } }

/* ---------- 8. Bento ------------------------------------------------------- */
.bento { display: grid; gap: var(--s4); grid-template-columns: 1fr; }
@media (min-width: 44rem) { .bento { grid-template-columns: repeat(2, 1fr); } .tile--xl, .tile--w { grid-column: span 2; } }
@media (min-width: 68rem) {
  .bento { grid-template-columns: repeat(6, 1fr); grid-auto-rows: minmax(15rem, auto); }
  .tile { grid-column: span 2; } .tile--xl { grid-column: span 4; grid-row: span 2; } .tile--w { grid-column: span 2; } .tile--ready { grid-column: span 6; min-height: 0; }
  .tile--ledger { grid-row: span 1; }
}
.tile { --c: var(--pro); --c-rgb: 56 225 214; position: relative; isolation: isolate; overflow: hidden; display: flex; flex-direction: column; padding: clamp(1.25rem, 2.2vw, 2rem); min-height: 14rem; text-decoration: none; color: var(--fg); background: radial-gradient(30rem 16rem at 100% 0, rgb(var(--c-rgb) / .16), transparent 70%), var(--surface); border: 1px solid var(--line-soft); border-radius: var(--r-lg); box-shadow: var(--hi), var(--lift); transition: transform 420ms var(--ease-out), border-color 240ms, box-shadow 420ms; }
a.tile:hover, a.tile:focus-visible { transform: translateY(-4px); border-color: rgb(var(--c-rgb) / .6); box-shadow: var(--hi), var(--lift), 0 0 60px -12px rgb(var(--c-rgb) / .55); }
.tile--ledger, .tile--mc, .tile--cf { --c: var(--flare-hi); --c-rgb: 255 110 66; }
.tile--ask { --c: var(--client); --c-rgb: 157 140 255; } .tile--pr { --c: var(--blue); --c-rgb: 91 157 255; }
.tile--mc { --c: #FF6FB5; --c-rgb: 255 111 181; } .tile--cf { --c: var(--k-oilgas); --c-rgb: 255 181 71; }
.tile__k { display: flex; justify-content: space-between; align-items: center; gap: var(--s3); font-family: var(--font-mono); font-size: var(--fs-micro); letter-spacing: .12em; text-transform: uppercase; color: var(--c); margin-bottom: auto; padding-bottom: var(--s6); position: relative; z-index: 1; }
.tile__t { font-size: clamp(1.5rem, 1.2rem + 1vw, 2.125rem); letter-spacing: -.035em; line-height: 1.05; font-weight: 500; margin-bottom: var(--s3); position: relative; z-index: 1; }
.tile--xl .tile__t { font-size: clamp(2.25rem, 1.5rem + 3vw, 4.25rem); letter-spacing: -.05em; }
.tile__p { color: var(--mist); font-size: var(--fs-small); max-width: 34em; position: relative; z-index: 1; padding-right: 2.5rem; }
.tile__a { position: absolute; right: clamp(1.25rem, 2.2vw, 2rem); bottom: clamp(1.25rem, 2.2vw, 2rem); font-size: 1.5rem; line-height: 1; color: var(--c); transition: transform 320ms var(--ease-out); z-index: 1; }
a.tile:hover .tile__a { transform: translateX(.3em); }
.tile--ready { border-style: dashed; border-color: var(--edge); background: transparent; box-shadow: none; color: var(--mist); min-height: 0; --c: var(--haze); }
.tile--ready .tile__k { padding-bottom: var(--s5); }
.tile--ready .tile__t { color: var(--mist); }
/* decoration: a radar sweep (no data, no dots) and a split stripe */
.tile__deco { position: absolute; pointer-events: none; z-index: 0; }
.tile__deco--radar { right: -6rem; top: -6rem; width: 30rem; height: 30rem; border-radius: 50%; opacity: .9; }
.tile__deco--radar i { position: absolute; inset: 0; border-radius: 50%; border: 1px solid rgb(56 225 214 / .22); }
.tile__deco--radar i:nth-child(2) { inset: 18%; } .tile__deco--radar i:nth-child(3) { inset: 36%; }
.tile__deco--radar b { position: absolute; inset: 0; border-radius: 50%; background: conic-gradient(from 0deg, transparent 0 75%, rgb(56 225 214 / .35)); animation: sweep 7s linear infinite; }
.tile__deco--ledger { left: 0; right: 0; top: 0; height: 5px; display: flex; }
.tile__deco--ledger i { flex: 0 0 85.4%; background: var(--g-pro); box-shadow: 0 0 24px rgb(56 225 214 / .7); }
.tile__deco--ledger b { flex: 1; background: var(--g-fee); box-shadow: 0 0 24px rgb(255 90 42 / .8); margin-left: 3px; }

/* ---------- 9. Closing + giant footer wordmark ------------------------------ */
.closing { position: relative; overflow: hidden; isolation: isolate; }
.closing h2 { font-size: var(--fs-h1); max-width: 12em; margin-bottom: var(--s8); }
.closing__glow { position: absolute; z-index: -1; left: 50%; bottom: -24rem; width: 90rem; height: 40rem; transform: translateX(-50%); background: radial-gradient(closest-side, rgb(124 108 255 / .35), transparent); filter: blur(30px); }

.mega { margin: var(--s8) 0 calc(var(--s6) * -1); padding-inline: var(--gutter); font-size: clamp(3.5rem, 17.2vw, 19rem); line-height: .8; letter-spacing: -.07em; font-weight: 700; white-space: nowrap; text-align: center; user-select: none; position: relative; overflow: hidden; }
.mega__in { display: inline-flex; align-items: baseline; background: linear-gradient(180deg, rgb(238 243 250 / .9), rgb(157 140 255 / .35) 60%, rgb(6 11 24 / 0) 96%); -webkit-background-clip: text; background-clip: text; color: transparent; -webkit-text-fill-color: transparent; padding-bottom: .12em; }
.mega b { font-weight: 800; }
.mega span span, .mega__in > span { font-weight: 300; }
.mega__ou { font-style: normal; font-weight: 300; display: inline-block; overflow: hidden; max-width: 0; opacity: 0; vertical-align: baseline; -webkit-text-fill-color: var(--pro); color: var(--pro); text-shadow: 0 0 60px rgb(56 225 214 / .6); transition: max-width 1.1s var(--ease-out) .2s, opacity .8s var(--ease-out) .35s; padding-bottom: .12em; margin-bottom: -.12em; }
.mega:hover .mega__ou, .mega.is-in .mega__ou { max-width: 1.3em; opacity: 1; }
@media (prefers-reduced-motion: no-preference) {
  @supports (animation-timeline: view()) {
    .mega__ou { animation: ou-open linear both; animation-timeline: view(); animation-range: entry 30% entry 95%; transition: none; }
  }
}
@keyframes ou-open { from { max-width: 0; opacity: 0; } to { max-width: 1.3em; opacity: 1; } }

/* ---------- 10. Logo: the fork pours, YR -> YouR ----------------------------- */
@media (prefers-reduced-motion: no-preference) {
  body:has(.hero) .site-header .logo .yr-mark { animation: pour 1.4s var(--ease-out) both; }
  body:has(.hero) .site-header .logo .yr-m--fee { animation: pour-fee 1.6s var(--ease-out) both; }
  body:has(.hero) .site-header .logo:not(:hover):not(:focus-visible) .yr-ou { animation: yr-ou-close 3s var(--ease) both; }
  body:has(.hero) .site-header .logo:not(:hover):not(:focus-visible) .yr-rest { animation: yr-rest-close 3s var(--ease) both; }
}
@keyframes pour { from { clip-path: inset(0 0 100% 0); } to { clip-path: inset(-10% -10% -10% -10%); } }
@keyframes pour-fee { 0%, 35% { opacity: 0; } 60% { opacity: 1; filter: brightness(2.2); } 100% { filter: none; } }
@keyframes yr-ou-close { 0%, 66% { opacity: 1; } 80%, 100% { opacity: 0; } }
@keyframes yr-rest-close { 0%, 70% { transform: translateX(var(--yr-ou, 0px)); } 100% { transform: translateX(0); } }
.site-header.is-scrolled { background: rgb(4 8 18 / .86); box-shadow: 0 10px 40px -10px rgb(0 0 0 / .7); }

/* ---------- 11. Reduced motion ---------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  @view-transition { navigation: none; }
  .hero__aurora i, .globe-ph__sweep, .tile__deco--radar b, .badge--live::before { animation: none !important; }
  .mega__ou { max-width: 1.3em; opacity: 1; }
  .rv { opacity: 1 !important; transform: none !important; }
}