/* =========================================================================
   SchoolPro — Animations Stylesheet
   -------------------------------------------------------------------------
   Table of Contents
   01. Reduced Motion (Accessibility First)
   02. Scroll Reveal Base
   03. Reveal Variants
   04. Stagger Utility
   05. Floating Decorative Shapes
   06. Button & Link Micro-interactions
   07. Image Zoom Effects
   08. Hero Slider Animations
   09. Counter Pulse
   10. Icon Animations
   11. Loading States
   12. Marquee
   13. Hover Lifts (Cards)
   14. Section Entrances
   15. Keyboard Focus Animations
   16. Utility Animation Classes
   ========================================================================= */

/* =========================================================================
   01. REDUCED MOTION — Accessibility First
   ========================================================================= */
@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;
	}

	.sp-reveal { opacity: 1 !important; transform: none !important; }
	.sp-slide__media { transform: none !important; }
	.sp-float { animation: none !important; }
	.sp-marquee { animation: none !important; }
}

/* =========================================================================
   02. SCROLL REVEAL — Base
   ========================================================================= */
.sp-reveal {
	opacity: 0;
	transform: translateY(24px);
	transition:
		opacity 700ms cubic-bezier(.22,.61,.36,1),
		transform 700ms cubic-bezier(.22,.61,.36,1);
	will-change: opacity, transform;
}
.sp-reveal.is-visible {
	opacity: 1;
	transform: translateY(0);
	will-change: auto;
}

/* =========================================================================
   03. REVEAL VARIANTS
   ========================================================================= */
.sp-reveal--up { transform: translateY(32px); }
.sp-reveal--down { transform: translateY(-32px); }
.sp-reveal--left { transform: translateX(-40px); }
.sp-reveal--right { transform: translateX(40px); }
.sp-reveal--fade { transform: none; }
.sp-reveal--zoom { transform: scale(0.94); opacity: 0; }
.sp-reveal--zoom.is-visible { transform: scale(1); opacity: 1; }
.sp-reveal--rotate { transform: translateY(24px) rotate(-2deg); }

.sp-reveal--up.is-visible,
.sp-reveal--down.is-visible,
.sp-reveal--left.is-visible,
.sp-reveal--right.is-visible,
.sp-reveal--fade.is-visible,
.sp-reveal--rotate.is-visible {
	opacity: 1;
	transform: translate(0, 0) rotate(0);
}

/* =========================================================================
   04. STAGGER UTILITY
   ========================================================================= */
.sp-stagger > .sp-reveal:nth-child(1) { transition-delay: 0ms; }
.sp-stagger > .sp-reveal:nth-child(2) { transition-delay: 80ms; }
.sp-stagger > .sp-reveal:nth-child(3) { transition-delay: 160ms; }
.sp-stagger > .sp-reveal:nth-child(4) { transition-delay: 240ms; }
.sp-stagger > .sp-reveal:nth-child(5) { transition-delay: 320ms; }
.sp-stagger > .sp-reveal:nth-child(6) { transition-delay: 400ms; }
.sp-stagger > .sp-reveal:nth-child(7) { transition-delay: 480ms; }
.sp-stagger > .sp-reveal:nth-child(8) { transition-delay: 560ms; }

/* =========================================================================
   05. FLOATING DECORATIVE SHAPES
   ========================================================================= */
.sp-float {
	position: absolute;
	border-radius: 50%;
	pointer-events: none;
	z-index: 0;
	opacity: 0.5;
}
.sp-float--primary {
	background: radial-gradient(circle, rgba(23,63,130,.25), rgba(23,63,130,0) 70%);
	animation: sp-float-y 8s ease-in-out infinite;
}
.sp-float--secondary {
	background: radial-gradient(circle, rgba(244,123,54,.25), rgba(244,123,54,0) 70%);
	animation: sp-float-y 10s ease-in-out infinite;
	animation-delay: -2s;
}
.sp-float--sm { width: 120px; height: 120px; }
.sp-float--md { width: 240px; height: 240px; }
.sp-float--lg { width: 400px; height: 400px; }

@keyframes sp-float-y {
	0%, 100% { transform: translateY(0) rotate(0deg); }
	50%      { transform: translateY(-24px) rotate(8deg); }
}

.sp-blob {
	position: absolute;
	border-radius: 50%;
	filter: blur(60px);
	opacity: 0.35;
	pointer-events: none;
	z-index: 0;
}
.sp-blob--primary {
	background: var(--sp-primary);
	animation: sp-blob-move 12s ease-in-out infinite;
}
.sp-blob--secondary {
	background: var(--sp-secondary);
	animation: sp-blob-move 14s ease-in-out infinite;
	animation-delay: -4s;
}
@keyframes sp-blob-move {
	0%, 100% { transform: translate(0, 0) scale(1); }
	33%      { transform: translate(30px, -20px) scale(1.08); }
	66%      { transform: translate(-20px, 30px) scale(0.94); }
}

/* =========================================================================
   06. BUTTON & LINK MICRO-INTERACTIONS
   ========================================================================= */
