/* Onlly — motion system. One file, no dependencies.
   Pairs with motion.js. Respects prefers-reduced-motion. */

:root {
  --ease: cubic-bezier(.22, 1, .36, 1);      /* soft decelerate: entrances, lifts */
  --ease-io: cubic-bezier(.65, 0, .35, 1);   /* symmetric: morphs, accordions */
  --t-fast: .2s;
  --t-med: .45s;
  --t-slow: .8s;
}

html { scroll-behavior: smooth; }

/* ───────── 1. Page-to-page transitions ─────────
   Cross-document View Transitions (Chrome / Edge / Safari 18.2+).
   Header stays in place, the Store ⇄ Business pill slides between its two
   positions, page content cross-fades with a small rise. Other browsers
   simply get the fade-in fallback at the bottom of this section. */
@view-transition { navigation: auto; }

header { view-transition-name: site-header; }

::view-transition-old(root) { animation: vt-out .22s var(--ease-io) both; }
::view-transition-new(root) { animation: vt-in .5s var(--ease) both; }
::view-transition-group(site-header),
::view-transition-group(switch-pill) { animation-duration: .5s; animation-timing-function: var(--ease); }

@keyframes vt-out { to { opacity: 0; translate: 0 -6px; } }
@keyframes vt-in  { from { opacity: 0; translate: 0 14px; } }

@supports not (view-transition-name: x) {
  body { animation: page-in .5s var(--ease) both; }
  @keyframes page-in { from { opacity: 0; translate: 0 12px; } }
}

/* ───────── 2. Scroll reveal ─────────
   motion.js tags elements with data-reveal and a stagger index --i.
   Uses the individual `translate` property so it never fights the
   inline `transform: rotate(...)` on tilted posters. */
.js [data-reveal] {
  opacity: 0;
  translate: 0 28px;
  transition: opacity var(--t-slow) var(--ease), translate var(--t-slow) var(--ease);
  transition-delay: calc(var(--i, 0) * 70ms);
  will-change: opacity, translate;
}
.js [data-reveal].in { opacity: 1; translate: 0 0; will-change: auto; }

/* ───────── 3. Buttons, links, cards ───────── */
a, button { transition: color var(--t-fast) ease, background-color var(--t-fast) ease, border-color var(--t-fast) ease,
            box-shadow var(--t-med) var(--ease), translate var(--t-med) var(--ease), scale var(--t-fast) var(--ease); }

/* pill buttons lift on hover, press on click */
a[style*="border-radius: 999px"]:hover,
button[style*="border-radius: 999px"]:hover { translate: 0 -2px; box-shadow: 0 10px 24px rgba(18, 18, 18, .14); }
a[style*="border-radius: 999px"]:active,
button[style*="border-radius: 999px"]:active { translate: 0 0; scale: .97; box-shadow: none; }

/* nav links: underline draws in from the left */
.navlink { position: relative; }
.navlink::after { content: ""; position: absolute; left: 4px; right: 4px; bottom: 5px; height: 1.5px; background: currentColor;
  transform: scaleX(0); transform-origin: left; transition: transform .4s var(--ease); }
.navlink:not([aria-current]):hover::after { transform: scaleX(1); }

/* text links with an underline slide their own line */
a[style*="border-bottom: 1px solid currentColor"] { transition: color var(--t-fast) ease, padding-bottom var(--t-med) var(--ease); }
a[style*="border-bottom: 1px solid currentColor"]:hover { padding-bottom: 5px !important; }

/* artwork cards: mat lifts, image eases up and scales slightly */
.card > div:first-child { overflow: hidden; transition: box-shadow var(--t-med) var(--ease), translate var(--t-med) var(--ease); }
.card:hover > div:first-child { translate: 0 -4px; box-shadow: 0 18px 36px rgba(18, 18, 18, .12); }
.card img, .card .art { transition: transform .9s var(--ease); }
.card:hover img { transform: scale(1.045); }
.card:active > div:first-child { translate: 0 -1px; }

/* business tiles: image area zooms, arrow nudges */
.tile .go span[aria-hidden] { display: inline-block; transition: translate var(--t-med) var(--ease); }
.tile:hover .go span[aria-hidden] { translate: 5px 0; }

/* ───────── 4. Filters and catalogue ───────── */
.opt { transition: color var(--t-fast) ease, translate var(--t-med) var(--ease); }
.opt:hover { translate: 3px 0; }
.opt .mk { transition: background-color var(--t-fast) ease, border-color var(--t-fast) ease, box-shadow var(--t-med) var(--ease), scale var(--t-fast) var(--ease); }
.opt:hover .mk { border-color: #2B3FD6; }
.opt:active .mk { scale: .85; }

.sw { transition: scale var(--t-med) var(--ease), outline-color var(--t-fast) ease, outline-offset var(--t-med) var(--ease); outline: 2px solid transparent; outline-offset: 0; }
.sw:hover { scale: 1.18; }
.sw:active { scale: .92; }
.sw.on { outline-color: #121212; outline-offset: 3px; }

.tab { transition: background-color var(--t-fast) ease, color var(--t-fast) ease, scale var(--t-fast) var(--ease); }
.tab:active { scale: .96; }

/* result cards rise in, staggered (motion.js sets --i) */
.enter { animation: rise .6s var(--ease) both; animation-delay: calc(var(--i, 0) * 45ms); }
@keyframes rise { from { opacity: 0; translate: 0 22px; scale: .975; } }

/* empty state */
#empty:not([hidden]) { animation: rise .5s var(--ease) both; }

/* accordions (<details>): smooth height + fading text */
details { interpolate-size: allow-keywords; }
details::details-content { height: 0; overflow: clip; opacity: 0;
  transition: height .45s var(--ease-io), opacity .35s ease, content-visibility .45s allow-discrete; }
details[open]::details-content { height: auto; opacity: 1; }
details > summary { transition: color var(--t-fast) ease; }
details > summary:hover { color: #2B3FD6; }
details > summary::after { transition: rotate .45s var(--ease); }
details[open] > summary::after { rotate: 180deg; }

/* ───────── 5. Images fade in as they load ───────── */
.js img[data-fade] { opacity: 0; transition: opacity .7s ease; }
.js img[data-fade].loaded { opacity: 1; }

/* ───────── 6. Hero poster float (index hero, licence hero) ───────── */
.float { animation: float 7s ease-in-out infinite; }
.float:nth-child(2) { animation-delay: -2.3s; animation-duration: 8.5s; }
.float:nth-child(3) { animation-delay: -4.6s; animation-duration: 7.7s; }
@keyframes float { 50% { translate: 0 -9px; } }

/* ───────── 7. Reduced motion ───────── */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: .01ms !important; animation-delay: 0s !important; animation-iteration-count: 1 !important;
    transition-duration: .01ms !important; transition-delay: 0s !important; }
  .js [data-reveal] { opacity: 1; translate: 0 0; }
  ::view-transition-group(*), ::view-transition-old(*), ::view-transition-new(*) { animation: none !important; }
}