/* SIM motion polish — extends --ease from site.css. GPU props only. */

:root {
  --motion-press: 160ms;
  --motion-panel: 280ms;
  --motion-panel-out: 200ms;
  --motion-crossfade-out: 180ms;
  --motion-crossfade-in: 200ms;
  --motion-morph: 200ms;
  --ease-drawer: cubic-bezier(0.32, 0.72, 0, 1);
}

/* ——— #1 Press feedback ——— */
.btn,
.menu-toggle,
.tab-btn,
.faq-header,
.filter-btn,
.lightbox-video-nav,
.close-modal-btn,
.offer-dialog-close,
.lightbox-close {
  transition:
    transform var(--motion-press) var(--ease),
    box-shadow var(--motion-press) var(--ease),
    background 0.2s var(--ease),
    color 0.2s var(--ease),
    filter var(--motion-morph) var(--ease),
    opacity var(--motion-morph) var(--ease);
}

.btn:active,
.menu-toggle:active,
.tab-btn:active,
.faq-header:active,
.filter-btn:active,
.lightbox-video-nav:active,
.close-modal-btn:active,
.offer-dialog-close:active,
.lightbox-close:active {
  transform: scale(0.97);
}

@media (hover: hover) and (pointer: fine) {
  .btn-primary:hover:active,
  .btn-gold:hover:active,
  .past-action-btn:hover:active {
    transform: translateY(-1px) scale(0.97);
  }
}

/* ——— #2 Contact success morph ——— */
.btn.is-morphing {
  filter: blur(2px);
  opacity: 0.7;
  pointer-events: none;
}

.btn.is-success {
  background: var(--green);
  color: var(--paper);
  box-shadow: 0 6px 0 -1px var(--green-d), 0 10px 24px -8px rgba(26, 138, 79, 0.45);
}

/* ——— #3 Modal panel enter / exit ——— */
/* Exclude offer-dialog — it already owns enter/exit keyframes */
.modal-overlay.active:not(.offer-dialog-overlay) .modal-content {
  animation: sim-panel-in var(--motion-panel) var(--ease) both;
}

.modal-overlay.is-closing:not(.offer-dialog-overlay) {
  display: flex !important;
  animation: sim-backdrop-out var(--motion-panel-out) var(--ease) both;
}

.modal-overlay.is-closing:not(.offer-dialog-overlay) .modal-content {
  animation: sim-panel-out var(--motion-panel-out) var(--ease) both;
}

/* ——— #4 Lightbox panel enter / exit ——— */
.lightbox-overlay.active .lightbox-content {
  animation: sim-panel-in var(--motion-panel) var(--ease) both;
}

.lightbox-overlay.is-closing {
  display: flex !important;
  animation: sim-backdrop-out var(--motion-panel-out) var(--ease) both;
}

.lightbox-overlay.is-closing .lightbox-content {
  animation: sim-panel-out var(--motion-panel-out) var(--ease) both;
}

/* ——— #5 Lightbox media crossfade ——— */
.lightbox-media-box {
  transition:
    opacity var(--motion-crossfade-out) var(--ease),
    transform var(--motion-crossfade-out) var(--ease);
}

.lightbox-media-box.is-exiting {
  opacity: 0;
  transform: scale(0.97);
}

.lightbox-media-box.is-entering {
  opacity: 0;
  transform: scale(0.97);
}

.lightbox-media-box.is-entered {
  opacity: 1;
  transform: scale(1);
  transition:
    opacity var(--motion-crossfade-in) var(--ease),
    transform var(--motion-crossfade-in) var(--ease);
}

@keyframes sim-panel-in {
  from {
    opacity: 0;
    transform: scale(0.96);
  }
  to {
    opacity: 1;
    transform: scale(1);
  }
}

@keyframes sim-panel-out {
  from {
    opacity: 1;
    transform: scale(1);
  }
  to {
    opacity: 0;
    transform: scale(0.97);
  }
}

@keyframes sim-backdrop-out {
  from {
    opacity: 1;
  }
  to {
    opacity: 0;
  }
}

