/* ==========================================================================
   page-studio-enhance.css — UNIQUE animated art for Studio 03 (Enhance).
   Loaded AFTER page-studio.css. Contains ONLY the bespoke hero + showcase SVG
   animation; all layout/cards/panel styling lives in the shared shell.

   Namespacing: every class .pg-enhance-*  ·  every @keyframes  pgenhance*
   Gradient/clip IDs inside the SVGs are prefixed  enhance*  to avoid collisions.
   ========================================================================== */

/* ------------------------------------------------------------- HERO ART --- */
.pg-enhance-hero { max-width: 540px; }

/* the whole HD frame drifts gently */
.pg-enhance-frame {
	transform-box: fill-box;
	transform-origin: center;
	animation: pgenhanceFloat 8s var(--ease-out) infinite;
}
@keyframes pgenhanceFloat {
	0%, 100% { transform: translateY(0); }
	50%      { transform: translateY(-7px); }
}

/* low-res source pixels shimmer / resolve, staggered by --i */
.pg-enhance-px {
	animation: pgenhancePx 3.6s ease-in-out infinite;
	animation-delay: calc(var(--i) * .22s);
}
@keyframes pgenhancePx {
	0%, 100% { opacity: .78; }
	50%      { opacity: 1; }
}

/* transform arrow breathes toward the frame */
.pg-enhance-arrow {
	animation: pgenhanceArrow 2.8s var(--ease-out) infinite;
}
@keyframes pgenhanceArrow {
	0%, 100% { opacity: .45; transform: translateX(0); }
	50%      { opacity: 1;   transform: translateX(5px); }
}

/* crisp-detail sweep sliding down the HD frame */
.pg-enhance-scan {
	opacity: .8;
	animation: pgenhanceScan 3.4s ease-in-out infinite;
}
@keyframes pgenhanceScan {
	0%   { transform: translateY(0);    opacity: 0; }
	12%  { opacity: .85; }
	88%  { opacity: .85; }
	100% { transform: translateY(252px); opacity: 0; }
}

/* marching-ants selection around the subject */
.pg-enhance-ants {
	animation: pgenhanceAnts 1.1s linear infinite;
}
@keyframes pgenhanceAnts {
	to { stroke-dashoffset: -32; }
}

/* corner handles expand outward, each along its own --dx/--dy vector */
.pg-enhance-cnr {
	animation: pgenhanceCorner 2.6s var(--ease-out) infinite;
}
@keyframes pgenhanceCorner {
	0%, 100% { transform: translate(0, 0); opacity: .8; }
	50%      { transform: translate(var(--dx, 0), var(--dy, 0)); opacity: 1; }
}

/* HD badge glow pulse */
.pg-enhance-badge {
	transform-box: fill-box;
	transform-origin: center;
	animation: pgenhanceBadge 3s ease-in-out infinite;
}
@keyframes pgenhanceBadge {
	0%, 100% { opacity: .85; transform: scale(1); }
	50%      { opacity: 1;   transform: scale(1.05); }
}

/* magnifier lens glides over the crisp detail */
.pg-enhance-mag {
	animation: pgenhanceMag 7s var(--ease-out) infinite;
}
@keyframes pgenhanceMag {
	0%   { transform: translate(0, 0); }
	25%  { transform: translate(58px, 22px); }
	50%  { transform: translate(96px, -18px); }
	75%  { transform: translate(30px, 30px); }
	100% { transform: translate(0, 0); }
}

/* lens glint shimmer */
.pg-enhance-glint {
	animation: pgenhanceGlint 3.2s ease-in-out infinite;
}
@keyframes pgenhanceGlint {
	0%, 100% { opacity: .25; }
	45%      { opacity: .95; }
}

/* --------------------------------------------------------- SHOWCASE ART --- */
.pg-enhance-show { max-width: 700px; }

/* blurry source panel softly pulses out of focus */
.pg-enhance-blur {
	filter: blur(3.5px);
	animation: pgenhanceDefocus 4s ease-in-out infinite;
}
@keyframes pgenhanceDefocus {
	0%, 100% { filter: blur(3.5px); }
	50%      { filter: blur(2.2px); }
}

/* HD panel scan line */
.pg-enhance-showscan {
	opacity: .8;
	animation: pgenhanceShowScan 3s ease-in-out infinite;
	animation-delay: .5s;
}
@keyframes pgenhanceShowScan {
	0%   { transform: translateY(0);   opacity: 0; }
	14%  { opacity: .85; }
	86%  { opacity: .85; }
	100% { transform: translateY(193px); opacity: 0; }
}

/* HD badge on the showcase */
.pg-enhance-showbadge {
	transform-box: fill-box;
	transform-origin: center;
	animation: pgenhanceBadge 3s ease-in-out infinite;
	animation-delay: .4s;
}

/* the two hand-off arrows pulse in sequence */
.pg-enhance-fa1 {
	animation: pgenhanceFlow 2.6s ease-in-out infinite;
}
.pg-enhance-fa2 {
	animation: pgenhanceFlow 2.6s ease-in-out infinite;
	animation-delay: 1.3s;
}
@keyframes pgenhanceFlow {
	0%, 100% { opacity: .35; transform: translateX(0); }
	40%      { opacity: 1;   transform: translateX(6px); }
	60%      { opacity: 1;   transform: translateX(6px); }
}

/* cut-out subject lifts off the checkerboard */
.pg-enhance-subj {
	transform-box: fill-box;
	transform-origin: center;
	animation: pgenhanceLift 4s ease-in-out infinite;
	animation-delay: 1.3s;
}
@keyframes pgenhanceLift {
	0%, 100% { transform: translateY(0)    scale(1); }
	50%      { transform: translateY(-5px) scale(1.015); }
}

/* the cut path outline marches */
.pg-enhance-cutline {
	animation: pgenhanceCut 1.2s linear infinite;
}
@keyframes pgenhanceCut {
	to { stroke-dashoffset: -26; }
}

/* ------------------------------------------------- REDUCED MOTION GUARD --- */
@media (prefers-reduced-motion: reduce) {
	.pg-enhance-frame,
	.pg-enhance-px,
	.pg-enhance-arrow,
	.pg-enhance-scan,
	.pg-enhance-ants,
	.pg-enhance-cnr,
	.pg-enhance-badge,
	.pg-enhance-mag,
	.pg-enhance-glint,
	.pg-enhance-blur,
	.pg-enhance-showscan,
	.pg-enhance-showbadge,
	.pg-enhance-fa1,
	.pg-enhance-fa2,
	.pg-enhance-subj,
	.pg-enhance-cutline {
		animation: none !important;
	}
	/* settle to a clean, legible static frame */
	.pg-enhance-frame,
	.pg-enhance-cnr,
	.pg-enhance-mag,
	.pg-enhance-subj { transform: none !important; }
	.pg-enhance-px,
	.pg-enhance-arrow,
	.pg-enhance-badge,
	.pg-enhance-showbadge,
	.pg-enhance-glint { opacity: 1 !important; }
	.pg-enhance-scan,
	.pg-enhance-showscan { opacity: 0 !important; }
	.pg-enhance-blur { filter: blur(3px) !important; }
}