/* ==========================================================================
   Twin Orbit - main stylesheet
   --------------------------------------------------------------------------
   1. Base   2. Utilities   3. Header   4. Hero   5. Steps   6. Reel
   7. Features   8. FAQ   9. Call to action   10. Documents   11. Not found
   12. Footer   13. Motion   14. Reduced motion
   Each block's styles use only its own .b-<block> selectors.
   ========================================================================== */

/* 1. Base ------------------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }
html { scroll-padding-top: var(--header-height); }
body { margin: 0; background: var(--color-page); color: var(--color-text); font: 700 var(--text-base) / 1.55 var(--font-body); -webkit-font-smoothing: antialiased; overflow-x: hidden; }
img { display: block; max-width: 100%; height: auto; }
a { color: var(--color-grape); text-underline-offset: 0.2em; }
h1, h2, h3 { margin: 0; font-family: var(--font-display); font-weight: 400; line-height: 1.15; }
:focus-visible { outline: 3px solid var(--color-sky); outline-offset: 3px; }

/* 2. Utilities ------------------------------------------------------------- */
.container { width: 100%; max-width: var(--container); margin-inline: auto; padding-inline: var(--gutter); }
.section { padding-block: clamp(2.75rem, 1.75rem + 4vw, 4.5rem); }
.section-title { max-width: 18em; margin: 0 auto clamp(1.25rem, 0.75rem + 2vw, 2rem); font-size: var(--text-2xl); text-align: center; }
.visually-hidden { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.skip-link { position: absolute; left: var(--space-4); top: -10rem; z-index: 20; padding: var(--space-2) var(--space-4); border-radius: var(--radius-md); background: var(--color-lemon); color: var(--color-ink); }
.skip-link:focus { top: var(--space-4); }
.button { display: inline-block; padding: var(--space-3) var(--space-6); border-radius: var(--radius-pill); background: var(--color-lemon); color: var(--color-ink); font: var(--text-xl) var(--font-display); text-decoration: none; box-shadow: var(--shadow-button); transition: translate 0.2s var(--ease); }
.button:hover { translate: 0 -2px; }
/* Store buttons: real links once the game is live, a quiet "coming soon" until then. */
.stores { display: flex; flex-wrap: wrap; gap: var(--space-3); }
.store { display: inline-flex; flex-direction: column; justify-content: center; min-width: 12.5rem; padding: var(--space-3) var(--space-5); border: 2px solid rgb(255 255 255 / 0.35); border-radius: var(--radius-md); background: var(--color-ink); color: var(--color-on-dark); text-decoration: none; box-shadow: 0 0.35rem 0 rgb(20 10 60 / 0.45); transition: translate 0.2s var(--ease); }
a.store:hover { translate: 0 -2px; }
.store__sub { font-size: 0.8125rem; opacity: 0.9; }
.store__name { font: 1.375rem var(--font-display); }
.store--soon { background: rgb(44 29 94 / 0.55); box-shadow: none; }

/* 3. Header ---------------------------------------------------------------- */
.b-header { position: sticky; top: 0; z-index: 10; background: var(--color-header); backdrop-filter: blur(10px); transition: translate 0.35s var(--ease); }
.b-header.is-hidden { translate: 0 -100%; }
.b-header__inner { display: flex; align-items: center; justify-content: space-between; gap: var(--space-3); min-height: var(--header-height); }
.b-header__logo { display: flex; align-items: center; gap: var(--space-3); color: var(--color-on-dark); font: 1.375rem var(--font-display); text-decoration: none; }
.b-header__logo img { width: 2.5rem; height: 2.5rem; border-radius: 0.6rem; }
.b-header__links { display: flex; gap: var(--space-1); margin: 0; padding: 0; list-style: none; }
.b-header__link { display: block; padding: var(--space-2) var(--space-3); border-radius: var(--radius-pill); color: var(--color-on-dark); font-size: 1rem; text-decoration: none; }
.b-header__link[aria-current="page"] { background: rgb(255 255 255 / 0.16); }
@media (max-width: 26rem) { .b-header__name { display: none; } }

/* 4. Hero: the game's sky, with Bo and friends circling a planet ----------- */
.b-hero { position: relative; overflow: hidden; color: var(--color-on-dark); background: var(--sky); }
.b-hero__inner { position: relative; display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--space-5); align-items: center; padding-block: var(--space-7) 6rem; }
.b-hero__inner > * { min-width: 0; }
@media (min-width: 56.25rem) { .b-hero__inner { grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr); padding-top: var(--space-8); } }
.b-hero__logo { width: min(32.5rem, 100%); filter: drop-shadow(0 0.5rem 1rem rgb(30 10 80 / 0.35)); }
.b-hero__tagline { display: block; margin: var(--space-4) 0 var(--space-2); color: var(--color-lemon); font: 1.75rem var(--font-display); text-shadow: 0 3px 0 rgb(44 29 94 / 0.5); }
.b-hero__lede { max-width: 30em; margin: 0 0 var(--space-5); font-size: var(--text-lg); }
.b-hero__note { margin: var(--space-3) 0 0; font-size: var(--text-sm); }
.b-hero__orbit { position: relative; width: min(32.5rem, 78vw); aspect-ratio: 1; margin: var(--space-5) auto 0; }
.b-hero__ring { position: absolute; border: 10px solid rgb(255 255 255 / 0.9); border-radius: 50%; box-shadow: inset 0 0 0 3px rgb(180 156 255 / 0.7), 0 0 0 3px rgb(180 156 255 / 0.5); }
.b-hero__ring--1 { inset: 4%; }
.b-hero__ring--2 { inset: 17%; opacity: 0.9; }
.b-hero__ring--3 { inset: 30%; opacity: 0.8; }
.b-hero__planet { position: absolute; inset: 36%; animation: tw-bob 5s ease-in-out infinite; }
.b-hero__planet img { width: 100%; filter: drop-shadow(0 0.6rem 1.1rem rgb(30 10 80 / 0.35)); }
/* Each rider sits on a spinning frame and counter-spins, so it stays upright. */
.b-hero__lap { position: absolute; inset: 4%; animation: tw-spin 14s linear infinite; }
.b-hero__lap--grump { inset: 17%; animation-duration: 22s; animation-direction: reverse; }
.b-hero__lap--thorn { inset: 30%; animation-duration: 17s; animation-delay: -6s; }
.b-hero__lap--1 { animation-delay: -0.75s; }
.b-hero__lap--2 { animation-delay: -1.45s; }
.b-hero__lap--3 { animation-delay: -2.1s; }
.b-hero__lap--4 { animation-delay: -2.7s; }
.b-hero__rider { position: absolute; left: 50%; top: 0; width: 11%; aspect-ratio: 1; translate: -50% -50%; animation: tw-upright 14s linear infinite; animation-delay: inherit; animation-direction: inherit; animation-duration: inherit; }
.b-hero__rider img { position: absolute; inset: 0; width: 100%; }
.b-hero__rider .b-hero__face { inset: 12%; width: 76%; }
.b-hero__rider--bo { width: 22%; }
.b-hero__rider--bo .b-hero__face { inset: 16%; width: 68%; }
.b-hero__rider--grump { width: 13%; }
.b-hero__cloud { position: absolute; width: 18.75rem; opacity: 0.55; pointer-events: none; animation: tw-drift 60s linear infinite; }
.b-hero__cloud--1 { bottom: -2.5rem; left: -5%; width: 26rem; opacity: 0.9; }
.b-hero__cloud--2 { bottom: -3.75rem; right: -8%; width: 32rem; opacity: 0.95; animation-duration: 80s; }
.b-hero__cloud--3 { top: 14%; left: 55%; width: 12.5rem; animation-duration: 45s; }
@media (max-width: 56.1875rem) { .b-hero__cloud--3 { display: none; } }
@keyframes tw-spin { to { rotate: 360deg; } }
@keyframes tw-upright { to { rotate: -360deg; } }
@keyframes tw-bob { 50% { translate: 0 -8px; } }
@keyframes tw-drift { 50% { translate: 2.5rem 0; } }

