/* ==========================================================================
   FIREZA CINEMATIC ENHANCEMENT LAYER — 2026 FESTIVE EDITION
   One orchestrated intro moment, route transitions, tactile card depth,
   reward micro-feedback and animated stats. Loads after components.css so
   its rules take precedence for the same selectors. Fully respects
   prefers-reduced-motion (see base rule in design-system.css + guards below).
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. IGNITION INTRO — single full-screen moment on first load per session
   -------------------------------------------------------------------------- */
#intro-loader {
  position: fixed;
  inset: 0;
  z-index: 300;
  display: flex;
  align-items: center;
  justify-content: center;
  background: radial-gradient(circle at 50% 45%, #FEF3C7 0%, #FAF5EB 72%);
  transition: opacity 720ms var(--ease-out-quint), visibility 720ms;
}

#intro-loader.loader-hidden {
  opacity: 0 !important;
  visibility: hidden !important;
  pointer-events: none !important;
}

.intro-mark {
  position: relative;
  width: 140px;
  height: 140px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.intro-spark-ring {
  position: absolute;
  inset: 0;
  border-radius: 50%;
  border: 1.5px solid rgba(245, 158, 11, 0.5);
  opacity: 0;
  transform: scale(0.3);
  animation: introRingPulse 1500ms var(--ease-out-quint) forwards;
}

.intro-spark-ring.ring-2 { animation-delay: 140ms; border-color: rgba(217, 119, 6, 0.4); }
.intro-spark-ring.ring-3 { animation-delay: 280ms; border-color: rgba(245, 158, 11, 0.3); }

.intro-mark-text {
  position: relative;
  font-family: var(--font-primary);
  font-weight: 800;
  font-size: 1.85rem;
  letter-spacing: 0.16em;
  background: var(--grad-gold-metallic);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  opacity: 0;
  filter: blur(6px);
  transform: scale(0.85) translateY(6px);
  animation: introTextReveal 820ms var(--ease-out-quint) 320ms forwards;
}

@keyframes introRingPulse {
  0% { opacity: 0; transform: scale(0.3); }
  35% { opacity: 0.9; }
  100% { opacity: 0; transform: scale(2.8); }
}

@keyframes introTextReveal {
  0% { opacity: 0; filter: blur(6px); transform: scale(0.85) translateY(6px); }
  100% { opacity: 1; filter: blur(0); transform: scale(1) translateY(0); }
}

@media (prefers-reduced-motion: reduce) {
  #intro-loader { display: none; }
}

/* --------------------------------------------------------------------------
   2. ROUTE / VIEW TRANSITIONS — replaces the instant SPA view swap
   -------------------------------------------------------------------------- */
.route-view-enter {
  animation: routeFadeRise 520ms var(--ease-out-quint);
}

@keyframes routeFadeRise {
  0% { opacity: 0; transform: translateY(16px); filter: blur(3px); }
  100% { opacity: 1; transform: translateY(0); filter: blur(0); }
}

/* --------------------------------------------------------------------------
   3. TACTILE CARD DEPTH — subtle pointer-driven tilt on top of existing lift
   -------------------------------------------------------------------------- */
.product-card,
.category-showcase-card {
  --tilt-x: 0deg;
  --tilt-y: 0deg;
  transform: perspective(1000px) rotateX(0deg) rotateY(0deg) translateY(0);
}

.product-card:hover,
.category-showcase-card:hover {
  transform: perspective(1000px) rotateX(var(--tilt-x)) rotateY(var(--tilt-y)) translateY(-6px);
  transition: transform 90ms linear, border-color var(--transition-normal), box-shadow var(--transition-normal), background var(--transition-normal);
}

@media (pointer: coarse), (prefers-reduced-motion: reduce) {
  .product-card:hover,
  .category-showcase-card:hover {
    transform: translateY(-4px);
  }
}

/* --------------------------------------------------------------------------
   4. REWARD MICRO-FEEDBACK — golden spark burst on "Add to Enquiry"
   -------------------------------------------------------------------------- */
.click-spark-burst {
  position: fixed;
  top: 0;
  left: 0;
  width: 6px;
  height: 6px;
  margin: -3px 0 0 -3px;
  border-radius: 50%;
  background: radial-gradient(circle, #FFF8DF 0%, #FBBF24 55%, rgba(245, 158, 11, 0) 100%);
  pointer-events: none;
  z-index: 250;
  animation: sparkFly 640ms cubic-bezier(0.2, 0.85, 0.3, 1) forwards;
}

@keyframes sparkFly {
  0% { transform: translate(0, 0) scale(1); opacity: 1; }
  100% { transform: translate(var(--dx), var(--dy)) scale(0.2); opacity: 0; }
}

.btn-add-enquiry:active {
  transform: scale(0.96);
}

@media (prefers-reduced-motion: reduce) {
  .click-spark-burst { display: none; }
}