/* ==========================================================================
   IISAUH THEME2026 — Scroll & Entrance Animations
   ========================================================================== */

:root {
	--anim-duration: 0.85s;
	--anim-ease: cubic-bezier(0.22, 1, 0.36, 1);
	--anim-ease-bounce: cubic-bezier(0.34, 1.56, 0.64, 1);
}

/* Scroll progress bar */
.scroll-progress {
	position: fixed;
	top: 0;
	left: 0;
	height: 3px;
	width: 0;
	background: linear-gradient(90deg, var(--teal), var(--teal-light), var(--yellow));
	z-index: 10001;
	transform-origin: left center;
	transition: width 0.08s linear;
	pointer-events: none;
}

/* Base hidden state */
[data-animate] {
	opacity: 0;
	will-change: transform, opacity, filter;
}

[data-animate].is-visible {
	opacity: 1;
}

/* Animation types */
[data-animate="fade-up"] {
	transform: translateY(48px);
}
[data-animate="fade-up"].is-visible {
	animation: animFadeUp var(--anim-duration) var(--anim-ease) forwards;
	animation-delay: var(--delay, 0ms);
}

[data-animate="fade-down"] {
	transform: translateY(-40px);
}
[data-animate="fade-down"].is-visible {
	animation: animFadeDown var(--anim-duration) var(--anim-ease) forwards;
	animation-delay: var(--delay, 0ms);
}

[data-animate="fade-left"] {
	transform: translateX(60px);
}
[data-animate="fade-left"].is-visible {
	animation: animFadeLeft var(--anim-duration) var(--anim-ease) forwards;
	animation-delay: var(--delay, 0ms);
}

[data-animate="fade-right"] {
	transform: translateX(-60px);
}
[data-animate="fade-right"].is-visible {
	animation: animFadeRight var(--anim-duration) var(--anim-ease) forwards;
	animation-delay: var(--delay, 0ms);
}

[data-animate="zoom-in"] {
	transform: scale(0.82);
}
[data-animate="zoom-in"].is-visible {
	animation: animZoomIn var(--anim-duration) var(--anim-ease) forwards;
	animation-delay: var(--delay, 0ms);
}

[data-animate="pop-in"] {
	transform: scale(0.4) rotate(-12deg);
}
[data-animate="pop-in"].is-visible {
	animation: animPopIn 0.7s var(--anim-ease-bounce) forwards;
	animation-delay: var(--delay, 0ms);
}

[data-animate="flip-up"] {
	transform: perspective(800px) rotateX(25deg) translateY(40px);
	transform-origin: center bottom;
}
[data-animate="flip-up"].is-visible {
	animation: animFlipUp 0.9s var(--anim-ease) forwards;
	animation-delay: var(--delay, 0ms);
}

[data-animate="blur-in"] {
	filter: blur(12px);
	transform: translateY(24px);
}
[data-animate="blur-in"].is-visible {
	animation: animBlurIn 1s var(--anim-ease) forwards;
	animation-delay: var(--delay, 0ms);
}

[data-animate="clip-reveal"] {
	clip-path: inset(0 100% 0 0);
}
[data-animate="clip-reveal"].is-visible {
	animation: animClipReveal 1s var(--anim-ease) forwards;
	animation-delay: var(--delay, 0ms);
}

[data-animate="rotate-in"] {
	transform: rotate(-8deg) scale(0.9);
	transform-origin: bottom left;
}
[data-animate="rotate-in"].is-visible {
	animation: animRotateIn 0.9s var(--anim-ease) forwards;
	animation-delay: var(--delay, 0ms);
}

/* Vision accent title */
[data-animate="vision-quote"] {
	opacity: 0;
	transform: translateY(12px);
	filter: blur(5px);
}

[data-animate="vision-quote"].is-visible {
	animation:
		visionQuoteTextIn 0.95s var(--anim-ease) forwards,
		visionQuoteShimmer 6s ease-in-out 1.1s infinite;
	animation-delay: var(--delay, 0ms), calc(var(--delay, 0ms) + 1.1s);
}

