/* ===== Impeccable Animation System =====
 * Easing only: ease-out-quart/quint/expo (NO bounce/elastic)
 * GPU only: transform + opacity (NO layout properties)
 * Respects: prefers-reduced-motion
 */

/* ---- Easing Variables ---- */
:root {
  --ease-out-quart: cubic-bezier(0.25, 1, 0.5, 1);
  --ease-out-quint: cubic-bezier(0.22, 1, 0.36, 1);
  --ease-out-expo:  cubic-bezier(0.16, 1, 0.3, 1);

  --dur-instant: 120ms;
  --dur-fast:    220ms;
  --dur-normal:  320ms;
  --dur-entrance:550ms;
}

/* ========================================
   ENTRANCE ANIMATIONS (page load)
   ======================================== */

/* Base: hidden before JS reveals */
.anim-reveal {
  opacity: 0;
  transform: translateY(32px);
  transition: opacity var(--dur-entrance) var(--ease-out-quart),
              transform var(--dur-entrance) var(--ease-out-quart);
}
.anim-reveal.visible {
  opacity: 1;
  transform: translateY(0);
}

/* Hero sequence */
.anim-fade-in {
  opacity: 0;
  animation: fadeIn var(--dur-entrance) var(--ease-out-quart) forwards;
}
@keyframes fadeIn { to { opacity: 1; } }

