/* =========================================================
   Micro-interactions & keyframes
   ========================================================= */

@keyframes fadeUp {
  from { opacity: 0; transform: translateY(28px); }
  to { opacity: 1; transform: translateY(0); }
}
@keyframes fadeIn {
  from { opacity: 0; }
  to { opacity: 1; }
}
@keyframes slideInRight {
  from { opacity: 0; transform: translateX(24px); }
  to { opacity: 1; transform: translateX(0); }
}

.hero-content > * { opacity: 0; animation: fadeUp 0.8s cubic-bezier(.2,.7,.2,1) forwards; }
.hero-content .hero-logo { animation-delay: 0.05s; }
.hero-content .hero-eyebrow { animation-delay: 0.15s; }
.hero-content h1 { animation-delay: 0.25s; }
.hero-content .hero-subtitle { animation-delay: 0.35s; }
.hero-content p.lead { animation-delay: 0.45s; }
.hero-content .hero-actions { animation-delay: 0.55s; }

.hero-coords, .hero-scroll { opacity: 0; animation: fadeIn 1s ease forwards; animation-delay: 0.8s; }

/* ---------- 3D tilt targets ---------- */
.card, .stat-block, .cabinet-highlight, .about-intro .visual, .modal-box {
  transform-style: preserve-3d;
  will-change: transform;
  transition: transform 0.35s cubic-bezier(.2,.8,.2,1), box-shadow 0.35s ease;
}
.card.is-tilting, .stat-block.is-tilting, .cabinet-highlight.is-tilting, .about-intro .visual.is-tilting {
  transition: transform 0.06s linear;
}

/* ---------- Floating decorative 3D icons (injected into hero / page-hero) ---------- */
@keyframes floatDrift1 {
  0%, 100% { transform: translate3d(0,0,0) rotate(0deg); }
  50% { transform: translate3d(6px,-18px,0) rotate(10deg); }
}
@keyframes floatDrift2 {
  0%, 100% { transform: translate3d(0,0,0) rotate(0deg); }
  50% { transform: translate3d(-10px,-12px,0) rotate(-12deg); }
}
@keyframes floatSpin {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}
@keyframes pulseGlow {
  0%, 100% { opacity: 0.5; transform: translateY(var(--py, 0px)) scale(1); }
  50% { opacity: 0.9; transform: translateY(var(--py, 0px)) scale(1.12); }
}
.deco-icon {
  position: absolute;
  pointer-events: none;
  opacity: 0.85;
  color: rgba(255,255,255,0.5);
  filter: drop-shadow(0 8px 18px rgba(0,0,0,0.25));
  z-index: 1;
}
.deco-icon.d1 { animation: floatDrift1 6.5s ease-in-out infinite; }
.deco-icon.d2 { animation: floatDrift2 7.5s ease-in-out infinite; animation-delay: .4s; }
.deco-icon.d3 { animation: floatDrift1 8.5s ease-in-out infinite; animation-delay: 1.1s; }
.deco-icon.spin { animation: floatSpin 18s linear infinite; }
.deco-icon.spin-slow { animation: floatSpin 30s linear infinite reverse; }

/* Animated blueprint grid drift for subtle depth */
@keyframes gridDrift {
  from { background-position: 0 0, 0 0; }
  to { background-position: 40px 40px, 40px 40px; }
}
.hero .blueprint-grid, .page-hero .blueprint-grid {
  animation: gridDrift 14s linear infinite;
}

/* Glow orb pulse (hero-glow already positioned; add life to it) */
.hero-glow, .hero-glow-bottom, .page-hero::after {
  animation: pulseGlow 6s ease-in-out infinite;
}

/* ---------- Icon circle (stat icons etc.) ---------- */
.icon-circle {
  width: 44px; height: 44px;
  border-radius: 50%;
  background: var(--color-primary-light);
  display: flex; align-items: center; justify-content: center;
  color: var(--color-primary-dark);
  margin-bottom: 10px;
  transition: transform .3s cubic-bezier(.2,.8,.2,1), background .3s ease, color .3s ease;
}
.icon-circle svg { width: 20px; height: 20px; }
.stat:hover .icon-circle, .card:hover .icon-circle {
  transform: rotateY(180deg) scale(1.08);
  background: var(--color-primary);
  color: #fff;
}

/* ---------- Nav icon micro-bounce ---------- */
.nav-menu a { display: inline-flex; align-items: center; }

/* ---------- Button ripple ---------- */
.btn { position: relative; overflow: hidden; }
.btn .ripple {
  position: absolute;
  border-radius: 50%;
  background: rgba(255,255,255,0.55);
  transform: scale(0);
  animation: rippleAnim 0.6s ease-out;
  pointer-events: none;
}
@keyframes rippleAnim {
  to { transform: scale(3); opacity: 0; }
}

/* ---------- Timeline pulse marker ---------- */
@keyframes ringPulse {
  0% { box-shadow: 0 0 0 0 rgba(245,114,15,0.35); }
  100% { box-shadow: 0 0 0 10px rgba(245,114,15,0); }
}
.timeline-item::after {
  content: '';
  position: absolute; left: -32px; top: 4px; width: 13px; height: 13px;
  border-radius: 50%;
  animation: ringPulse 2.2s ease-out infinite;
  pointer-events: none;
}
.timeline-item:nth-child(2)::after { animation-delay: .3s; }
.timeline-item:nth-child(3)::after { animation-delay: .6s; }
.timeline-item:nth-child(4)::after { animation-delay: .9s; }

/* ---------- Section-head icon flourish ---------- */
@keyframes wiggle {
  0%, 100% { transform: rotate(0deg); }
  25% { transform: rotate(-8deg); }
  75% { transform: rotate(8deg); }
}
.eyebrow:hover svg, .eyebrow-icon:hover { animation: wiggle 0.4s ease; }

@media (prefers-reduced-motion: reduce) {
  .hero-content > * { animation: none; opacity: 1; }
  .deco-icon, .hero .blueprint-grid, .page-hero .blueprint-grid, .hero-glow, .hero-glow-bottom, .page-hero::after, .timeline-item::after {
    animation: none !important;
  }
}