/**
 * motion.css
 * Motion-first design system for cfhpe.org
 * Scroll-triggered reveals, page transitions, parallax, and micro-interactions
 * Respects prefers-reduced-motion for accessibility
 */

/* ============================================
   MOTION VARIABLES
   ============================================ */
:root {
  /* Animation durations */
  --motion-duration-fast: 200ms;
  --motion-duration-normal: 400ms;
  --motion-duration-slow: 600ms;
  --motion-duration-slower: 800ms;
  --motion-duration-slowest: 1200ms;

  /* Animation easings */
  --motion-ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --motion-ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
  --motion-ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);
  --motion-ease-smooth: cubic-bezier(0.25, 0.46, 0.45, 0.94);

  /* Stagger delays */
  --stagger-delay: 80ms;

  /* Parallax speeds */
  --parallax-slow: 0.3;
  --parallax-medium: 0.5;
  --parallax-fast: 0.7;
}

/* ============================================
   PAGE TRANSITION OVERLAY
   ============================================ */
.page-transition-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 9999;
  pointer-events: none;
  display: flex;
}

.page-transition-overlay .transition-slice {
  flex: 1;
  background: linear-gradient(135deg, var(--color-primary), var(--color-secondary));
  transform: scaleY(0);
  transform-origin: bottom;
}

/* Page enter animation */
.page-transition-overlay.is-entering .transition-slice {
  animation: sliceEnter var(--motion-duration-slow) var(--motion-ease-out) forwards;
}

.page-transition-overlay.is-entering .transition-slice:nth-child(2) {
  animation-delay: 40ms;
}
.page-transition-overlay.is-entering .transition-slice:nth-child(3) {
  animation-delay: 80ms;
}
.page-transition-overlay.is-entering .transition-slice:nth-child(4) {
  animation-delay: 120ms;
}
.page-transition-overlay.is-entering .transition-slice:nth-child(5) {
  animation-delay: 160ms;
}

/* Page exit animation */
.page-transition-overlay.is-exiting .transition-slice {
  animation: sliceExit var(--motion-duration-slow) var(--motion-ease-out) forwards;
}

.page-transition-overlay.is-exiting .transition-slice:nth-child(2) {
  animation-delay: 40ms;
}
.page-transition-overlay.is-exiting .transition-slice:nth-child(3) {
  animation-delay: 80ms;
}
.page-transition-overlay.is-exiting .transition-slice:nth-child(4) {
  animation-delay: 120ms;
}
.page-transition-overlay.is-exiting .transition-slice:nth-child(5) {
  animation-delay: 160ms;
}

@keyframes sliceEnter {
  0% { transform: scaleY(0); transform-origin: bottom; }
  50% { transform: scaleY(1); transform-origin: bottom; }
  50.1% { transform-origin: top; }
  100% { transform: scaleY(0); transform-origin: top; }
}

@keyframes sliceExit {
  0% { transform: scaleY(0); transform-origin: top; }
  50% { transform: scaleY(1); transform-origin: top; }
  50.1% { transform-origin: bottom; }
  100% { transform: scaleY(0); transform-origin: bottom; }
}

/* ============================================
   PAGE CONTENT ENTRANCE
   ============================================ */
.page-content-animate {
  opacity: 0;
  transform: translateY(20px);
  transition: opacity var(--motion-duration-slow) var(--motion-ease-out),
              transform var(--motion-duration-slow) var(--motion-ease-out);
}

.page-content-animate.is-visible {
  opacity: 1;
  transform: translateY(0);
}

/* ============================================
   SCROLL REVEAL ANIMATIONS
   ============================================ */

/* Base reveal state - hidden */
[data-reveal] {
  opacity: 0;
  will-change: transform, opacity;
  transition: opacity var(--motion-duration-slow) var(--motion-ease-out),
              transform var(--motion-duration-slow) var(--motion-ease-out);
}

/* Revealed state */
[data-reveal].is-revealed {
  opacity: 1;
  transform: none !important;
}

/* Reveal from bottom (default) */
[data-reveal="fade-up"] {
  transform: translateY(40px);
}

