#home {
  overflow-x: clip;
  line-height: calc(1.9 * var(--lhk, 1));
  --rg: 56px;
  --swing: 120px;
  --el: 16px; --er: var(--rg);
  --dh: min(90vw, 62vh);
  --gold: #8A6412;
  --tk-shadow: rgba(9,40,34,.16);
  --tk-warn-ink: #7A5300;
  --cta-glass: rgba(6,20,17,.62);
}
@supports (height: 1svh) { #home { --dh: min(90vw, 62svh); } }
@media (min-width: 760px) {
  #home { --rg: 64px; --swing: 140px; --el: max(48px, 50% - 440px); --er: calc(max(48px, 50% - 440px) + var(--rg)); --dh: min(52vw, 640px, 60vh); }
  @supports (height: 1svh) { #home { --dh: min(52vw, 640px, 60svh); } }
}
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) #home { --gold: #D9B45E; --tk-shadow: rgba(0,0,0,.5); --tk-warn-ink: var(--warn); } }
:root[data-theme="dark"] #home { --gold: #D9B45E; --tk-shadow: rgba(0,0,0,.5); --tk-warn-ink: var(--warn); }

.host { position: relative; }
.host > * { position: relative; z-index: 1; }
.host > .route { position: absolute; inset: 0; z-index: 0; pointer-events: none; }


.hero {
  display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center;
  min-height: calc(100vh - var(--hud-h)); min-height: calc(100svh - var(--hud-h));
  padding: clamp(24px, 5.5vh, 64px) 16px calc(var(--dh) * .6 + 12px);
}
@media (min-width: 760px) {
  .hero { min-height: min(100vh - var(--hud-h), 980px); padding: clamp(20px, 3vh, 48px) 32px calc(var(--dh) * .6 + 24px); }
  @supports (height: 1svh) { .hero { min-height: min(100svh - var(--hud-h), 980px); } }
}
.hero > .field {
  position: absolute; z-index: 0; inset: 0 0 auto; width: 100%; height: 60%; opacity: .45; pointer-events: none;
  -webkit-mask-image: linear-gradient(#000 25%, transparent); mask-image: linear-gradient(#000 25%, transparent);
}

.hero > .strand { position: absolute; z-index: 1; inset: 0; width: 100%; height: 100%; overflow: visible; pointer-events: none; }
.hero > .hero-kicker, .hero > .hero-h1, .hero > .hero-own, .hero > .hero-key, .hero > .hero-sub { z-index: 2; }

.hero-kicker { color: var(--brand); font-weight: 600; }








.hero-h1 { margin-top: 10px; font-size: calc((100vw - 32px) / var(--hero-k, 10)); font-weight: 800; line-height: 1.25; color: var(--text); font-variation-settings: var(--dots-title); }
.hero-h1 .vis { letter-spacing: var(--ls-display, 0); }
.hero-h1 .ln2 { font-weight: 200; }
.hero-h1 .ln2 :is(.nq, .b) { font-weight: 800; }
.hero-h1 .lead { display: block; margin-bottom: .3em; font-size: max(.4em, 15px); font-weight: 400; line-height: calc(1.5 * var(--lhk, 1)); letter-spacing: 0; color: var(--text-dim); font-variation-settings: var(--dots-text); }
@media (min-width: 760px) {
  .hero-h1 { margin-top: 12px; font-size: min(calc((100vw - 96px) / var(--hero-kd, 14)), 120px, max(40px, calc(20.2vh - 84px))); }
  @supports (height: 1svh) { .hero-h1 { font-size: min(calc((100vw - 96px) / var(--hero-kd, 14)), 120px, max(40px, calc(20.2svh - 84px))); } }
  .hero-h1 br.ph { display: none; }
  .hero-h1 .lead { margin-bottom: 0; line-height: 1.3; }
}
.hero-h1 .vis { white-space: nowrap; }

.hero-h1 .w, .hero-key .w { padding-inline: .08em; margin-inline: -.08em; }









.nq { position: relative; line-height: 1.25; }
.nq-dot { visibility: hidden; position: absolute; inset-inline-start: var(--nq-x, .07em); top: var(--nq-y, .2725em); width: var(--nq-d, .17em); height: var(--nq-d, .17em); border-radius: 50%; background: var(--brand); }
.nq.dotted .nq-dot { visibility: visible; }

.hero-own { margin-top: 12px; font-size: 16px; font-weight: 600; }
.hero-own:not([hidden]) ~ .hero-sub { display: none; }

.hero-key { max-width: 21em; margin-top: 14px; font-size: min(20px, calc(12px + 1.8vw)); font-weight: 500; line-height: calc(1.6 * var(--lhk, 1)); color: var(--text); text-wrap: balance; }
@media (min-width: 760px) { .hero-key { max-width: none; margin-top: 14px; font-size: 24px; line-height: calc(1.5 * var(--lhk, 1)); } }
.hero-own .hud-num { font-size: 1.6em; color: var(--brand); vertical-align: -.1em; }


.hero-sub { max-width: var(--sub-w, 21.25em); margin-top: 10px; font-size: 16px; line-height: calc(1.9 * var(--lhk, 1)); color: var(--text-dim); text-wrap: balance; }
@media (min-width: 760px) { .hero-sub .snt { display: inline-block; } }
@media (min-width: 760px) { .hero-sub { max-width: var(--sub-w-d, 44em); margin-top: 10px; font-size: 18px; line-height: calc(1.8 * var(--lhk, 1)); } }

.hero > .orb-slot { position: absolute; left: 0; right: 0; bottom: calc(var(--dh) * -.4); width: var(--dh); height: var(--dh); margin-inline: auto; pointer-events: none; }
.orb-slot::before { content: ""; position: absolute; inset: -26%; border-radius: 50%; background: radial-gradient(closest-side, var(--glow-a), var(--glow-b) 55%, transparent); }
.orb-slot > .orb { inset: 0; }




@keyframes dn-breathe { 0%{transform:scale(1)} 3.571%{transform:scale(1.00025)} 7.143%{transform:scale(1.00102)} 10.714%{transform:scale(1.00235)} 14.286%{transform:scale(1.00424)} 17.857%{transform:scale(1.00665)} 21.429%{transform:scale(1.00946)} 25%{transform:scale(1.0125)} 28.571%{transform:scale(1.01554)} 32.143%{transform:scale(1.01835)} 35.714%{transform:scale(1.02076)} 39.286%{transform:scale(1.02265)} 42.857%{transform:scale(1.02398)} 46.429%{transform:scale(1.02475)} 50%{transform:scale(1.025)} 53.571%{transform:scale(1.02475)} 57.143%{transform:scale(1.02398)} 60.714%{transform:scale(1.02265)} 64.286%{transform:scale(1.02076)} 67.857%{transform:scale(1.01835)} 71.429%{transform:scale(1.01554)} 75%{transform:scale(1.0125)} 78.571%{transform:scale(1.00946)} 82.143%{transform:scale(1.00665)} 85.714%{transform:scale(1.00424)} 89.286%{transform:scale(1.00235)} 92.857%{transform:scale(1.00102)} 96.429%{transform:scale(1.00025)} 100%{transform:scale(1)} }
html:not(.rm) #home:not(.lit) .orb-slot > .orb { animation: dn-breathe 14s steps(15) infinite; }



.hero > .hero-ctas {
  position: absolute; z-index: 31; left: 0; right: 0; top: calc(100% - var(--dh) * .3);
  display: grid; grid-template-columns: auto auto; justify-content: center; justify-items: center; gap: 10px; padding-inline: 16px;
}
@media (max-width: 759px) { .hero > .hero-ctas { top: min(calc(100% - var(--dh) * .3), calc(100% - 108px)); } }
.hero-ctas .btn { padding-inline: 20px; background: var(--banner-ink); color: var(--banner-bg); }
.hero-ctas .btn.line { background: var(--cta-glass); color: var(--hud-ink); border-color: rgba(255,255,255,.34); }
.hero-ctas .btn.line:hover { border-color: rgba(255,255,255,.6); }
.hero-ctas :focus-visible { outline-color: #fff; box-shadow: 0 0 0 7px rgba(6,20,17,.55); }
.hero-ctas .link, .hero-ctas .cta-cap { grid-column: 1 / -1; }
.hero-ctas .link { position: relative; isolation: isolate; display: inline-flex; align-items: center; gap: .45em; min-height: 44px; padding-inline: 10px; font-size: 14px; color: var(--hud-ink); text-decoration-color: var(--hud-track); }
.hero-ctas .link::before { content: ""; position: absolute; z-index: -1; inset: 9px 0; border-radius: var(--r); background: var(--cta-glass); }
.hero-ctas .cta-cap { margin-top: -2px; padding: 2px 10px; border-radius: var(--r); background: var(--cta-glass); font-size: 13px; line-height: calc(1.6 * var(--lhk, 1)); color: var(--hud-ink); }
@media (max-width: 359px) { .hero > .hero-ctas { gap: 8px; padding-inline: 12px; } .hero-ctas .btn { padding-inline: 12px; font-size: 14px; } }

.hero > .scroll-cue {
  position: absolute; z-index: 31; left: 0; right: 0; bottom: 8px; width: max-content; margin-inline: auto;
  display: flex; align-items: center; gap: 10px; font-size: 12px; color: var(--hud-ink); pointer-events: none; transition: opacity .4s var(--ease);
}
.scroll-cue span { padding: 1px 8px; border-radius: var(--r); background: var(--cta-glass); }
.scroll-cue i { position: relative; width: 4px; height: 28px; background: radial-gradient(circle, var(--hud-track) 1px, transparent 1.4px) 0 0 / 4px 6px; }
.scroll-cue i::after { content: ""; position: absolute; left: 0; top: 0; width: 4px; height: 4px; border-radius: 50%; background: var(--hud-fill); animation: dn-cue 1.6s steps(2) infinite; }

@keyframes dn-cue { 0%{transform:translateY(0px);opacity:0} 2.083%{transform:translateY(2.22px);opacity:0.343} 4.167%{transform:translateY(4.34px);opacity:0.598} 6.25%{transform:translateY(6.35px);opacity:0.765} 8.333%{transform:translateY(8.22px);opacity:0.867} 10.417%{transform:translateY(9.96px);opacity:0.927} 12.5%{transform:translateY(11.56px);opacity:0.961} 14.583%{transform:translateY(13.02px);opacity:0.981} 16.667%{transform:translateY(14.34px);opacity:0.992} 18.75%{transform:translateY(15.53px);opacity:0.997} 20.833%{transform:translateY(16.58px);opacity:0.999} 22.917%{transform:translateY(17.52px);opacity:1} 25%{transform:translateY(18.36px);opacity:1} 27.083%{transform:translateY(19.09px);opacity:0.877} 29.167%{transform:translateY(19.74px);opacity:0.763} 31.25%{transform:translateY(20.3px);opacity:0.657} 33.333%{transform:translateY(20.8px);opacity:0.562} 35.417%{transform:translateY(21.24px);opacity:0.477} 37.5%{transform:translateY(21.62px);opacity:0.402} 39.583%{transform:translateY(21.95px);opacity:0.338} 41.667%{transform:translateY(22.24px);opacity:0.282} 43.75%{transform:translateY(22.49px);opacity:0.235} 45.833%{transform:translateY(22.71px);opacity:0.195} 47.917%{transform:translateY(22.91px);opacity:0.162} 50%{transform:translateY(23.07px);opacity:0.133} 52.083%{transform:translateY(23.22px);opacity:0.11} 54.167%{transform:translateY(23.34px);opacity:0.09} 56.25%{transform:translateY(23.45px);opacity:0.073} 58.333%{transform:translateY(23.54px);opacity:0.06} 60.417%{transform:translateY(23.62px);opacity:0.048} 62.5%{transform:translateY(23.69px);opacity:0.039} 64.583%{transform:translateY(23.75px);opacity:0.031} 66.667%{transform:translateY(23.8px);opacity:0.024} 68.75%{transform:translateY(23.84px);opacity:0.019} 70.833%{transform:translateY(23.87px);opacity:0.015} 72.917%{transform:translateY(23.9px);opacity:0.011} 75%{transform:translateY(23.93px);opacity:0.008} 77.083%{transform:translateY(23.94px);opacity:0.006} 79.167%{transform:translateY(23.96px);opacity:0.004} 81.25%{transform:translateY(23.97px);opacity:0.003} 83.333%{transform:translateY(23.98px);opacity:0.002} 85.417%{transform:translateY(23.99px);opacity:0.001} 87.5%{transform:translateY(23.99px);opacity:0.001} 89.583%{transform:translateY(24px);opacity:0} 91.667%{transform:translateY(24px);opacity:0} 93.75%{transform:translateY(24px);opacity:0} 95.833%{transform:translateY(24px);opacity:0} 97.917%{transform:translateY(24px);opacity:0} 100%{transform:translateY(24px);opacity:0} }
.scroll-cue.gone { opacity: 0; }


@media (max-width: 759px), (min-width: 760px) and (max-aspect-ratio: 4/5), (min-width: 760px) and (max-height: 739px),
  (min-width: 760px) and (max-width: 853px) { .hero > .scroll-cue { display: none; } }







@keyframes dn-j-up { from { transform: translateY(115%); } }
@keyframes dn-j-rise { from { opacity: 0; transform: translateY(16px); } to { opacity: 1; transform: none; } }
@keyframes dn-j-rise-p { from { opacity: .01; transform: translateY(16px); } to { opacity: 1; transform: none; } }
@keyframes dn-j-wipe { from { opacity: 1; clip-path: inset(0 0 0 100%); } to { opacity: 1; clip-path: inset(0); } }
@keyframes dn-j-wipe-l { from { opacity: 1; clip-path: inset(0 100% 0 0); } to { opacity: 1; clip-path: inset(0); } }
@keyframes dn-j-orb { from { opacity: 0; transform: scale(.94); } to { opacity: 1; transform: none; } }
@keyframes dn-j-draw { from { transform: scaleX(0); } to { transform: none; } }
@keyframes dn-j-drop { from { opacity: 0; transform: translateY(-.9em); } to { opacity: 1; transform: none; } }


html.intro .hero-h1 .vis .w > span { animation: dn-j-up .9s var(--d, 0s) var(--ease) both; }
html.intro .hero-h1 .lead .w > span { animation-duration: .8s; }
html.intro .hero-key .w > span { animation: dn-j-up .75s var(--d, 0s) var(--ease) both; }
html.intro .hero > .hero-kicker { animation: dn-j-wipe .5s .05s var(--ease) both; }
html[dir="ltr"].intro .hero > .hero-kicker { animation-name: dn-j-wipe-l; }
html.intro .hero > .orb-slot { animation: dn-j-orb .8s .45s var(--ease) both; }

html.intro .hero > :is(.hero-sub, .hero-own) { animation: dn-j-rise-p .6s .85s var(--ease) both; }
html.intro .hero > .hero-ctas { animation: dn-j-rise .5s 1.3s var(--ease) both; }
html.intro .hero > .scroll-cue { animation: dn-j-rise .5s 1.55s var(--ease) both; }
html.intro #hud .hud-rail { animation: dn-j-draw .7s 1.3s var(--ease) both; }
html.intro .nq.dotted .nq-dot { animation: dn-j-drop .3s 1s cubic-bezier(.34,1.8,.64,1) both; }
#home.fall .nq-dot { visibility: hidden; }

.start-gate { display: none; }
html:is(.gate, .gate-go) .start-gate { position: fixed; inset: 0; z-index: 70; display: grid; place-items: center; touch-action: none;
  background: var(--bg-70); -webkit-backdrop-filter: blur(16px); backdrop-filter: blur(16px);
  transition: background-color .7s var(--ease), -webkit-backdrop-filter .7s var(--ease), backdrop-filter .7s var(--ease); }
html.gate-go .start-gate { background-color: transparent; -webkit-backdrop-filter: blur(0); backdrop-filter: blur(0); pointer-events: none; }
html:is(.gate, .gate-go) .nq-dot { visibility: hidden; }
.gate-dot { position: relative; display: grid; place-items: center; width: 104px; height: 104px; padding: 0; border: 0; border-radius: 50%;
  background: var(--brand); color: var(--on-brand); font: 800 19px/1 var(--font-body); cursor: pointer; -webkit-tap-highlight-color: transparent;
  animation: dn-gate-in .7s .15s cubic-bezier(.34,1.56,.64,1) both; }
.gate-dot::before { content: ''; position: absolute; inset: 0; border-radius: 50%; border: 1.5px solid var(--brand); animation: dn-gate-ring 2s 1s ease-out infinite; pointer-events: none; }
html.gate-go .gate-dot::before { display: none; }
.gate-dot:focus-visible { outline: 2px solid var(--brand); outline-offset: 6px; }
@keyframes dn-gate-in { from { transform: scale(0); } }
@keyframes dn-gate-ring { from { transform: scale(1); opacity: .9; } to { transform: scale(1.9); opacity: 0; } }
#home.ride > .hero { margin-bottom: var(--fall, 0px); }
#home.ride.hs > .hero { will-change: transform; }


.nq-ring {
  position: absolute; inset-inline-start: calc(var(--nq-x, .07em) + var(--nq-d, .17em) / 2 - .14em); top: calc(var(--nq-y, .2725em) + var(--nq-d, .17em) / 2 - .14em);
  width: .28em; height: .28em; border-radius: 50%; pointer-events: none;
  background: repeating-conic-gradient(var(--brand) 0 18deg, transparent 0 36deg);
  -webkit-mask: radial-gradient(closest-side, transparent calc(100% - max(1.5px, .035em)), #000 calc(100% - max(1.5px, .035em) + .6px));
  mask: radial-gradient(closest-side, transparent calc(100% - max(1.5px, .035em)), #000 calc(100% - max(1.5px, .035em) + .6px));
  transform: scale(0); transition: transform .5s cubic-bezier(.34,1.56,.64,1);
}
#home.flown .nq-ring { transform: none; }
#home.lit .orb-slot > .orb { visibility: hidden; }

:is(#home, #ball-layer) { --j-sphere: radial-gradient(circle at 40% 36%, #B9DBD2 0%, #6FA898 16%, #2E6D5E 40%, #1B4A3F 62%, #0E2A23 82%, #071510 100%); }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) :is(#home, #ball-layer) { --j-sphere: radial-gradient(circle at 40% 36%, #9AC7BC 0%, #5E9A8B 16%, #245F50 40%, #163A31 62%, #0B211B 82%, #05090A 100%); } }
:root[data-theme="dark"] :is(#home, #ball-layer) { --j-sphere: radial-gradient(circle at 40% 36%, #9AC7BC 0%, #5E9A8B 16%, #245F50 40%, #163A31 62%, #0B211B 82%, #05090A 100%); }


#ball-layer { direction: ltr; }
#ball-layer > #ball { max-width: none; }
#ball-layer > #ball:is(.orb-css, .orb-fallback) {
  background: radial-gradient(circle at 36% 30%, rgba(255,255,255,.42), rgba(255,255,255,0) 20%) 50% / 80% 80% no-repeat,
    radial-gradient(circle at 70% 80%, rgba(0,0,0,.5), transparent 58%) 50% / 80% 80% no-repeat, var(--j-sphere) 50% / 80% 80% no-repeat;
  clip-path: circle(40%);
}


.strand path { fill: none; }
.strand .road { stroke: var(--rail-road); stroke-width: 2.5; stroke-linecap: round; stroke-dasharray: 0 9; }
.strand .core { stroke: var(--rail-core); stroke-width: 2; stroke-dasharray: 1 1; stroke-dashoffset: 1; }
.strand .fly { fill: var(--brand); opacity: 0; }


.hero-ctas .was { opacity: .6; text-decoration: line-through; }