/* =============================================================================
   Basket Bounty Italia — motion layer (motion.css + motion.js)
   Load order: theme.css → motion.css ; site.js → motion.js (defer).

   GROUND RULES
   - motion.js adds `motion-ready` to <html>. Every "hidden until revealed" state is gated
     behind `html.motion-ready` AND `@media (prefers-reduced-motion: no-preference)`:
     without JS, or with reduced motion, all content is visible and static.
   - Only transform-type properties (transform / translate / scale / rotate) and opacity
     are animated. Entrances use the individual `translate` / `scale` properties, so they
     never clobber an element's own `transform` (e.g. .showcase__art rotate, .card:hover).
   - Off-screen work is paused (IntersectionObserver): floaters, leaves, glow, rings, video.
   - No inline style attributes in HTML: only the classes / data attributes below.
   - Media files live in static/media/motion/. Every animated WebP has a `-still.webp`.
   - State classes set by JS (do not write them in HTML): is-in, is-done, is-visible,
     is-lit, is-active, is-compact, is-counting, count-wait, tilt, is-tilting, is-missing.

   1. SCROLL REVEAL ............ <div data-reveal>…</div>            fade + rise
      data-reveal="left" | "right" | "zoom" | "pop"                  direction / style
      data-delay="150"                                               extra delay (ms)
      Do not put data-reveal on an element that also has data-depth (wrap it instead).

   2. STAGGER .................. <div class="cards" data-stagger>…</div>
      Direct children reveal one after another as they enter the viewport.
      data-stagger="left" | "right" | "zoom" | "pop" ; data-step="90" (ms between kids)
      .pots get data-stagger="pop" automatically (do not add it yourself).

   3. COUNT-UP ................. <span class="fact__num" data-count>6.249x</span>
      Counts from 0 to the number when visible and ends on the exact original text.
      Works only when the element has no child elements and its text is ONE plain
      Italian number with an optional prefix/suffix: 96,06%  6.249x  1.000x  25x  12,50 €.
      Anything else (3x3, Alta, 1.5x …) is left untouched. data-count="2200" = duration ms
      (default 1600). Don't mark years (2025) or values that sit above the fold.

   4. FLOATERS ................. decorative sprites over an art slot
      <div class="showcase__art">                      (host: any element; it gets
        <img src="…hero.webp" …>                        position:relative + isolation via
        <div class="floaters" aria-hidden="true">       :has(> .floaters), or add .float-host)
          <img class="floater floater--tl" src="static/media/motion/apple-gold.webp"
               width="360" height="360" alt="" data-depth="0.8">
          <img class="floater floater--br floater--sm floater--late"
               src="static/media/motion/coin.webp" width="240" height="240" alt="" data-depth="1.2">
        </div>
      </div>
      Position: floater--tl | --tr | --bl | --br | --ml | --mr | --tc | --bc
      Size (% of host width): floater--xs 11 | --sm 16 | (default 24) | --lg 32 | --xl 42
      Timing: floater--slow | --fast | --late (pops in later, other phase) | --spin
      Depth look: floater--far (smaller, dimmer, below others) | floater--behind (z -1:
      tucked behind the host's own content, e.g. peeking from behind the hero card)
      data-depth="0.2…2" → pointer + scroll parallax (desktop, fine pointer only).
      Floaters pop in when the host enters view, bob/rotate while visible, pause off-screen.
      A <picture class="floater"> with a reduced-motion <source> works the same way.

   5. FALLING LEAVES ........... <section class="showcase" data-leaves="8">
      JS builds N sprites of static/media/motion/leaf.webp (halved on narrow screens,
      max 16) behind the section content, random paths, only while the section is in view
      and only after window load. Leaves fall in the side gutters, outside the section's
      .wrap (on narrow screens: small, faint, hugging the screen edges), never across text.
      data-leaves-full → leaves may cross the whole section (use only over art, no text).
      data-leaves-front → leaves fall in front of the content.
      data-leaves-src="path.webp" → other sprite. Missing file → nothing happens.
      Do not use it on text-heavy sections (FAQ, jackpot cards).

   6. CLIP (framed figure in text)
      <figure class="clip" data-reveal="zoom">
        <video class="clip__media" data-autoplay muted loop playsinline preload="none"
               width="720" height="450" poster="static/media/motion/reels-still.webp">
          <source src="static/media/motion/reels.webm" type="video/webm">
          <source src="static/media/motion/reels.mp4" type="video/mp4">
        </video>
        <figcaption class="clip__cap">Tre campane sulla linea centrale.</figcaption>
      </figure>
      Media child can also be an <img> or a <picture>. Rounded, gold edge, warm glow.

   7. MEDAL (jackpot medallion inside .pot)
      <div class="pot pot--grand">
        <picture class="medal">
          <source srcset="static/media/motion/medal-grand-still.webp" media="(prefers-reduced-motion: reduce)">
          <img src="static/media/motion/medal-grand.webp" width="200" height="200" alt="" loading="lazy">
        </picture>
        <span class="pot__name">Grand</span> …
      </div>
      64px (76px ≥760px); spins in when the pot pops, tilts on hover. <img class="medal"> works too.

   8. ART3D (large transparent animated art in intro / duo / callbar)
      <picture class="art3d">
        <source srcset="static/media/motion/basket-still.webp" media="(prefers-reduced-motion: reduce)">
        <img src="static/media/motion/basket.webp" width="480" height="480" alt="Cesto d'oro colmo di mele">
      </picture>
      Width min(100%, 420px); art3d--sm 160 | art3d--md 300 | art3d--lg 540.
      Inside .callbar__art it is 112px. Soft breathing glow behind (paused off-screen).

   9. STILL FIRST, ANIMATION LATER (every animated WebP: floaters, art3d, medals, icons)
      <picture>
        <source srcset="static/media/motion/icon-cherry-still.webp" media="(prefers-reduced-motion: reduce)">
        <img class="card__icon" src="static/media/motion/icon-cherry-still.webp"
             data-anim="static/media/motion/icon-cherry.webp" fetchpriority="low"
             width="54" height="54" alt="" loading="lazy">
      </picture>
      src = the light -still.webp (no JS / reduced motion / paused keep it). After window
      load, motion.js swaps in data-anim when the image comes within ~300px of the viewport
      (preloaded first, so there is never an empty frame). Icons keep the .card__icon /
      .sym__img sizes. The examples in 4, 7 and 8 work the same way with data-anim.

  10. VIDEO .................... <video data-autoplay muted loop playsinline preload="none" poster="…-still.webp">
      Plays only while ≥25% visible, pauses off-screen / in a hidden tab, never under
      reduced motion (poster stays). Never use the `autoplay` attribute (JS removes it).
      If all sources fail and the poster is missing too, the .clip is hidden.

  11. TILT ..................... automatic on .offer and .card (hover + fine pointer):
      subtle 3D tilt + warm glare. Opt in anything else: data-tilt (or data-tilt="10" =
      max degrees). Opt out: data-tilt="off".

  12. READING PROGRESS BAR ..... automatic (gold bar fixed at the top, .readbar).
      Disable: <html data-progress="off"> or <body data-progress="off">.

  13. COMPACT TOPBAR ........... automatic: .topbar.is-compact after 40px of scroll
      (denser backdrop, gold hairline + shadow, logo scales to 86%; height unchanged).

  14. TOC HIGHLIGHT ............ automatic: .toc__link.is-active + aria-current="location"
      for the section currently being read.

  15. PATH DRAWING ............. automatic on .path: a bright gold line grows down the
      track as you scroll, each .path__step number lights up (.is-lit) when reached.
      Tip: add data-stagger="left" on the .path for the steps to slide in too.

  16. POTS POP ................. automatic on .pots (pop-in, staggered, medal spin).

  17. STARS FILL ............... automatic on .stars: fills from 0 to --score when visible.

  18. CTA SHIMMER .............. automatic on .cta--gold: light sweep every few seconds,
      instant sweep on hover, press-in on :active (theme keeps the hover lift).

  19. STAGE PULSE .............. automatic on .stage__play: breathing button + expanding ring.

  20. CARD ICON HOP ............ automatic: .card:hover .card__icon hops and tilts.

  21. PAUSE (WCAG 2.2.2) ....... automatic: JS adds a "Ferma animazioni" switch
      (button.motion-toggle, aria-pressed) to the footer links. Pressed → html.motion-paused:
      every looping CSS animation is paused, animated WebPs go back to their stills, videos
      pause and parallax stops. Remembered in localStorage. Hidden under reduced motion.
      A click/tap on a .clip video also toggles that video.
   ========================================================================== */