@media (prefers-reduced-motion: reduce) {
  .btn:active,
  .menu-toggle:active,
  .tab-btn:active,
  .faq-header:active,
  .filter-btn:active,
  .lightbox-video-nav:active,
  .close-modal-btn:active,
  .offer-dialog-close:active,
  .lightbox-close:active,
  .btn-primary:hover:active,
  .btn-gold:hover:active,
  .past-action-btn:hover:active {
    transform: none;
  }

  .btn.is-morphing {
    filter: none;
    opacity: 0.85;
  }

  .modal-overlay.active:not(.offer-dialog-overlay) .modal-content,
  .lightbox-overlay.active .lightbox-content,
  .modal-overlay.is-closing:not(.offer-dialog-overlay),
  .modal-overlay.is-closing:not(.offer-dialog-overlay) .modal-content,
  .lightbox-overlay.is-closing,
  .lightbox-overlay.is-closing .lightbox-content {
    animation: none;
  }

  .lightbox-media-box,
  .lightbox-media-box.is-exiting,
  .lightbox-media-box.is-entering,
  .lightbox-media-box.is-entered {
    transition: none;
    transform: none;
    opacity: 1;
  }
}

/* =====================================================================
   improve-animations plans 001–009 (overrides site.css)
   ===================================================================== */

/* ——— 001 — kill transition:all (+ 008 header pin) ——— */
header {
  transition:
    background 280ms var(--ease),
    box-shadow 280ms var(--ease),
    border-color 280ms var(--ease);
}

.dropdown-menu {
  transition:
    opacity 200ms var(--ease),
    transform 200ms var(--ease),
    visibility 200ms var(--ease);
}

.tab-btn,
.filter-btn,
.leaderboard-tab-btn,
.category-option-card {
  transition:
    background 200ms var(--ease),
    color 200ms var(--ease),
    border-color 200ms var(--ease),
    box-shadow 200ms var(--ease),
    transform 160ms var(--ease);
}

.stat-card,
.kit-card,
.expo-attraction-card,
.sponsor-card {
  transition:
    transform 200ms var(--ease),
    background 200ms var(--ease),
    border-color 200ms var(--ease),
    box-shadow 200ms var(--ease);
}

.close-modal-btn {
  transition:
    background 200ms var(--ease),
    color 200ms var(--ease),
    transform 160ms var(--ease);
}

.form-label {
  /* top/left snap — avoid layout animation (review follow-up) */
  transition:
    font-size 200ms var(--ease),
    color 200ms var(--ease),
    background 200ms var(--ease);
}

.video-overlay-icon {
  transition:
    background 200ms var(--ease),
    transform 200ms var(--ease),
    box-shadow 200ms var(--ease);
}

.wizard-step-node {
  transition:
    border-color 200ms var(--ease),
    color 200ms var(--ease),
    background 200ms var(--ease),
    box-shadow 200ms var(--ease);
}

/* ——— 002 — gate hover transforms (touch-safe) ——— */
.btn-primary:hover:not(:active),
.btn-gold:hover:not(:active),
.btn-secondary:hover:not(:active),
.past-action-btn:hover:not(:active),
.past-action-photo:hover:not(:active),
.past-action-results:hover:not(:active),
.header-patron-logo:hover,
.logo:hover .event-logo-img,
.tribute-image-frame:hover,
.tribute-timeline-item:hover,
.stat-card:hover,
.gallery-item:hover,
.gallery-item:hover .gallery-img,
.timeline-card:hover,
.expo-attraction-card:hover,
.kit-card:hover,
.kit-card:hover .kit-icon,
.info-card:hover,
.highlight-dashboard-card:hover,
.sponsor-card:hover,
.sponsor-card:hover .sponsor-logo-placeholder,
.close-modal-btn:hover {
  transform: none;
}