/* Keyframes */
@keyframes animFadeUp {
	to { opacity: 1; transform: translateY(0); }
}
@keyframes animFadeDown {
	to { opacity: 1; transform: translateY(0); }
}
@keyframes animFadeLeft {
	to { opacity: 1; transform: translateX(0); }
}
@keyframes animFadeRight {
	to { opacity: 1; transform: translateX(0); }
}
@keyframes animZoomIn {
	to { opacity: 1; transform: scale(1); }
}
@keyframes animPopIn {
	to { opacity: 1; transform: scale(1) rotate(0deg); }
}
@keyframes animFlipUp {
	to { opacity: 1; transform: perspective(800px) rotateX(0deg) translateY(0); }
}
@keyframes animBlurIn {
	to { opacity: 1; filter: blur(0); transform: translateY(0); }
}
@keyframes animClipReveal {
	to { opacity: 1; clip-path: inset(0 0 0 0); }
}
@keyframes animRotateIn {
	to { opacity: 1; transform: rotate(0deg) scale(1); }
}

@keyframes visionQuoteTextIn {
	to {
		opacity: 1;
		transform: translateY(0);
		filter: blur(0);
	}
}

@keyframes visionQuoteShimmer {
	0%, 100% { background-position: 0% center; }
	50% { background-position: 100% center; }
}

/* Hero animations — see assets/css/hero.css and assets/js/hero.js */

/* Parallax layers */
[data-parallax] {
	transition: transform 0.1s linear;
	will-change: transform;
}

/* Floating badges after reveal */
.accreditations__item.is-visible {
	animation: animPopIn 0.7s var(--anim-ease-bounce) forwards;
	animation-delay: var(--delay, 0ms);
}
.accreditations__item.is-floating .accreditations__badge {
	animation: floatBadge 4s ease-in-out infinite;
	animation-delay: var(--float-delay, 0s);
}

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

/* Mission play button */
.mission__play[data-animate] {
	transform: translate(-50%, -50%) scale(0.4);
	opacity: 0;
}

.mission__play.is-visible {
	animation: missionPlayIn 0.7s var(--anim-ease-bounce) forwards,
		playPulse 2.5s ease-in-out 1s infinite;
}

@keyframes missionPlayIn {
	to {
		opacity: 1;
		transform: translate(-50%, -50%) scale(1);
	}
}

@keyframes playPulse {
	0%, 100% {
		box-shadow: 0 0 0 0 rgba(255, 255, 255, 0.45);
	}
	50% {
		box-shadow: 0 0 0 18px rgba(255, 255, 255, 0);
	}
}

/* Section decorative reveal line */
.section-reveal-line {
	position: relative;
	overflow: hidden;
}
.section-reveal-line::after {
	content: '';
	position: absolute;
	bottom: -8px;
	left: 0;
	width: 0;
	height: 3px;
	background: linear-gradient(90deg, var(--teal), transparent);
	border-radius: 2px;
	transition: width 1s var(--anim-ease) 0.3s;
}
.section-reveal-line.is-visible::after {
	width: 80px;
}

/* Life card hover lift enhanced */
.life-card.is-visible {
	transition: transform 0.4s var(--anim-ease), box-shadow 0.4s ease;
}
.life-card.is-visible:hover {
	transform: translateY(-10px) scale(1.02);
}

/* Stat item glow on reveal */
.stat-item.is-visible .stat-item__icon {
	animation: iconGlow 0.8s var(--anim-ease) forwards;
	animation-delay: var(--delay, 0ms);
}

@keyframes iconGlow {
	0% { transform: scale(0.5); opacity: 0; }
	60% { transform: scale(1.15); }
	100% { transform: scale(1); opacity: 1; }
}

/* Event card image zoom on reveal */
.event-card.is-visible .event-card__image img {
	animation: imageZoomReveal 1.2s var(--anim-ease) forwards;
}

@keyframes imageZoomReveal {
	from { transform: scale(1.15); }
	to { transform: scale(1); }
}

.event-card.is-visible .event-card__image {
	overflow: hidden;
}

@keyframes eventsGridDrift {
	from {
		transform: translate3d(0, 0, 0);
	}

	to {
		transform: translate3d(72px, 72px, 0);
	}
}

@keyframes eventsOrbFloat {
	0% {
		transform: translate3d(0, 0, 0) scale(1);
	}

	100% {
		transform: translate3d(28px, -22px, 0) scale(1.08);
	}
}