.sp-btn { position: relative; overflow: hidden; }
.sp-btn::after {
	content: "";
	position: absolute;
	top: 50%; left: 50%;
	width: 0; height: 0;
	background: rgba(255,255,255,.25);
	border-radius: 50%;
	transform: translate(-50%, -50%);
	transition: width 500ms ease, height 500ms ease;
	pointer-events: none;
}
.sp-btn:hover::after { width: 320px; height: 320px; }

.sp-btn--pulse { animation: sp-pulse 2.4s ease-in-out infinite; }
@keyframes sp-pulse {
	0%, 100% { box-shadow: 0 0 0 0 rgba(244,123,54,.6); }
	50%      { box-shadow: 0 0 0 14px rgba(244,123,54,0); }
}

.sp-nav__link { position: relative; }
.sp-nav__link::after {
	content: "";
	position: absolute;
	left: 14px; right: 14px; bottom: 6px;
	height: 2px;
	background: var(--sp-secondary);
	transform: scaleX(0);
	transform-origin: left center;
	transition: transform var(--sp-transition);
}
.sp-nav__link:hover::after { transform: scaleX(1); }

.sp-card__link .sp-icon,
.sp-card__link svg { transition: transform var(--sp-transition); }
.sp-card__link:hover .sp-icon,
.sp-card__link:hover svg { transform: translateX(4px); }

/* =========================================================================
   07. IMAGE ZOOM EFFECTS
   ========================================================================= */
.sp-card__media img,
.sp-principal__media img,
.sp-intro__media img {
	transition: transform 800ms cubic-bezier(.22,.61,.36,1);
}
.sp-card:hover .sp-card__media img { transform: scale(1.05); }
.sp-intro__media:hover img { transform: scale(1.03); }

.sp-gallery__item {
	transition: transform 400ms cubic-bezier(.22,.61,.36,1),
	            box-shadow 400ms cubic-bezier(.22,.61,.36,1);
}
.sp-gallery__item:hover {
	transform: scale(1.04);
	box-shadow: var(--sp-shadow-md);
	z-index: 2;
}

/* Gallery image fit */
.sp-gallery__item img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
	transition: transform 600ms cubic-bezier(.22,.61,.36,1);
}
.sp-gallery__item:hover img {
	transform: scale(1.05);
}

/* =========================================================================
   08. HERO SLIDER ANIMATIONS
   ========================================================================= */
.sp-slide { transition: opacity 700ms ease, visibility 700ms ease; }
.sp-slide .sp-slide__eyebrow,
.sp-slide .sp-slide__title,
.sp-slide .sp-slide__text,
.sp-slide .sp-slide__actions {
	opacity: 0;
	transform: translateY(24px);
	transition: opacity 600ms ease, transform 600ms cubic-bezier(.22,.61,.36,1);
}
.sp-slide.is-active .sp-slide__eyebrow {
	opacity: 1; transform: translateY(0); transition-delay: 200ms;
}
.sp-slide.is-active .sp-slide__title {
	opacity: 1; transform: translateY(0); transition-delay: 340ms;
}
.sp-slide.is-active .sp-slide__text {
	opacity: 1; transform: translateY(0); transition-delay: 480ms;
}
.sp-slide.is-active .sp-slide__actions {
	opacity: 1; transform: translateY(0); transition-delay: 620ms;
}

.sp-slide__media {
	transform: scale(1.08);
	transition: transform 8s cubic-bezier(.22,.61,.36,1);
}
.sp-slide.is-active .sp-slide__media { transform: scale(1); }

.sp-slider__nav {
	transition: background var(--sp-transition),
	            color var(--sp-transition),
	            transform var(--sp-transition),
	            opacity var(--sp-transition);
}
.sp-slider__nav:hover { transform: translateY(-50%) scale(1.08); }

.sp-slider__dot {
	transition: background var(--sp-transition),
	            width var(--sp-transition),
	            transform var(--sp-transition);
}
.sp-slider__dot:hover {
	transform: scale(1.2);
	background: rgba(255,255,255,.85);
}
.sp-slider__dot.is-active { transform: none; }

.sp-slider__pause {
	transition: background var(--sp-transition), color var(--sp-transition);
}
.sp-slider__pause:hover { background: rgba(255,255,255,.3); }

/* =========================================================================
   09. COUNTER PULSE
   ========================================================================= */
[data-sp-counter] {
	display: inline-block;
	transition: transform 300ms ease;
}
[data-sp-counter].is-counting {
	animation: sp-counter-pulse 400ms ease-in-out infinite;
}
@keyframes sp-counter-pulse {
	0%, 100% { transform: scale(1); }
	50%      { transform: scale(1.04); }
}

/* =========================================================================
   10. ICON ANIMATIONS
   ========================================================================= */
.sp-feature:hover .sp-feature__icon {
	animation: sp-icon-bounce 600ms ease;
}
@keyframes sp-icon-bounce {
	0%, 100% { transform: translateY(0); }
	40%      { transform: translateY(-6px); }
	70%      { transform: translateY(-2px); }
}

.sp-card--pillar:hover .sp-card__icon svg {
	animation: sp-icon-spin 600ms ease;
}
@keyframes sp-icon-spin {
	0%   { transform: rotate(0deg); }
	100% { transform: rotate(360deg); }
}