:root {
  --m-ease: cubic-bezier(0.22, 1, 0.36, 1);
  --m-pop: cubic-bezier(0.34, 1.56, 0.64, 1);
  --m-dist: 28px;
  --m-side: 34px;
}

@media (max-width: 599.98px) {
  :root {
    --m-dist: 22px;
    --m-side: 16px;
  }
}

@property --star-k {
  syntax: "<number>";
  inherits: false;
  initial-value: 1;
}

/* Static pieces (visible with or without JS / motion) ------------------------ */

/* 12. Reading progress bar (created by JS) */
.readbar {
  position: fixed;
  top: 0;
  right: 0;
  left: 0;
  z-index: 70;
  height: 3px;
  pointer-events: none;
}

.readbar__fill {
  display: block;
  height: 100%;
  background: linear-gradient(90deg, var(--red) 0%, var(--gold-deep) 35%, var(--gold) 70%, #fff1a8 100%);
  box-shadow: 0 0 12px rgba(255, 207, 74, 0.55);
  transform: scaleX(0);
  transform-origin: 0 50%;
  will-change: transform;
}

/* 13. Compact topbar */
.topbar::after {
  content: "";
  position: absolute;
  right: 0;
  bottom: -1px;
  left: 0;
  z-index: -1;
  height: 1px;
  background: linear-gradient(90deg, rgba(255, 207, 74, 0), rgba(255, 207, 74, 0.7) 50%, rgba(255, 207, 74, 0));
  box-shadow: 0 10px 28px rgba(8, 1, 22, 0.6);
  opacity: 0;
  transition: opacity 0.3s;
  pointer-events: none;
}

.topbar.is-compact::before {
  background-color: rgba(21, 3, 49, 0.94);
}

.topbar.is-compact::after {
  opacity: 1;
}

/* 14. TOC highlight */
.toc__link {
  transition: background-color 0.2s, color 0.2s, box-shadow 0.2s;
}

.toc__link.is-active {
  background: rgba(255, 207, 74, 0.12);
  box-shadow: inset 3px 0 0 var(--gold);
  color: var(--gold);
}

/* 4. Floaters */
.float-host {
  position: relative;
  isolation: isolate;
}

:has(> .floaters) {
  position: relative;
  isolation: isolate;
}

.floaters {
  position: absolute;
  inset: 0;
  pointer-events: none;
}

/* `.floaters .floater` out-ranks theme rules such as `.showcase__art img`,
   `.intro__art img` or `.callbar__art img` that would otherwise size the sprites */
.floaters .floater {
  position: absolute;
  z-index: 2;
  display: block;
  width: var(--f-size, 24%);
  max-width: none;
  height: auto;
  max-height: none;
  margin: 0;
  aspect-ratio: 1;
  object-fit: contain;
  border-radius: 0;
  filter: none;
}

.floaters .floater > img {
  display: block;
  width: 100%;
  max-width: none;
  height: auto;
  max-height: none;
  margin: 0;
  aspect-ratio: 1;
  object-fit: contain;
  border-radius: 0;
  filter: none;
}

.floaters .floater--tl { top: -9%; left: -7%; }
.floaters .floater--tr { top: -11%; right: -6%; }
.floaters .floater--bl { bottom: -9%; left: -5%; }
.floaters .floater--br { bottom: -11%; right: -6%; }
.floaters .floater--ml { top: 38%; left: -9%; }
.floaters .floater--mr { top: 34%; right: -9%; }
.floaters .floater--tc { top: -14%; left: 42%; }
.floaters .floater--bc { bottom: -14%; left: 46%; }

.floaters .floater--far {
  --f-size: 14%;
  z-index: 1;
  opacity: 0.72;
}

.floaters .floater--xs { --f-size: 11%; }
.floaters .floater--sm { --f-size: 16%; }
.floaters .floater--lg { --f-size: 32%; }
.floaters .floater--xl { --f-size: 42%; }

.floaters .floater--behind {
  z-index: -1;
}

.floaters .floater--slow { --f-dur: 10s; --f-amp: -10px; }
.floaters .floater--fast { --f-dur: 4.2s; }
.floaters .floater--late { --f-late: 450ms; --f-phase: -3.2s; }
.floaters .floater--spin { --f-tilt: 0deg; }

@media (max-width: 599.98px) {
  /* stay inside the 18px page gutter: no horizontal overflow */
  .floaters .floater--tl { top: -6%; left: -2%; }
  .floaters .floater--tr { top: -7%; right: -2%; }
  .floaters .floater--bl { bottom: -6%; left: -2%; }
  .floaters .floater--br { bottom: -7%; right: -2%; }
  .floaters .floater--ml { left: -3%; }
  .floaters .floater--mr { right: -3%; }
}

/* 6. Clip */
.clip {
  display: block;
  margin-inline: 0;
}

:where(.clip) {
  margin-block: 0;
}

.clip > video,
.clip > img,
.clip > picture > img,
.clip__media {
  display: block;
  width: 100%;
  height: auto;
  border-radius: var(--r);
  background: #0e0224;
  box-shadow:
    0 0 0 2px rgba(255, 207, 74, 0.6),
    0 0 0 7px rgba(255, 207, 74, 0.08),
    0 26px 50px -24px rgba(0, 0, 0, 0.8),
    0 0 70px -22px rgba(255, 181, 71, 0.5);
}

.clip > picture {
  display: block;
}

.clip__cap {
  display: flex;
  align-items: baseline;
  gap: 10px;
  margin-top: 14px;
  color: var(--dim);
  font-size: 14px;
  line-height: 1.5;
}

.clip__cap::before {
  content: "";
  flex: none;
  width: 18px;
  height: 2px;
  border-radius: 2px;
  background: var(--gold);
  translate: 0 -4px;
}

/* 7. Medal */
.medal {
  display: block;
  flex: none;
  width: 64px;
  height: 64px;
  margin: -4px 0 8px -4px;
  filter: drop-shadow(0 8px 12px rgba(8, 1, 22, 0.5));
}

.medal > img {
  display: block;
  width: 100%;
  height: 100%;
}

@media (min-width: 760px) {
  .medal {
    width: 76px;
    height: 76px;
  }
}

/* 8. Art3d */
.art3d {
  position: relative;
  isolation: isolate;
  display: block;
  width: min(100%, var(--art-w, 420px));
  margin-inline: auto;
}

.art3d::before {
  content: "";
  position: absolute;
  inset: 10%;
  z-index: -1;
  border-radius: 50%;
  background: radial-gradient(closest-side, rgba(255, 181, 71, 0.36), rgba(255, 181, 71, 0.12) 55%, rgba(255, 181, 71, 0));
  pointer-events: none;
}

.art3d img {
  display: block;
  width: 100%;
  max-width: 100%;
  height: auto;
  max-height: none;
  margin: 0 auto;
  /* natural ratio once loaded, a reserved square before (no layout shift) */
  aspect-ratio: auto 1 / 1;
  object-fit: contain;
  border-radius: 0;
  filter: drop-shadow(0 18px 26px rgba(8, 1, 22, 0.45));
}

.intro__art--phone .art3d img {
  aspect-ratio: auto 3 / 4;
}

.art3d--sm { --art-w: 160px; }
.art3d--md { --art-w: 300px; }
.art3d--lg { --art-w: 540px; }

.callbar__art .art3d {
  width: 112px;
}

/* Broken media found by JS */
.is-missing {
  display: none !important;
}

/* Motion (only with JS and without a reduced-motion preference) -------------- */

@media (prefers-reduced-motion: no-preference) {
  /* 1–2. Reveal and stagger */
  .motion-ready [data-reveal]:not(.is-in),
  .motion-ready [data-stagger] > :not(.is-in) {
    opacity: 0;
    translate: 0 var(--m-dist);
  }

  .motion-ready [data-reveal="left"]:not(.is-in),
  .motion-ready [data-stagger="left"] > :not(.is-in) {
    translate: calc(var(--m-side) * -1) 0;
  }

  .motion-ready [data-reveal="right"]:not(.is-in),
  .motion-ready [data-stagger="right"] > :not(.is-in) {
    translate: var(--m-side) 0;
  }

  .motion-ready [data-reveal="zoom"]:not(.is-in),
  .motion-ready [data-stagger="zoom"] > :not(.is-in) {
    translate: none;
    scale: 0.92;
  }

  .motion-ready [data-reveal="pop"]:not(.is-in),
  .motion-ready [data-stagger="pop"] > :not(.is-in) {
    translate: 0 14px;
    scale: 0.8;
  }

  .motion-ready [data-reveal].is-in:not(.is-done),
  .motion-ready [data-stagger] > .is-in:not(.is-done) {
    transition:
      opacity 0.7s var(--m-ease) var(--m-delay, 0ms),
      translate 0.9s var(--m-ease) var(--m-delay, 0ms),
      scale 0.9s var(--m-ease) var(--m-delay, 0ms);
  }

  .motion-ready [data-reveal="pop"].is-in:not(.is-done),
  .motion-ready [data-stagger="pop"] > .is-in:not(.is-done) {
    transition-timing-function: var(--m-ease), var(--m-pop), var(--m-pop);
  }

  /* 3. Count-up */
  .motion-ready .count-wait {
    opacity: 0;
  }

  .motion-ready .is-counting {
    display: inline-block;
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
    animation: m-fade 0.3s ease-out both;
  }

  /* 4. Floaters */
  .motion-ready .floater {
    animation: m-bob var(--f-dur, 6.5s) ease-in-out calc(var(--f-rnd, 0s) + var(--f-phase, 0s)) infinite;
    transition:
      opacity 0.8s var(--m-ease) calc(var(--f-i, 0) * 140ms + var(--f-late, 0ms)),
      scale 1s var(--m-pop) calc(var(--f-i, 0) * 140ms + var(--f-late, 0ms));
    will-change: transform;
  }

  .motion-ready .floater--spin {
    animation-name: m-bob, m-spin;
    animation-duration: var(--f-dur, 6.5s), 16s;
    animation-timing-function: ease-in-out, linear;
  }

  .motion-ready .floaters:not(.is-in) .floater {
    opacity: 0;
    scale: 0.4;
  }

  .motion-ready .floaters:not(.is-visible) .floater {
    animation-play-state: paused;
  }

  /* 5. Leaves (layer built by JS) */
  .motion-ready [data-leaves] {
    position: relative;
    isolation: isolate;
  }

  .leaves {
    position: absolute;
    inset: 0;
    z-index: -1;
    overflow: hidden;
    pointer-events: none;
    contain: layout paint;
  }

  .leaves--front {
    z-index: 4;
  }

  .leaf {
    position: absolute;
    top: var(--y0, 0px);
    left: var(--x, 0px);
    width: var(--ls, 36px);
    opacity: 0;
    animation: m-fall var(--ld, 12s) ease-in-out var(--ldel, 0s) infinite;
  }

  .leaf__img {
    display: block;
    width: 100%;
    height: auto;
    animation: m-sway var(--ls2, 3.4s) ease-in-out var(--ldel, 0s) infinite alternate;
  }

  [data-leaves]:not(.is-visible) .leaf,
  [data-leaves]:not(.is-visible) .leaf__img {
    animation-play-state: paused;
  }

  /* 7. Medal */
  .motion-ready .medal {
    transition: rotate 0.4s var(--m-ease), scale 0.4s var(--m-ease);
  }

  .motion-ready .pot.is-in:not(.is-done) .medal {
    animation: m-medal 1s var(--m-pop) calc(var(--m-delay, 0ms) + 120ms) backwards;
  }

  .motion-ready .pot:hover .medal {
    rotate: -10deg;
    scale: 1.08;
  }

  /* 8. Art3d glow */
  .motion-ready .art3d::before {
    animation: m-glow 5s ease-in-out infinite;
  }

  .motion-ready .art3d:not(.is-visible)::before {
    animation-play-state: paused;
  }

  /* 13. Topbar logo */
  .motion-ready .topbar .brand__img {
    transform-origin: 0 50%;
    transition: scale 0.3s var(--m-ease);
  }

  .motion-ready .topbar.is-compact .brand__img {
    scale: 0.86;
  }

  /* 15. Path drawing */
  .motion-ready .path::before {
    opacity: 0.3;
  }

  .motion-ready .path::after {
    content: "";
    position: absolute;
    top: 8px;
    bottom: 8px;
    left: 19px;
    z-index: 0;
    width: 2px;
    border-radius: 2px;
    background: linear-gradient(180deg, #fff1a8, var(--gold) 45%, var(--gold-deep));
    box-shadow: 0 0 10px rgba(255, 207, 74, 0.7);
    transform: scaleY(var(--path-p, 0));
    transform-origin: 50% 0;
  }

  .motion-ready .path__step::before {
    z-index: 1;
    transition: background-color 0.35s, color 0.35s, box-shadow 0.35s;
  }

  .motion-ready .path__step.is-lit::before {
    background: var(--gold);
    box-shadow: inset 0 0 0 2px #fff1a8, 0 0 0 5px rgba(255, 207, 74, 0.16), 0 0 22px rgba(255, 207, 74, 0.55);
    color: #2a1300;
    animation: m-lit 0.5s var(--m-pop);
  }

  /* 17. Stars */
  .motion-ready .stars {
    --fill: calc(var(--score, 0) / 5 * 100% * var(--star-k, 1));
    transition: --star-k 1.5s var(--m-ease) 0.25s;
  }

  .motion-ready .stars:not(.is-in) {
    --star-k: 0;
  }

  /* 18. CTA shimmer */
  .motion-ready .cta--gold {
    position: relative;
    isolation: isolate;
    overflow: hidden;
  }

  .motion-ready .cta--gold::after {
    content: "";
    position: absolute;
    top: -30%;
    bottom: -30%;
    left: 0;
    z-index: -1;
    width: 36%;
    background: linear-gradient(100deg, rgba(255, 255, 255, 0) 10%, rgba(255, 255, 255, 0.6) 50%, rgba(255, 255, 255, 0) 90%);
    transform: skewX(-20deg);
    translate: -170% 0;
    animation: m-shine 6s ease-in-out var(--shine-d, 1.5s) infinite;
    pointer-events: none;
  }

  .motion-ready .cta--gold:not(.is-visible)::after {
    animation-play-state: paused;
  }

  .motion-ready .cta--gold:hover::after {
    animation: m-shine-hover 0.85s var(--m-ease) both;
  }

  .motion-ready .cta {
    transition: transform 0.15s, box-shadow 0.15s, background-color 0.15s, scale 0.12s;
  }

  .motion-ready .cta:active {
    scale: 0.97;
  }

  /* 19. Stage pulse */
  .motion-ready .stage__play {
    position: relative;
    animation: m-breathe 2.6s ease-in-out infinite;
  }

  .motion-ready .stage__play::after {
    content: "";
    position: absolute;
    inset: -12px;
    border-radius: 50%;
    box-shadow: 0 0 0 2px rgba(255, 207, 74, 0.9), 0 0 24px rgba(255, 207, 74, 0.4);
    animation: m-ring 2.6s cubic-bezier(0.2, 0.7, 0.3, 1) infinite;
    pointer-events: none;
  }

  .motion-ready .stage:not(.is-visible) .stage__play,
  .motion-ready .stage:not(.is-visible) .stage__play::after {
    animation-play-state: paused;
  }

  /* 20. Card icon hop */
  .motion-ready .card__icon {
    transition: translate 0.35s var(--m-pop), rotate 0.35s var(--m-pop);
  }

  .motion-ready .card:hover .card__icon {
    translate: 0 -4px;
    rotate: -7deg;
  }
}

/* 11. Tilt (fine pointers only) */
@media (prefers-reduced-motion: no-preference) and (hover: hover) and (pointer: fine) {
  .motion-ready .tilt {
    transition: transform 0.4s var(--m-ease), box-shadow 0.2s;
  }

  .motion-ready .tilt.is-tilting {
    transform: perspective(900px) rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg)) translateY(var(--lift, 0px));
    transition-duration: 0.12s, 0.2s;
  }

  .motion-ready .card.tilt {
    --lift: -3px;
  }

  .motion-ready .card.tilt::after,
  .motion-ready .offer.tilt::after {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: inherit;
    background: radial-gradient(260px circle at var(--gx, 50%) var(--gy, 50%), rgba(255, 236, 170, 0.15), rgba(255, 236, 170, 0) 70%);
    opacity: 0;
    transition: opacity 0.3s;
    pointer-events: none;
  }

  .motion-ready .card.tilt.is-tilting::after,
  .motion-ready .offer.tilt.is-tilting::after {
    opacity: 1;
  }
}

