/* ==============================================
   MFHU Theme — Fly-in animations
   ============================================== */

.pg .f {
	opacity: 0;
	transition: opacity 2.2s ease-out, transform 2.8s cubic-bezier(0.12, 0.8, 0.2, 1);
}

.f-fl { transform: translateX(-110vw) rotate(-10deg); }
.f-fr { transform: translateX(110vw) rotate(10deg); }
.f-ft { transform: translateY(-80vh) rotate(6deg); }
.f-fb { transform: translateY(80vh) rotate(-6deg); }
.f-sl { transform: translateX(-70vw) rotate(-18deg) scale(0.6); }
.f-sr { transform: translateX(70vw) rotate(18deg) scale(0.6); }
.f-toss { transform: translate(-50vw, -40vh) rotate(-22deg) scale(0.5); }
.f-zoom { transform: scale(0.2) rotate(-8deg); }

.pg.act .f.in {
	opacity: 1;
	transform: var(--rest, none) !important;
}

/* Delays */
.f.d1 { transition-delay: .15s; }
.f.d2 { transition-delay: .35s; }
.f.d3 { transition-delay: .55s; }
.f.d4 { transition-delay: .75s; }
.f.d5 { transition-delay: .95s; }
.f.d6 { transition-delay: 1.15s; }
.f.d7 { transition-delay: 1.35s; }
.f.d8 { transition-delay: 1.55s; }

/* After fly-in settles → fast tilt */
.pg .f.settled {
	transition: transform 0.15s ease-out, border-color 0.4s, background 0.4s;
}

/* Subpage fly-in — IntersectionObserver triggers */
.fly-scope .f {
	opacity: 0;
	transition: opacity 1.4s ease-out, transform 1.8s cubic-bezier(0.12, 0.8, 0.2, 1);
}

/* Subpage-specific subtle transforms (override the SPA's dramatic ones) */
.fly-scope .f-fl { transform: translateX(-60px); }
.fly-scope .f-fr { transform: translateX(60px); }
.fly-scope .f-ft { transform: translateY(-40px); }
.fly-scope .f-fb { transform: translateY(40px); }
.fly-scope .f-sl { transform: translateX(-40px) scale(0.95); }
.fly-scope .f-sr { transform: translateX(40px) scale(0.95); }
.fly-scope .f-toss { transform: translate(-30px, -20px) rotate(-8deg) scale(0.9); }
.fly-scope .f-zoom { transform: scale(0.85); }

.fly-scope .f.in {
	opacity: 1;
	transform: var(--rest, none) !important;
}

.fly-scope .f.settled {
	transition: transform 0.15s ease-out, border-color 0.4s, background 0.4s;
}

/* ==============================================
   Random entrance animations (@keyframes)
   Used on all subpages — replaces old .f transitions
   ============================================== */

/* Base class: hidden until IO triggers */
.wc-a {
	opacity: 0;
	animation-fill-mode: both;
	animation-duration: 2.4s;
	animation-timing-function: cubic-bezier(0.08, 0.9, 0.2, 1);
}

/* IO adds this → animation plays */
.wc-a.wc-visible.wc-a-rise    { animation-name: wcRise; }
.wc-a.wc-visible.wc-a-slide-l { animation-name: wcSlideL; }
.wc-a.wc-visible.wc-a-slide-r { animation-name: wcSlideR; }
.wc-a.wc-visible.wc-a-drop    { animation-name: wcDrop; }
.wc-a.wc-visible.wc-a-zoom    { animation-name: wcZoom; }
.wc-a.wc-visible.wc-a-toss    { animation-name: wcToss; }
.wc-a.wc-visible.wc-a-flip    { animation-name: wcFlip; }
.wc-a.wc-visible.wc-a-glitch  { animation-name: wcGlitch; }

/* Card-specific: background/border stays visible at 0% */
.wc-a.wc-visible.wc-a-card    { animation-name: wcCardReveal; }

@keyframes wcRise {
	from { opacity: 0; transform: translateY(80vh); }
	to   { opacity: 1; transform: none; }
}
@keyframes wcSlideL {
	from { opacity: 0; transform: translateX(-110vw) rotate(-10deg); }
	to   { opacity: 1; transform: none; }
}
@keyframes wcSlideR {
	from { opacity: 0; transform: translateX(110vw) rotate(10deg); }
	to   { opacity: 1; transform: none; }
}
@keyframes wcDrop {
	from { opacity: 0; transform: translateY(-80vh) rotate(6deg); }
	to   { opacity: 1; transform: none; }
}
@keyframes wcZoom {
	from { opacity: 0; transform: scale(0.15) rotate(-8deg); }
	to   { opacity: 1; transform: none; }
}
@keyframes wcToss {
	from { opacity: 0; transform: translate(-50vw, -40vh) rotate(-22deg) scale(0.5); }
	to   { opacity: 1; transform: none; }
}
@keyframes wcFlip {
	from { opacity: 0; transform: perspective(600px) rotateY(-120deg) rotate(-5deg); }
	to   { opacity: 1; transform: none; }
}
@keyframes wcGlitch {
	from { clip-path: inset(0 100% 0 0); opacity: 0; }
	15%  { opacity: 1; }
	to   { clip-path: inset(0 0 0 0); opacity: 1; }
}
@keyframes wcCardReveal {
	0%   { opacity: 0.15; transform: scale(0.75) translateY(80px); }
	100% { opacity: 1;    transform: none; }
}

/* Reduced motion: skip all animations, show instantly */
@media (prefers-reduced-motion: reduce) {
	.wc-a {
		opacity: 1 !important;
		animation: none !important;
	}
}