/* Motion layer: scroll reveals, hover depth, page transitions, ambient background. Everything here is decoration:
   it only switches on when motion.js adds the "motion" class (never under prefers-reduced-motion), so without JS or with
   reduced motion the page is plain and fully visible. */
@view-transition { navigation: auto; }
::view-transition-old(root), ::view-transition-new(root) { animation-duration: .22s; animation-timing-function: ease; }
.topbar { view-transition-name: topbar; }
::view-transition-group(topbar) { animation-duration: 0s; }

:root { --ease: cubic-bezier(.22, .8, .24, 1); }

/* ambient aurora behind everything */
body::before, body::after { content: ""; position: fixed; z-index: -1; pointer-events: none; border-radius: 50%; filter: blur(80px); opacity: .3; }
body::before { width: 46vw; height: 46vw; left: -12vw; top: -14vw; background: var(--a1); }
body::after { width: 40vw; height: 40vw; right: -10vw; bottom: -16vw; background: var(--a2); }
.motion body::before { animation: drift1 26s ease-in-out infinite alternate; }
.motion body::after { animation: drift2 32s ease-in-out infinite alternate; }
@keyframes drift1 { to { transform: translate(24vw, 18vh) scale(1.25); } }
@keyframes drift2 { to { transform: translate(-22vw, -16vh) scale(1.3); } }

/* scroll progress */
.progress-top { position: fixed; z-index: 20; left: 0; top: 0; height: 3px; width: 100%; transform-origin: 0 50%; transform: scaleX(0); background: linear-gradient(90deg, var(--a1), var(--a2)); pointer-events: none; }

/* nav: gains depth once the page scrolls (its height never changes while you scroll - a header that resized made the page jump) */
.topbar { transition: box-shadow .3s var(--ease), border-color .3s; }
.topbar.scrolled { border-bottom-color: var(--line); box-shadow: 0 10px 30px -16px rgba(20, 10, 60, .45); }
.topnav ul a { position: relative; transition: color .2s; }
.topnav ul a::after { content: ""; position: absolute; left: 0; right: 0; bottom: -4px; height: 2px; border-radius: 2px; background: linear-gradient(90deg, var(--a1), var(--a2)); transform: scaleX(0); transform-origin: 0 50%; transition: transform .3s var(--ease); }
.topnav ul a:hover::after, .topnav ul a:focus-visible::after, .topnav ul a[aria-current="page"]::after { transform: scaleX(1); }
.js .topnav.open ul { animation: drop .28s var(--ease); }
@keyframes drop { from { opacity: 0; transform: translateY(-8px); } }

/* buttons: lift and light sweep */
.btn, .ghost, .iconbtn, .chipbtn { transition: transform .2s var(--ease), box-shadow .25s, background-color .2s, border-color .2s, color .2s; }
.btn { position: relative; overflow: hidden; }
.btn::after { content: ""; position: absolute; inset: 0; background: linear-gradient(110deg, transparent 30%, rgba(255, 255, 255, .38) 50%, transparent 70%); transform: translateX(-120%); }
.btn:hover::after { transform: translateX(120%); transition: transform .7s var(--ease); }
.btn:hover, .ghost:hover, .iconbtn:hover { transform: translateY(-2px); }
.btn:active, .ghost:active, .iconbtn:active { transform: translateY(0) scale(.98); }

/* cards: lift, tilt and a light that follows the pointer */
.tile, .card, .feat-card, .poll { transition: transform .35s var(--ease), border-color .2s, box-shadow .35s var(--ease); }
@media (hover: hover) {
  .tile:hover, .feat-card:hover, .cards .card:hover { transform: translateY(-4px) perspective(700px) rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg)); box-shadow: 0 18px 40px -18px rgba(90, 60, 220, .45); }
  .tile .art { transition: transform .5s var(--ease); }
  .tile:hover .art { transform: scale(1.06); }
  .tile, .feat-card { overflow: hidden; position: relative; }
  .tile::after, .feat-card::after { content: ""; position: absolute; inset: 0; pointer-events: none; opacity: 0; transition: opacity .3s; background: radial-gradient(240px circle at var(--mx, 50%) var(--my, 50%), rgba(255, 255, 255, .16), transparent 60%); }
  .tile:hover::after, .feat-card:hover::after { opacity: 1; }
}
.refilter .tile:not([hidden]) { animation: pop .35s var(--ease) backwards; }
@keyframes pop { from { opacity: 0; transform: scale(.94); } }

/* scroll reveal */
.motion [data-rv] { opacity: 0; transform: translateY(26px); }
.motion [data-rv].in { opacity: 1; transform: none; transition: opacity .7s var(--ease), transform .7s var(--ease); transition-delay: var(--d, 0s); }
.motion [data-rv].in.settled { transition-delay: 0s; }
/* headings: a gradient underline draws itself in */
.motion h2.sec[data-rv]::after { content: ""; display: block; height: 3px; width: 0; margin-top: 8px; border-radius: 3px; background: linear-gradient(90deg, var(--a1), var(--a2)); transition: width .9s var(--ease) .25s; }
.motion h2.sec[data-rv].in::after { width: 56px; }

