/* Hero + scroll animations for static /ai (mirrors ai-course-scope for data-ai-page) */

@keyframes ai-scroll-right-to-left {
  0% { transform: translateX(-50%); filter: opacity(0); }
  10% { filter: opacity(1); }
  90% { filter: opacity(1); }
  100% { transform: translateX(0%); filter: opacity(0); }
}

@keyframes ai-code-glow {
  0%, 100% {
    box-shadow: 0 0 0 1px color-mix(in srgb, var(--ai-color-gray) 22%, transparent),
      0 10px 28px color-mix(in srgb, var(--ai-color-black) 28%, transparent);
  }
  50% {
    box-shadow: 0 0 0 1px color-mix(in srgb, var(--ai-color-gray) 34%, transparent),
      0 12px 32px color-mix(in srgb, var(--ai-color-black) 32%, transparent);
  }
}

@keyframes ai-fade-in-up {
  0% { opacity: 0; transform: translateY(20px); }
  100% { opacity: 1; transform: translateY(0); }
}

@keyframes ai-building-pulse {
  0%, 100% { transform: scale(1); opacity: 1; }
  50% { transform: scale(1.05); opacity: 0.85; }
}

@keyframes ai-building-color-shift {
  0% { background-color: var(--ai-color-surface); }
  25% { background-color: color-mix(in srgb, var(--ai-color-gray) 25%, var(--ai-color-surface) 75%); }
  50% { background-color: color-mix(in srgb, var(--ai-color-gray) 45%, var(--ai-color-surface) 55%); }
  75% { background-color: color-mix(in srgb, var(--ai-color-gray) 25%, var(--ai-color-surface) 75%); }
  100% { background-color: var(--ai-color-surface); }
}

@keyframes ai-building-width-change {
  0% { width: 4rem; }
  25% { width: 5rem; }
  50% { width: 3rem; }
  75% { width: 6rem; }
  100% { width: 4rem; }
}

@keyframes ai-building-button-pulse {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(1.02); }
}

@keyframes ai-building-button-glow {
  0%, 100% {
    background: color-mix(in srgb, var(--ai-color-accent) 55%, var(--ai-color-black) 45%);
  }
  50% {
    background: color-mix(in srgb, var(--ai-color-accent) 65%, var(--ai-color-black) 35%);
  }
}

@keyframes ai-building-button-inner {
  0% {
    opacity: 0;
    transform: scale(0.98);
    background: color-mix(in srgb, var(--ai-color-accent) 22%, var(--ai-color-white) 78%);
  }
  15% { opacity: 1; transform: scale(1); }
  100% { background: color-mix(in srgb, var(--ai-color-accent) 22%, var(--ai-color-white) 78%); }
}

@keyframes ai-force-reveal {
  to { opacity: 1; transform: translateY(0); }
}

body[data-ai-page-ready="true"] #ai-prototype-root .reveal-on-scroll:not(.revealed):not(.force-visible) {
  opacity: 0;
  transform: translateY(40px);
  transition: opacity 0.8s cubic-bezier(0.25, 0.46, 0.45, 0.94), transform 0.8s cubic-bezier(0.25, 0.46, 0.45, 0.94);
  animation: ai-force-reveal 0.01s ease-out 2s forwards;
}

body[data-ai-page-ready="true"] #ai-prototype-root .reveal-on-scroll.revealed,
body[data-ai-page-ready="true"] #ai-prototype-root .reveal-on-scroll.force-visible {
  opacity: 1 !important;
  transform: translateY(0) !important;
  animation: none;
}

/* Stagger children — reveal via class only (no inline styles from JS) */
body[data-ai-page-ready="true"] #ai-prototype-root .stagger-item.animate-fade-in-up:not(.revealed):not(.force-visible),
body[data-ai-page-ready="true"] #ai-prototype-root .stagger-item.animate-scale-in:not(.revealed):not(.force-visible) {
  opacity: 0;
  transform: translateY(20px);
  transition: opacity 0.5s ease-out, transform 0.5s ease-out;
}

body[data-ai-page-ready="true"] #ai-prototype-root .stagger-item.revealed,
body[data-ai-page-ready="true"] #ai-prototype-root .stagger-item.force-visible,
body[data-ai-page-ready="true"] #ai-prototype-root .stagger-item.animate-in {
  opacity: 1 !important;
  transform: translateY(0) !important;
  visibility: visible !important;
}

/* Hero demo runs its own motion — exclude from page stagger/reveal rules */
body[data-ai-page-ready="true"] #ai-prototype-root .ai-hero-desktop-shell .animate-fade-in-up,
body[data-ai-page-ready="true"] #ai-prototype-root .ai-hero-desktop-shell .animate-scale-in {
  transition: none !important;
}

/* Curriculum footer — use scroll reveal, not prototype fadeInUp (orphan animate-fade-in-up stayed invisible) */
body[data-ai-page-ready="true"] #ai-prototype-root .ai-curriculum-footer-copy {
  animation: none !important;
}

body[data-ai-page="true"] #ai-prototype-root .ai-hero-gif-shell {
  display: none !important;
}

body[data-ai-page="true"] #ai-prototype-root .ai-hero-gif-shell.ai-hero-gif-ready:not(.ai-hero-mobile-hidden) {
  display: block !important;
}