/* AUTO-GENERATED by scope-css.py — do not edit. Source: animations.css */
/* ============================================================
   Van Lettering — motion layer (additive; does not alter styles.css)
   - Hero entrance stagger on load
   - Floating / pulsing accents
   - Hover lifts on cards & swatches
   - Scroll-reveal (classes are added by JS, so no-JS = fully visible)
   - Fully disabled under prefers-reduced-motion
   ============================================================ */

@media (prefers-reduced-motion: no-preference) {

  /* ---------- keyframes ---------- */
  @keyframes dhRise { from { opacity: 0; transform: translateY(18px); } to { opacity: 1; transform: none; } }
  @keyframes dhFade { from { opacity: 0; } to { opacity: 1; } }
  @keyframes dhFloat { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-9px); } }
  @keyframes dhPulseDot {
    0%, 100% { box-shadow: 0 0 0 0 color-mix(in oklab, var(--accent) 65%, transparent); }
    50%      { box-shadow: 0 0 0 7px color-mix(in oklab, var(--accent) 0%, transparent); }
  }
  @keyframes dhGlow {
    0%       { box-shadow: 0 0 0 0 color-mix(in oklab, var(--accent) 55%, transparent); }
    70%,100% { box-shadow: 0 0 0 18px color-mix(in oklab, var(--accent) 0%, transparent); }
  }

  /* ---------- hero entrance ---------- */
  .dh-vl-app .hero__eyebrow { animation: dhRise .7s cubic-bezier(.2,.7,.2,1) both; }
  .dh-vl-app .hero h1 { animation: dhRise .7s cubic-bezier(.2,.7,.2,1) .08s both; }
  .dh-vl-app .hero p.lede { animation: dhRise .7s cubic-bezier(.2,.7,.2,1) .16s both; }
  .dh-vl-app .hero__cta { animation: dhRise .7s cubic-bezier(.2,.7,.2,1) .24s both; }
  .dh-vl-app .hero__bullets { animation: dhRise .7s cubic-bezier(.2,.7,.2,1) .32s both; }
  .dh-vl-app .hero__visual { animation: dhFade 1s ease .15s both; }

  /* gentle life on the hero accents */
  .dh-vl-app .hero__price-tag { animation: dhFloat 4.5s ease-in-out infinite; }
  .dh-vl-app .hero__eyebrow .dot { animation: dhPulseDot 1.9s ease-in-out infinite; }

  /* primary CTA breathing glow (hero only) */
  .dh-vl-app .hero__cta .btn--primary { position: relative; }
  .dh-vl-app .hero__cta .btn--primary::after {
    content: ""; position: absolute; inset: 0; border-radius: inherit;
    pointer-events: none;
    animation: dhGlow 2.6s ease-out infinite;
  }

  /* ---------- scroll reveal (JS adds .dh-reveal / .dh-in) ---------- */
  .dh-vl-app .dh-reveal {
    opacity: 0; transform: translateY(22px);
    transition: opacity .6s cubic-bezier(.2,.7,.2,1), transform .6s cubic-bezier(.2,.7,.2,1);
    will-change: opacity, transform;
  }
  .dh-vl-app .dh-reveal.dh-in { opacity: 1; transform: none; }

  /* ---------- hover micro-interactions ---------- */
  .dh-vl-app .pkg { transition: transform .18s ease, border-color .18s ease, box-shadow .18s ease; }
  .dh-vl-app .pkg:hover { box-shadow: var(--shadow); }
  .dh-vl-app .pkg__viz { transition: transform .18s ease; }
  .dh-vl-app .pkg:hover .pkg__viz { transform: translateY(-2px); }

  .dh-vl-app .side-card, .dh-vl-app .preset-card, .dh-vl-app .size-card {
    transition: border-color .15s ease, background .15s ease, transform .15s ease, box-shadow .15s ease;
  }
  .dh-vl-app .side-card:hover, .dh-vl-app .preset-card:hover, .dh-vl-app .size-card:hover {
    transform: translateY(-2px); box-shadow: var(--shadow-sm);
  }

  .dh-vl-app .swatch { transition: transform .12s ease; }
  .dh-vl-app .swatch:hover { transform: scale(1.09); z-index: 1; }

  .dh-vl-app .trust__cell .ic { transition: transform .25s ease; }
  .dh-vl-app .trust__cell:hover .ic { transform: translateY(-3px) rotate(-5deg); }

  .dh-vl-app .bundles button, .dh-vl-app .preview-side-switch button { transition: transform .12s ease, color .15s ease, background .15s ease, border-color .15s ease; }
  .dh-vl-app .bundles button:hover { transform: translateY(-1px); }

  /* primary buttons everywhere get a small lift */
  .dh-vl-app .btn--primary { transition: transform .12s ease, filter .15s ease, box-shadow .15s ease; }
  .dh-vl-app .btn--primary:hover { transform: translateY(-1px); box-shadow: var(--shadow); }

  /* opening a builder step / FAQ answer fades its body in */
  .dh-vl-app .step.is-active .step__body { animation: dhRise .32s ease both; }
  .dh-vl-app .faq__item.is-open .faq__a { animation: dhFade .3s ease both; }
}

/* ---------- reduced motion: hold everything still ---------- */
@media (prefers-reduced-motion: reduce) {
  .dh-vl-app .dh-reveal { opacity: 1 !important; transform: none !important; transition: none !important; }
}