/* Website motion (never in the app, which has its own page transitions). html[data-motion] is set in <head>; motion.js marks what sits
   below the first screen, so nothing visible on load is ever hidden and the HTML Google reads is the same. Off for reduced motion. */
@media (prefers-reduced-motion: no-preference) {
  /* A · Keynote: blocks rise softly into place as you scroll, cards one after another. */
  html[data-motion=a] .rv { opacity: 0; transform: translateY(18px); transition: opacity .7s cubic-bezier(.16, 1, .3, 1), transform .9s cubic-bezier(.16, 1, .3, 1); transition-delay: calc(var(--i, 0) * 60ms); }
  html[data-motion=a] .rv.in { opacity: 1; transform: none; }

  /* B · Depth: cards settle from slightly smaller, photos ease in from a little closer, frosted header, pages cross-fade with depth. */
  html[data-motion=b] .rv { opacity: 0; transform: scale(.965); transition: opacity .55s ease, transform .8s cubic-bezier(.2, .9, .2, 1); transition-delay: calc(var(--i, 0) * 50ms); }
  html[data-motion=b] .rv.in { opacity: 1; transform: none; }
  html[data-motion=b] .rv img { transform: scale(1.06); transition: transform 1.2s cubic-bezier(.2, .9, .2, 1); transition-delay: calc(var(--i, 0) * 50ms); }
  html[data-motion=b] .rv.in img { transform: none; }
  html[data-motion=b] ::view-transition-old(root) { animation: .28s cubic-bezier(.4, 0, .2, 1) both m-out; }
  html[data-motion=b] ::view-transition-new(root) { animation: .38s cubic-bezier(.2, .9, .2, 1) both m-in; }
  @keyframes m-out { to { opacity: 0; transform: scale(.985); } }
  @keyframes m-in { from { opacity: 0; transform: scale(1.012); } }

  /* C · Quiet: nothing moves on scroll; photos fade in as they load, pages cross-fade. */
  html[data-motion=c] img.ld { opacity: 0; transition: opacity .45s ease; }
  html[data-motion=c] img.ld.in { opacity: 1; }
  html[data-motion=c] ::view-transition-old(root) { animation: .2s ease both m-fade-out; }
  html[data-motion=c] ::view-transition-new(root) { animation: .26s ease both m-fade-in; }
  @keyframes m-fade-out { to { opacity: 0; } }
  @keyframes m-fade-in { from { opacity: 0; } }

  /* B and C: press feedback like iOS, a lift under the pointer on desktop, the header turns to frosted glass once you scroll. */
  html[data-motion=b] :is(.card, .hood, .tile, .ranked li, .btn, .chip), html[data-motion=c] :is(.card, .hood, .tile, .ranked li, .btn, .chip) { transition: transform .18s ease, box-shadow .25s ease, opacity .7s cubic-bezier(.16, 1, .3, 1); }
  html[data-motion=b] :is(.card, .hood, .tile, .btn, .chip):active, html[data-motion=c] :is(.card, .hood, .tile, .btn, .chip):active { transform: scale(.975); }
  @media (hover: hover) {
    html[data-motion=b] :is(.card, .hood, .tile):hover, html[data-motion=c] :is(.card, .hood, .tile):hover { transform: translateY(-3px); }
  }
  html[data-motion=b] .top, html[data-motion=c] .top { transition: background .25s ease, border-color .25s ease; }
  html[data-motion=b].scrolled .top, html[data-motion=c].scrolled .top { background: color-mix(in srgb, var(--bg) 78%, transparent); -webkit-backdrop-filter: saturate(1.5) blur(18px); backdrop-filter: saturate(1.5) blur(18px); }
}