/* ===== KEYFRAMES ===== */
@keyframes fadeUp {
  from { opacity: 0; transform: translateY(30px); }
  to { opacity: 1; transform: translateY(0); }
}

@keyframes fadeDown {
  from { opacity: 0; transform: translateY(-20px); }
  to { opacity: 1; transform: translateY(0); }
}

@keyframes fadeLeft {
  from { opacity: 0; transform: translateX(40px); }
  to { opacity: 1; transform: translateX(0); }
}

@keyframes fadeRight {
  from { opacity: 0; transform: translateX(-40px); }
  to { opacity: 1; transform: translateX(0); }
}

@keyframes scaleIn {
  from { opacity: 0; transform: scale(0.9); }
  to { opacity: 1; transform: scale(1); }
}

@keyframes mascotDrop {
  from { opacity: 0; transform: translateY(60px) rotate(-5deg); }
  to { opacity: 1; transform: translateY(0) rotate(0deg); }
}

@keyframes mascotBob {
  0%, 100% { transform: translateY(0) rotate(0deg); }
  25% { transform: translateY(-10px) rotate(1.5deg); }
  75% { transform: translateY(-12px) rotate(-1.5deg); }
}

@keyframes zapIn {
  from { transform: scale(0) rotate(0deg); opacity: 0; }
  to { transform: scale(1) rotate(15deg); opacity: 1; }
}

@keyframes marqueeScroll {
  0% { transform: translateX(0); }
  100% { transform: translateX(-50%); }
}

@keyframes scrollBounce {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(8px); }
}

@keyframes pulse {
  0%, 100% { transform: scale(1); opacity: 0.6; }
  50% { transform: scale(1.05); opacity: 1; }
}

@keyframes shimmer {
  0% { background-position: -200% 0; }
  100% { background-position: 200% 0; }
}

@keyframes float {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-16px); }
}

@keyframes slideInRight {
  from { opacity: 0; transform: translateX(60px); }
  to { opacity: 1; transform: translateX(0); }
}

@keyframes slideInLeft {
  from { opacity: 0; transform: translateX(-60px); }
  to { opacity: 1; transform: translateX(0); }
}

@keyframes rotateIn {
  from { opacity: 0; transform: rotate(-10deg) scale(0.9); }
  to { opacity: 1; transform: rotate(0deg) scale(1); }
}

/* ===== SCROLL REVEAL CLASSES ===== */
html.js .reveal {
  opacity: 0;
  transform: translateY(28px);
  transition: opacity 0.7s var(--ease-out), transform 0.7s var(--ease-out);
}

html.js .reveal.visible {
  opacity: 1;
  transform: translateY(0);
}

html.js .reveal-left {
  opacity: 0;
  transform: translateX(-40px);
  transition: opacity 0.7s var(--ease-out), transform 0.7s var(--ease-out);
}

html.js .reveal-left.visible {
  opacity: 1;
  transform: translateX(0);
}

html.js .reveal-right {
  opacity: 0;
  transform: translateX(40px);
  transition: opacity 0.7s var(--ease-out), transform 0.7s var(--ease-out);
}

html.js .reveal-right.visible {
  opacity: 1;
  transform: translateX(0);
}

html.js .reveal-scale {
  opacity: 0;
  transform: scale(0.9);
  transition: opacity 0.7s var(--ease-out), transform 0.7s var(--ease-out);
}

html.js .reveal-scale.visible {
  opacity: 1;
  transform: scale(1);
}

/* Text clip reveal */
.text-reveal {
  display: inline-block;
  overflow: hidden;
}

.text-reveal .text-reveal-inner {
  display: inline-block;
  transform: translateY(100%);
  transition: transform 0.8s var(--ease-out);
}

.text-reveal.visible .text-reveal-inner {
  transform: translateY(0);
}

/* Staggered children */
.reveal-stagger > * { transition-delay: calc(var(--i, 0) * 0.08s); }
.reveal-stagger > :nth-child(1) { --i: 0; }
.reveal-stagger > :nth-child(2) { --i: 1; }
.reveal-stagger > :nth-child(3) { --i: 2; }
.reveal-stagger > :nth-child(4) { --i: 3; }
.reveal-stagger > :nth-child(5) { --i: 4; }
.reveal-stagger > :nth-child(6) { --i: 5; }
.reveal-stagger > :nth-child(7) { --i: 6; }
.reveal-stagger > :nth-child(8) { --i: 7; }

/* ===== HERO ANIMATIONS ===== */
.hero-text {
  opacity: 0;
  transform: translateY(40px);
  animation: fadeUp 1s var(--ease-out) 0.3s forwards;
}

.hero-mascot img {
  opacity: 0;
  transform: translateY(60px) rotate(-5deg);
  animation: mascotDrop 0.8s var(--ease-bounce) 0.6s forwards, mascotBob 3.5s ease-in-out 2s infinite;
  filter: drop-shadow(0 20px 40px rgba(255,255,255,0.08));
  transform-origin: bottom center;
}

.hero-mascot .zap {
  position: absolute;
  width: 28px; height: 28px;
  opacity: 0;
  animation: zapIn 0.4s var(--ease-bounce) forwards;
}

.hero-mascot .zap-1 { top: 8%; right: 5%; animation-delay: 1.2s; }
.hero-mascot .zap-2 { top: 30%; left: 3%; animation-delay: 1.4s; }
.hero-mascot .zap-3 { bottom: 35%; right: 0; animation-delay: 1.6s; }

/* ===== PAGE TRANSITION ===== */
@keyframes bodyFadeIn { from { opacity: 0; } }
@keyframes bodyFadeOut { to { opacity: 0; } }

/* Native cross-page transitions (supported browsers fade between pages) */
@view-transition { navigation: auto; }
::view-transition-old(root) { animation: 0.25s var(--ease-out) both bodyFadeOut; }
::view-transition-new(root) { animation: 0.35s var(--ease-out) both bodyFadeIn; }

@media (prefers-reduced-motion: reduce) {
  html.js .reveal, html.js .reveal-left, html.js .reveal-right, html.js .reveal-scale { opacity: 1; transform: none; }
  @view-transition { navigation: none; }
}