/* ===================================================================
   Clock 'N' Compass — motion system (Pass 2B refined)

   Every rule is gated inside @media (prefers-reduced-motion: no-preference).
   With reduced motion enabled:
     — page is immediately fully visible
     — .reveal elements appear instantly
     — no transforms on hover
     — no floating animations
     — no FAQ transitions
     — no View Transition effects
     — modal appears instantly

   Properties used: opacity and transform only.
   Easing palette:
     --ease-spring : cubic-bezier(0.16, 1, 0.3, 1)  — entrances, nav, modals
     --ease-out    : cubic-bezier(0.2, 0.7, 0.2, 1)  — scroll reveals
     --ease-hover  : cubic-bezier(0.34, 1.56, 0.64, 1) — card/CTA hover (micro-spring)
     --ease-close  : cubic-bezier(0.4, 0, 0.6, 1)   — exits, closes
   =================================================================== */

/* ---- 1. Page entrance — softer, slower full-page fade on load ---- */
/*
  CSS-only: body starts at opacity:0 because this stylesheet is render-blocking.
  Slower duration creates a more premium, unhurried first impression.
*/
@media (prefers-reduced-motion: no-preference) {
  body {
    animation: cnc-page-enter 0.8s cubic-bezier(0.2, 0.7, 0.2, 1) both;
  }
  @keyframes cnc-page-enter {
    from { opacity: 0; }
    to   { opacity: 1; }
  }
}

/* ---- 2. Nav entrance — slides down first, premium spring ---- */
/*
  Nav enters first (0.1s delay) and slightly further down (-22px vs -18px).
  Slower spring (0.85s) reads as deliberate and settled.
*/
@media (prefers-reduced-motion: no-preference) {
  nav.cnc-mainnav {
    animation: cnc-nav-enter 0.85s cubic-bezier(0.16, 1, 0.3, 1) both;
    animation-delay: 0.1s;
  }
  @keyframes cnc-nav-enter {
    from { transform: translate(-50%, -22px); }
    to   { transform: translate(-50%, 0); }
  }
}

/* ---- 3. Scroll reveal — stagger for grid cards ---- */
/*
  Applies incremental transition-delay to siblings in a .grid so they
  cascade in left-to-right as they enter the viewport.
*/
@media (prefers-reduced-motion: no-preference) {
  .grid > .reveal:nth-child(2) { transition-delay: 80ms; }
  .grid > .reveal:nth-child(3) { transition-delay: 160ms; }
  .grid > .reveal:nth-child(4) { transition-delay: 240ms; }
}

/* ---- 4. Card hover lift — spring micro-animation ---- */
/*
  Overrides cnc-site.css .reveal transform transition with a spring curve
  so hover is snappy. 0.4s base keeps scroll-reveal transform smooth.
  The :hover override uses the spring curve (slight overshoot on -5px).
*/
@media (prefers-reduced-motion: no-preference) {
  article.reveal {
    transition:
      opacity 0.7s cubic-bezier(0.2, 0.7, 0.2, 1),
      transform 0.4s cubic-bezier(0.2, 0.7, 0.2, 1);
  }
  article.reveal:hover {
    transform: translateY(-5px);
    transition: transform 0.25s cubic-bezier(0.34, 1.56, 0.64, 1);
  }
}

/* ---- 5. FAQ smooth open/close ---- */
/*
  Open: CSS animation plays automatically when <details> receives [open].
  Close: cnc-motion.js adds .cnc-closing, waits for animationend, then
  removes [open]. This avoids height-animation complexity entirely.
*/
@media (prefers-reduced-motion: no-preference) {
  details[open] > :not(summary) {
    animation: cnc-details-open 0.3s cubic-bezier(0.16, 1, 0.3, 1) both;
  }
  details.cnc-closing > :not(summary) {
    animation: cnc-details-close 0.22s cubic-bezier(0.4, 0, 0.6, 1) both;
  }
  @keyframes cnc-details-open {
    from { opacity: 0; transform: translateY(-10px); }
    to   { opacity: 1; transform: translateY(0); }
  }
  @keyframes cnc-details-close {
    from { opacity: 1; transform: translateY(0); }
    to   { opacity: 0; transform: translateY(-6px); }
  }
}

