/* ============================================================
   Press Start CoLab — theme base styles (ported from the design)
   ============================================================ */

/* ---------- base ---------- */
body {
	background-color: #FAF5EF;
	background-image: url('../images/bg-texture.svg');
	background-size: 1440px auto;
	background-position: top center;
	background-repeat: repeat-y;
}
::selection { background: #F4B731; color: #211D1A; }

/* ---------- keyframes ---------- */
@keyframes float      { 0%,100% { transform: translateY(0) }            50% { transform: translateY(-12px) } }
@keyframes floaty     { 0%,100% { transform: translateY(0) rotate(0) }  50% { transform: translateY(-9px) rotate(2.5deg) } }
@keyframes spinSlow   { to { transform: rotate(360deg) } }
@keyframes pulseGlow  { 0%,100% { opacity: .45; transform: scale(1) }   50% { opacity: .85; transform: scale(1.12) } }
@keyframes twinkle    { 0%,100% { transform: scale(1) }                 50% { transform: scale(.72) } }
@keyframes wiggle     { 0%,100% { transform: rotate(0) } 25% { transform: rotate(-4deg) } 75% { transform: rotate(4deg) } }
@keyframes drawLine   { to { stroke-dashoffset: 0 } }

.anim-float     { animation: float 6s ease-in-out infinite; }
.anim-floaty    { animation: floaty 7s ease-in-out infinite; }
.anim-spin-slow { animation: spinSlow 26s linear infinite; }
.anim-glow      { animation: pulseGlow 5s ease-in-out infinite; }
.mosaic-cell    { animation: twinkle 4.5s ease-in-out infinite; }

/* ---------- partners marquee ---------- */
@keyframes marqueeL { from { transform: translateX(0) } to { transform: translateX(-50%) } }
.marquee     { display: flex; gap: 1.25rem; width: max-content; animation: marqueeL 48s linear infinite; }
.marquee.rev { animation-direction: reverse; }
.marquee:hover { animation-play-state: paused; }

/* ---------- scroll reveal ---------- */
.reveal {
	opacity: 0;
	transform: translateY(28px);
	transition: opacity .9s cubic-bezier(.22,.61,.36,1), transform .9s cubic-bezier(.22,.61,.36,1);
	transition-delay: var(--d, 0ms);
	will-change: opacity, transform;
}
.reveal-down  { transform: translateY(-24px); }
.reveal-left  { transform: translateX(-36px); }
.reveal-right { transform: translateX(36px); }
.reveal.in    { opacity: 1; transform: none; }

/* ---------- squiggle line ---------- */
.squiggle path { stroke-dasharray: 1; stroke-dashoffset: 1; }
.squiggle.in path { animation: drawLine 2.6s cubic-bezier(.4,0,.2,1) .35s forwards; }

/* ---------- nav link underline ---------- */
.nav-link { position: relative; }
.nav-link::after {
	content: ""; position: absolute; left: 0; bottom: -5px; height: 2px; width: 100%;
	background: currentColor; transform: scaleX(0); transform-origin: left;
	transition: transform .35s cubic-bezier(.22,.61,.36,1);
}
.nav-link:hover::after, .nav-link.active::after { transform: scaleX(1); }
.nav-link.nav-program:hover::after,
.nav-link.nav-program.active::after,
.current-menu-item > .nav-link.nav-program::after {
	background: #E56A54;
}
.nav-link.nav-about:hover::after,
.nav-link.nav-about.active::after,
.current-menu-item > .nav-link.nav-about::after {
	background: #337EF6;
}
.nav-link.nav-educators:hover::after,
.nav-link.nav-educators.active::after,
.current-menu-item > .nav-link.nav-educators::after {
	background: #DCBFA5;
}
.nav-link.nav-faq:hover::after,
.nav-link.nav-faq.active::after,
.current-menu-item > .nav-link.nav-faq::after {
	background: #E2ADD6;
}

/* ---------- piggy hover ---------- */
.piggy-group:hover .piggy { animation: wiggle .6s ease-in-out; }

/* ---------- for educators / details cutouts ---------- */
@media (min-width: 1024px) {
	.educators-cutout {
		-webkit-mask-image: radial-gradient(circle 220px at 100% 65%, transparent 220px, black 221px);
		mask-image: radial-gradient(circle 220px at 100% 65%, transparent 220px, black 221px);
	}
	.details-cutout {
		-webkit-mask-image: radial-gradient(circle 230px at 100% 80%, transparent 230px, black 231px);
		mask-image: radial-gradient(circle 230px at 100% 80%, transparent 230px, black 231px);
	}
	/* left-image variants (mask notch flips to the left edge) */
	.educators-cutout-left {
		-webkit-mask-image: radial-gradient(circle 220px at 0% 65%, transparent 220px, black 221px);
		mask-image: radial-gradient(circle 220px at 0% 65%, transparent 220px, black 221px);
	}
	.details-cutout-left {
		-webkit-mask-image: radial-gradient(circle 230px at 0% 80%, transparent 230px, black 231px);
		mask-image: radial-gradient(circle 230px at 0% 80%, transparent 230px, black 231px);
	}
}

/* ---------- reduced motion ---------- */
@media (prefers-reduced-motion: reduce) {
	*, *::before, *::after {
		animation-duration: .01ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: .01ms !important;
	}
}