/* Reveal from top */
[data-reveal="fade-down"] {
  transform: translateY(-40px);
}

/* Reveal from left */
[data-reveal="fade-left"] {
  transform: translateX(-40px);
}

/* Reveal from right */
[data-reveal="fade-right"] {
  transform: translateX(40px);
}

/* Scale up reveal */
[data-reveal="scale-up"] {
  transform: scale(0.9);
}

/* Scale down reveal */
[data-reveal="scale-down"] {
  transform: scale(1.1);
}

/* Fade only */
[data-reveal="fade"] {
  transform: none;
}

/* Rotate in */
[data-reveal="rotate-in"] {
  transform: rotate(-5deg) translateY(30px);
}

/* Clip reveal from bottom */
[data-reveal="clip-up"] {
  clip-path: inset(100% 0 0 0);
  transform: none;
}

[data-reveal="clip-up"].is-revealed {
  clip-path: inset(0 0 0 0);
  transition: clip-path var(--motion-duration-slower) var(--motion-ease-out),
              opacity var(--motion-duration-slow) var(--motion-ease-out);
}

/* Clip reveal from left */
[data-reveal="clip-left"] {
  clip-path: inset(0 100% 0 0);
  transform: none;
}

[data-reveal="clip-left"].is-revealed {
  clip-path: inset(0 0 0 0);
  transition: clip-path var(--motion-duration-slower) var(--motion-ease-out),
              opacity var(--motion-duration-slow) var(--motion-ease-out);
}

/* Stagger children - applied to parent container */
[data-reveal-stagger] > * {
  opacity: 0;
  transform: translateY(30px);
  will-change: transform, opacity;
  transition: opacity var(--motion-duration-slow) var(--motion-ease-out),
              transform var(--motion-duration-slow) var(--motion-ease-out);
}

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

/* Generate stagger delays for up to 12 children */
[data-reveal-stagger].is-revealed > *:nth-child(1) { transition-delay: calc(var(--stagger-delay) * 0); }
[data-reveal-stagger].is-revealed > *:nth-child(2) { transition-delay: calc(var(--stagger-delay) * 1); }
[data-reveal-stagger].is-revealed > *:nth-child(3) { transition-delay: calc(var(--stagger-delay) * 2); }
[data-reveal-stagger].is-revealed > *:nth-child(4) { transition-delay: calc(var(--stagger-delay) * 3); }
[data-reveal-stagger].is-revealed > *:nth-child(5) { transition-delay: calc(var(--stagger-delay) * 4); }
[data-reveal-stagger].is-revealed > *:nth-child(6) { transition-delay: calc(var(--stagger-delay) * 5); }
[data-reveal-stagger].is-revealed > *:nth-child(7) { transition-delay: calc(var(--stagger-delay) * 6); }
[data-reveal-stagger].is-revealed > *:nth-child(8) { transition-delay: calc(var(--stagger-delay) * 7); }
[data-reveal-stagger].is-revealed > *:nth-child(9) { transition-delay: calc(var(--stagger-delay) * 8); }
[data-reveal-stagger].is-revealed > *:nth-child(10) { transition-delay: calc(var(--stagger-delay) * 9); }
[data-reveal-stagger].is-revealed > *:nth-child(11) { transition-delay: calc(var(--stagger-delay) * 10); }
[data-reveal-stagger].is-revealed > *:nth-child(12) { transition-delay: calc(var(--stagger-delay) * 11); }

/* ============================================
   HERO ANIMATIONS
   ============================================ */
.hero {
  overflow: hidden;
}

.hero-title {
  opacity: 0;
  transform: translateY(30px);
  animation: heroTitleEnter var(--motion-duration-slower) var(--motion-ease-out) 0.2s forwards;
}

.hero-subtitle {
  opacity: 0;
  transform: translateY(20px);
  animation: heroSubtitleEnter var(--motion-duration-slower) var(--motion-ease-out) 0.5s forwards;
}

