/* =========================================================
   The First Timer — Animations
   Scroll reveal, fade-up, zoom, staggered entrances.
   ========================================================= */

/* Scroll reveal base states */
[data-reveal] {
  opacity: 0;
  transform: translateY(28px);
  transition: opacity .7s var(--ease), transform .7s var(--ease);
  will-change: opacity, transform;
}
[data-reveal="zoom"] { transform: scale(.94); }
[data-reveal="left"] { transform: translateX(-34px); }
[data-reveal="right"] { transform: translateX(34px); }

[data-reveal].in {
  opacity: 1;
  transform: translateY(0) translateX(0) scale(1);
}

/* Stagger via inline animation-delay handled in JS through transition-delay */

/* Hero entrance */
.hero h1, .hero .lead, .hero-cta, .hero-stats { animation: heroUp .9s var(--ease) both; }
.hero .lead { animation-delay: .1s; }
.hero-cta { animation-delay: .2s; }
.hero-stats { animation-delay: .3s; }
@keyframes heroUp { from { opacity: 0; transform: translateY(30px); } to { opacity: 1; transform: translateY(0); } }

/* Floating tiles delays set inline */

/* Fade in page */
main { animation: fadeIn .6s var(--ease) both; }
@keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } }

/* Hover lift helper */
.lift { transition: transform .3s var(--ease), box-shadow .3s var(--ease); }
.lift:hover { transform: translateY(-6px); }

/* Count-up marker (no animation, handled in JS) */

/* Nav link underline animation */
.nav a::after {
  content: ""; position: absolute; left: 15px; right: 15px; bottom: 4px; height: 2px;
  background: var(--grad); border-radius: 2px; transform: scaleX(0); transform-origin: left;
  transition: transform .3s var(--ease);
}
.nav a:hover::after, .nav a.active::after { transform: scaleX(1); }

/* Gradient shimmer on brand text */
.shine {
  background: linear-gradient(100deg, var(--purple-600), var(--blue-500), var(--purple-600));
  background-size: 200% auto;
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent;
  animation: shine 5s linear infinite;
}
@keyframes shine { to { background-position: 200% center; } }

/* Pulse dot */
.pulse-dot { position: relative; }
.pulse-dot::before { content: ""; position: absolute; inset: -4px; border-radius: 50%; background: currentColor; opacity: .3; animation: pulse 1.8s ease-out infinite; }
@keyframes pulse { 0% { transform: scale(.8); opacity: .5; } 100% { transform: scale(2.2); opacity: 0; } }

/* Reduced motion */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; scroll-behavior: auto !important; }
  [data-reveal] { opacity: 1 !important; transform: none !important; }
}