/* page and theme changes */
.motion main { animation: pagein .5s var(--ease); }
@keyframes pagein { from { opacity: 0; transform: translateY(10px); } }
/* theme switch: the new theme is revealed as a circle growing from the switch (View Transitions); other browsers just change */
.theme-vt::view-transition-old(root), .theme-vt::view-transition-new(root) { animation: none; mix-blend-mode: normal; }
.theme-vt::view-transition-old(root) { z-index: 1; }
.theme-vt::view-transition-new(root) { z-index: 2; }

/* live dot pulse */
.dot { position: relative; }
.motion .dot.ok::after, .motion .dot.on::after { content: ""; position: absolute; inset: 0; border-radius: 50%; background: inherit; animation: ping 2s ease-out infinite; }
@keyframes ping { to { transform: scale(2.6); opacity: 0; } }

@media (prefers-reduced-motion: reduce) {
  body::before, body::after, .progress-top, .spot { display: none; }
  .btn.pulse, .ts-star { animation: none; }
  .motion [data-rv] { opacity: 1; transform: none; }
}

/* pointer light */
.spot { position: fixed; inset: 0; z-index: -1; pointer-events: none; opacity: 0; transition: opacity .6s; background: radial-gradient(520px circle at var(--px, 50%) var(--py, 30%), color-mix(in srgb, var(--a1) 22%, transparent), transparent 70%); }
.spot.on { opacity: 1; }

/* slideshow picture drift (uses the separate "translate" property so it never fights the fade-in's transform) */
.slide-img { translate: var(--dx, 0px) var(--dy, 0px); transition: translate .25s ease-out; }

/* back to top, with a ring that fills as you read down */
.totop { position: fixed; right: 18px; bottom: 18px; z-index: 25; width: 46px; height: 46px; border: 0; border-radius: 50%; cursor: pointer; color: var(--fg); font-size: 20px;
  background: conic-gradient(var(--a1) var(--p, 0deg), var(--line) 0); opacity: 0; transform: translateY(14px) scale(.8); pointer-events: none; transition: opacity .3s, transform .4s cubic-bezier(.34, 1.56, .64, 1); }
.totop::before { content: ""; position: absolute; inset: 4px; border-radius: 50%; background: var(--panel); z-index: -1; }
.totop span { position: relative; z-index: 1; display: block; line-height: 46px; }
.totop.show { opacity: 1; transform: none; pointer-events: auto; }
.totop:hover { transform: translateY(-3px) scale(1.06); }

