/* Reveal movement is independent of hover transforms and does not change layout. */
@keyframes hero-enter {
  from { opacity: .35; translate: 0 14px; }
  to { opacity: 1; translate: 0 0; }
}

@keyframes content-reveal {
  from { opacity: 0; translate: 0 18px; }
  to { opacity: 1; translate: 0 0; }
}

@media (prefers-reduced-motion: no-preference) {
  [data-enter] {
    animation: hero-enter 650ms cubic-bezier(.22, 1, .36, 1) var(--enter-delay, 0ms) backwards;
  }
  [data-enter="demo"] { --enter-delay: 140ms; }
  [data-reveal="pending"] { opacity: 0; translate: 0 18px; }
  [data-reveal="visible"] {
    animation: content-reveal 600ms cubic-bezier(.22, 1, .36, 1) var(--reveal-delay, 0ms) backwards;
  }

  .button, .header-cta {
    transition: transform 220ms ease, background-color 220ms ease,
      border-color 220ms ease, box-shadow 220ms ease, color 220ms ease;
  }
  .button > span, .guide-link > span, .brand img {
    transition: transform 260ms cubic-bezier(.22, 1, .36, 1);
  }
  .button:active, .header-cta:active { transform: translateY(1px) scale(.985); }
  .button:focus-visible > span, .guide-link:focus-visible > span { transform: translate(2px, -2px); }

  .nav a { position: relative; }
  .nav a::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: -6px;
    height: 1px;
    background: var(--amber);
    transform: scaleX(0);
    transform-origin: left;
    transition: transform 240ms ease;
  }
  .nav a:focus-visible::after { transform: scaleX(1); }

  .example-card {
    transition: transform 280ms cubic-bezier(.22, 1, .36, 1),
      border-color 280ms ease, box-shadow 280ms ease;
  }
  .price-card { transition: border-color 260ms ease, box-shadow 260ms ease; }
  .format-list > * { transition: border-color 220ms ease, background-color 220ms ease; }
  .guide-link { transition: color 200ms ease, border-color 200ms ease; }
  .demo-tabs button { transition: color 180ms ease, background-color 180ms ease; }
  .faq summary { transition: color 220ms ease; }
  .faq-icon::after { transition: transform 280ms cubic-bezier(.22, 1, .36, 1), opacity 200ms ease; }
}

/* Hover feedback only where a real pointer is available. */
@media (hover: hover) and (pointer: fine) and (prefers-reduced-motion: no-preference) {
  .button:hover, .header-cta:hover { transform: translateY(-2px); }
  .button:not(.secondary):hover { box-shadow: 0 7px 24px #ffb34026; }
  .button:hover > span, .guide-link:hover > span { transform: translate(2px, -2px); }
  .brand:hover img { transform: rotate(-5deg) scale(1.04); }
  .nav a:hover::after { transform: scaleX(1); }
  .example-card:hover { transform: translateY(-5px); box-shadow: 0 12px 30px #0003; }
  .price-card:hover { border-color: #a08252; box-shadow: 0 10px 28px #0002; }
  .format-list > :hover { border-color: #a08252; background: #ffb34009; }
  .guide-link:hover { border-color: #947141; }
}

@media (hover: none), (pointer: coarse) {
  .example-card:hover { transform: none; }
}

/* Pending reveals remain readable when motion is disabled or when printing. */
@media (prefers-reduced-motion: reduce) {
  [data-reveal], [data-enter] { opacity: 1 !important; translate: none !important; animation: none !important; }
  .example-card:hover { transform: none; }
}
@media print {
  [data-reveal], [data-enter] { opacity: 1 !important; translate: none !important; animation: none !important; }
}