@keyframes heroTitleEnter {
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes heroSubtitleEnter {
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* Hero parallax background */
.hero[data-parallax] {
  background-attachment: fixed;
}

/* Hero gradient shimmer */
.hero::after {
  content: '';
  position: absolute;
  top: 0;
  left: -100%;
  width: 200%;
  height: 100%;
  background: linear-gradient(
    90deg,
    transparent 0%,
    rgba(255, 255, 255, 0.03) 25%,
    rgba(255, 255, 255, 0.06) 50%,
    rgba(255, 255, 255, 0.03) 75%,
    transparent 100%
  );
  z-index: 1;
  animation: heroShimmer 8s ease-in-out infinite;
  pointer-events: none;
}

@keyframes heroShimmer {
  0%, 100% { transform: translateX(-25%); }
  50% { transform: translateX(25%); }
}

/* ============================================
   HEADER ANIMATIONS
   ============================================ */
.site-header {
  transition: transform var(--motion-duration-normal) var(--motion-ease-out),
              box-shadow var(--motion-duration-normal) var(--motion-ease-out),
              background-color 0.3s ease;
}

.site-header.is-scrolled {
  box-shadow: var(--shadow-md);
}

.site-header.is-hidden {
  transform: translateY(-100%);
}

/* Nav link hover underline animation */
.nav-link {
  position: relative;
}

.nav-link::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 50%;
  width: 0;
  height: 2px;
  background: linear-gradient(90deg, var(--color-primary), var(--color-secondary));
  transition: width var(--motion-duration-normal) var(--motion-ease-out),
              left var(--motion-duration-normal) var(--motion-ease-out);
  border-radius: 1px;
}

.nav-link:hover::after,
.nav-link.is-active::after {
  width: 80%;
  left: 10%;
}

/* Active nav indicator */
.nav-link.is-active {
  color: var(--color-primary);
}

:root[data-theme="dark"] .nav-link.is-active {
  color: var(--color-primary-light);
}

/* ============================================
   READING PROGRESS BAR
   ============================================ */
.reading-progress {
  position: fixed;
  top: 0;
  left: 0;
  width: 0%;
  height: 3px;
  background: linear-gradient(90deg, var(--color-primary), var(--color-secondary));
  z-index: 9998;
  transition: width 50ms linear;
  transform-origin: left;
}

/* ============================================
   CARD HOVER MICRO-INTERACTIONS
   ============================================ */

/* Enhanced program card hover */
.program-feature-card {
  transition: transform var(--motion-duration-normal) var(--motion-ease-spring),
              box-shadow var(--motion-duration-normal) var(--motion-ease-out),
              border-color var(--motion-duration-normal) var(--motion-ease-out);
}

.program-feature-card:hover {
  transform: translateY(-6px);
}

.program-feature-card:active {
  transform: translateY(-2px);
  transition-duration: var(--motion-duration-fast);
}

/* Program card icon bounce on hover */
.program-feature-card:hover .program-feature-card-icon {
  animation: iconBounce var(--motion-duration-slow) var(--motion-ease-spring);
}

@keyframes iconBounce {
  0% { transform: scale(1); }
  40% { transform: scale(1.15); }
  70% { transform: scale(0.95); }
  100% { transform: scale(1); }
}

/* Enhanced program card hover */
.program-card {
  transition: transform var(--motion-duration-normal) var(--motion-ease-spring),
              box-shadow var(--motion-duration-normal) var(--motion-ease-out);
}

.program-card:hover {
  transform: translateY(-6px);
}

.program-card:active {
  transform: translateY(-2px);
  transition-duration: var(--motion-duration-fast);
}

/* ============================================
   BUTTON ANIMATIONS
   ============================================ */
.button {
  position: relative;
  overflow: hidden;
  transition: background-color var(--motion-duration-normal) var(--motion-ease-out),
              transform var(--motion-duration-fast) var(--motion-ease-spring),
              box-shadow var(--motion-duration-normal) var(--motion-ease-out);
}

/* Button ripple effect */
.button .ripple {
  position: absolute;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.3);
  transform: scale(0);
  animation: rippleEffect var(--motion-duration-slow) var(--motion-ease-out) forwards;
  pointer-events: none;
}

@keyframes rippleEffect {
  to {
    transform: scale(4);
    opacity: 0;
  }
}

