/*
 * custom-animations.css — Pasta & Panda Cinematic
 *
 * Keyframe animations and micro-interactions only.
 * All motion rules are wrapped in @media (prefers-reduced-motion: no-preference)
 * so users who opt out of motion are unaffected.
 *
 * Contents:
 *   1. Keyframe definitions
 *   2. Motion rules (inside prefers-reduced-motion guard)
 */

/* ── 1. Keyframe definitions ─────────────────────────────────────────────── */

/*
 * NOW FILMING tally-light pulse.
 * Animates opacity and scale only — no colour transitions.
 * Slow and steady, like a real camera REC indicator.
 * The dot colour (--pp-rec) and glow (box-shadow) are set in style.css.
 */
@keyframes pp-rec-pulse {
	0%, 100% {
		opacity: 1;
		transform: scale(1);
	}
	50% {
		opacity: 0.35;
		transform: scale(0.88);
	}
}

@keyframes pp-amber-glow {
	0%, 100% {
		box-shadow: 0 0 6px 1px rgba(224, 139, 62, 0.45);
	}
	50% {
		box-shadow: 0 0 14px 3px rgba(224, 139, 62, 0.70);
	}
}

@keyframes pp-ken-burns {
	0%   { transform: scale(1.00) translate(0, 0); }
	100% { transform: scale(1.06) translate(-1%, -1%); }
}

@keyframes pp-fade-up {
	from {
		opacity: 0;
		transform: translateY(1rem);
	}
	to {
		opacity: 1;
		transform: translateY(0);
	}
}

@keyframes pp-digit-roll {
	0%   { opacity: 0; transform: translateY(0.5em); }
	40%  { opacity: 1; transform: translateY(-0.1em); }
	70%  { opacity: 1; transform: translateY(0.05em); }
	100% { opacity: 1; transform: translateY(0); }
}

/* ── 2. Motion rules ─────────────────────────────────────────────────────── */

@media (prefers-reduced-motion: no-preference) {

	/* NOW FILMING pulse dot — slow tally-light rhythm, 2 s cycle */
	.pp-pulse-dot,
	.pp-badge::before {
		animation: pp-rec-pulse 2s ease-in-out infinite;
	}

	/* Amber glow on scrubber knob */
	.pp-scrubber__knob {
		animation: pp-amber-glow 2.8s ease-in-out infinite;
	}

	/* Subtle hover glow on CTA button */
	.pp-cta-btn {
		transition: background 0.2s ease, color 0.2s ease, box-shadow 0.2s ease;
	}

	.pp-cta-btn:hover {
		box-shadow: 0 0 20px rgba(224, 139, 62, 0.35);
	}

	/* Hero background Ken-Burns slow pan — 30 s, very subtle */
	.pp-hero__bg img,
	.pp-hero__bg figure img {
		animation: pp-ken-burns 30s ease-in-out alternate infinite;
	}

	/* Hero content entrance animations */
	.pp-badge {
		animation: pp-fade-up 0.7s ease both;
		animation-delay: 0.1s;
	}

	.pp-hero__headline {
		animation: pp-fade-up 0.7s ease both;
		animation-delay: 0.25s;
	}

	.pp-hero__body {
		animation: pp-fade-up 0.7s ease both;
		animation-delay: 0.4s;
	}

	.pp-hero__bar-wrap {
		animation: pp-fade-up 0.7s ease both;
		animation-delay: 0.55s;
	}

	/* Scrubber fill/knob smooth update on JS drag */
	.pp-scrubber__fill {
		transition: width 0.08s linear;
	}

	.pp-scrubber__knob {
		transition: left 0.08s linear;
	}

	/* Timecode link hover fade */
	.tc-link {
		transition: opacity 0.15s ease;
	}

	/* Timecode glitch digit roll (JS adds .pp-digit spans) */
	.tc-time .pp-digit {
		display: inline-block;
		animation: pp-digit-roll 0.18s ease both;
	}

	/* YouTube facade thumbnail hover */
	.pp-yt-facade__thumb {
		transition: opacity 0.2s ease;
	}

	/*
	 * Card thumbnail hover is defined in style.css under @media (pointer: fine)
	 * so it correctly excludes touch devices.  Nothing to duplicate here.
	 */

}