@keyframes eventsRibbonSweep {
	0%, 100% {
		opacity: 0.28;
		transform: translate3d(-12px, 0, 0) rotate(-18deg);
	}

	50% {
		opacity: 0.72;
		transform: translate3d(18px, -10px, 0) rotate(-12deg);
	}
}

@keyframes eventsSparkTwinkle {
	0%, 100% {
		opacity: 0.25;
		transform: rotate(0deg) scale(0.75);
	}

	50% {
		opacity: 0.9;
		transform: rotate(45deg) scale(1.12);
	}
}

/* About gallery shape grow */
.about__gallery-shape.is-visible {
	animation: shapeGrow 1.2s var(--anim-ease) forwards;
}

@keyframes shapeGrow {
	from { transform: scale(0.6) rotate(-10deg); opacity: 0; }
	to { transform: scale(1) rotate(0deg); opacity: 1; }
}

@media (prefers-reduced-motion: reduce) {
	.events__art::before,
	.events__orb,
	.events__ribbon,
	.events__spark {
		animation: none !important;
	}

	.about__album-page {
		transition: none;
	}

	.about__album-page.is-leaving,
	.about__album-page.is-entering,
	.about__album-page.is-waiting {
		display: none;
	}

	.campus-facility-icon__stroke {
		animation: none;
		stroke-dasharray: none;
		stroke-dashoffset: 0;
		opacity: 1;
	}

	.hero-btn-icon__stroke {
		animation: none !important;
		stroke-dasharray: none !important;
		stroke-dashoffset: 0 !important;
		opacity: 1 !important;
	}

	.campus-facility-card__icon-inner {
		animation: none !important;
		transform: none !important;
		opacity: 1 !important;
	}

	[data-animate="vision-quote"],
	[data-animate="vision-quote"].is-visible {
		animation: none !important;
		opacity: 1 !important;
		transform: none !important;
		filter: none !important;
	}

	.vision__title-line--accent {
		color: var(--teal-light) !important;
		background: none !important;
		-webkit-background-clip: unset !important;
		background-clip: unset !important;
	}

	.campus-facilities__bg-track {
		animation: none !important;
		transform: none !important;
	}

	.campus-facilities__bg-media {
		transform: scale3d(1.04, 1.04, 1);
	}

	.campus-facilities__bg-media:first-child {
		margin-left: 0;
	}

	.life-gallery__frame,
	.life-gallery__frame--hover,
	.life-gallery__mosaic:has(.life-gallery__tile.is-hover-active) .life-gallery__tile:not(.is-hover-active) {
		transform: none !important;
		opacity: 1 !important;
		filter: none !important;
		visibility: visible !important;
		box-shadow: none !important;
	}

	.life-gallery__frame--hover.is-open,
	.life-gallery__tile.is-hover-active .life-gallery__frame--hover,
	.life-gallery__tile:focus-visible .life-gallery__frame--hover {
		opacity: 0 !important;
		visibility: hidden !important;
	}

	.life-gallery__bg-teal,
	.life-gallery__pattern::before,
	.life-gallery__pattern::after {
		animation: none !important;
		transform: none !important;
	}
}

/* About years badge — handled by about-years-badge.js */

.about__years-celebration.is-playing::before,
.about__years-celebration.is-playing::after {
	content: '';
	position: absolute;
	left: 0;
	top: 0;
	width: 72px;
	height: 72px;
	margin: -36px 0 0 -36px;
	border-radius: 50%;
	pointer-events: none;
}

.about__years-celebration.is-playing::before {
	background: radial-gradient(circle, rgba(0, 168, 150, 0.35) 0%, transparent 68%);
	animation: aboutCelebrationGlow 1s ease-out forwards;
}

.about__years-celebration.is-playing::after {
	border: 2px solid rgba(245, 158, 11, 0.45);
	animation: aboutCelebrationRing 1s ease-out forwards;
}

@keyframes aboutCelebrationGlow {
	0% {
		transform: scale(0.35);
		opacity: 0;
	}

	25% {
		opacity: 1;
	}

	100% {
		transform: scale(2.4);
		opacity: 0;
	}
}

@keyframes aboutCelebrationRing {
	0% {
		transform: scale(0.5);
		opacity: 0;
	}

	20% {
		opacity: 1;
	}

	100% {
		transform: scale(2.8);
		opacity: 0;
	}
}