/* Button hover glow */
.button:hover {
  box-shadow: 0 4px 15px rgba(99, 102, 241, 0.3);
}

.button-secondary:hover {
  box-shadow: 0 4px 15px rgba(16, 185, 129, 0.3);
}

/* ============================================
   CONTACT CARD ANIMATION
   ============================================ */
.contact-card {
  transition: transform var(--motion-duration-normal) var(--motion-ease-spring),
              box-shadow var(--motion-duration-normal) var(--motion-ease-out);
}

.contact-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 20px 40px rgba(99, 102, 241, 0.3);
}

/* Email link pulse */
.contact-card__email {
  transition: background-color var(--motion-duration-fast) var(--motion-ease-out),
              transform var(--motion-duration-fast) var(--motion-ease-spring);
}

.contact-card__email:hover {
  transform: translateY(-3px) scale(1.02);
}

/* ============================================
   FLOATING ELEMENTS / DECORATIVE MOTION
   ============================================ */
.float-element {
  animation: gentleFloat 6s ease-in-out infinite;
}

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

/* ============================================
   SCROLL-LINKED PARALLAX SECTIONS
   ============================================ */
[data-parallax-bg] {
  position: relative;
  overflow: hidden;
}

[data-parallax-bg]::before {
  content: '';
  position: absolute;
  top: -20%;
  left: 0;
  width: 100%;
  height: 140%;
  background: inherit;
  background-size: cover;
  background-position: center;
  will-change: transform;
  z-index: 0;
}

/* ============================================
   SMOOTH SECTION DIVIDERS
   ============================================ */
.section-divider {
  position: relative;
  overflow: hidden;
}

.section-divider::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 4px;
  background: linear-gradient(90deg, 
    transparent 0%, 
    var(--color-primary) 20%, 
    var(--color-secondary) 80%, 
    transparent 100%
  );
  opacity: 0;
  transform: scaleX(0);
  transition: transform var(--motion-duration-slower) var(--motion-ease-out),
              opacity var(--motion-duration-slow) var(--motion-ease-out);
}

.section-divider.is-revealed::before {
  opacity: 1;
  transform: scaleX(1);
}

/* ============================================
   TEXT REVEAL ANIMATION
   ============================================ */
[data-text-reveal] {
  overflow: hidden;
}

[data-text-reveal] > span {
  display: inline-block;
  transform: translateY(100%);
  transition: transform var(--motion-duration-slow) var(--motion-ease-out);
}

[data-text-reveal].is-revealed > span {
  transform: translateY(0);
}

/* ============================================
   COUNTER / NUMBER ANIMATION
   ============================================ */
[data-count-up] {
  font-variant-numeric: tabular-nums;
}

/* ============================================
   MAGNETIC HOVER EFFECT (for buttons/cards)
   ============================================ */
[data-magnetic] {
  transition: transform var(--motion-duration-fast) var(--motion-ease-out);
}

/* ============================================
   CURSOR FOLLOWER
   ============================================ */
.cursor-glow {
  position: fixed;
  width: 300px;
  height: 300px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(99, 102, 241, 0.08) 0%, transparent 70%);
  pointer-events: none;
  z-index: 0;
  transform: translate(-50%, -50%);
  transition: opacity var(--motion-duration-normal) var(--motion-ease-out);
  opacity: 0;
}

.cursor-glow.is-active {
  opacity: 1;
}

:root[data-theme="dark"] .cursor-glow {
  background: radial-gradient(circle, rgba(99, 102, 241, 0.12) 0%, transparent 70%);
}

/* ============================================
   SMOOTH SCROLL INDICATOR
   ============================================ */
.scroll-indicator {
  position: absolute;
  bottom: 2rem;
  left: 50%;
  transform: translateX(-50%);
  z-index: 3;
  opacity: 0;
  animation: scrollIndicatorFade 1s var(--motion-ease-out) 1.5s forwards;
}

.scroll-indicator-arrow {
  width: 24px;
  height: 24px;
  border-right: 2px solid rgba(255, 255, 255, 0.8);
  border-bottom: 2px solid rgba(255, 255, 255, 0.8);
  transform: rotate(45deg);
  animation: scrollBounce 2s var(--motion-ease-in-out) infinite;
}

