/* ---------- SCROLL-DRIVEN MOTION (modern browsers) ----------
   The "text zoom on scroll" effect lives here. Each plate title scales from 0.88
   up to 1.0 as it enters the viewport, holds, then eases back to 0.92 as it leaves.
   The hero verb scales down + fades as it scrolls past.
   External file on purpose: scroll-driven animation properties are valid modern
   CSS the W3C validator does not parse yet; keeping them out of the inline
   <style> keeps the HTML validation clean. */
@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) {

    .hero__verb {
      animation: heroZoomOut linear both;
      animation-timeline: view();
      animation-range: exit 0% exit 80%;
      transform-origin: left center;
      will-change: transform, opacity;
    }
    @keyframes heroZoomOut {
      0%   { transform: scale(1)    translateY(0);    opacity: 1; }
      100% { transform: scale(0.78) translateY(-40px); opacity: 0.25; }
    }

    .hero__meta {
      animation: metaFadeOut linear both;
      animation-timeline: view();
      animation-range: exit 0% exit 60%;
    }
    @keyframes metaFadeOut {
      0%   { opacity: 1; transform: translateY(0); }
      100% { opacity: 0.2; transform: translateY(-20px); }
    }

    .plate__title {
      animation: titleZoom linear both;
      animation-timeline: view();
      animation-range: entry 0% exit 100%;
      transform-origin: left center;
      will-change: transform, opacity;
    }
    @keyframes titleZoom {
      0%   { transform: scale(0.86); opacity: 0.5; }
      35%  { transform: scale(1);    opacity: 1; }
      65%  { transform: scale(1);    opacity: 1; }
      100% { transform: scale(0.92); opacity: 0.55; }
    }

    .plate-cvb .plate__title { transform-origin: left center; }

    .plate__lead {
      animation: leadDrift linear both;
      animation-timeline: view();
      animation-range: entry 0% cover 50%;
    }
    @keyframes leadDrift {
      0%   { transform: translateY(24px); opacity: 0; }
      100% { transform: translateY(0);    opacity: 1; }
    }

    .plate-ctg__block {
      animation: blockRise linear both;
      animation-timeline: view();
      animation-range: entry 10% cover 60%;
    }
    @keyframes blockRise {
      0%   { transform: scale(0.94) translateY(40px); opacity: 0; }
      100% { transform: scale(1)    translateY(0);    opacity: 1; }
    }

    .plate-cvb__stat .v {
      animation: statRise linear both;
      animation-timeline: view();
      animation-range: entry 0% cover 50%;
    }
    @keyframes statRise {
      0%   { transform: translateY(28px) scale(0.85); opacity: 0; }
      100% { transform: translateY(0)    scale(1);    opacity: 1; }
    }

    .plate-wb__portrait {
      animation: portraitDrift linear both;
      animation-timeline: view();
      animation-range: entry 0% exit 100%;
      transform-origin: center;
    }
    @keyframes portraitDrift {
      0%   { transform: scale(1.06) translateY(20px); }
      50%  { transform: scale(1)    translateY(0);    }
      100% { transform: scale(0.98) translateY(-20px); }
    }

    .plate-maker__portrait {
      animation: makerRise linear both;
      animation-timeline: view();
      animation-range: entry 0% cover 60%;
    }
    @keyframes makerRise {
      0%   { transform: translateY(32px) scale(0.97); opacity: 0; }
      100% { transform: translateY(0)    scale(1);    opacity: 1; }
    }

    footer .line {
      animation: footerFade linear both;
      animation-timeline: view();
      animation-range: entry 0% entry 100%;
      opacity: 0;
    }
    @keyframes footerFade {
      from { opacity: 0; transform: translateY(8px); }
      to   { opacity: 1; transform: translateY(0); }
    }
  }
}