@keyframes aboutCelebrationBurst {
	0% {
		opacity: 0;
		transform: translate(0, 0) scale(0.2) rotate(0deg);
	}

	18% {
		opacity: 1;
	}

	100% {
		opacity: 0;
		transform: translate(var(--burst-x, 0), var(--burst-y, 0)) scale(1.15) rotate(var(--burst-r, 0deg));
	}
}

@media (prefers-reduced-motion: reduce) {
	.about__years-badge {
		transition: none;
		opacity: 1;
	}

	.about__years-badge.is-intro:not(.is-settled) {
		top: var(--badge-settle-top, 58%);
		right: var(--badge-settle-right, 0);
		left: auto;
		transform: translate(8%, -50%);
	}

	.about__years-celebration {
		display: none;
	}
}

@media (prefers-reduced-motion: reduce) and (max-width: 768px) {
	.about__years-badge.is-intro:not(.is-settled) {
		top: auto;
		bottom: var(--badge-settle-bottom, 18%);
		right: var(--badge-settle-right, 4%);
		transform: none;
	}
}

@keyframes whyChoosePhotoTilt {
	0% {
		transform: rotateY(-14deg) rotateX(5deg) translateZ(0);
	}

	100% {
		transform: rotateY(-10deg) rotateX(3deg) translateZ(8px);
	}
}

@keyframes whyChooseIconPop {
	0% {
		opacity: 0;
		transform: scale(0.55) translateY(8px);
	}

	100% {
		opacity: 1;
		transform: scale(1) translateY(0);
	}
}

@keyframes whyChooseIconDraw {
	0%, 70% {
		stroke-dashoffset: 0;
		opacity: 1;
	}

	78% {
		stroke-dashoffset: 100;
		opacity: 0.35;
	}

	100% {
		stroke-dashoffset: 0;
		opacity: 1;
	}
}

@keyframes whyChooseIconGlow {
	0%, 100% {
		opacity: 0.12;
		transform: scale(1);
	}

	50% {
		opacity: 0.28;
		transform: scale(1.08);
	}
}

@keyframes whyChooseIconDotPulse {
	0%, 100% {
		transform: scale(1);
		opacity: 1;
	}

	50% {
		transform: scale(1.35);
		opacity: 0.7;
	}
}

@keyframes whyChooseIconSpin {
	from {
		transform: rotate(0deg);
	}

	to {
		transform: rotate(360deg);
	}
}

@keyframes whyChooseIconRing {
	0% {
		opacity: 0;
		transform: scale(0.88);
	}

	18% {
		opacity: 0.35;
		transform: scale(1.08);
	}

	40%, 100% {
		opacity: 0;
		transform: scale(1.22);
	}
}

@media (prefers-reduced-motion: reduce) {
	.why-choose__bubbles {
		opacity: 1;
	}

	.why-choose__stat.is-icons-animated .why-choose__icon-inner,
	.why-choose__stat.is-icons-animated .why-choose__icon-stroke,
	.why-choose__stat.is-icons-animated .why-choose__icon-accent,
	.why-choose__stat.is-icons-animated .why-choose__icon-fill,
	.why-choose__stat.is-icons-animated .why-choose__icon-dot,
	.why-choose__stat.is-icons-animated .why-choose__icon-orbit,
	.why-choose__stat.is-icons-animated .why-choose__icon-meridian,
	.why-choose__stat.is-icons-animated .why-choose__stat-icon::after,
	.why-choose__photo.is-visible .why-choose__photo-3d {
		animation: none !important;
	}

	.why-choose__stat.is-icons-animated .why-choose__icon-stroke {
		stroke-dashoffset: 0;
		opacity: 1;
	}

	.why-choose__photo {
		opacity: 1;
		transform: none;
	}
}

/* Accreditations pattern drift */
.accreditations__pattern {
	animation: patternDrift 20s linear infinite;
}

@keyframes accreditationsGlobeScroll {
	from {
		transform: translate3d(0, 0, 0);
	}

	to {
		transform: translate3d(-50%, 0, 0);
	}
}

@keyframes accreditationsBgGradientRight {
	0%,
	100% {
		background-position: 0% 50%;
	}
	33% {
		background-position: 100% 0%;
	}
	66% {
		background-position: 50% 100%;
	}
}

