/* ============================================================
   CASSAVONA v2 — Motion layer (all gated by html.js + reduced-motion)
   ============================================================ */
@layer motion {

  /* ---------- Flagship: listing "develops" + address-stamp prints on ---------- */
  /* The frame itself stays put; its photo clip-wipes up and the stamp prints. */
  html.js .keyline[data-reveal]{opacity:1!important;transform:none!important;transition:none}
  html.js .keyline[data-reveal] .keyline__win img{
    clip-path:inset(0 0 100% 0);
    transition:clip-path 900ms var(--ease) 140ms;
  }
  html.js .keyline[data-reveal].is-in .keyline__win img{clip-path:inset(0 0 0 0)}
  /* stamps print on, a beat later, mechanically */
  html.js .keyline[data-reveal] .stamp--overlay,
  html.js .keyline[data-reveal] .stamp--tag{
    clip-path:inset(0 100% 0 0);transition:clip-path 520ms steps(16) 820ms;
  }
  html.js .keyline[data-reveal].is-in .stamp--overlay,
  html.js .keyline[data-reveal].is-in .stamp--tag{clip-path:inset(0 0 0 0)}

  /* ---------- Hero Ken-Burns drift on the active crossfade slide ---------- */
  html.js .hero__slide.is-active{animation:kenburns 5s var(--ease) both}
  @keyframes kenburns{from{transform:scale(1.015)}to{transform:scale(1.05)}}

  /* ---------- Address-stamp typewriter (hero, JS-measured --n) ---------- */
  html.js .type-stamp{display:inline-block;overflow:hidden;white-space:nowrap;vertical-align:bottom;
    max-width:0;border-right:.5em solid transparent}
  html.js .type-stamp.is-typed{max-width:44ch;border-right-color:transparent;
    transition:max-width calc(var(--n,24)*42ms) steps(var(--n,24)) var(--ease)}

  /* ---------- Parallax (desktop only, subtle) ---------- */
  html.js [data-parallax]{transform:translate3d(0,var(--py,0px),0)}
  @media (max-width:64rem){html.js [data-parallax]{transform:none!important}}

  /* ---------- Count-up: nothing needed (final value ships in HTML) ---------- */

  @media (prefers-reduced-motion:reduce){
    html.js .keyline[data-reveal] .keyline__win img,
    html.js .keyline[data-reveal]::before,
    html.js .keyline[data-reveal] .stamp--overlay,
    html.js .keyline[data-reveal] .stamp--tag{clip-path:none!important;transition:none!important}
    html.js .hero__slide.is-active{animation:none!important}
    html.js .type-stamp{max-width:none!important;overflow:visible;border:0}
    .marquee__track{animation:none!important}
  }
}