.sp-announcement__socials a svg {
	transition: transform var(--sp-transition);
}
.sp-announcement__socials a:hover svg { transform: scale(1.15); }

.sp-nav__toggle { transition: background var(--sp-transition); }

.sp-has-submenu.is-open > .sp-nav__link .sp-submenu__caret,
.sp-has-submenu:hover > .sp-nav__link .sp-submenu__caret {
	transform: rotate(45deg);
}

/* =========================================================================
   11. LOADING STATES
   ========================================================================= */
.sp-loader {
	display: inline-block;
	width: 20px; height: 20px;
	border: 2px solid currentColor;
	border-top-color: transparent;
	border-radius: 50%;
	animation: sp-spin 700ms linear infinite;
	vertical-align: middle;
}
@keyframes sp-spin { to { transform: rotate(360deg); } }

img[loading="lazy"] {
	opacity: 0;
	transition: opacity 400ms ease;
}
img[loading="lazy"].is-loaded,
img[loading="lazy"][complete] { opacity: 1; }

/* =========================================================================
   12. MARQUEE
   ========================================================================= */
.sp-marquee,
.sp-announcement__message--scrolling {
	display: inline-block;
	white-space: nowrap;
	animation: sp-marquee-scroll 30s linear infinite;
}
.sp-marquee:hover,
.sp-announcement__message--scrolling:hover {
	animation-play-state: paused;
}
@keyframes sp-marquee-scroll {
	0%   { transform: translateX(0); }
	100% { transform: translateX(-50%); }
}

/* =========================================================================
   13. HOVER LIFTS (Cards)
   ========================================================================= */
.sp-card--post,
.sp-card--program,
.sp-card--facility,
.sp-card--event,
.sp-card--teacher,
.sp-card--pillar,
.sp-card--testimonial,
.sp-feature,
.sp-stat,
.sp-step {
	transition: transform var(--sp-transition), box-shadow var(--sp-transition);
}
.sp-card--post:hover,
.sp-card--program:hover,
.sp-card--facility:hover,
.sp-card--event:hover,
.sp-card--teacher:hover,
.sp-card--pillar:hover,
.sp-card--testimonial:hover,
.sp-feature:hover,
.sp-stat:hover,
.sp-step:hover {
	transform: translateY(-6px);
	box-shadow: var(--sp-shadow-md);
}

/* =========================================================================
   14. SECTION ENTRANCES
   ========================================================================= */
.sp-section__head.sp-reveal {
	opacity: 0;
	transform: translateY(30px);
	transition: opacity 800ms ease, transform 800ms cubic-bezier(.22,.61,.36,1);
}
.sp-section__head.sp-reveal.is-visible {
	opacity: 1;
	transform: translateY(0);
}
.sp-section__lead.sp-reveal { transition-delay: 150ms; }
.sp-eyebrow.sp-reveal { transition-delay: 50ms; }

/* =========================================================================
   15. KEYBOARD FOCUS ANIMATIONS
   ========================================================================= */
:focus-visible { animation: sp-focus-pulse 400ms ease; }
@keyframes sp-focus-pulse {
	0%   { outline-offset: 0; }
	50%  { outline-offset: 6px; }
	100% { outline-offset: 3px; }
}

.sp-skip-link:focus { animation: sp-slide-down 300ms ease; }
@keyframes sp-slide-down {
	from { transform: translateY(-100%); }
	to   { transform: translateY(0); }
}

/* =========================================================================
   16. UTILITY ANIMATION CLASSES
   ========================================================================= */
.sp-fade-in {
	opacity: 0;
	animation: sp-fade-in 600ms ease forwards;
}
@keyframes sp-fade-in { to { opacity: 1; } }

.sp-slide-up {
	opacity: 0;
	transform: translateY(20px);
	animation: sp-slide-up 700ms cubic-bezier(.22,.61,.36,1) forwards;
}
@keyframes sp-slide-up {
	to { opacity: 1; transform: translateY(0); }
}

.sp-pulse { animation: sp-pulse-simple 2s ease-in-out infinite; }
@keyframes sp-pulse-simple {
	0%, 100% { opacity: 1; }
	50%      { opacity: 0.6; }
}

.sp-bounce { animation: sp-bounce 2s ease-in-out infinite; }
@keyframes sp-bounce {
	0%, 100% { transform: translateY(0); }
	50%      { transform: translateY(-8px); }
}

.sp-shake { animation: sp-shake 400ms ease; }
@keyframes sp-shake {
	0%, 100%      { transform: translateX(0); }
	20%, 60%      { transform: translateX(-6px); }
	40%, 80%      { transform: translateX(6px); }
}

.sp-fade-out { animation: sp-fade-out 300ms ease forwards; }
@keyframes sp-fade-out { to { opacity: 0; } }

.sp-rotate-slow { animation: sp-rotate 20s linear infinite; }
@keyframes sp-rotate { to { transform: rotate(360deg); } }

/* =========================================================================
   END OF ANIMATIONS
   ========================================================================= */