@keyframes patternDrift {
	0% { background-position: 0 0; }
	100% { background-position: 48px 48px; }
}

/* Life at IIS — animated section background */
.life-gallery__bg-teal {
	animation: lifeGalleryTealShift 18s ease-in-out infinite alternate;
}

.life-gallery__pattern::before {
	animation: lifeGalleryWaveFlow 14s linear infinite;
}

.life-gallery__pattern::after {
	animation: lifeGalleryPlusDrift 28s linear infinite;
}

@keyframes lifeGalleryTealShift {
	0% {
		background-position: 0% 40%;
	}
	100% {
		background-position: 100% 60%;
	}
}

@keyframes lifeGalleryWaveFlow {
	0% {
		background-position: 0 0, 0 28px;
	}
	100% {
		background-position: 0 62px, 0 90px;
	}
}

@keyframes lifeGalleryPlusDrift {
	0% {
		background-position: 28px 28px, 0 0, 0 0;
	}
	100% {
		background-position: 84px 84px, 56px 56px, 56px 56px;
	}
}

/* Header scroll state */
.site-header.is-scrolled {
	box-shadow: 0 4px 24px rgba(15, 42, 74, 0.1);
}

.site-header.is-scrolled .header__top {
	padding-top: 8px;
	padding-bottom: 10px;
}

.site-header.is-scrolled .site-logo__mark {
	width: 52px;
	height: 52px;
}

.site-header.is-scrolled .custom-logo-link img {
	max-height: 52px;
}

.site-header.is-scrolled .primary-navigation {
	min-height: 40px;
	box-shadow: 0 6px 20px rgba(0, 74, 153, 0.24);
}

/* Facility icons pop */
.facility-icon.is-visible svg {
	animation: iconPop 0.6s var(--anim-ease-bounce) forwards;
	animation-delay: var(--delay, 0ms);
}

@keyframes iconPop {
	0% { transform: scale(0) rotate(-20deg); }
	100% { transform: scale(1) rotate(0deg); }
}

/* Mission card shine on hover */
.mission-card.is-visible {
	position: relative;
	overflow: hidden;
}
.mission-card.is-visible::before {
	content: '';
	position: absolute;
	top: 0;
	left: -100%;
	width: 60%;
	height: 100%;
	background: linear-gradient(90deg, transparent, rgba(255,255,255,0.15), transparent);
	transition: left 0.6s ease;
}
.mission-card.is-visible:hover::before {
	left: 120%;
}

/* Campus facility icons — drop on scroll, then looping stroke draw */
.campus-facility-card.is-visible .campus-facility-card__icon-inner {
	animation: campusFacilityIconDrop 0.8s cubic-bezier(0.22, 1, 0.36, 1) forwards;
	animation-delay: calc(var(--facility-index, 0) * 0.1s + 0.12s);
}

.campus-facility-card.is-icons-animated .campus-facility-icon__stroke {
	stroke-dasharray: 100;
	animation: campusFacilityIconDrawLoop 4.4s cubic-bezier(0.42, 0.03, 0.24, 1) infinite;
}