/* game ticker */
.marquee { overflow: hidden; margin: 6px 0 40px; mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); }
.marquee-row { display: flex; gap: 12px; width: max-content; padding: 6px 0; animation: scrollx 60s linear infinite; }
.marquee-row.rev { animation-direction: reverse; animation-duration: 75s; }
.marquee:hover .marquee-row { animation-play-state: paused; }
@keyframes scrollx { to { transform: translateX(-50%); } }
.mq { display: inline-flex; align-items: center; gap: 10px; padding: 8px 16px 8px 8px; border-radius: 999px; border: 1px solid var(--line); background: var(--panel); color: var(--fg); font-weight: 600; font-size: 14px; white-space: nowrap; transition: transform .25s var(--ease), border-color .2s; }
.mq:hover { transform: translateY(-3px); border-color: var(--a1); text-decoration: none; }
.mq i { width: 30px; height: 30px; border-radius: 50%; display: grid; place-items: center; font-style: normal; font-size: 11px; font-weight: 800; color: #fff; background: linear-gradient(135deg, var(--ga), var(--gb)); }

/* by the numbers */
.numbers { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; margin: 0 0 44px; }
.numbers > div { padding: 22px 18px; border-radius: 18px; border: 1px solid var(--line); background: var(--panel); text-align: center; }
.numbers b { display: block; font-size: clamp(34px, 5vw, 52px); font-weight: 800; letter-spacing: -.03em; line-height: 1.05; font-variant-numeric: tabular-nums; background: linear-gradient(90deg, var(--a1), var(--a2)); -webkit-background-clip: text; background-clip: text; color: transparent; }
.numbers span { color: var(--mut); font-size: 14px; }
@media (max-width: 720px) { .numbers { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

/* three steps */
.steps3 { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; margin: 0 0 44px; position: relative; counter-reset: st; }
.steps3 > div { position: relative; padding: 22px 20px 20px; border-radius: 18px; border: 1px solid var(--line); background: var(--panel); }
.steps3 > div::before { counter-increment: st; content: counter(st); display: grid; place-items: center; width: 36px; height: 36px; border-radius: 50%; margin-bottom: 12px; font-weight: 800; color: #fff; background: linear-gradient(135deg, var(--a1), var(--a2)); box-shadow: 0 0 0 0 var(--glow); animation: ring 2.8s ease-out infinite; }
.steps3 > div:nth-child(2)::before { animation-delay: .9s; } .steps3 > div:nth-child(3)::before { animation-delay: 1.8s; }
@keyframes ring { 0% { box-shadow: 0 0 0 0 rgba(124, 92, 255, .55); } 70%, 100% { box-shadow: 0 0 0 14px rgba(124, 92, 255, 0); } }
.steps3 b { display: block; margin-bottom: 4px; font-size: 17px; }
.steps3 span { color: var(--mut); line-height: 1.55; }
@media (max-width: 720px) { .steps3 { grid-template-columns: minmax(0, 1fr); } }

/* coming next */
.nextlist { display: grid; gap: 10px; margin: 0 0 14px; padding: 0; list-style: none; }
.nextlist li { padding: 14px 16px; border-radius: 14px; border: 1px solid var(--line); background: var(--panel); border-left: 4px solid var(--a1); }
.nextlist b { display: block; } .nextlist span { color: var(--mut); font-size: 14px; }

/* screenshot gallery + lightbox */
.shots { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 16px; margin: 6px 0 36px; }
.shots button { padding: 0; border: 1px solid var(--line); border-radius: 14px; overflow: hidden; cursor: zoom-in; background: var(--panel); text-align: left; color: var(--fg); font: inherit; transition: transform .35s var(--ease), box-shadow .35s var(--ease), border-color .2s; }
.shots button:hover { transform: translateY(-4px); border-color: var(--a1); box-shadow: 0 18px 40px -18px rgba(90, 60, 220, .5); }
.shots img { display: block; width: 100%; height: auto; transition: transform .6s var(--ease); }
.shots button:hover img { transform: scale(1.04); }
.shots figcaption, .shots span.cap { display: block; padding: 10px 14px; font-size: 14px; font-weight: 600; }
.lightbox { border: 0; padding: 0; background: transparent; max-width: min(94vw, 1100px); width: 100%; color: #fff; overflow: visible; }
.lightbox::backdrop { background: rgba(6, 4, 20, .82); backdrop-filter: blur(6px); }
.lightbox[open] { animation: lbin .35s var(--ease); }
@keyframes lbin { from { opacity: 0; transform: scale(.94); } }
.lightbox img { display: block; width: 100%; height: auto; border-radius: 14px; box-shadow: 0 30px 80px rgba(0, 0, 0, .6); }
.lightbox p { text-align: center; margin: 12px 0 0; }
.lightbox .lbx { position: absolute; top: -14px; right: -6px; width: 38px; height: 38px; border-radius: 50%; border: 0; cursor: pointer; font-size: 20px; background: #fff; color: #1b1833; }

/* search palette (Ctrl+K) */
.palette { border: 0; padding: 0; border-radius: 18px; width: min(92vw, 560px); background: var(--panel); color: var(--fg); box-shadow: 0 30px 90px rgba(0, 0, 0, .55); border: 1px solid var(--line); margin-top: 12vh; overflow: hidden; }
.palette::backdrop { background: rgba(6, 4, 20, .6); backdrop-filter: blur(5px); }
.palette[open] { animation: lbin .25s var(--ease); }
.palette input { width: 100%; padding: 18px 20px; font: inherit; font-size: 17px; color: var(--fg); background: transparent; border: 0; border-bottom: 1px solid var(--line); outline: none; }
.palette ul { list-style: none; margin: 0; padding: 8px; max-height: 50vh; overflow-y: auto; }
.palette li a { display: flex; justify-content: space-between; gap: 12px; padding: 10px 12px; border-radius: 10px; color: var(--fg); }
.palette li a small { color: var(--mut); }
.palette li a:hover { text-decoration: none; }
.palette li.sel a { background: var(--chip-bg); }
.palette .none { padding: 18px 20px; color: var(--mut); }
.palette .hintbar { display: flex; gap: 14px; padding: 8px 14px; border-top: 1px solid var(--line); color: var(--mut); font-size: 12px; }
kbd { font: inherit; font-size: 11px; padding: 1px 6px; border-radius: 5px; border: 1px solid var(--line); background: var(--panel); }

@media (prefers-reduced-motion: reduce) {
  .marquee { overflow-x: auto; mask-image: none; -webkit-mask-image: none; }
  .marquee-row, .steps3 > div::before, .btn.pulse { animation: none; }
  .marquee-row[aria-hidden], .marquee-row.rev { display: none; }
  .mq[aria-hidden="true"] { display: none; }
  .lightbox[open], .palette[open] { animation: none; }
}

/* road to launch: the rows arrive one after another, and ready ticks pop */
.motion .road li[data-rv] { transform: translateX(-24px); }
.motion .road li[data-rv].in { transform: none; }
.motion .road-done .road-dot { animation: tick .6s cubic-bezier(.34, 1.56, .64, 1) backwards; animation-delay: calc(var(--d, 0s) + .3s); }
@keyframes tick { from { transform: scale(0) rotate(-90deg); } }