/* Tokens are maximum CSS pixel travel, not unbounded scroll multipliers. */
:root {
  --motion-gain: 1.7;
  --hero-travel: 40;
  --hero-background-travel: 18;
  --hero-background-pointer: 8;
  --motion-inertia-hero-background: 340;
  --hero-pointer: 22;
  --hero-bloom: .012;
  --hero-overscan: 64px;
  --motion-inertia-hero: 260;
  --motion-brush: 1400ms;
  --motion-brush-stagger: 110ms;
  --liquid-ripple: 32;
  --cta-lift: calc(-3px * var(--motion-gain));
  --cta-arrow: calc(4px * var(--motion-gain));
  --cta-fill: .32;
  --parallax-far: 4;
  --parallax-mid: 24;
  --parallax-near: 42;
  --parallax-tablet: .5;
  --foliage-strength: 1.3;
  --paint-travel: 10;
  --paint-bloom: .025;
  --paint-turn: .35;
  --paint-fade: .12;
  --motion-inertia: 180;
  --motion-inertia-far: 140;
  --motion-inertia-mid: 180;
  --motion-inertia-near: 220;
  --pointer-far: 5;
  --pointer-mid: 14;
  --pointer-near: 22;
  --pointer-radius: 180;
  --sway-small: .55deg;
  --sway-medium: .8deg;
  --motion-paint: 900ms;
  --motion-character: 760ms;
  --motion-stagger: 140ms;
  --motion-character-travel: calc(12px * var(--motion-gain));
}
/* Keep the previous work underneath until the approved brush contour clears it. */
.hero-slide { transition: none; background: #29131c; }
.hero-slide.is-leaving { opacity: 1; z-index: 1; }
.hero-slide.is-entering { z-index: 2; }
@media (min-width:761px) and (prefers-reduced-motion:no-preference) {
  .motion-ready [data-motion] {
    transform: translate(var(--motion-x,0px),var(--motion-y,0px)) rotate(var(--motion-r,0deg)) scale(var(--motion-scale,1));
    transform-origin: 50% 92%; pointer-events: none;
  }
  .motion-ready [data-motion].is-moving { will-change: transform; }
  .motion-ready [data-motion="paint"] { transform-origin: center; }
  .motion-ready [data-motion="paint"].is-moving { will-change: transform,opacity; }
  .motion-ready .leaf-hero-left { transform-origin: 10% 95%; }
  .motion-ready :is(.leaf-hero-right,.leaf-process-right) { transform-origin: 90% 8%; }
  .motion-ready .leaf-footer-right { transform-origin: 90% 95%; }
  .motion-ready :is(.leaf-work-right,.leaf-commission-upper) { transform-origin: 75% 8%; }
  .motion-ready .leaf-footer-left { transform-origin: 15% 95%; }
  .motion-ready .leaf-artist-right { transform-origin: 98% 90%; }
  .motion-ready .title-sprig { transform-origin: 90% 90%; }
  .artist-photo img { transition: opacity var(--motion-reveal) var(--ease-editorial),clip-path var(--motion-reveal) var(--ease-editorial); }
  .motion-ready .artist-photo img:not(.is-revealed) { opacity: .7; clip-path: inset(0 0 5% 0); }
  .motion-ready .artist-photo img.is-revealed { opacity: 1; clip-path: inset(0); }
}
@media (min-width:901px) and (prefers-reduced-motion:no-preference) {
  .motion-ready .hero-art > .hero-background {
    width: calc(100% + 2 * var(--hero-overscan)); height: calc(100% + 2 * var(--hero-overscan)); margin: calc(-1 * var(--hero-overscan)); transform-origin: center;
  }
}
@media (min-width:1101px) and (prefers-reduced-motion:no-preference) {
  [data-sway] { animation: botanical-breath 13s var(--ease-organic) -3s infinite; animation-play-state: paused; }
  [data-sway="slower"] { --sway-small: var(--sway-medium); animation-duration: 17s; animation-delay: -9s; }
  [data-sway="slowest"] { --sway-base: 24deg; animation-duration: 19s; animation-delay: -6s; animation-direction: reverse; }
  .motion-ready [data-sway].is-in-view { animation-play-state: running; }
  @keyframes botanical-breath { 0%,100% { rotate: calc(var(--sway-base,0deg) - var(--sway-small) * var(--foliage-strength) * var(--motion-gain)); } 50% { rotate: calc(var(--sway-base,0deg) + var(--sway-small) * var(--foliage-strength) * var(--motion-gain)); } }
}
/* The approved paint texture sweeps underneath readable button labels. */
.button { position: relative; isolation: isolate; overflow: hidden; }
.button::before {
  content: ""; position: absolute; inset: -85% -25%; z-index: -1; pointer-events: none;
  background: url("assets/art-direction/paint/06-the-work-upper-right-paint-wisp.webp") center / 100% 100% no-repeat;
  opacity: 0; transform: translateX(-75%) rotate(-9deg) scale(.8);
}
.button:focus-visible::before { opacity: var(--cta-fill); transform: translateX(0) rotate(-5deg) scale(1.2); }
.inquiry .button { --cta-fill: .16; }
.inquiry .button::before { mix-blend-mode: screen; }
.button:focus-visible { box-shadow: 0 12px 28px rgba(46,19,25,.27),inset 0 0 0 1px rgba(170,137,115,.65); }
@media (hover:hover) and (pointer:fine) {
  .button:hover::before { opacity: var(--cta-fill); transform: translateX(0) rotate(-5deg) scale(1.2); }
  .button:hover { box-shadow: 0 12px 28px rgba(46,19,25,.27),inset 0 0 0 1px rgba(170,137,115,.65); }
}
@media (hover:none) { .button:hover { transform: none; } }
@media (prefers-reduced-motion:no-preference) {
  .button { transition: background var(--motion-subtle),border-color var(--motion-subtle),box-shadow var(--motion-medium),transform var(--motion-subtle) var(--ease-editorial); }
  .button > span:first-child { transition: translate var(--motion-medium) var(--ease-editorial); }
  .button::after { content: ""; position: absolute; inset: auto 12% 5px; height: 2px; background: currentColor; opacity: .5; transform: scaleX(0); transform-origin: left; transition: transform var(--motion-medium) var(--ease-editorial); pointer-events: none; }
  .button:focus-visible::after { transform: scaleX(1); }
  .button::before { transition: opacity var(--motion-subtle),transform var(--motion-medium) var(--ease-editorial); }
  .button > [aria-hidden="true"] { transform-origin: center; transition: transform var(--motion-medium) var(--ease-editorial); }
  :is(.hero-controls button,#art-prev,#art-next,#art-close,#copy) { transition: transform var(--motion-subtle) var(--ease-editorial),background var(--motion-subtle),border-color var(--motion-subtle); }
  .text-link { transition: text-underline-offset var(--motion-subtle),color var(--motion-subtle); }
  .button:focus-visible > [aria-hidden="true"] { transform: translate(var(--cta-arrow),calc(-1 * var(--cta-arrow))) scale(1.18); }
  .text-link:focus-visible { text-underline-offset: calc(6px + 3px * var(--motion-gain)); }
  @media (hover:hover) and (pointer:fine) {
    .button:hover::after { transform: scaleX(1); }
    .button:hover > span:first-child { translate: 2px 0; }
    .button:hover { transform: translateY(var(--cta-lift)) scale(1.017); }
    .button:hover > [aria-hidden="true"] { transform: translate(var(--cta-arrow),calc(-1 * var(--cta-arrow))) scale(1.18); }
    :is(.hero-controls button,#art-prev,#art-next,#art-close,#copy):hover { transform: translateY(calc(-2px * var(--motion-gain))); border-color: var(--gold); }
    .text-link:hover,.occasion-grid > a:hover .text-link { text-underline-offset: calc(6px + 3px * var(--motion-gain)); }
  }
  :is(.button,.hero-controls button,#art-prev,#art-next,#art-close,#copy):active { transform: translateY(1px) scale(.985); }
  .hero-slide.is-entering { animation: portrait-dissolve var(--motion-paint) var(--ease-editorial) both; }
  @keyframes portrait-dissolve { from { opacity: 0; } to { opacity: 1; } }
  @supports (mask-image: linear-gradient(#000,#000)) {
    .hero-slide.is-entering {
      animation-name: portrait-brush;
      mask-image: url("assets/art-direction/paint/14-footer-transition-mask.webp"),linear-gradient(#000,#000);
      mask-repeat: no-repeat;
    }
    @keyframes portrait-brush {
      from { mask-size: 100% 18%,100% 0%; mask-position: 0 122%,0 100%; }
      to { mask-size: 100% 18%,100% 100%; mask-position: 0 -22%,0 100%; }
    }
  }
  .reveal-ready .theme-thumb:not(.is-revealed) .commission-fox { opacity: .18; translate: 0 var(--motion-character-travel); }
  .reveal-ready .theme-thumb.is-revealed:not(.reveal-complete) .commission-fox {
    animation: character-arrives var(--motion-character) var(--ease-editorial) var(--character-delay,0ms) both;
  }
  .theme-1 { --character-delay: var(--motion-stagger); }
  .theme-2 { --character-delay: calc(2 * var(--motion-stagger)); }
  @keyframes character-arrives {
    from { opacity: .18; translate: 0 var(--motion-character-travel); }
    to { opacity: 1; translate: 0 0; }
  }
  @media (max-width:760px) {
    .theme-thumb { --character-delay: 0ms; --motion-character: 560ms; --motion-character-travel: calc(6px * var(--motion-gain)); }
  }
  /* Each wash is painted once, using the approved brush contour. */
  .reveal-ready .art-paint:not(.is-revealed) { visibility: hidden; }
  .reveal-ready .art-paint.is-revealed:not(.reveal-complete) {
    animation: paint-soft-arrives var(--motion-brush) var(--ease-editorial) var(--brush-delay,0ms) both;
  }
  .art-paint:nth-child(even) { --brush-delay: var(--motion-brush-stagger); }
  .reveal-paused :is(.art-paint,.commission-fox) { animation-play-state: paused !important; }
  @keyframes paint-soft-arrives { from { opacity: 0; } to { opacity: calc(var(--paint-opacity-base,1) * var(--motion-opacity,1)); } }
  @supports (mask-image: linear-gradient(#000,#000)) {
    .reveal-ready .art-paint.is-revealed:not(.reveal-complete) {
      animation-name: paint-brush-arrives;
      mask-image: url("assets/art-direction/paint/14-footer-transition-mask.webp"),linear-gradient(#000,#000);
      mask-repeat: no-repeat;
    }
    @keyframes paint-brush-arrives {
      from { mask-size: 100% 22%,100% 0%; mask-position: 0 128%,0 100%; }
      to { mask-size: 100% 22%,100% 100%; mask-position: 0 -28%,0 100%; }
    }
  }
  @media (max-width:760px) {
    .art-paint { --motion-brush: 900ms; --motion-brush-stagger: 70ms; }
  }
  .hero h1 em { animation: ink-arrives var(--motion-reveal) var(--ease-editorial) both; }
  @keyframes ink-arrives { from { opacity: .55; } to { opacity: 1; } }
  .faq details[open] p { animation: ink-arrives var(--motion-subtle) var(--ease-editorial); }
  .art-open img { transition: transform var(--motion-medium) var(--ease-editorial); }
  .work-card small { transition: color var(--motion-subtle),transform var(--motion-subtle); }
  .work-card figcaption { position: relative; }
  .work-card figcaption::after { content:""; position:absolute; inset:auto 0 -1px; height:1px; background:var(--wine-700); transform:scaleX(0); transform-origin:left; transition:transform var(--motion-medium) var(--ease-editorial); }
  .work-card:focus-within figcaption::after { transform:scaleX(1); }
  @media (hover:hover) and (pointer:fine) {
    .work-card:hover .art-open img { transform: translateY(calc(-2px * var(--motion-gain))) scale(calc(1 + .012 * var(--motion-gain))); }
    .work-card:hover small { color: var(--wine-700); transform:translateX(calc(1px * var(--motion-gain))); }
    .work-card:hover figcaption::after { transform:scaleX(1); }
  }
}
@media (prefers-reduced-motion:reduce) {
  .button,.button::before,.button > [aria-hidden="true"],.hero-controls button,#art-prev,#art-next,#art-close,#copy,.text-link { transition: none; }
  .button::after { display: none; }
  .button > [aria-hidden="true"] { transform: none; }
  [data-liquid] { filter: none !important; }
  .art-paint { visibility: visible; animation: none; mask-image: none; }
  .hero-slide { animation: none; mask-image: none; transition: none; }
  .commission-fox { animation: none; opacity: 1; translate: none; }
  [data-motion] { transform: none; rotate: none; animation: none; will-change: auto; }
  .hero h1 em,.artist-photo img,.art-open img,.work-card small,.work-card figcaption::after,.faq details p { animation: none; transition: none; clip-path: none; opacity: 1; transform: none; }
}

/* SVG resources never occupy layout; static art is the fallback. */
.motion-filters { position: absolute; width: 0; height: 0; overflow: hidden; pointer-events: none; }