/* ═══════════════════════════════════════════
   SHARED ANIMATIONS — Teacher's Workflow
   Include on every page
═══════════════════════════════════════════ */

/* ── Scroll-reveal ── */
.reveal {
  opacity: 0;
  transform: translateY(40px);
  transition: opacity .7s ease, transform .7s ease;
}
.reveal.visible {
  opacity: 1;
  transform: translateY(0);
}
.reveal-left {
  opacity: 0;
  transform: translateX(-60px);
  transition: opacity .7s ease, transform .7s ease;
}
.reveal-left.visible {
  opacity: 1;
  transform: translateX(0);
}
.reveal-right {
  opacity: 0;
  transform: translateX(60px);
  transition: opacity .7s ease, transform .7s ease;
}
.reveal-right.visible {
  opacity: 1;
  transform: translateX(0);
}
.reveal-scale {
  opacity: 0;
  transform: scale(0.88);
  transition: opacity .6s ease, transform .6s ease;
}
.reveal-scale.visible {
  opacity: 1;
  transform: scale(1);
}

/* Stagger delays */
.delay-1 { transition-delay: .1s }
.delay-2 { transition-delay: .2s }
.delay-3 { transition-delay: .3s }
.delay-4 { transition-delay: .4s }
.delay-5 { transition-delay: .5s }
.delay-6 { transition-delay: .6s }

/* ── Section backgrounds ── */
.bg-gradient-soft {
  background: linear-gradient(160deg, #F5F7FC 0%, #EEF3FB 50%, #F8F9FC 100%);
}
.bg-dots {
  background-color: #F8F9FC;
  background-image: radial-gradient(#D0DCF0 1px, transparent 1px);
  background-size: 24px 24px;
}
.bg-grid {
  background-color: #F5F7FC;
  background-image: linear-gradient(rgba(27,58,107,.04) 1px, transparent 1px),
                    linear-gradient(90deg, rgba(27,58,107,.04) 1px, transparent 1px);
  background-size: 40px 40px;
}
.bg-glow {
  background: radial-gradient(ellipse at 30% 40%, rgba(42,82,152,.08) 0%, transparent 60%),
              radial-gradient(ellipse at 70% 60%, rgba(232,201,106,.06) 0%, transparent 60%),
              white;
}

/* ── Card hover lifts ── */
.card-hover {
  transition: transform .25s ease, box-shadow .25s ease;
}
.card-hover:hover {
  transform: translateY(-6px);
  box-shadow: 0 20px 48px rgba(15,35,71,.14) !important;
}

/* ── Shimmer / glow pulse ── */
@keyframes shimmer {
  0% { background-position: -400px 0 }
  100% { background-position: 400px 0 }
}
.shimmer {
  background: linear-gradient(90deg, transparent 0%, rgba(255,255,255,.6) 50%, transparent 100%);
  background-size: 400px 100%;
  animation: shimmer 2.5s ease-in-out infinite;
}

/* ── Float animation ── */
@keyframes floatUp {
  0%,100% { transform: translateY(0) }
  50% { transform: translateY(-8px) }
}
.float { animation: floatUp 3s ease-in-out infinite }
.float-slow { animation: floatUp 5s ease-in-out infinite }

/* ── Spin once then pause ── */
@keyframes spinPause {
  0%   { transform: rotate(0deg) scale(1) }
  8%   { transform: rotate(360deg) scale(1.3) }
  12%  { transform: rotate(360deg) scale(1) }
  100% { transform: rotate(360deg) scale(1) }
}
.spin-icon {
  display: inline-block;
  animation: spinPause 5s ease-in-out infinite;
  transform-origin: center;
  filter: drop-shadow(0 0 12px rgba(232,201,106,.7));
}

/* ── Glow pulse on icon ── */
@keyframes glowPulse {
  0%,100% { box-shadow: 0 0 0 0 rgba(232,201,106,.4), 0 4px 16px rgba(15,35,71,.12) }
  50%     { box-shadow: 0 0 0 10px rgba(232,201,106,.0), 0 8px 32px rgba(15,35,71,.18) }
}
.glow-pulse { animation: glowPulse 3s ease-in-out infinite }

/* ── Scrolling marquee (horizontal) ── */
.marquee-wrap { overflow: hidden; position: relative }
.marquee-row {
  display: flex;
  gap: 16px;
  width: max-content;
  animation: marqueeLeft 30s linear infinite;
}
.marquee-row-reverse {
  display: flex;
  gap: 16px;
  width: max-content;
  animation: marqueeLeft 38s linear infinite reverse;
}
@keyframes marqueeLeft {
  from { transform: translateX(0) }
  to   { transform: translateX(-50%) }
}
.marquee-wrap:hover .marquee-row,
.marquee-wrap:hover .marquee-row-reverse { animation-play-state: paused }

/* Fade edge masks */
.marquee-wrap::before,
.marquee-wrap::after {
  content: '';
  position: absolute;
  top: 0; bottom: 0;
  width: 80px;
  z-index: 2;
  pointer-events: none;
}
.marquee-wrap::before { left: 0; background: linear-gradient(to right, var(--fade-color, white), transparent) }
.marquee-wrap::after  { right: 0; background: linear-gradient(to left, var(--fade-color, white), transparent) }

/* ── Counter animation ── */
.count-up { font-variant-numeric: tabular-nums }

/* ── Step connector line ── */
.step-line {
  position: absolute;
  top: 40px;
  left: calc(50% + 44px);
  right: calc(-50% + 44px);
  height: 2px;
  background: linear-gradient(90deg, #D0DCF0 0%, #1B3A6B 100%);
  z-index: 0;
}