/* ---- 6. Payment modal entrance ---- */
/*
  Applied to dialog#payment-modal[open] when the native <dialog> opens.
  Also kept for .pm-panel fallback.
*/
@media (prefers-reduced-motion: no-preference) {
  dialog#payment-modal[open],
  .pm-panel {
    animation: cnc-modal-enter 0.42s cubic-bezier(0.16, 1, 0.3, 1) both;
  }
  @keyframes cnc-modal-enter {
    from { opacity: 0; transform: translateY(22px); }
    to   { opacity: 1; transform: translateY(0); }
  }
}

/* ---- 7. View Transition API — same-site cross-page fades ---- */
/*
  Progressive enhancement. cnc-motion.js intercepts qualifying .html link
  clicks and wraps navigation in document.startViewTransition().
  Graceful fallback: absent API → normal navigation.
*/
@media (prefers-reduced-motion: no-preference) {
  ::view-transition-old(root) {
    animation: 0.18s cubic-bezier(0.4, 0, 0.6, 1) both cnc-vt-out;
  }
  ::view-transition-new(root) {
    animation: 0.32s cubic-bezier(0.16, 1, 0.3, 1) both cnc-vt-in;
  }
  @keyframes cnc-vt-out {
    to   { opacity: 0; }
  }
  @keyframes cnc-vt-in {
    from { opacity: 0; }
  }
}

@media (prefers-reduced-motion: reduce) {
  ::view-transition-old(root),
  ::view-transition-new(root) {
    animation: none;
  }
}

/* ---- 8. Hero element stagger — slower, more premium cascade ---- */
/*
  Nav enters at 0.1s. Hero stagger starts at 0.28s so headline always
  follows the settled nav. Each child steps 160ms apart.
  Duration 0.78s with spring easing feels deliberate.
*/
@media (prefers-reduced-motion: no-preference) {
  .hero-stagger > * {
    animation: cnc-hero-in 0.78s cubic-bezier(0.16, 1, 0.3, 1) both;
  }
  .hero-stagger > *:nth-child(1) { animation-delay: 0.28s; }
  .hero-stagger > *:nth-child(2) { animation-delay: 0.44s; }
  .hero-stagger > *:nth-child(3) { animation-delay: 0.60s; }
  .hero-stagger > *:nth-child(4) { animation-delay: 0.75s; }
  .hero-stagger > *:nth-child(5) { animation-delay: 0.90s; }
  @keyframes cnc-hero-in {
    from { opacity: 0; transform: translateY(18px); }
    to   { opacity: 1; transform: translateY(0); }
  }

  /* Hero visual enters after CTA, with a longer, softer arc */
  .hero-visual-enter {
    animation: cnc-hero-in 0.9s cubic-bezier(0.16, 1, 0.3, 1) both;
    animation-delay: 0.72s;
  }
}

/* ---- 9. Section reveal — tighter stagger for card grids ---- */
@media (prefers-reduced-motion: no-preference) {
  .grid > .reveal:nth-child(1) { transition-delay: 0ms; }
  .grid > .reveal:nth-child(2) { transition-delay: 90ms; }
  .grid > .reveal:nth-child(3) { transition-delay: 180ms; }
  .grid > .reveal:nth-child(4) { transition-delay: 270ms; }
  .grid > .reveal:nth-child(5) { transition-delay: 360ms; }
  .grid > .reveal:nth-child(6) { transition-delay: 450ms; }
}

/* ---- 10. Selected pricing card soft pulse on arrival ---- */
@media (prefers-reduced-motion: no-preference) {
  .plan-selected {
    animation: cnc-plan-select 0.5s cubic-bezier(0.16, 1, 0.3, 1) both;
    animation-delay: 0.3s;
  }
  @keyframes cnc-plan-select {
    from { outline-offset: 10px; opacity: 0.7; }
    to   { outline-offset: 3px;  opacity: 1; }
  }
}