/*
 * PLATINUM MOTION SYSTEM — Component 8 (CSS)
 * ============================================================
 * All animation keyframes and timing tokens in one place.
 * Centralizing motion prevents drift between components and
 * makes prefers-reduced-motion easy to enforce globally.
 *
 * TIMING TOKENS
 * -------------
 * --pt-dur-fast:    150ms  — micro-interactions (hover, press)
 * --pt-dur-base:    300ms  — standard UI transitions
 * --pt-dur-reveal:  400ms  — scroll reveals (max per criteria)
 * --pt-dur-count:   1400ms — stat counter animation
 *
 * EASING TOKENS
 * -------------
 * --pt-ease-out:    cubic-bezier(0.16, 1, 0.3, 1)
 *   Fast-start, settles naturally. Use for reveals and entrances.
 *
 * --pt-ease-in-out: cubic-bezier(0.45, 0, 0.55, 1)
 *   Symmetric. Use for carousels, sliding panels.
 *
 * --pt-ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1)
 *   Slight overshoot. Use sparingly (button press, badge pop).
 *
 * SCROLL REVEAL SYSTEM
 * --------------------
 * .pt-reveal           — fade + translateY(20px) up on enter
 * .pt-reveal--image    — fade only (no translate; avoids layout shift)
 * .pt-reveal--stat     — fade only (count-up handled by JS)
 * .pt-reveal--delay-1  — stagger +80ms
 * .pt-reveal--delay-2  — stagger +160ms
 * .pt-reveal--delay-3  — stagger +240ms
 * .pt-revealed         — final visible state (added by JS)
 *
 * HERO ENTRANCE SYSTEM
 * --------------------
 * .pt-hero-entrance    — staggered translateY(16px) → 0 on load
 *   JS sets stagger delay per element index (i * 80ms).
 *   Duration: 400ms. Runs once on DOMContentLoaded.
 *
 * PREFERS-REDUCED-MOTION
 * ----------------------
 * The @media block at the bottom disables ALL transitions and
 * animations when the user has requested reduced motion.
 * Elements that would animate simply appear at their final state.
 * ============================================================
 */

/* ---- Timing tokens ------------------------------------------------------ */
:root {
  --pt-dur-fast:    150ms;
  --pt-dur-base:    300ms;
  --pt-dur-reveal:  400ms;
  --pt-dur-count:   1400ms;

  --pt-ease-out:    cubic-bezier(0.16, 1, 0.3, 1);
  --pt-ease-in-out: cubic-bezier(0.45, 0, 0.55, 1);
  --pt-ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);
}

/* ---- Scroll reveal: initial hidden state ------------------------------- */
.pt-reveal {
  opacity: 0;
  transform: translateY(20px);
  transition:
    opacity    var(--pt-dur-reveal) var(--pt-ease-out),
    transform  var(--pt-dur-reveal) var(--pt-ease-out);
  will-change: opacity, transform;
}

/* Stagger delays */
.pt-reveal.pt-reveal--delay-1 { transition-delay: 80ms; }
.pt-reveal.pt-reveal--delay-2 { transition-delay: 160ms; }
.pt-reveal.pt-reveal--delay-3 { transition-delay: 240ms; }

/* Final visible state */
.pt-reveal.pt-revealed {
  opacity: 1;
  transform: translateY(0);
}

/* Image reveals: no translate (avoids layout shift on images) */
.pt-reveal--image {
  opacity: 0;
  transform: none;
  transition: opacity var(--pt-dur-reveal) var(--pt-ease-out);
  will-change: opacity;
}
.pt-reveal--image.pt-revealed { opacity: 1; }

/* Stat: fade only — JS handles count-up separately */
.pt-reveal--stat {
  opacity: 0;
  transition: opacity var(--pt-dur-base) var(--pt-ease-out);
}
.pt-reveal--stat.pt-revealed { opacity: 1; }

/* ---- Keyframes ---------------------------------------------------------- */

/* Bounce — used by scroll indicator */
@keyframes pt-bounce {
  0%, 100% { transform: translateY(0);    opacity: 0.35; }
  50%       { transform: translateY(7px); opacity: 0.65; }
}

/* Fade in — generic */
@keyframes pt-fade-in {
  from { opacity: 0; }
  to   { opacity: 1; }
}

/* Slide up — for modals, drawers, toasts */
@keyframes pt-slide-up {
  from { opacity: 0; transform: translateY(24px) scale(0.97); }
  to   { opacity: 1; transform: translateY(0)    scale(1);    }
}

/* Pulse ring — for attention-seeking elements (use sparingly) */
@keyframes pt-pulse {
  0%   { box-shadow: 0 0 0 0   rgba(200,132,26,0.3); }
  70%  { box-shadow: 0 0 0 8px rgba(200,132,26,0);   }
  100% { box-shadow: 0 0 0 0   rgba(200,132,26,0);   }
}

/* Count-up: no keyframe needed — handled in platinum-motion.js */

/* ---- Button micro-interactions ----------------------------------------- */
.pt-btn {
  transition:
    transform    var(--pt-dur-fast) var(--pt-ease-out),
    box-shadow   var(--pt-dur-fast) var(--pt-ease-out),
    background   var(--pt-dur-fast) ease,
    border-color var(--pt-dur-fast) ease;
}
.pt-btn:hover  { transform: scale(1.02); }
.pt-btn:active { transform: scale(0.99); }

/* Primary button lift */
.pt-btn--primary:hover {
  box-shadow: 0 4px 16px rgba(200,132,26,0.35);
}

/* ---- Card hover lift ---------------------------------------------------- */
.pt-card {
  transition:
    box-shadow var(--pt-dur-base) var(--pt-ease-out),
    transform  var(--pt-dur-base) var(--pt-ease-out);
}
.pt-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 8px 24px rgba(18,23,28,0.1);
}

/* ---- Link arrow slide --------------------------------------------------- */
.pt-arrow-link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  transition: gap var(--pt-dur-fast) ease;
}
.pt-arrow-link::after { content: '→'; }
.pt-arrow-link:hover  { gap: 10px; }

/* ---- Concierge panel entrance ------------------------------------------ */
.pt-modal-enter {
  animation: pt-slide-up 320ms var(--pt-ease-out) both;
}

/* ---- Scroll indicator bounce ------------------------------------------- */
.pt-scroll-bounce {
  animation: pt-bounce 2.4s var(--pt-ease-in-out) infinite;
}

/* ---- Attention pulse (use max once per page) --------------------------- */
.pt-pulse {
  animation: pt-pulse 2s ease infinite;
}

/* =========================================================
   PREFERS-REDUCED-MOTION
   Disable ALL animations and transitions when the user
   has opted out of motion. Elements appear at their final
   state instantly — no flicker, no invisible content.
   ========================================================= */
@media (prefers-reduced-motion: reduce) {

  /* Kill all reveal transitions */
  .pt-reveal,
  .pt-reveal--image,
  .pt-reveal--stat {
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
    will-change: auto !important;
  }

  /* Kill all button transitions */
  .pt-btn {
    transition: none !important;
  }
  .pt-btn:hover,
  .pt-btn:active {
    transform: none !important;
  }

  /* Kill all card hover motion */
  .pt-card {
    transition: box-shadow var(--pt-dur-fast) ease !important;
  }
  .pt-card:hover {
    transform: none !important;
  }

  /* Kill all keyframe animations */
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}