/* Motion kit: entrance choreography, scroll-driven reveals, depth and cursor answers. Copy it into the product, then
   re-tokenise (the easing stays, colours come from the brand kit).
   Load choreography is time-based and plays once; everything below the first screen is driven by the scroll
   (CSS scroll-driven animations, native in Chromium and Safari 26+); browsers without them get the same reveals on a
   timer when each part comes into view (motion.js adds .no-sda and .is-in). Transform and opacity only, except the
   one-off logo wipe (clip-path, once, 44 px). Reduced motion: no movement, short fades instead. */
:root {
  --ease-expo: cubic-bezier(0.16, 1, 0.3, 1);       /* entrances: most of the move early, then a long settle */
  --ease-quint: cubic-bezier(0.22, 1, 0.36, 1);
  --ease-accent: linear(0, 0.2 6%, 0.62 17%, 0.92 28%, 1.045 38%, 1.06 46%, 1.025 58%, 0.996 74%, 1); /* small overshoot, accents only */
}

@keyframes m-rise { from { opacity: 0; transform: translateY(var(--m-y, 1.25rem)); } }
@keyframes m-fade { from { opacity: 0; } }
@keyframes m-word { from { transform: translateY(112%) rotate(var(--m-rot, 2.5deg)); } }
@keyframes m-line { from { transform: scaleX(0); } }
@keyframes m-line-y { from { transform: scaleY(0); } }
@keyframes m-logo { from { clip-path: inset(0 100% 0 0); } to { clip-path: inset(0 0 0 0); } }
@keyframes m-sheen { from { transform: translateX(-140%) skewX(-18deg); } to { transform: translateX(260%) skewX(-18deg); } }
@keyframes m-unhide { to { opacity: 1; } }
@keyframes m-mw-a { from { transform: translate(var(--mw-x, 0%), var(--mw-y, 100%)); } }
@keyframes m-mw-b { from { transform: translate(calc(var(--mw-x, 0%) * -1), calc(var(--mw-y, 100%) * -1)) scale(var(--mw-s, 1.22)); } }
@keyframes m-drift { from { transform: translateY(var(--drift, 8%)); } to { transform: translateY(calc(var(--drift, 8%) * -1)); } }
@keyframes m-slide-x { from { transform: translateX(var(--from-x, 0%)); } to { transform: translateX(var(--to-x, -30%)); } }
@keyframes m-pop { from { opacity: 0; transform: scale(0.9); } }

/* ---------- split headlines: words sit in clipped line boxes and rise out of them ---------- */
.w { display: inline-block; overflow: clip; vertical-align: top; padding: 0 0.06em 0.12em; margin: 0 -0.06em -0.12em; }
.wi { display: inline-block; transform-origin: 0 100%; }
.js [data-split]:not(.split) { opacity: 0; animation: m-unhide 0s 2.5s forwards; } /* never stuck hidden if a script fails */

/* the brass hairline on top of every page: how far down the page you are */
.m-progress { position: fixed; z-index: 70; top: 0; left: 0; right: 0; height: 2px; background: var(--m-progress, currentColor); transform-origin: 0 50%; transform: scaleX(0); pointer-events: none; }

/* image mask: a window that opens over the picture while the picture settles inside it */
.mw { position: relative; overflow: clip; }
.mw-in, .mw-ct { position: relative; height: 100%; }
.mw[data-from="left"] { --mw-x: -100%; --mw-y: 0%; }
.mw[data-from="right"] { --mw-x: 100%; --mw-y: 0%; }
.mw[data-from="top"] { --mw-x: 0%; --mw-y: -100%; }
.pl { height: 100%; }
.pl > img, .pl > picture > img, .pl > picture { display: block; width: 100%; height: 100%; object-fit: cover; }
.pl.pl-over { transform: scale(1.16); } /* room for the drift */