@media (hover: hover) and (pointer: fine) {
  .btn-primary:hover {
    transform: translateY(-3px);
  }

  .btn-gold:hover {
    transform: translateY(-3px);
  }

  .btn-secondary:hover {
    transform: translate(-2px, -2px);
  }

  .header-patron-logo:hover {
    transform: translateY(-3px) scale(1.08);
  }

  .logo:hover .event-logo-img {
    transform: rotate(-6deg) scale(1.05);
  }

  .tribute-image-frame:hover {
    transform: rotate(0);
  }

  .tribute-timeline-item:hover,
  .timeline-card:hover {
    transform: translateY(-4px);
  }

  .stat-card:hover,
  .gallery-item:hover,
  .kit-card:hover,
  .highlight-dashboard-card:hover,
  .sponsor-card:hover,
  .expo-attraction-card:hover {
    transform: translateY(-6px);
  }

  .gallery-item:hover .gallery-img {
    transform: scale(1.06);
  }

  .kit-card:hover .kit-icon {
    transform: scale(1.15) rotate(-6deg);
  }

  .info-card:hover {
    transform: translate(4px);
  }

  .sponsor-card:hover .sponsor-logo-placeholder {
    transform: scale(1.1) rotate(-6deg);
  }

  .close-modal-btn:hover {
    transform: rotate(90deg);
  }

  .past-action-photo:hover,
  .past-action-results:hover {
    transform: translateY(-3px);
  }

  /* keep press + hover combo from earlier block */
  .btn-primary:hover:active,
  .btn-gold:hover:active,
  .past-action-btn:hover:active {
    transform: translateY(-1px) scale(0.97);
  }
}

/* Reinstate press feedback after hover resets (002) */
.btn:active,
.menu-toggle:active,
.tab-btn:active,
.faq-header:active,
.filter-btn:active,
.lightbox-video-nav:active,
.close-modal-btn:active,
.offer-dialog-close:active,
.lightbox-close:active {
  transform: scale(0.97);
}

/* ——— 003 — tab panel: no enter animation (rapid switches) ——— */
.tab-panel.active {
  animation: none;
}

/* ——— 004 — offer dialog enter cap ——— */
@keyframes offer-dialog-in-fast {
  0% {
    opacity: 0;
    transform: translateY(16px) scale(0.96);
  }
  70% {
    opacity: 1;
    transform: translateY(-2px) scale(1.01);
  }
  100% {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

.offer-dialog-overlay.active .offer-dialog-modal {
  animation: offer-dialog-in-fast 480ms var(--ease) both;
}

.offer-dialog-overlay.is-closing .offer-dialog-modal {
  animation: offer-dialog-out 240ms var(--ease) both;
}

/* ——— 005 — FAQ accordion: grid 0fr→1fr (GPU-friendly height) ——— */
.faq-body {
  display: grid;
  grid-template-rows: 0fr;
  max-height: none !important;
  overflow: hidden;
  opacity: 0;
  padding: 0 1.5rem !important;
  transition:
    grid-template-rows 250ms var(--ease),
    opacity 250ms var(--ease);
}

.faq-item.active .faq-body {
  grid-template-rows: 1fr;
  opacity: 1;
  max-height: none !important;
  padding: 0 1.5rem !important;
}

.faq-body-inner {
  overflow: hidden;
  min-height: 0;
  padding-bottom: 1.4rem;
}

/* ——— 006 — gallery hover speed ——— */
.gallery-img {
  transition: transform 200ms var(--ease);
}

.gallery-item {
  transition:
    transform 200ms var(--ease),
    box-shadow 200ms var(--ease);
}

/* ——— 007 — data-reveal trim ——— */
[data-reveal] {
  transition: opacity 450ms var(--ease), transform 450ms var(--ease);
  will-change: auto;
}

/* ——— 009 — mobile nav drawer ——— */
@media (max-width: 768px) {
  .nav-links {
    transition: transform 320ms var(--ease-drawer);
  }
}

@media (prefers-reduced-motion: reduce) {
  .offer-dialog-overlay.active .offer-dialog-modal,
  .offer-dialog-overlay.is-closing .offer-dialog-modal,
  .tab-panel.active {
    animation: none;
  }

  .faq-body {
    transition: none;
    opacity: 1;
  }

  .faq-item.active .faq-body {
    grid-template-rows: 1fr;
  }

  [data-reveal] {
    transition: none;
  }
}