/* ==============================================
   ESDU MODULAR ANIMATIONS SYSTEM
   Purpose: Add/remove animations independently
   ============================================== */

/* Animation Control Variables */
:root {
  --anim-duration-fast: 0.3s;
  --anim-duration-normal: 0.6s;
  --anim-duration-slow: 1s;
  --anim-ease-smooth: cubic-bezier(0.4, 0, 0.2, 1);
  --anim-ease-bounce: cubic-bezier(0.68, -0.55, 0.265, 1.55);
}

/* ==============================================
   1. GLOBAL PAGE-LEVEL ANIMATIONS
   ============================================== */

/* Section fade-up on scroll - only affects sections without initial visibility */
.section:not(.visible):not(.visible-fade-up):not(.hero) {
  opacity: 0;
  -webkit-transform: translateY(30px);
  -ms-transform: translateY(30px);
  transform: translateY(30px);
  -webkit-transition: opacity var(--anim-duration-normal) var(--anim-ease-smooth),
              -webkit-transform var(--anim-duration-normal) var(--anim-ease-smooth);
  transition: opacity var(--anim-duration-normal) var(--anim-ease-smooth),
              transform var(--anim-duration-normal) var(--anim-ease-smooth);
}

/* Hero should always be visible on load */
.section.hero {
  opacity: 1;
  transform: translateY(0);
}

.section.visible,
.section.visible-fade-up {
  opacity: 1;
  transform: translateY(0);
}

/* Header shrink on scroll */
.site-header.scrolled {
  padding: 0.5rem 0;
  box-shadow: 0 2px 10px rgba(0,0,0,.05);
}

/* ==============================================
   2. HERO SECTION ANIMATIONS
   ============================================== */

/* Hero ESDU title - dramatic sweep in */
.hero-esdu {
  opacity: 1;
}

.esdu-line {
  opacity: 0;
}
.esdu-text {
  opacity: 0;
}

.esdu-letter {
  display: inline-block;
  transform: translateX(-200px) scale(3) rotate(-20deg);
  animation: sweepLetter 1s cubic-bezier(0.68, -0.55, 0.265, 1.55) forwards;
}

.esdu-line:nth-child(1) .esdu-letter { animation-delay: 0.2s; }
.esdu-line:nth-child(2) .esdu-letter { animation-delay: 0.4s; }
.esdu-line:nth-child(3) .esdu-letter { animation-delay: 0.6s; }
.esdu-line:nth-child(4) .esdu-letter { animation-delay: 0.8s; }

.esdu-line:nth-child(1) { animation: sweepInLine 1s var(--anim-ease-smooth) 0.5s forwards; }
.esdu-line:nth-child(2) { animation: sweepInLine 1s var(--anim-ease-smooth) 0.7s forwards; }
.esdu-line:nth-child(3) { animation: sweepInLine 1s var(--anim-ease-smooth) 0.9s forwards; }
.esdu-line:nth-child(4) { animation: sweepInLine 1s var(--anim-ease-smooth) 1.1s forwards; }

.esdu-line:nth-child(1) .esdu-text { animation: sweepInLine 1s var(--anim-ease-smooth) 0.7s forwards; }
.esdu-line:nth-child(2) .esdu-text { animation: sweepInLine 1s var(--anim-ease-smooth) 0.9s forwards; }
.esdu-line:nth-child(3) .esdu-text { animation: sweepInLine 1s var(--anim-ease-smooth) 1.1s forwards; }
.esdu-line:nth-child(4) .esdu-text { animation: sweepInLine 1s var(--anim-ease-smooth) 1.3s forwards; }

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

@keyframes sweepLetter {
  from {
    opacity: 0;
    transform: translateX(-200px) scale(3) rotate(-20deg);
    color: transparent;
  }
  70% {
    transform: translateX(15px) scale(1.15) rotate(5deg);
    color: var(--brand-ink);
  }
  to {
    opacity: 1;
    transform: translateX(0) scale(1) rotate(0deg);
    color: var(--brand);
  }
}