/* 5. Steps ------------------------------------------------------------------ */
.b-steps__list { display: grid; gap: var(--space-5); margin: 0; padding: 0; list-style: none; }
@media (min-width: 47.5rem) { .b-steps__list { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.b-steps__item { padding: var(--space-6); border-radius: var(--radius-lg); background: var(--color-card); box-shadow: var(--shadow-card); text-align: center; }
.b-steps__num { display: inline-grid; place-items: center; width: 3.25rem; height: 3.25rem; margin-bottom: var(--space-3); border-radius: 50%; background: var(--color-lemon); color: var(--color-ink); font: 1.625rem var(--font-display); box-shadow: 0 0.25rem 0 var(--color-lemon-deep); }
.b-steps__title { margin-bottom: var(--space-2); font-size: var(--text-xl); }
.b-steps__text { margin: 0; color: var(--color-muted); }

/* 6. Reel: screenshots that loop for ever ----------------------------------- */
.b-reel { background: linear-gradient(180deg, transparent, rgb(180 156 255 / 0.18)); }
.b-reel__list { position: relative; display: flex; gap: 1.125rem; margin: 0; padding: 0.875rem 0.25rem var(--space-5); overflow-x: auto; list-style: none; scroll-snap-type: x mandatory; scrollbar-width: thin; scrollbar-color: var(--color-lilac) transparent; }
.b-reel__slide { flex: 0 0 min(15rem, 62vw); scroll-snap-align: center; }
.b-reel__slide figure { margin: 0; }
.b-reel__slide img { border-radius: 1.5rem; box-shadow: var(--shadow-picture); user-select: none; -webkit-user-drag: none; }
.b-reel__caption { margin-top: var(--space-3); color: var(--color-muted); font-size: var(--text-sm); text-align: center; }
/* With the script: the strip loops, its edges fade, and the slide in the middle stands forward. */
.b-reel__list.is-enhanced { scrollbar-width: none; mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); }
.b-reel__list.is-enhanced::-webkit-scrollbar { display: none; }
.b-reel__list.is-enhanced .b-reel__slide { opacity: 0.6; scale: 0.9; transition: scale 0.45s var(--ease), opacity 0.45s; }
.b-reel__list.is-enhanced .b-reel__slide.is-current { opacity: 1; scale: 1; }
.b-reel__list.is-draggable { cursor: grab; }
.b-reel__list.is-dragging { cursor: grabbing; scroll-snap-type: none; user-select: none; }
.b-reel__nav { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: var(--space-4); margin-top: var(--space-2); }
.b-reel__nav[hidden] { display: none; }
.b-reel__btn { display: grid; place-items: center; width: 3rem; height: 3rem; padding: 0; border: 0; border-radius: 50%; background: var(--color-lemon); color: var(--color-ink); font: 1.75rem / 1 var(--font-display); cursor: pointer; box-shadow: var(--shadow-button); transition: translate 0.2s var(--ease); }
.b-reel__btn:hover { translate: 0 -2px; }
.b-reel__btn--pause { background: var(--color-card); color: var(--color-text); font-size: 0.875rem; letter-spacing: -0.1em; box-shadow: var(--shadow-card); }
.b-reel__dots { display: flex; gap: var(--space-2); }
.b-reel__dot { width: 0.75rem; height: 0.75rem; padding: 0; border: 0; border-radius: var(--radius-pill); background: var(--color-lilac); opacity: 0.7; cursor: pointer; transition: width 0.3s var(--ease), opacity 0.3s; }
.b-reel__dot[aria-current="true"] { width: 2rem; background: var(--color-lemon); opacity: 1; }

/* 7. Features --------------------------------------------------------------- */
.b-features__grid { display: grid; gap: var(--space-5); margin: 0; padding: 0; list-style: none; }
@media (min-width: 40rem) { .b-features__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 61.25rem) { .b-features__grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.b-features__card { padding: var(--space-5); border-radius: var(--radius-lg); background: var(--color-card); box-shadow: var(--shadow-card); }
.b-features__icon { width: 5.25rem; height: 5.25rem; margin-bottom: var(--space-3); object-fit: contain; }
.b-features__title { margin-bottom: var(--space-2); font-size: var(--text-xl); }
.b-features__text { margin: 0; color: var(--color-muted); }

/* 8. FAQ -------------------------------------------------------------------- */
.b-faq__list { max-width: 51.25rem; margin-inline: auto; }
.b-faq__item { margin-bottom: var(--space-3); padding: var(--space-1) var(--space-5); border-radius: var(--radius-md); background: var(--color-card); box-shadow: var(--shadow-card); }
.b-faq__question { padding: var(--space-4) 0; font: 1.3125rem var(--font-display); list-style: none; cursor: pointer; }
.b-faq__question::-webkit-details-marker { display: none; }
.b-faq__question::after { content: "+"; float: right; color: var(--color-grape); transition: rotate 0.4s var(--ease); }
.b-faq__item[open] .b-faq__question::after { rotate: 180deg; }
.b-faq__item[open] .b-faq__question::after { content: "\2212"; }
.b-faq__answer { margin: 0 0 var(--space-4); color: var(--color-muted); }

/* 9. Call to action --------------------------------------------------------- */
.b-cta { color: var(--color-on-dark); text-align: center; background: linear-gradient(180deg, #5a3fc0, #3a2a86); }
.b-cta .stores { justify-content: center; }

/* 10. Documents: support, privacy and terms --------------------------------- */
.b-doc__inner { max-width: 48.75rem; padding-block: var(--space-7) var(--space-8); font-weight: 400; }
.b-doc h1 { margin-bottom: var(--space-5); font-size: var(--text-3xl); }
.b-doc h2 { margin: var(--space-7) 0 var(--space-3); font-size: 1.875rem; }
.b-doc h3 { margin: var(--space-5) 0 var(--space-2); font-size: 1.3125rem; }
.b-doc p, .b-doc li { font-family: var(--font-plain); font-size: 1.0625rem; }
.b-doc strong { font-weight: 700; }
.b-doc__table { overflow-x: auto; }
.b-doc table { width: 100%; border-collapse: collapse; font: 1rem var(--font-plain); }
.b-doc th, .b-doc td { padding: var(--space-3); border-bottom: 1px solid rgb(90 63 192 / 0.25); text-align: left; vertical-align: top; }
.b-doc mark { padding: 0 var(--space-1); border-radius: 0.375rem; background: var(--color-lemon); color: var(--color-ink); }

/* 11. Not found ------------------------------------------------------------- */
.b-lost { text-align: center; }
.b-lost img { width: 10rem; margin: 0 auto var(--space-3); }
.b-lost h1 { font-size: var(--text-3xl); }

/* 12. Footer ---------------------------------------------------------------- */
/* An inset night-sky panel: brand and three labelled columns, then a base row. */
.b-footer { padding: var(--gutter); color: var(--color-on-dark); }
.b-footer__panel { padding: clamp(2.25rem, 1.5rem + 3vw, 4rem) clamp(1.25rem, 0.75rem + 3vw, 3.5rem) var(--space-2); border-radius: var(--radius-lg); background: radial-gradient(120% 90% at 0% 0%, #4a359f 0%, var(--color-ink) 60%); }
.b-footer__top { display: grid; grid-template-columns: minmax(0, 4fr) repeat(2, minmax(0, 2fr)) minmax(0, 3fr); gap: var(--space-7) var(--space-6); padding-bottom: var(--space-7); }
.b-footer__logo { display: inline-flex; align-items: center; gap: var(--space-3); margin-bottom: var(--space-4); color: var(--color-on-dark); font: var(--text-xl) var(--font-display); text-decoration: none; }
.b-footer__logo img { width: 3.5rem; height: 3.5rem; border-radius: 0.9rem; box-shadow: 0 0.3rem 0 rgb(20 10 60 / 0.45); }
.b-footer__line { max-width: 22rem; margin: 0; color: var(--color-on-dark-muted); }
.b-footer__label { margin-bottom: var(--space-4); color: var(--color-lemon); font: 700 var(--text-sm) var(--font-body); letter-spacing: 0.02em; }
.b-footer ul { margin: 0; padding: 0; list-style: none; }
.b-footer__col { min-width: 0; overflow-wrap: anywhere; }
.b-footer__col li + li { margin-top: var(--space-3); }
.b-footer a { color: var(--color-on-dark); text-decoration: none; }
.b-footer a:hover { color: var(--color-lemon); }
.b-footer__col a { text-decoration: underline; text-decoration-color: rgb(255 217 77 / 0.45); text-underline-offset: 0.3em; }
.b-footer__col a:hover { text-decoration-color: currentColor; }
.b-footer__note { color: var(--color-on-dark-muted); font: 400 var(--text-sm) / 1.5 var(--font-plain); }
.b-footer__base { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: var(--space-3) var(--space-6); padding-block: var(--space-5); border-top: 1px solid rgb(255 255 255 / 0.16); color: var(--color-on-dark-muted); font: 400 0.875rem / 1.6 var(--font-plain); }
.b-footer__base p { margin: 0; }
.b-footer__base > p:first-child { flex: 1 1 28rem; }
.b-footer__credit { display: flex; align-items: center; gap: var(--space-2); }
.b-footer__credit a { display: inline-flex; align-items: center; gap: var(--space-2); font-weight: 600; }
.b-footer__credit img { border-radius: 0.35rem; }
.b-footer__legal { flex-basis: 100%; font-size: 0.8125rem; opacity: 0.8; }
.b-footer :focus-visible { outline-color: var(--color-sky); }
@media (max-width: 64rem) { .b-footer__top { grid-template-columns: repeat(3, minmax(0, 1fr)); } .b-footer__brand { grid-column: 1 / -1; } }
@media (max-width: 40rem) { .b-footer__top { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-6) var(--space-5); } .b-footer__col:last-child { grid-column: 1 / -1; } }

/* 13. Motion ---------------------------------------------------------------- */
/* The Twin Orbit feel: things hop and pop into place like moonlings landing on a hoop,
   and moving between pages opens a round portal. Entrances are pure CSS; scroll states
   wait for main.js to add .reveal-ready, so without the script nothing is ever hidden.
   Transform, opacity and clip-path only. Section 14 switches all of it off. */
@keyframes tw-rise { from { opacity: 0; translate: 0 22px; } to { opacity: 1; translate: 0 0; } }
@keyframes tw-boing { 0% { opacity: 0; scale: 0.6; translate: 0 30px; } 55% { opacity: 1; scale: 1.06; translate: 0 -6px; } 80% { scale: 0.98; } 100% { opacity: 1; scale: 1; translate: 0 0; } }
@keyframes tw-orbit-in { from { opacity: 0; scale: 0.55; rotate: -100deg; } to { opacity: 1; scale: 1; rotate: 0deg; } }
@keyframes tw-drop { 0% { opacity: 0; translate: 0 -60px; } 65% { opacity: 1; translate: 0 6px; } 100% { opacity: 1; translate: 0 0; } }
@keyframes tw-pop { 0% { scale: 0; } 70% { scale: 1.18; } 100% { scale: 1; } }
@keyframes tw-wobble { 0%, 100% { rotate: 0deg; } 25% { rotate: -9deg; } 50% { rotate: 7deg; } 75% { rotate: -4deg; } }
@keyframes tw-open { from { clip-path: inset(0 32% round 3rem); } to { clip-path: inset(-3rem round 0); } }
@keyframes tw-portal-in { from { clip-path: circle(0% at 50% 45%); } to { clip-path: circle(150% at 50% 45%); } }
@keyframes tw-portal-out { to { opacity: 0.4; scale: 0.94; } }

/* Hero: the logo bounces in, the words follow, and the orbit spins up around a dropped-in planet. */
.b-hero__logo { animation: tw-boing 1s var(--ease) both; }
.b-hero__tagline, .b-hero__lede, .b-hero .stores, .b-hero__note { animation: tw-rise 0.7s var(--ease) both; }
.b-hero__tagline { animation-delay: 0.25s; }
.b-hero__lede { animation-delay: 0.35s; }
.b-hero .stores { animation-delay: 0.45s; }
.b-hero__note { animation-delay: 0.55s; }
.b-hero__orbit { animation: tw-orbit-in 1.5s var(--ease) 0.1s both; }
.b-hero__planet img { animation: tw-drop 0.9s var(--ease) 0.5s both; }
/* main.js drifts the clouds and the orbit at different speeds as the page scrolls. */
[data-parallax] { will-change: transform; }

/* Inner pages: the heading and first lines rise in. */
.b-doc__inner > :nth-child(-n + 3), .b-lost .container > * { animation: tw-rise 0.7s var(--ease) both; }
.b-doc__inner > :nth-child(2), .b-lost .container > :nth-child(2) { animation-delay: 0.08s; }
.b-doc__inner > :nth-child(3), .b-lost .container > :nth-child(n + 3) { animation-delay: 0.16s; }

/* Scroll reveals: titles rise, cards hop up and land, then their badges and icons pop. */
.reveal-ready [data-reveal] { opacity: 0; translate: 0 24px; transition: opacity 0.8s var(--ease), translate 0.9s var(--ease), scale 0.9s var(--ease); transition-delay: calc(var(--reveal-delay, 0) * 90ms); }
.reveal-ready [data-reveal][data-item] { translate: 0 48px; scale: 0.94; transition-timing-function: var(--ease), var(--ease-hop), var(--ease-hop); }
.reveal-ready [data-reveal].is-visible { opacity: 1; translate: 0 0; scale: 1; }
.reveal-ready [data-reveal] .b-steps__num, .reveal-ready [data-reveal] .b-features__icon { scale: 0; }
.reveal-ready [data-reveal].is-visible .b-steps__num, .reveal-ready [data-reveal].is-visible .b-features__icon { animation: tw-pop 0.6s var(--ease) both; animation-delay: calc(var(--reveal-delay, 0) * 90ms + 0.35s); }
/* The screenshot strip opens out from the middle. */
.reveal-ready [data-reveal].is-visible.b-reel__box { animation: tw-open 1.1s var(--ease) backwards; animation-delay: calc(var(--reveal-delay, 0) * 90ms); }

/* Hover: fills sweep in, cards lift, and icons give a little wiggle. */
.button, a.store, .b-header__link { position: relative; isolation: isolate; overflow: hidden; }
.button::before, a.store::before, .b-header__link::before { content: ""; position: absolute; inset: 0; z-index: -1; translate: -101% 0; transition: translate 0.45s var(--ease); }
.button::before { background: #fff1a8; }
a.store::before { background: var(--color-grape); }
.b-header__link::before { border-radius: inherit; background: rgb(255 255 255 / 0.16); }
.button:hover::before, a.store:hover::before, .b-header__link:hover::before { translate: 0 0; }
.b-header__link[aria-current="page"]::before { display: none; }
.b-steps__item, .b-features__card { transition: translate 0.35s var(--ease-hop); }
/* Once a reveal has landed, hovers answer straight away. */
.reveal-ready [data-reveal].is-done { transition: opacity 0.3s, translate 0.35s var(--ease-hop), scale 0.35s var(--ease-hop); }
@media (hover: hover) {
  .b-steps__item:hover, .b-features__card:hover { translate: 0 -6px; }
  .b-features__card:hover .b-features__icon { animation: tw-wobble 0.6s var(--ease) both; }
}
.b-faq__item[open] .b-faq__answer { animation: tw-rise 0.45s var(--ease) both; }

/* Wild friends fly about behind the content, in front of the page's skies, clouds and backgrounds (main.js moves them).
   Everything in a .container sits above them, so they never cover words or buttons. Taps reach them through main.js wherever
   nothing clickable is in the way. The switch in the corner hides them, as anything that keeps moving must be stoppable. */
@keyframes tw-caught { 0% { scale: 1; rotate: 0deg; opacity: 1; } 35% { scale: 1.45; } 100% { scale: 0; rotate: 540deg; opacity: 0; } }
.container { position: relative; z-index: 1; }
/* In the hero, only the words sit above them; they fly in front of the clouds, the orbit and the planet. */
.b-hero__inner { z-index: auto; }
.b-hero__words { position: relative; z-index: 1; }
.b-wild { position: fixed; inset: 0; z-index: 0; overflow: hidden; pointer-events: none; }
.b-wild.is-off { display: none; }
.b-wild__friend { position: absolute; left: 0; top: 0; width: clamp(3.5rem, 2.75rem + 3vw, 5.5rem); aspect-ratio: 1; will-change: transform; filter: drop-shadow(0 0.4rem 0.5rem rgb(30 10 80 / 0.3)); opacity: calc(0.8 * var(--fade, 1)); }
.b-wild__friend.is-gold { filter: drop-shadow(0 0 0.6rem rgb(255 217 77 / 0.85)); }
.b-wild__friend img { position: absolute; left: 0; top: 0; width: 100%; height: 100%; user-select: none; -webkit-user-drag: none; }
.b-wild__friend .b-wild__face { left: 12.5%; top: 12.5%; width: 75%; height: 75%; }
/* The Whizzer's blades whirl: seen side on, a turn is a squash and a flip. */
@keyframes tw-whirl { from { scale: 1 1; } to { scale: -1 1; } }
.b-wild__friend .b-wild__blades { animation: tw-whirl 0.09s ease-in-out infinite alternate; }
.b-wild__friend.is-blinking img { animation: tw-pop 0.45s var(--ease) both; }
.b-wild__friend.is-caught img { animation: tw-caught 0.65s var(--ease) both; }
.b-wild__toggle { position: fixed; left: max(0.75rem, env(safe-area-inset-left)); bottom: max(0.75rem, env(safe-area-inset-bottom)); z-index: 20; display: inline-flex; align-items: center; gap: var(--space-2); min-height: 2.75rem; padding: var(--space-1) var(--space-4) var(--space-1) var(--space-1); border: 2px solid rgb(255 255 255 / 0.35); border-radius: var(--radius-pill); background: rgb(44 29 94 / 0.88); color: var(--color-on-dark); font: 700 0.875rem var(--font-body); cursor: pointer; box-shadow: 0 0.3rem 0 rgb(20 10 60 / 0.35); backdrop-filter: blur(6px); transition: translate 0.2s var(--ease), opacity 0.2s; }
.b-wild__toggle:hover { translate: 0 -2px; }
/* The switch's badge: a moonling in a round window. Awake and bobbing in sunshine while the wilds are out; asleep under a
   night sky, a "z" drifting up, when they're off. */
@keyframes tw-bob { from { translate: 0 4%; } to { translate: 0 -6%; } }
@keyframes tw-snooze { 0% { opacity: 0; translate: 0 0.2rem; scale: 0.6; } 30% { opacity: 1; } 100% { opacity: 0; translate: 0.35rem -0.7rem; scale: 1.1; } }
.b-wild__badge { position: relative; flex: none; width: 2.25rem; height: 2.25rem; border-radius: 50%; background: radial-gradient(circle at 35% 30%, #fff6d6, #ffd94d 70%); box-shadow: inset 0 0 0 2px rgb(255 255 255 / 0.6), 0 0 0.6rem rgb(255 217 77 / 0.45); transition: background 0.3s, box-shadow 0.3s; }
.b-wild__badge.is-popping { animation: tw-pop 0.4s var(--ease-hop); }
.b-wild__badge img { position: absolute; inset: 14%; width: 72%; height: 72%; }
.b-wild__badge .b-wild__eyes { inset: 23%; width: 54%; height: 54%; }
.b-wild__moon, .b-wild__eyes--awake { animation: tw-bob 1.3s ease-in-out infinite alternate; }
.b-wild__z { position: absolute; right: -0.2rem; top: -0.45rem; font: 0.75rem/1 var(--font-display); color: var(--color-lemon); opacity: 0; pointer-events: none; }
.b-wild__toggle[aria-pressed="true"] .b-wild__eyes--asleep, .b-wild__toggle[aria-pressed="false"] .b-wild__eyes--awake { display: none; }
.b-wild__toggle[aria-pressed="false"] .b-wild__badge { background: radial-gradient(circle at 35% 30%, #4a3a99, #1d1446 80%); box-shadow: inset 0 0 0 2px rgb(255 255 255 / 0.3); }
.b-wild__toggle[aria-pressed="false"] .b-wild__moon { animation: none; filter: saturate(0.7) brightness(0.85); }
.b-wild__toggle[aria-pressed="false"] .b-wild__z { animation: tw-snooze 2.2s ease-out infinite; }
/* On a phone it shrinks to its round icon, still named for screen readers, so it covers less of the page. */
@media (max-width: 40rem) { .b-wild__toggle { padding: var(--space-1); } .b-wild__label { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; } }

/* Page to page: the new page opens through a round portal while the old one sinks back.
   The header has its own name, so it stays put. */
@view-transition { navigation: auto; }
.b-header { view-transition-name: site-header; }
::view-transition-old(root) { animation: tw-portal-out 0.6s var(--ease) both; }
::view-transition-new(root) { animation: tw-portal-in 0.7s var(--ease) both; }

/* 14. Reduced motion --------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; scroll-behavior: auto !important; }
  ::view-transition-group(*), ::view-transition-old(*), ::view-transition-new(*) { animation: none !important; }
  .b-wild, .b-wild__toggle { display: none; }
}