@keyframes scrollIndicatorFade {
  to { opacity: 1; }
}

@keyframes scrollBounce {
  0%, 20%, 50%, 80%, 100% { transform: rotate(45deg) translateY(0); }
  40% { transform: rotate(45deg) translateY(8px); }
  60% { transform: rotate(45deg) translateY(4px); }
}

/* ============================================
   ARTICLE CONTENT ANIMATIONS
   ============================================ */
.article-content h2,
.article-content h3 {
  position: relative;
}

.article-content h2::before {
  content: '';
  position: absolute;
  left: -1rem;
  top: 0;
  width: 3px;
  height: 0;
  background: linear-gradient(180deg, var(--color-primary), var(--color-secondary));
  border-radius: 2px;
  transition: height var(--motion-duration-slow) var(--motion-ease-out);
}

.article-content h2.is-revealed::before {
  height: 100%;
}

/* ============================================
   FOOTER ENTRANCE
   ============================================ */
.site-footer {
  position: relative;
}

.site-footer .footer-section {
  opacity: 0;
  transform: translateY(20px);
  transition: opacity var(--motion-duration-slow) var(--motion-ease-out),
              transform var(--motion-duration-slow) var(--motion-ease-out);
}

.site-footer.is-revealed .footer-section {
  opacity: 1;
  transform: translateY(0);
}

.site-footer.is-revealed .footer-section:nth-child(1) { transition-delay: 0ms; }
.site-footer.is-revealed .footer-section:nth-child(2) { transition-delay: 100ms; }
.site-footer.is-revealed .footer-section:nth-child(3) { transition-delay: 200ms; }

/* ============================================
   LOADING SKELETON PULSE
   ============================================ */
.skeleton-pulse {
  background: linear-gradient(90deg, 
    var(--color-background-alt) 25%, 
    var(--color-background-hover) 50%, 
    var(--color-background-alt) 75%
  );
  background-size: 200% 100%;
  animation: skeletonPulse 1.5s ease-in-out infinite;
}

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

/* ============================================
   MOBILE MENU ENHANCED ANIMATION
   ============================================ */
@media (max-width: 768px) {
  .site-nav {
    transition: right var(--motion-duration-slow) var(--motion-ease-out),
                opacity var(--motion-duration-normal) var(--motion-ease-out);
    opacity: 0;
  }

  .site-nav.is-open {
    opacity: 1;
  }

  .site-nav .nav-item {
    opacity: 0;
    transform: translateX(20px);
    transition: opacity var(--motion-duration-normal) var(--motion-ease-out),
                transform var(--motion-duration-normal) var(--motion-ease-out);
  }

  .site-nav.is-open .nav-item {
    opacity: 1;
    transform: translateX(0);
  }

  .site-nav.is-open .nav-item:nth-child(1) { transition-delay: 100ms; }
  .site-nav.is-open .nav-item:nth-child(2) { transition-delay: 150ms; }
  .site-nav.is-open .nav-item:nth-child(3) { transition-delay: 200ms; }
  .site-nav.is-open .nav-item:nth-child(4) { transition-delay: 250ms; }
  .site-nav.is-open .nav-item:nth-child(5) { transition-delay: 300ms; }

  /* Overlay fade */
  .nav-overlay {
    opacity: 0;
    transition: opacity var(--motion-duration-normal) var(--motion-ease-out);
    display: block !important;
    pointer-events: none;
  }

  .nav-overlay.is-visible {
    opacity: 1;
    pointer-events: auto;
  }
}

/* ============================================
   PREFERS REDUCED MOTION
   ============================================ */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }

  [data-reveal],
  [data-reveal-stagger] > *,
  .hero-title,
  .hero-subtitle,
  .page-content-animate,
  .site-footer .footer-section {
    opacity: 1 !important;
    transform: none !important;
  }

  .page-transition-overlay {
    display: none !important;
  }

  .cursor-glow {
    display: none !important;
  }

  .reading-progress {
    transition: none !important;
  }

  .hero::after {
    display: none !important;
  }
}