/* ===== Keyframes ===== */
@keyframes bounce {
  0%, 20%, 50%, 80%, 100% { transform: rotate(45deg) translateY(0); }
  40% { transform: rotate(45deg) translateY(-8px); }
  60% { transform: rotate(45deg) translateY(-4px); }
}

@keyframes gradient-shift {
  0%   { background-position: 0% 50%; }
  50%  { background-position: 100% 50%; }
  100% { background-position: 0% 50%; }
}

@keyframes pulse-glow {
  0%, 100% { box-shadow: 0 0 20px rgba(108, 92, 231, 0.3); }
  50%      { box-shadow: 0 0 40px rgba(108, 92, 231, 0.6); }
}

@keyframes fade-in {
  from { opacity: 0; }
  to   { opacity: 1; }
}

/* ===== Reveal base ===== */
[data-reveal] {
  opacity: 0;
  transition: opacity 0.8s cubic-bezier(0.16, 1, 0.3, 1),
              transform 0.8s cubic-bezier(0.16, 1, 0.3, 1),
              clip-path 0.8s cubic-bezier(0.16, 1, 0.3, 1);
}

[data-reveal].revealed {
  opacity: 1;
}

/* fade-up */
[data-reveal="fade-up"] {
  transform: translateY(60px);
}
[data-reveal="fade-up"].revealed {
  transform: translateY(0);
}

/* fade-left */
[data-reveal="fade-left"] {
  transform: translateX(-80px);
}
[data-reveal="fade-left"].revealed {
  transform: translateX(0);
}

/* fade-right */
[data-reveal="fade-right"] {
  transform: translateX(80px);
}
[data-reveal="fade-right"].revealed {
  transform: translateX(0);
}

/* scale-in */
[data-reveal="scale-in"] {
  transform: scale(0.8);
}
[data-reveal="scale-in"].revealed {
  transform: scale(1);
}

/* clip-reveal (horizontal wipe) */
[data-reveal="clip-reveal"] {
  clip-path: inset(0 100% 0 0);
}
[data-reveal="clip-reveal"].revealed {
  clip-path: inset(0 0 0 0);
}

/* ===== Stagger children ===== */
[data-stagger-children] > * {
  opacity: 0;
  transform: translateY(30px);
  transition: opacity 0.6s cubic-bezier(0.16, 1, 0.3, 1),
              transform 0.6s cubic-bezier(0.16, 1, 0.3, 1);
  transition-delay: calc(var(--i, 0) * 80ms);
}

[data-stagger-children].revealed > * {
  opacity: 1;
  transform: translateY(0);
}

/* ===== Hero character animation ===== */
.hero-char {
  display: inline-block;
  opacity: 0;
  transform: translateY(20px);
  animation: fade-in 0.6s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

/* ===== Hero parallax on scroll ===== */
#hero .hero-inner {
  transition: none; /* JS controls transform directly */
}

/* ===== Progress bar ===== */
#progress-bar {
  position: fixed;
  top: 0;
  left: 0;
  height: 3px;
  background: var(--accent-gradient);
  width: 0%;
  z-index: 1000;
  transition: none;
}

/* ===== Decorative divider ===== */
.divider {
  width: 60px;
  height: 2px;
  background: var(--accent-gradient);
  margin: var(--space-md) 0;
  border: none;
}

.model-section[data-layout="b"] .divider {
  margin: var(--space-md) auto;
}

/* ===== Parallax performance ===== */
[data-parallax] {
  will-change: transform;
}

@media (max-width: 767px) {
  [data-parallax] {
    will-change: auto;
    transform: none !important;
  }
}

/* ===== Reduced motion ===== */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
  [data-reveal] {
    opacity: 1;
    transform: none;
    clip-path: none;
  }
  [data-stagger-children] > * {
    opacity: 1;
    transform: none;
  }
}