@media (prefers-reduced-motion: no-preference) {
  /* ----- load (time-based, once) ----- */
  .js [data-enter] { animation: m-rise 1000ms var(--ease-expo) both; animation-delay: var(--d, 0ms); }
  .js [data-enter~="fade"] { animation-name: m-fade; animation-duration: 900ms; }
  .js [data-enter~="line"] { animation-name: m-line; transform-origin: 0 50%; animation-duration: 1200ms; animation-timing-function: var(--ease-in-out); }
  .js [data-enter~="pop"] { animation-name: m-pop; animation-timing-function: var(--ease-accent); animation-duration: 700ms; }
  .js [data-split="load"].split .wi { animation: m-word 1300ms cubic-bezier(0.65, 0, 0.35, 1) both; animation-delay: calc(var(--d, 250ms) + var(--i) * 85ms); }
  .js .brand-mark { animation: m-logo 900ms var(--ease-in-out) 150ms both; }

  /* ----- scroll-driven (native) ----- */
  @supports ((animation-timeline: view()) and (animation-range: entry)) {
    .m-progress { animation: m-line linear both; animation-timeline: scroll(root); }
    [data-sd~="rise"] { --m-y: 3.25rem; animation: m-rise var(--ease-out) both; animation-timeline: view(); animation-range: var(--range, entry 0% cover 32%); }
    [data-sd~="fade"] { animation: m-fade linear both; animation-timeline: view(); animation-range: var(--range, entry 10% cover 35%); }
    [data-sd~="line"] { transform-origin: 0 50%; animation: m-line var(--ease-in-out) both; animation-timeline: view(); animation-range: var(--range, entry 30% cover 50%); }
    [data-sd~="line-y"] { transform-origin: 50% 0; animation: m-line-y var(--ease-in-out) both; animation-timeline: view(); animation-range: var(--range, entry 0% cover 60%); }
    [data-sd~="pop"] { animation: m-pop var(--ease-accent) both; animation-timeline: view(); animation-range: var(--range, entry 20% cover 35%); }
    [data-sd~="drift"] { animation: m-drift linear both; animation-timeline: view(); animation-range: cover 0% cover 100%; }
    [data-sd~="slide-x"] { animation: m-slide-x linear both; animation-timeline: view(); animation-range: cover 0% cover 100%; }
    [data-sd~="words"] .w { view-timeline: --w; }
    [data-sd~="words"] .wi { animation: m-word var(--ease-out) both; animation-timeline: --w; animation-range: cover calc(6% + var(--i) * 1.4%) cover calc(30% + var(--i) * 1.4%); }
    .mw { view-timeline: --mw; }
    .mw-in { animation: m-mw-a var(--ease-in-out) both; animation-timeline: --mw; animation-range: var(--range, entry 0% cover 42%); }
    .mw-ct { animation: m-mw-b var(--ease-in-out) both; animation-timeline: --mw; animation-range: var(--range, entry 0% cover 42%); }
    .mw .pl { animation: m-drift linear both; animation-timeline: --mw; animation-range: cover 0% cover 100%; }
  }

  /* ----- fallback: the same reveals on a timer as each part comes into view (motion.js adds .is-in) ----- */
  .no-sda [data-sd~="rise"], .no-sda [data-sd~="fade"], .no-sda [data-sd~="pop"] { transition: opacity 900ms var(--ease-out), transform 1100ms var(--ease-expo); }
  .no-sda [data-sd~="rise"]:not(.is-in) { opacity: 0; transform: translateY(3rem); }
  .no-sda [data-sd~="fade"]:not(.is-in), .no-sda [data-sd~="pop"]:not(.is-in) { opacity: 0; }
  .no-sda [data-sd~="line"], .no-sda [data-sd~="line-y"] { transition: transform 1200ms var(--ease-in-out); }
  .no-sda [data-sd~="line"]:not(.is-in) { transform: scaleX(0); transform-origin: 0 50%; }
  .no-sda [data-sd~="line-y"]:not(.is-in) { transform: scaleY(0); transform-origin: 50% 0; }
  .no-sda [data-sd~="words"] .wi { transition: transform 1100ms var(--ease-expo) calc(var(--i) * 70ms); }
  .no-sda [data-sd~="words"]:not(.is-in) .wi { transform: translateY(112%) rotate(2.5deg); }
  .no-sda .mw-in, .no-sda .mw-ct { transition: transform 1300ms var(--ease-expo); }
  .no-sda .mw:not(.is-in) .mw-in { transform: translate(var(--mw-x, 0%), var(--mw-y, 100%)); }
  .no-sda .mw:not(.is-in) .mw-ct { transform: translate(calc(var(--mw-x, 0%) * -1), calc(var(--mw-y, 100%) * -1)) scale(1.22); }

  /* ----- page to page: the next page opens up from the bottom over the last one ----- */
  @view-transition { navigation: auto; }
  ::view-transition-old(root) { animation: m-vt-out 520ms var(--ease-out) both; }
  ::view-transition-new(root) { animation: m-vt-in 900ms var(--ease-expo) both; }
  .switcher { view-transition-name: switcher; }
  .m-progress { view-transition-name: m-progress; }
}
@keyframes m-vt-out { to { opacity: 0.35; transform: scale(0.965); } }
@keyframes m-vt-in { from { clip-path: inset(100% 0 0 0); } to { clip-path: inset(0 0 0 0); } }

/* ---------- cursor answers (fine pointers only; phones get press feedback instead) ---------- */
[data-magnetic] { transition: transform 450ms var(--ease-out); }
[data-magnetic].is-near { transition-duration: 140ms; }
[data-tilt] { position: relative; transition: transform 700ms var(--ease-out); transform: perspective(900px); }
[data-tilt].is-tilting { transition-duration: 160ms; }
[data-tilt] .sheen { position: absolute; z-index: 3; left: 0; top: 0; width: 70%; aspect-ratio: 1; margin: -35% 0 0 -35%; border-radius: 50%; background: radial-gradient(closest-side, rgba(255, 248, 236, 0.32), rgba(255, 248, 236, 0)); opacity: 0; transition: opacity 400ms ease; pointer-events: none; mix-blend-mode: soft-light; }
[data-tilt].is-tilting .sheen { opacity: 1; }
.glow-follow { position: absolute; z-index: 0; left: 0; top: 0; width: 46rem; aspect-ratio: 1; margin: -23rem 0 0 -23rem; border-radius: 50%; pointer-events: none; background: radial-gradient(closest-side, var(--glow, rgba(255, 244, 224, 0.2)), rgba(255, 244, 224, 0)); opacity: 0; transition: opacity 700ms ease; }
.glow-on .glow-follow { opacity: 1; }

@media (prefers-reduced-motion: reduce) {
  .js [data-split].split .wi, .js [data-enter] { animation: m-fade 500ms ease both; animation-delay: calc(var(--d, 0ms) * 0.4); }
  [data-magnetic], [data-tilt] { transition: none; }
  .glow-follow { display: none; }
}