/* Hero paragraph dramatic fade - excluding subtitle */
.hero-copy > p:not(.hero-subtitle) {
  opacity: 0;
  transform: translateY(40px) scale(0.9);
  animation: heroParagraphPop 1s var(--anim-ease-bounce) 1.8s forwards;
}

@keyframes heroParagraphPop {
  0% {
    opacity: 0;
    transform: translateY(40px) scale(0.9);
  }
  60% {
    transform: translateY(-5px) scale(1.02);
  }
  100% {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

/* Hero CTAs dramatic pop */
.hero-ctas .btn {
  opacity: 0;
  transform: scale(0.5) rotate(-10deg);
}

.hero-ctas .btn:nth-child(1) {
  animation: ctaPop 0.8s var(--anim-ease-bounce) 2.2s forwards;
}

.hero-ctas .btn:nth-child(2) {
  animation: ctaPop 0.8s var(--anim-ease-bounce) 2.5s forwards;
}

@keyframes ctaPop {
  0% {
    opacity: 0;
    transform: scale(0.5) rotate(-10deg);
  }
  50% {
    transform: scale(1.15) rotate(5deg);
  }
  70% {
    transform: scale(0.95) rotate(-2deg);
  }
  100% {
    opacity: 1;
    transform: scale(1) rotate(0deg);
  }
}

/* Hero visual orbit - extending existing pulse animation */
.hero-visual .rings {
  animation: pulseDramatic 4s ease-in-out infinite, orbitRotateSlow 20s linear infinite;
}

.hero-visual .dots {
  animation: floatDotsDramatic 5s ease-in-out infinite;
}

@keyframes pulseDramatic {
  0%, 100% { 
    transform: scale(1);
    opacity: 1;
    filter: brightness(1);
  }
  50% { 
    transform: scale(1.15);
    opacity: 0.85;
    filter: brightness(1.3);
  }
}

@keyframes orbitRotateSlow {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}

@keyframes floatDotsDramatic {
  0%, 100% { 
    transform: translateY(0) translateX(0) scale(1);
  }
  33% { 
    transform: translateY(-12px) translateX(8px) scale(1.05);
  }
  66% { 
    transform: translateY(8px) translateX(-8px) scale(0.95);
  }
}

/* ==============================================
   3. SECTION HEADING ANIMATIONS
   ============================================== */

/* Underline bar wipe - dramatic */
.section-head h2::after {
  width: 0;
  animation: underlineWipeDramatic 1.5s cubic-bezier(0.68, -0.55, 0.265, 1.55) 0.5s forwards;
}

@keyframes underlineWipeDramatic {
  0% { width: 0; }
  70% { width: 110%; }
  100% { width: 100%; }
}

/* Numbered tag dramatic slide-in */
.section-head p {
  opacity: 0;
  transform: translateX(-50px) scale(0.9);
  animation: slideInDramatic 1s var(--anim-ease-bounce) 0.7s forwards;
}

@keyframes slideInDramatic {
  0% {
    opacity: 0;
    transform: translateX(-50px) scale(0.9);
  }
  60% {
    transform: translateX(10px) scale(1.05);
  }
  100% {
    opacity: 1;
    transform: translateX(0) scale(1);
  }
}

/* ==============================================
   4. MISSION/VISION/VALUES CARD ANIMATIONS
   ============================================== */

/* Card dramatic entrance */
.mvv .card {
  opacity: 0;
  transform: translateY(60px) scale(0.8) rotate(5deg);
}

.mvv .card:nth-child(1) {
  animation: cardPopIn 1s var(--anim-ease-bounce) 0.3s forwards;
}

.mvv .card:nth-child(2) {
  animation: cardPopIn 1s var(--anim-ease-bounce) 0.6s forwards;
}

.mvv .card:nth-child(3) {
  animation: cardPopIn 1s var(--anim-ease-bounce) 0.9s forwards;
}

.mvv .card-values {
  opacity: 0;
  transform: translateY(60px) scale(0.8) rotate(5deg);
  animation: cardPopIn 1s var(--anim-ease-bounce) 0.9s forwards;
}

@keyframes cardPopIn {
  0% {
    opacity: 0;
    transform: translateY(60px) scale(0.8) rotate(5deg);
  }
  60% {
    transform: translateY(-10px) scale(1.05) rotate(-2deg);
  }
  100% {
    opacity: 1;
    transform: translateY(0) scale(1) rotate(0deg);
  }
}

/* Core Values list items dramatic entrance */
.pill-list li {
  opacity: 0;
  transform: translateX(-50px) scale(0.7) rotate(-10deg);
}

.pill-list li:nth-child(1) { animation: pillPopIn 0.8s var(--anim-ease-bounce) 1s forwards; }
.pill-list li:nth-child(2) { animation: pillPopIn 0.8s var(--anim-ease-bounce) 1.2s forwards; }
.pill-list li:nth-child(3) { animation: pillPopIn 0.8s var(--anim-ease-bounce) 1.4s forwards; }
.pill-list li:nth-child(4) { animation: pillPopIn 0.8s var(--anim-ease-bounce) 1.6s forwards; }
.pill-list li:nth-child(5) { animation: pillPopIn 0.8s var(--anim-ease-bounce) 1.8s forwards; }
.pill-list li:nth-child(6) { animation: pillPopIn 0.8s var(--anim-ease-bounce) 2s forwards; }
.pill-list li:nth-child(7) { animation: pillPopIn 0.8s var(--anim-ease-bounce) 2.2s forwards; }
.pill-list li:nth-child(8) { animation: pillPopIn 0.8s var(--anim-ease-bounce) 2.4s forwards; }

@keyframes pillPopIn {
  0% {
    opacity: 0;
    transform: translateX(-50px) scale(0.7) rotate(-10deg);
  }
  60% {
    transform: translateX(10px) scale(1.1) rotate(5deg);
  }
  100% {
    opacity: 1;
    transform: translateX(0) scale(1) rotate(0deg);
  }
}

/* ==============================================
   5. ESDU AT WORK CAROUSEL ANIMATIONS
   ============================================== */

/* Slide push from right */
.slide.is-active {
  transform: translateX(0);
}

.slide.is-prev {
  transform: translateX(-5%);
}

.slide.is-next {
  transform: translateX(5%);
}

/* Carousel dots pulse */
.carousel-dots button[aria-current="true"] {
  animation: dotPulse 2s ease-in-out infinite;
}

@keyframes dotPulse {
  0%, 100% { transform: scale(1.15); }
  50% { transform: scale(1.3); }
}

/* ==============================================
   6. KEEPERS SECTION ANIMATIONS
   ============================================== */

/* Card dramatic 3D entrance */
.kotl-card {
  opacity: 0;
  transform: translateY(80px) perspective(800px) rotateX(25deg) scale(0.7);
  transition: all var(--anim-duration-normal) var(--anim-ease-smooth);
}

.kotl-card.visible,
.kotl-card.visible-fade-up {
  opacity: 1;
  animation: kotlCardPop 1.2s var(--anim-ease-bounce) forwards;
}

@keyframes kotlCardPop {
  0% {
    opacity: 0;
    transform: translateY(80px) perspective(800px) rotateX(25deg) scale(0.7);
  }
  60% {
    transform: translateY(-15px) perspective(800px) rotateX(-5deg) scale(1.05);
  }
  100% {
    opacity: 1;
    transform: translateY(0) perspective(800px) rotateX(0deg) scale(1);
  }
}

/* Chips underline wipe on hover */
.chip-list a {
  position: relative;
  overflow: hidden;
}

.chip-list a::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  width: 0;
  height: 2px;
  background: var(--brand);
  transition: width 0.3s ease;
}

.chip-list a:hover::after {
  width: 100%;
}

/* Initiatives grid dramatic entrance */
.initiative-item {
  opacity: 0;
  transform: translateY(60px) scale(0.8) rotate(10deg);
}

.initiative-item:nth-child(1) { animation: initiativePop 1s var(--anim-ease-bounce) 0.2s forwards; }
.initiative-item:nth-child(2) { animation: initiativePop 1s var(--anim-ease-bounce) 0.4s forwards; }
.initiative-item:nth-child(3) { animation: initiativePop 1s var(--anim-ease-bounce) 0.6s forwards; }
.initiative-item:nth-child(4) { animation: initiativePop 1s var(--anim-ease-bounce) 0.8s forwards; }
.initiative-item:nth-child(5) { animation: initiativePop 1s var(--anim-ease-bounce) 1s forwards; }

@keyframes initiativePop {
  0% {
    opacity: 0;
    transform: translateY(60px) scale(0.8) rotate(10deg);
  }
  60% {
    transform: translateY(-10px) scale(1.05) rotate(-3deg);
  }
  100% {
    opacity: 1;
    transform: translateY(0) scale(1) rotate(0deg);
  }
}

/* ==============================================
   7. TIMELINE ANIMATIONS
   ============================================== */

/* Progress rail draw */
.timeline .progress {
  transition: width 1s linear;
}

/* Year dots pop */
.timeline .year {
  opacity: 0;
  transform: scale(0);
}

.timeline .year.visible,
.timeline .year.visible-fade-up {
  opacity: 1;
  transform: scale(1);
  transition: all 0.4s var(--anim-ease-bounce);
}

/* Year tooltip peek on hover */
.timeline .year:hover {
  transform: translateX(10px) scale(1.02);
  box-shadow: 0 8px 20px rgba(132,1,50,.15);
}

/* ==============================================
   8. IMPACT KPI ANIMATIONS
   ============================================== */

/* KPI dramatic bounce-in */
.kpi {
  opacity: 0;
  transform: scale(0.3) rotate(-15deg);
}

.kpi.visible {
  opacity: 1;
  animation: kpiDramaticBounce 1s var(--anim-ease-bounce) forwards;
}

@keyframes kpiDramaticBounce {
  0% {
    opacity: 0;
    transform: scale(0.3) rotate(-15deg);
  }
  50% {
    transform: scale(1.2) rotate(5deg);
  }
  70% {
    transform: scale(0.9) rotate(-2deg);
  }
  100% {
    opacity: 1;
    transform: scale(1) rotate(0deg);
  }
}

/* Staggered delays for KPIs */
.kpi:nth-child(1) { animation-delay: 0.1s; }
.kpi:nth-child(2) { animation-delay: 0.2s; }
.kpi:nth-child(3) { animation-delay: 0.3s; }
.kpi:nth-child(4) { animation-delay: 0.4s; }
.kpi:nth-child(5) { animation-delay: 0.5s; }
.kpi:nth-child(6) { animation-delay: 0.6s; }
.kpi:nth-child(7) { animation-delay: 0.7s; }
.kpi:nth-child(8) { animation-delay: 0.8s; }

/* Map fade-in zoom */
.map-stage {
  opacity: 0;
  transform: scale(0.95);
}

.map-stage.visible,
.map-stage.visible-fade-up {
  opacity: 1;
  animation: mapFadeZoom 1s var(--anim-ease-smooth) forwards;
}

@keyframes mapFadeZoom {
  to {
    opacity: 1;
    transform: scale(1);
  }
}

/* Tab underline slide */
.map-tabs button[aria-selected="true"]::before {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  width: 0;
  height: 2px;
  background: #fff;
  animation: tabSlide 0.3s ease forwards;
}

@keyframes tabSlide {
  to { width: 100%; }
}

/* ==============================================
   9. GOALS GRID ANIMATIONS
   ============================================== */

/* Masonry stagger */
.goal-card {
  opacity: 0;
  transform: translateY(40px);
}

.goal-card:nth-child(1) { animation: fadeInUp 0.6s ease 0.1s forwards; }
.goal-card:nth-child(2) { animation: fadeInUp 0.6s ease 0.2s forwards; }
.goal-card:nth-child(3) { animation: fadeInUp 0.6s ease 0.3s forwards; }
.goal-card:nth-child(4) { animation: fadeInUp 0.6s ease 0.4s forwards; }
.goal-card:nth-child(5) { animation: fadeInUp 0.6s ease 0.5s forwards; }

/* Heading emphasis on hover */
.goal-card h3:hover {
  letter-spacing: 0.05em;
  transition: letter-spacing 0.3s ease;
}

/* ==============================================
   10. PARTNERS LOGOS ANIMATIONS (Enhanced)
   ============================================== */

/* Logo animations are handled in styles.css to avoid conflicts */
/* Additional hover lift effect */
.logo-tile.visible,
.logo-tile.visible-fade-up {
  animation: logoFadeIn var(--anim-duration-normal) var(--anim-ease-smooth) forwards;
}

@keyframes logoFadeIn {
  from {
    opacity: 0;
    transform: translateY(20px) scale(0.95);
  }
  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

/* ==============================================
   11. RESOURCES ANIMATIONS
   ============================================== */

/* Slide-in from left */
.file-list li {
  opacity: 0;
  transform: translateX(-40px);
}

.file-list li:nth-child(1) { animation: fadeInLeft 0.5s ease 0.1s forwards; }
.file-list li:nth-child(2) { animation: fadeInLeft 0.5s ease 0.2s forwards; }
.file-list li:nth-child(3) { animation: fadeInLeft 0.5s ease 0.3s forwards; }
.file-list li:nth-child(4) { animation: fadeInLeft 0.5s ease 0.4s forwards; }
.file-list li:nth-child(5) { animation: fadeInLeft 0.5s ease 0.5s forwards; }

/* Icon wiggle on hover */
.file-list a::before {
  content: '📄';
  display: inline-block;
  transition: transform 0.3s ease;
}

.file-list a:hover::before {
  animation: wiggle 0.5s ease;
}

@keyframes wiggle {
  0%, 100% { transform: rotate(0deg); }
  25% { transform: rotate(-5deg); }
  75% { transform: rotate(5deg); }
}

/* ==============================================
   12. FOOTER ANIMATIONS
   ============================================== */

/* Footer fade-up on reach */
.site-footer {
  opacity: 0;
  transform: translateY(30px);
}

.site-footer.visible {
  opacity: 1;
  animation: fadeInUp var(--anim-duration-normal) var(--anim-ease-smooth) forwards;
}

/* Footer brand pulse */
.footer-brand .brand-mark {
  animation: pulseSlow 4s ease-in-out infinite;
}

/* ==============================================
   13. SHARED KEYFRAMES
   ============================================== */

@keyframes fadeInUp {
  from {
    opacity: 0;
    transform: translateY(30px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

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

/* ==============================================
   14. AMBIENT BACKGROUND ANIMATIONS
   ============================================== */

/* Floating shapes behind sections */
.bg-rose::before,
.bg-amber::before,
.bg-green::before {
  content: '';
  position: absolute;
  width: 200px;
  height: 200px;
  border-radius: 50%;
  opacity: 0.03;
  pointer-events: none;
  z-index: 0;
}

.bg-rose::before {
  background: var(--brand);
  animation: floatShape 20s ease-in-out infinite;
}

.bg-amber::before {
  background: var(--accent-amber);
  animation: floatShape 25s ease-in-out infinite;
}

.bg-green::before {
  background: var(--accent-green);
  animation: floatShape 30s ease-in-out infinite;
}

@keyframes floatShape {
  0%, 100% {
    transform: translate(0, 0);
  }
  33% {
    transform: translate(50px, -50px);
  }
  66% {
    transform: translate(-30px, 30px);
  }
}

/* Section background positioning */
.bg-rose,
.bg-amber,
.bg-green {
  position: relative;
}

.bg-rose > *,
.bg-amber > *,
.bg-green > * {
  position: relative;
  z-index: 1;
}

/* Subtle gradient shift on hero */
.hero {
  background: linear-gradient(180deg, #fff, #fafafa);
  animation: gradientShift 30s ease infinite;
}

@keyframes gradientShift {
  0%, 100% {
    background: linear-gradient(180deg, #fff, #fafafa);
  }
  50% {
    background: linear-gradient(180deg, #fafafa, #fff);
  }
}