/* 21. Pause switch (created by JS in the footer links) */
.motion-toggle {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  margin: 0;
  padding: 0;
  border: 0;
  background: none;
  color: var(--dim);
  font: inherit;
  font-size: 15px;
  cursor: pointer;
}

.motion-toggle:hover {
  color: var(--gold);
}

.motion-toggle:focus-visible {
  border-radius: 4px;
  outline: 2px solid var(--gold);
  outline-offset: 3px;
}

.motion-toggle::before {
  content: "";
  flex: none;
  width: 26px;
  height: 14px;
  border-radius: 7px;
  background: radial-gradient(circle at 7px 50%, var(--dim) 0 4px, transparent 4.5px) rgba(255, 255, 255, 0.12);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.22);
}

.motion-toggle[aria-pressed="true"] {
  color: var(--gold);
}

.motion-toggle[aria-pressed="true"]::before {
  background: radial-gradient(circle at 19px 50%, #2a1300 0 4px, transparent 4.5px) var(--gold);
  box-shadow: none;
}

@media (prefers-reduced-motion: reduce) {
  .motion-toggle-item {
    display: none;
  }
}

.motion-paused .leaf,
.motion-paused .leaf__img,
.motion-paused .floater,
.motion-paused .cta--gold::after,
.motion-paused .stage__play,
.motion-paused .stage__play::after,
.motion-paused .art3d::before {
  animation-play-state: paused !important;
}

.motion-paused .leaves {
  display: none;
}

@media print {
  .motion-ready [data-reveal],
  .motion-ready [data-stagger] > *,
  .motion-ready .count-wait,
  .motion-ready .floater {
    opacity: 1 !important;
    translate: none !important;
    scale: none !important;
  }

  .readbar,
  .leaves {
    display: none !important;
  }
}

/* Keyframes ------------------------------------------------------------------- */

@keyframes m-fade {
  from { opacity: 0; }
}

@keyframes m-bob {
  0%,
  100% { transform: translate3d(0, 0, 0) rotate(calc(var(--f-tilt, 5deg) * -1)); }
  50% { transform: translate3d(0, var(--f-amp, -14px), 0) rotate(var(--f-tilt, 5deg)); }
}

@keyframes m-spin {
  to { rotate: 360deg; }
}

@keyframes m-fall {
  0% { opacity: 0; transform: translate3d(0, -70px, 0); }
  8% { opacity: var(--lo, 0.9); }
  30% { transform: translate3d(var(--drift, 40px), calc(var(--fall, 800px) * 0.3), 0); }
  60% { transform: translate3d(calc(var(--drift, 40px) * -0.5), calc(var(--fall, 800px) * 0.6), 0); }
  90% { opacity: var(--lo, 0.9); }
  100% { opacity: 0; transform: translate3d(calc(var(--drift, 40px) * 0.3), var(--fall, 800px), 0); }
}

@keyframes m-sway {
  from { rotate: -28deg; }
  to { rotate: 28deg; }
}

@keyframes m-medal {
  from { opacity: 0; scale: 0.3; rotate: -120deg; }
}

@keyframes m-glow {
  0%,
  100% { opacity: 0.7; scale: 0.9; }
  50% { opacity: 1; scale: 1.06; }
}

@keyframes m-lit {
  from { scale: 0.7; }
}

@keyframes m-shine {
  0% { translate: -170% 0; }
  20%,
  100% { translate: 330% 0; }
}

@keyframes m-shine-hover {
  from { translate: -170% 0; }
  to { translate: 330% 0; }
}

@keyframes m-ring {
  0% { opacity: 0.85; scale: 0.82; }
  80%,
  100% { opacity: 0; scale: 1.5; }
}

@keyframes m-breathe {
  0%,
  100% { scale: 1; }
  50% { scale: 1.05; }
}

/* =============================================================================
   PAGE PLACEMENTS — layout glue for the Blender media on the four pages
   (classes used only by the page markup; no animation lives here)
   ========================================================================== */

/* Paytable symbols: the <picture> wrapper is the flex item now */
.sym > picture {
  display: block;
  flex: none;
}

/* Card icons inside <picture> keep the 54px tile */
.card picture {
  display: block;
  width: max-content;
}

/* Transparent art centred in article text (index: basket in "Mele d'oro e cesto") */
.art-spot {
  width: min(100%, 320px);
  margin-inline: auto;
}

.text > .art-spot {
  margin-bottom: 28px;
}

.text > .art-spot + * {
  margin-top: 1.2em;
}

/* Framed video inside the article column: capped like .clip--center, the cabinet sits in
   the middle of the clip and a full 840px column only adds empty violet */
.text > .clip {
  max-width: 640px;
  margin-inline: auto;
}

/* Card icons: the 3D object fills more of the 54px tile (canvas has motion padding) */
.card picture .card__icon {
  padding: 2px;
  object-fit: contain;
}

/* Section with the path on one side and the basket on the other (funzioni: #round) */
.split {
  display: grid;
  gap: 26px;
}

.split__art {
  width: min(78%, 250px);
  margin-inline: auto;
}

@media (min-width: 900px) {
  .split {
    grid-template-columns: minmax(0, 1fr) minmax(280px, 0.55fr);
    gap: 48px;
    align-items: start;
  }

  .split > .path {
    grid-row: 1;
    grid-column: 1;
  }

  .split__art {
    position: sticky;
    top: calc(var(--bar, 72px) + 40px);
    grid-row: 1;
    grid-column: 2;
    width: min(100%, 380px);
    margin-top: 10px;
  }
}

/* Framed video centred above a card grid (funzioni: #schede) */
.clip--center {
  max-width: 720px;
  margin: 0 auto 38px;
}

/* Mobile page: small logo over the swaying phone */
.intro__art--phone {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.intro__art .intro__logo {
  position: relative;
  z-index: 3;
  width: auto;
  max-height: 96px;
  margin: 0 auto -26px;
}

@media (min-width: 900px) {
  .intro__art .intro__logo {
    max-height: 118px;
  }
}

/* Callbar art: the 112px animated sprite sits where the 90px icon was */
.callbar__art .art3d {
  margin-inline: auto;
}

/* Portrait app stage (mobile page): the floater host hugs the 430px box */
.stage--tall:has(> .floaters) {
  max-width: 430px;
  margin-inline: auto;
}

/* Tablet / small laptop: art slots span (almost) the full wrap, so the corner
   floaters are pulled inside the 18px gutter like on phones */
@media (min-width: 600px) and (max-width: 1099.98px) {
  .floaters .floater--tl { top: -6%; left: -2%; }
  .floaters .floater--tr { top: -7%; right: -2%; }
  .floaters .floater--bl { bottom: -6%; left: -2%; }
  .floaters .floater--br { bottom: -7%; right: -2%; }
  .floaters .floater--ml { left: -3%; }
  .floaters .floater--mr { right: -3%; }
}

/* Safety net: decorative sprites (and entrance offsets) never widen the page.
   `clip` (not `hidden`) keeps the sticky TOC / sticky art working. */
main {
  overflow-x: clip;
}

/* Intro art with floaters: keep the host close to the art on one-column layouts */
.intro__art:has(> .floaters) {
  justify-self: center;
  width: min(100%, 420px);
}

/* Index hero: corner floaters stay inside the screen on tablets; the red apple is tucked
   behind the card's top-right corner, peeking out above the BONUS BUY ribbon */
@media (min-width: 600px) and (max-width: 1099.98px) {
  .showcase__art .floaters .floater--tl,
  .showcase__art .floaters .floater--bl { left: 0; }
  .showcase__art .floaters .floater--br { right: 0; }
  .showcase__art .floaters .floater--tr { top: -15%; right: 0; }
}

@media (max-width: 599.98px) {
  .showcase__art .floaters .floater--tr { top: -14%; right: 0; }
}

/* Prova gratis intro: the coin clears the final letter of the BOUNTY wordmark */
@media (min-width: 1100px) {
  #prova .intro__art .floaters .floater--br { bottom: -16%; right: -10%; }
}

/* Index "Mele d'oro e cesto": the coin sits by the basket's lower right, clear of the next h3 */
.art-spot .floaters .floater--br { bottom: 8%; right: 4%; }

/* Funzioni #round: the coin stays close to the basket instead of drifting off by the path */
.split__art .floaters .floater--bl { bottom: 17%; left: 5%; }

/* Mobile #app: the bottom apple overlaps the stage corner like the top one */
.stage--tall > .floaters .floater--bl { bottom: 2%; }

/* Mobile intro, one-column: the phone canvas keeps ~14% transparent room under the phone
   for the orbiting apples; pull the card's bottom edge up over that empty band */
@media (max-width: 899.98px) {
  .intro__art--phone .art3d {
    margin-bottom: -44px;
  }
}

/* landing layout */
/* Single-page guide (index): section grids, verdict box, pros/cons and small helpers.
   Anchor targets clear the sticky topbar through `html { scroll-padding-top }` in theme.css
   (adding scroll-margin-top as well would double the offset). */

.narrow {
  max-width: 820px;
}

.text.narrow,
.note.narrow {
  margin-inline: auto;
}

/* #scheda: explanation + verdict under the fact grid */
.sheet {
  display: grid;
  gap: 26px;
  margin-top: 34px;
}

.verdict {
  align-self: start;
  padding: 26px 24px;
  border-radius: var(--r-lg);
  background:
    radial-gradient(320px 200px at 100% 0%, rgba(255, 207, 74, 0.2), rgba(255, 207, 74, 0) 70%),
    var(--night-2);
  box-shadow: inset 0 0 0 1px var(--edge);
}

.verdict__label {
  margin: 0;
  color: var(--gold);
  font-family: var(--head);
  font-size: 14px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.verdict__score {
  margin: 6px 0 8px;
  color: var(--white);
  font-family: var(--head);
  font-size: 46px;
  font-weight: 900;
  line-height: 1;
}

.verdict__score small {
  color: var(--dim);
  font-size: 18px;
  font-weight: 700;
}

.verdict .stars {
  --size: 20px;
}

.verdict__text {
  margin: 14px 0 0;
  font-size: 16px;
}

@media (min-width: 900px) {
  .sheet {
    grid-template-columns: minmax(0, 1fr) minmax(300px, 0.62fr);
    gap: 48px;
  }
}

/* #demo: stage + tips side by side on wide screens */
.demo-grid {
  display: grid;
  gap: 30px;
}

.tips h3 {
  margin-top: 0;
}

@media (min-width: 1040px) {
  .demo-grid {
    grid-template-columns: minmax(0, 1.55fr) minmax(0, 1fr);
    gap: 44px;
    align-items: start;
  }
}

/* Spacing between stacked components inside one section */
.duo + .text,
.duo + .cards,
.cards + .text,
.split + .text,
.cards + .pc {
  margin-top: 46px;
}

.pots-intro + .pots {
  margin-top: 26px;
}

.pots + .note {
  margin-top: 30px;
}

.text > h3:first-child {
  margin-top: 0;
}

.table-note {
  margin: 12px 0 0;
  color: var(--dim);
  font-size: 14px;
}

.actions-row {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
}

/* #mobile: the phone canvas is 3:4, not square */
.art3d--phone img {
  aspect-ratio: auto 3 / 4;
}

.duo__copy > .block__head {
  margin-bottom: 18px;
}

/* #profilo: pros / cons */
.pc {
  display: grid;
  gap: 18px;
}

.pc .note__title {
  margin: 0 0 12px;
}

.ticks--no li::before {
  content: "✕";
  background: rgba(239, 59, 45, 0.18);
  color: #ff7a6e;
}

@media (min-width: 760px) {
  .pc {
    grid-template-columns: 1fr 1fr;
  }
}

/* #responsabile: small shield beside the text */
@media (min-width: 900px) {
  .duo.safe {
    grid-template-columns: 200px minmax(0, 1fr);
    gap: 40px;
  }
}

/* Mobile page: link back to the guide under the cards */
.back-link {
  margin-top: 26px;
  text-align: center;
}

.back-link a {
  color: var(--gold);
  text-underline-offset: 3px;
}

/* landing layout: more stacked pairs */
.demo-grid + .text,
.pc + .text,
.split + .text + .text {
  margin-top: 46px;
}

.text + .pots-intro {
  margin-top: 30px;
}

/* landing layout: six profile cards as a 3 x 2 grid, top-aligned Bonus Buy pair */
@media (min-width: 1000px) {
  .cards--3 {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

.duo--top {
  align-items: start;
}

/* #demo: the coin peeks out from behind the frame's right edge, clear of the lead text */
.demo-grid .stage > .floaters .floater--tr {
  top: 6%;
  right: -4%;
}

/* landing layout: single-column tracks may shrink below their content's min width */
.demo-grid,
.sheet,
.pc {
  grid-template-columns: minmax(0, 1fr);
}

@media (min-width: 760px) {
  .pc {
    grid-template-columns: 1fr 1fr;
  }
}

@media (min-width: 900px) {
  .sheet {
    grid-template-columns: minmax(0, 1fr) minmax(300px, 0.62fr);
  }
}

@media (min-width: 1040px) {
  .demo-grid {
    grid-template-columns: minmax(0, 1.55fr) minmax(0, 1fr);
  }
}

.demo-grid .stage > .floaters .floater--tl {
  top: 5%;
  left: -4%;
}

/* #scheda: on the two-column phone grid the euro cap gets a full row (no wrapping,
   so the count-up never changes the tile height) */
@media (max-width: 719.98px) {
  .fact--wide {
    grid-column: span 2;
  }
}

/* legal pages */
/* privacy.html, condizioni.html, gioco-sicuro.html: compact intro art, top-aligned
   summary tables, inline code, current footer link */
.intro__art--legal img {
  max-height: 150px;
}

@media (min-width: 900px) {
  .intro__art--legal img {
    max-height: 230px;
  }
}

.tbl--top th,
.tbl--top td {
  vertical-align: top;
}

.text code {
  padding: 1px 7px;
  border-radius: 6px;
  background: var(--glass-2);
  color: var(--white);
  font-size: 0.88em;
  overflow-wrap: anywhere;
}

.text > .actions-row {
  margin-top: 1.8em;
}

.base__link[aria-current="page"] {
  color: var(--gold);
}

/* Summary tables on phones: one card per row, column names as small labels */
@media (max-width: 599.98px) {
  .tbl--stack.tbl--wide {
    min-width: 0;
  }

  .tbl--stack thead {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
  }

  .tbl--stack tbody,
  .tbl--stack tr,
  .tbl--stack td {
    display: block;
  }

  .tbl--stack tr {
    padding: 14px 16px;
  }

  .tbl--stack tbody tr + tr {
    border-top: 1px solid var(--edge-soft);
  }

  .tbl--stack tbody tr + tr td {
    border-top: 0;
  }

  .tbl--stack td {
    padding: 0;
  }

  .tbl--stack td + td {
    margin-top: 8px;
  }

  .tbl--stack td[data-label]::before {
    content: attr(data-label);
    display: block;
    color: var(--gold);
    font-family: var(--head);
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
  }
}

@media (max-width: 599.98px) {
  .tbl--stack td:first-child {
    font-family: var(--head);
    font-size: 16px;
  }
}