/* ==========================================================================
   page-studio-photo-remix.css — UNIQUE animated art for Studio 02 (Photo Remix)
   Loaded AFTER the shared page-studio.css. Contains ONLY the bespoke hero +
   showcase SVG animation; all layout / cards / panel styling lives in the
   shared shell and must not be redefined here.

   Namespacing: every class is .pg-photoremix-*  ·  every keyframe is pgphotoremix*
   Gradient IDs inside the markup are prefixed "photo-remix".
   Dark only. Ends with a prefers-reduced-motion settle block.
   ========================================================================== */

/* ------------------------------------------------------------- HERO ART --- */
/* the remixed portrait cycles through vivid palettes */
.pg-photoremix-hue {
	transform-box: fill-box;
	transform-origin: center;
	animation: pgphotoremixHue 9s linear infinite;
}
@keyframes pgphotoremixHue {
	to { filter: hue-rotate(360deg); }
}

/* diagonal light band sweeping across the remix frame */
.pg-photoremix-sweep {
	transform-box: fill-box;
	animation: pgphotoremixSweep 3.8s ease-in-out infinite;
}
@keyframes pgphotoremixSweep {
	0%   { transform: translateX(-70px); opacity: 0; }
	35%  { opacity: .9; }
	65%  { opacity: .9; }
	100% { transform: translateX(210px); opacity: 0; }
}

/* the source → remix arrow, marching dashes toward the remix */
.pg-photoremix-arrow {
	stroke-dasharray: 10 8;
	animation: pgphotoremixMarch 1.1s linear infinite;
}
@keyframes pgphotoremixMarch {
	to { stroke-dashoffset: -18; }
}

/* particles flowing left → right along the bridge */
.pg-photoremix-p {
	transform-box: fill-box;
	opacity: 0;
	animation: pgphotoremixFlow 2.4s var(--ease-out, cubic-bezier(.22,.61,.36,1)) infinite;
	animation-delay: calc(var(--i) * .55s);
}
@keyframes pgphotoremixFlow {
	0%   { opacity: 0; transform: translateX(-6px) scale(.5); }
	18%  { opacity: 1; }
	72%  { opacity: 1; }
	100% { opacity: 0; transform: translateX(70px) scale(1.05); }
}

/* the row of style swatches lighting up in sequence */
.pg-photoremix-sw {
	transform-box: fill-box;
	transform-origin: center;
	animation: pgphotoremixLight 3.4s ease-in-out infinite;
	animation-delay: calc(var(--i) * .42s);
}
@keyframes pgphotoremixLight {
	0%, 100% { opacity: .32; transform: scale(.8); }
	45%      { opacity: 1;   transform: scale(1.15); }
}

/* ---------------------------------------------------------- SHOWCASE ART -- */
/* dotted links flowing outward from the source to each variant */
.pg-photoremix-link {
	stroke-dasharray: 3 8;
	animation: pgphotoremixDash 1.5s linear infinite;
}
@keyframes pgphotoremixDash {
	to { stroke-dashoffset: -22; }
}

/* variant tiles float gently, staggered around the arc */
.pg-photoremix-tile {
	transform-box: fill-box;
	transform-origin: center;
	animation: pgphotoremixFloat 6s ease-in-out infinite;
	animation-delay: calc(var(--i) * .5s);
}
@keyframes pgphotoremixFloat {
	0%, 100% { transform: translateY(0); }
	50%      { transform: translateY(-9px); }
}

/* the halo behind the centre source pulses */
.pg-photoremix-center-glow {
	transform-box: fill-box;
	transform-origin: center;
	animation: pgphotoremixPulse 4.2s ease-in-out infinite;
}
@keyframes pgphotoremixPulse {
	0%, 100% { opacity: .45; transform: scale(.9); }
	50%      { opacity: .95; transform: scale(1.08); }
}

/* cycling style-name chip — five labels cross-fade in turn */
.pg-photoremix-name {
	opacity: 0;
	animation: pgphotoremixName 10s ease-in-out infinite;
	animation-delay: calc(var(--i) * 2s);
}
@keyframes pgphotoremixName {
	0%   { opacity: 0; }
	3%   { opacity: 1; }
	17%  { opacity: 1; }
	21%  { opacity: 0; }
	100% { opacity: 0; }
}

/* ------------------------------------------- reduced-motion settle frame -- */
@media (prefers-reduced-motion: reduce) {
	.pg-photoremix-hue,
	.pg-photoremix-sweep,
	.pg-photoremix-arrow,
	.pg-photoremix-p,
	.pg-photoremix-sw,
	.pg-photoremix-link,
	.pg-photoremix-tile,
	.pg-photoremix-center-glow,
	.pg-photoremix-name {
		animation: none !important;
	}
	.pg-photoremix-hue { filter: none; }
	.pg-photoremix-sweep { opacity: 0; }
	.pg-photoremix-arrow { stroke-dasharray: none; }
	.pg-photoremix-p { opacity: 0; }
	.pg-photoremix-sw { opacity: 1; transform: none; }
	.pg-photoremix-tile { transform: none; }
	.pg-photoremix-center-glow { opacity: .8; transform: none; }
	.pg-photoremix-name { opacity: 0; }
	.pg-photoremix-name.is-first { opacity: 1; }
}