/* Copyright © Rob Art | Illustration 2026 */
/*
	Pliitz — fade animation preset (the first/default preset).
	The player sets --pliitz-fadein / --pliitz-fadeout (ms) inline on the overlay
	and toggles state classes. The overlay fades BOTH ways; the logo gets a gentle
	entrance on top so the moment feels composed, not a bare opacity flip.

	State flow driven by player.js:
	  initial   → opacity 1 (critical CSS, covers page from first paint)
	  .pliitz-prep → opacity 0 (set before reveal, so fade-IN has somewhere to go)
	  (prep removed) → transitions back to opacity 1  = FADE IN
	  .pliitz-out  → opacity 0                        = FADE OUT
*/

/* Gentle slow-in/slow-out curve — feels composed, not snappy. */
#pliitz-overlay {
	transition: opacity var(--pliitz-fadein, 600ms) cubic-bezier(0.4, 0, 0.2, 1);
}

/* Pre-reveal: invisible, ready to fade in. !important so it always wins over the
   critical-CSS reveal rule (html.pliitz-play #pliitz-overlay{opacity:1}) which
   has higher specificity — otherwise the fade-in would snap instead of animate. */
#pliitz-overlay.pliitz-prep {
	opacity: 0 !important;
}

/* Fade-out uses the fadeout duration + the same easing. */
#pliitz-overlay.pliitz-out {
	opacity: 0 !important;
	transition: opacity var(--pliitz-fadeout, 700ms) cubic-bezier(0.4, 0, 0.2, 1);
}

/* Logo entrance — plays once the overlay is revealed, slightly outlasting the
   overlay fade so the mark "settles" rather than snapping into place. */
#pliitz-overlay.pliitz-in .pliitz-stage__logo {
	animation: pliitz-logo-in calc(var(--pliitz-fadein, 600ms) + 200ms) cubic-bezier(0.16, 1, 0.3, 1) both;
}

@keyframes pliitz-logo-in {
	from { opacity: 0; transform: translateY(14px) scale(0.96); }
	to   { opacity: 1; transform: none; }
}

@media (prefers-reduced-motion: reduce) {
	#pliitz-overlay,
	#pliitz-overlay.pliitz-in .pliitz-stage__logo {
		animation: none !important;
		transition: none !important;
	}
}