.campus-facility-card.is-icons-animated .campus-facility-icon__stroke:nth-child(1) { animation-delay: calc(var(--facility-index, 0) * 0.12s + 0s); }
.campus-facility-card.is-icons-animated .campus-facility-icon__stroke:nth-child(2) { animation-delay: calc(var(--facility-index, 0) * 0.12s + 0.08s); }
.campus-facility-card.is-icons-animated .campus-facility-icon__stroke:nth-child(3) { animation-delay: calc(var(--facility-index, 0) * 0.12s + 0.16s); }
.campus-facility-card.is-icons-animated .campus-facility-icon__stroke:nth-child(4) { animation-delay: calc(var(--facility-index, 0) * 0.12s + 0.24s); }
.campus-facility-card.is-icons-animated .campus-facility-icon__stroke:nth-child(5) { animation-delay: calc(var(--facility-index, 0) * 0.12s + 0.32s); }
.campus-facility-card.is-icons-animated .campus-facility-icon__stroke:nth-child(6) { animation-delay: calc(var(--facility-index, 0) * 0.12s + 0.4s); }
.campus-facility-card.is-icons-animated .campus-facility-icon__stroke:nth-child(7) { animation-delay: calc(var(--facility-index, 0) * 0.12s + 0.48s); }
.campus-facility-card.is-icons-animated .campus-facility-icon__stroke:nth-child(8) { animation-delay: calc(var(--facility-index, 0) * 0.12s + 0.56s); }
.campus-facility-card.is-icons-animated .campus-facility-icon__stroke:nth-child(9) { animation-delay: calc(var(--facility-index, 0) * 0.12s + 0.64s); }
.campus-facility-card.is-icons-animated .campus-facility-icon__stroke:nth-child(10) { animation-delay: calc(var(--facility-index, 0) * 0.12s + 0.72s); }
.campus-facility-card.is-icons-animated .campus-facility-icon__stroke:nth-child(11) { animation-delay: calc(var(--facility-index, 0) * 0.12s + 0.8s); }
.campus-facility-card.is-icons-animated .campus-facility-icon__stroke:nth-child(12) { animation-delay: calc(var(--facility-index, 0) * 0.12s + 0.88s); }
.campus-facility-card.is-icons-animated .campus-facility-icon__stroke:nth-child(13) { animation-delay: calc(var(--facility-index, 0) * 0.12s + 0.96s); }
.campus-facility-card.is-icons-animated .campus-facility-icon__stroke:nth-child(14) { animation-delay: calc(var(--facility-index, 0) * 0.12s + 1.04s); }

.campus-facility-card.is-icons-animated:hover .campus-facility-icon__stroke {
	animation-duration: 3.2s;
}

@keyframes campusFacilityIconDrop {
	0% {
		transform: translateY(-120%);
		opacity: 0;
	}

	100% {
		transform: translateY(0);
		opacity: 1;
	}
}

@keyframes campusFacilityIconDrawLoop {
	0%, 68% {
		stroke-dashoffset: 0;
		opacity: 1;
	}

	74% {
		stroke-dashoffset: 100;
		opacity: 0.4;
	}

	100% {
		stroke-dashoffset: 0;
		opacity: 1;
	}
}

@keyframes campusFacilitiesBgPan {
	from {
		transform: translate3d(0, 0, 0);
	}

	to {
		transform: translate3d(-50%, 0, 0);
	}
}

@keyframes footerWaveDrift {
	from {
		transform: translate3d(0, 0, 0);
	}

	to {
		transform: translate3d(-12%, 0, 0);
	}
}

/* Reduced motion */
@media (prefers-reduced-motion: reduce) {
	.scroll-progress { display: none; }

	.btn--admissions::before,
	.primary-navigation::before {
		animation: none !important;
	}

	[data-animate],
	[data-animate].is-visible,
	.accreditations__badge.is-floating,
	.accreditations__item.is-floating .accreditations__badge,
	.accreditations__showcase {
		transform: none !important;
	}

	.accreditations__showcase.is-live .accreditations__item,
	.accreditations__showcase.is-physics .accreditations__item,
	.accreditations__ring,
	.accreditations__cursor-glow,
	.mission__play.is-visible,
	.accreditations__pattern,
	.life-gallery__bg-teal,
	.life-gallery__pattern::before,
	.life-gallery__pattern::after {
		animation: none !important;
	}

	[data-parallax] {
		transform: none !important;
	}

	.campus-facility-icon__stroke {
		animation: none !important;
		stroke-dasharray: none !important;
		stroke-dashoffset: 0 !important;
		opacity: 1 !important;
	}

	.hero-btn-icon__stroke {
		animation: none !important;
		stroke-dasharray: none !important;
		stroke-dashoffset: 0 !important;
		opacity: 1 !important;
	}

	.campus-facility-card__icon-inner {
		animation: none !important;
		transform: none !important;
		opacity: 1 !important;
	}

	.campus-facilities__bg-track {
		animation: none !important;
		transform: none !important;
	}

	.campus-facilities__bg-media {
		transform: scale3d(1.04, 1.04, 1);
	}

	.campus-facilities__bg-media:first-child {
		margin-left: 0;
	}

	.site-footer__wave {
		animation: none !important;
	}

	.footer-brand__card,
	.footer-brand:hover .footer-brand__card {
		transform: none !important;
	}

	.header__contact-svg animate,
	.header__contact-svg animateTransform {
		display: none;
	}
}