.anim-slide-up {
  opacity: 0;
  animation: slideUp var(--dur-entrance) var(--ease-out-expo) forwards;
}
@keyframes slideUp {
  from { opacity: 0; transform: translateY(40px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* Staggered reveals for lists / grids */
.anim-stagger > * {
  opacity: 0;
  transform: translateY(24px);
}
.anim-stagger.revealed > * {
  animation: staggerReveal var(--dur-entrance) var(--ease-out-quart) forwards;
}
.anim-stagger.revealed > *:nth-child(1) { animation-delay: 0ms; }
.anim-stagger.revealed > *:nth-child(2) { animation-delay: 80ms; }
.anim-stagger.revealed > *:nth-child(3) { animation-delay: 160ms; }
.anim-stagger.revealed > *:nth-child(4) { animation-delay: 240ms; }
.anim-stagger.revealed > *:nth-child(5) { animation-delay: 320ms; }
.anim-stagger.revealed > *:nth-child(6) { animation-delay: 400ms; }
.anim-stagger.revealed > *:nth-child(7) { animation-delay: 480ms; }
.anim-stagger.revealed > *:nth-child(8) { animation-delay: 560ms; }

@keyframes staggerReveal {
  to { opacity: 1; transform: translateY(0); }
}

/* ========================================
   MICRO-INTERACTIONS
   ======================================== */

/* ------- Buttons ------- */
.cta-btn, .btn-primary, .btn-ghost, .form-submit {
  transition:
    transform var(--dur-instant) var(--ease-out-quart),
    background var(--dur-fast) var(--ease-out-quart),
    box-shadow var(--dur-fast) var(--ease-out-quart),
    color var(--dur-fast) var(--ease-out-quart);
}
.cta-btn:hover, .btn-primary:hover, .form-submit:hover {
  transform: scale(1.04);
  box-shadow: 0 4px 16px rgba(217,119,6,0.25);
}
.cta-btn:active, .btn-primary:active, .form-submit:active {
  transform: scale(0.96);
  transition-duration: 80ms;
}
.btn-ghost:hover {
  transform: scale(1.03);
  box-shadow: 0 2px 10px rgba(217,119,6,0.10);
}
.btn-ghost:active {
  transform: scale(0.97);
  transition-duration: 80ms;
}

/* ------- Nav Links ------- */
.nav-links a {
  position: relative;
  transition: color var(--dur-fast) var(--ease-out-quart);
}
.nav-links a::after {
  content: '';
  position: absolute; bottom: -4px; left: 0; right: 0;
  height: 2px; background: var(--amber);
  transform: scaleX(0);
  transition: transform var(--dur-fast) var(--ease-out-quart);
  transform-origin: left center;
}
.nav-links a:hover::after,
.nav-links a.active::after {
  transform: scaleX(1);
}

/* ------- Cards (benefit / wiki / step / timeline / info) ------- */
.benefit-card, .wiki-card, .step-card, .t-card, .info-card, .contact-side {
  transition:
    transform var(--dur-fast) var(--ease-out-quart),
    box-shadow var(--dur-fast) var(--ease-out-quart),
    border-color var(--dur-fast) var(--ease-out-quart);
}
.benefit-card:hover, .wiki-card:hover, .step-card:hover,
.t-card:hover, .info-card:hover, .contact-side:hover {
  transform: translateY(-3px);
  box-shadow: 0 8px 24px rgba(28,25,23,0.08);
  border-color: var(--amber);
}

/* ------- Store cards (stores page) ------- */
.card {
  transition:
    background var(--dur-instant) var(--ease-out-quart),
    transform var(--dur-fast) var(--ease-out-quart),
    box-shadow var(--dur-fast) var(--ease-out-quart);
}
.card:hover {
  transform: translateX(4px);
  box-shadow: -2px 0 8px rgba(28,25,23,0.04);
}

/* ------- Timeline cards ------- */
.t-card:hover .t-year {
  transform: scale(1.15);
}
.t-year {
  transition: transform var(--dur-fast) var(--ease-out-expo);
}

/* ------- Form inputs ------- */
.form-group input,
.form-group textarea,
.form-group select {
  transition:
    border-color var(--dur-fast) var(--ease-out-quart),
    box-shadow var(--dur-fast) var(--ease-out-quart),
    background var(--dur-instant) var(--ease-out-quart);
}
.form-group input:focus,
.form-group textarea:focus,
.form-group select:focus {
  box-shadow: 0 0 0 3px rgba(217,119,6,0.12);
  background: #fffdf9;
}

/* ------- Footer links ------- */
.footer-col a {
  transition:
    color var(--dur-fast) var(--ease-out-quart),
    transform var(--dur-fast) var(--ease-out-quart);
  display: inline-block;
}
.footer-col a:hover {
  color: var(--amber);
  transform: translateX(3px);
}

/* ========================================
   STICKY NAV STATE TRANSITION
   ======================================== */
.nav {
  transition: box-shadow var(--dur-fast) var(--ease-out-quart);
}
.nav.scrolled {
  box-shadow: 0 1px 8px rgba(28,25,23,0.06);
}

/* ========================================
   SCROLL-REVEAL (Intersection Observer)
   ======================================== */

/* Base: hidden before JS reveals */
.scroll-reveal {
  opacity: 0;
  transform: translateY(32px);
  transition:
    opacity 600ms var(--ease-out-quart),
    transform 600ms var(--ease-out-quart);
}
.scroll-reveal.revealed {
  opacity: 1;
  transform: translateY(0);
}

/* Section headers reveal slightly differently */
.section-header.scroll-reveal {
  transition-delay: 80ms;
}

/* ========================================
   TIMELINE DIRECTIONAL REVEAL
   ======================================== */
.v-tl-item.scroll-reveal {
  opacity: 0;
  transition:
    opacity 700ms var(--ease-out-expo),
    transform 700ms var(--ease-out-expo);
}
/* Left items slide from left, right items slide from right */
.v-tl-item.left.scroll-reveal  { transform: translateX(-60px); }
.v-tl-item.right.scroll-reveal { transform: translateX(60px); }
.v-tl-item.scroll-reveal.revealed {
  opacity: 1;
  transform: translateX(0);
}

/* Center line fills progressively (via JS) */
.v-timeline::after {
  content: ""; position: absolute;
  left: 50%; top: 0;
  width: 3px; height: 100%;
  background: linear-gradient(to bottom,
    var(--amber) var(--tl-fill, 0%),
    #e5e5e2 var(--tl-fill, 0%));
  transform: translateX(-50%);
  pointer-events: none; z-index: 1;
  border-radius: 2px;
}

/* Dot pulse when revealed */
.v-tl-item .v-tl-card {
  transition:
    transform 350ms var(--ease-out-expo),
    box-shadow 400ms var(--ease-out-expo),
    border-color 350ms var(--ease-out-quart);
}
.v-tl-item.revealed .v-tl-card {
  box-shadow: 0 4px 16px rgba(28,25,23,0.06);
}
.v-tl-item.revealed .v-tl-card:hover {
  transform: translateY(-3px);
  box-shadow: 0 8px 24px rgba(28,25,23,0.1);
  border-color: var(--amber);
}
/* Dots fill with color when revealed */
.v-tl-item::before { transition: background 500ms var(--ease-out-expo); }
.v-tl-item.revealed::before { background: var(--amber); }

@media (max-width: 768px) {
  /* On mobile, all items slide from left */
  .v-tl-item.left.scroll-reveal,
  .v-tl-item.right.scroll-reveal { transform: translateX(-30px); }
  .v-timeline::after { left: 20px; transform: none; }
}

/* ========================================
   REDUCED MOTION
   ======================================== */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
  .anim-reveal, .anim-fade-in, .anim-slide-up, .anim-stagger > *,
  .scroll-reveal { opacity: 1; transform: none; }
}