/* ==========================================================================
   page-studio-realtime-canvas.css
   UNIQUE animated art for Studio 05 — Realtime Canvas (/ai-studios/realtime-canvas)
   Loaded AFTER the shared page-studio.css. This file styles ONLY the two
   bespoke SVGs: the hero (pen sketches 3 mountains, a wipe repaints them) and
   the showcase (a live seam sweeps a sketch into a painted scene).
   All layout / cards / panel styling lives in page-studio.css — not here.

   Namespacing: every class is .pg-realtimecanvas-*  ·  every keyframe is
   prefixed pgrealtimecanvas  ·  gradient IDs are prefixed realtime-canvas.
   ========================================================================== */

/* ------------------------------------------------------------------ HERO -- */

/* the paint-reveal wipe: a clip rect that grows left -> right, then the painted
   layer dissolves so the dashed sketch shows again before the loop restarts */
.pg-realtimecanvas-wipe {
	transform-box: fill-box;
	transform-origin: left center;
	transform: scaleX(0);
	animation: pgrealtimecanvasWipe 7s cubic-bezier(.4, 0, .2, 1) infinite;
}
@keyframes pgrealtimecanvasWipe {
	0%   { transform: scaleX(0); }
	42%  { transform: scaleX(0); }
	80%  { transform: scaleX(1); }
	100% { transform: scaleX(1); }
}

/* painted layer holds full, then fades out to reveal the sketch for the reset */
.pg-realtimecanvas-paint {
	animation: pgrealtimecanvasPaintOut 7s linear infinite;
}
@keyframes pgrealtimecanvasPaintOut {
	0%, 88% { opacity: 1; }
	96%     { opacity: 0; }
	100%    { opacity: 0; }
}

/* the live accent stroke draws on with the pen, then dissolves with the paint */
.pg-realtimecanvas-draw {
	stroke-dasharray: 1;
	stroke-dashoffset: 1;
	animation: pgrealtimecanvasDraw 7s cubic-bezier(.65, 0, .35, 1) infinite;
}
@keyframes pgrealtimecanvasDraw {
	0%   { stroke-dashoffset: 1; opacity: 1; }
	38%  { stroke-dashoffset: 0; opacity: 1; }
	84%  { stroke-dashoffset: 0; opacity: 1; }
	94%  { stroke-dashoffset: 0; opacity: 0; }
	100% { stroke-dashoffset: 1; opacity: 0; }
}

/* pen tip rides the exact mountain path while the stroke draws on */
.pg-realtimecanvas-pen {
	offset-path: path("M64 304 L150 180 L210 250 L272 150 L330 236 L392 190 L416 304");
	offset-rotate: 0deg;
	offset-distance: 0%;
	animation: pgrealtimecanvasPen 7s cubic-bezier(.65, 0, .35, 1) infinite;
	filter: drop-shadow(0 3px 6px rgba(0, 0, 0, .5));
}
@keyframes pgrealtimecanvasPen {
	0%   { offset-distance: 0%;   opacity: 0; }
	5%   { opacity: 1; }
	38%  { offset-distance: 100%; opacity: 1; }
	48%  { offset-distance: 100%; opacity: 0; }
	100% { offset-distance: 100%; opacity: 0; }
}

/* repaint ripples pulsing at the top peak */
.pg-realtimecanvas-rip {
	transform-box: fill-box;
	transform-origin: center;
	opacity: 0;
	animation: pgrealtimecanvasRipple 2.4s ease-out infinite;
	animation-delay: calc(var(--i) * 1.2s);
}
@keyframes pgrealtimecanvasRipple {
	0%   { transform: scale(.3); opacity: .8; }
	70%  { opacity: .18; }
	100% { transform: scale(2.6); opacity: 0; }
}

/* palette colour dabs gently bob */
.pg-realtimecanvas-dab {
	transform-box: fill-box;
	transform-origin: center;
	animation: pgrealtimecanvasDab 3s ease-in-out infinite;
	animation-delay: calc(var(--i) * .35s);
}
@keyframes pgrealtimecanvasDab {
	0%, 100% { transform: translateY(0) scale(1); }
	50%      { transform: translateY(-3px) scale(1.12); }
}

/* --------------------------------------------------------------- SHOWCASE -- */

/* painted half is revealed from the left as the seam passes */
.pg-realtimecanvas-showpaint {
	transform-box: fill-box;
	transform-origin: left center;
	transform: scaleX(0);
	animation: pgrealtimecanvasShowPaint 8s cubic-bezier(.45, 0, .2, 1) infinite;
}
@keyframes pgrealtimecanvasShowPaint {
	0%, 8% { transform: scaleX(0); }
	70%    { transform: scaleX(1); }
	100%   { transform: scaleX(1); }
}

/* sketch half is consumed from the left, collapsing toward the right edge */
.pg-realtimecanvas-showsketch {
	transform-box: fill-box;
	transform-origin: right center;
	transform: scaleX(1);
	animation: pgrealtimecanvasShowSketch 8s cubic-bezier(.45, 0, .2, 1) infinite;
}
@keyframes pgrealtimecanvasShowSketch {
	0%, 8% { transform: scaleX(1); }
	70%    { transform: scaleX(0); }
	100%   { transform: scaleX(0); }
}

/* the live seam sweeps across, then parks + fades before the loop resets */
.pg-realtimecanvas-seam {
	transform-box: view-box;
	transform-origin: left center;
	animation: pgrealtimecanvasSeam 8s cubic-bezier(.45, 0, .2, 1) infinite;
}
@keyframes pgrealtimecanvasSeam {
	0%   { transform: translateX(0);     opacity: 0; }
	6%   { transform: translateX(0);     opacity: 1; }
	70%  { transform: translateX(684px); opacity: 1; }
	80%  { transform: translateX(684px); opacity: 0; }
	100% { transform: translateX(684px); opacity: 0; }
}

/* ripples along the seam */
.pg-realtimecanvas-seamrip circle {
	transform-box: fill-box;
	transform-origin: center;
	opacity: 0;
	animation: pgrealtimecanvasSeamRip 2s ease-out infinite;
	animation-delay: calc(var(--i) * .5s);
}
@keyframes pgrealtimecanvasSeamRip {
	0%   { transform: scale(.4); opacity: .85; }
	100% { transform: scale(3);  opacity: 0; }
}

/* brush nib riding the top of the seam bobs subtly */
.pg-realtimecanvas-seamnib {
	transform-box: fill-box;
	transform-origin: center;
	animation: pgrealtimecanvasSeamNib 1.4s ease-in-out infinite;
}
@keyframes pgrealtimecanvasSeamNib {
	0%, 100% { transform: translateY(0); }
	50%      { transform: translateY(4px); }
}

/* freshly-laid paint dabs trailing just behind the seam */
.pg-realtimecanvas-seamdabs circle {
	transform-box: fill-box;
	transform-origin: center;
	animation: pgrealtimecanvasSeamDab 1.8s ease-in-out infinite;
	animation-delay: calc(var(--i) * .3s);
}
@keyframes pgrealtimecanvasSeamDab {
	0%, 100% { transform: scale(.7); opacity: .4; }
	50%      { transform: scale(1.15); opacity: 1; }
}

/* --------------------------------------------------- reduced motion reset -- */
@media (prefers-reduced-motion: reduce) {
	.pg-realtimecanvas-wipe,
	.pg-realtimecanvas-paint,
	.pg-realtimecanvas-draw,
	.pg-realtimecanvas-pen,
	.pg-realtimecanvas-rip,
	.pg-realtimecanvas-dab,
	.pg-realtimecanvas-showpaint,
	.pg-realtimecanvas-showsketch,
	.pg-realtimecanvas-seam,
	.pg-realtimecanvas-seamrip circle,
	.pg-realtimecanvas-seamnib,
	.pg-realtimecanvas-seamdabs circle {
		animation: none !important;
	}
	/* settle to a clean, fully-painted static frame */
	.pg-realtimecanvas-wipe { transform: scaleX(1); }
	.pg-realtimecanvas-paint { opacity: 1; }
	.pg-realtimecanvas-draw { stroke-dashoffset: 0; opacity: 0; }
	.pg-realtimecanvas-pen { offset-distance: 100%; opacity: 0; }
	.pg-realtimecanvas-rip { opacity: 0; }
	.pg-realtimecanvas-dab { transform: none; }
	.pg-realtimecanvas-showpaint { transform: scaleX(1); }
	.pg-realtimecanvas-showsketch { transform: scaleX(0); }
	.pg-realtimecanvas-seam { transform: translateX(684px); opacity: 0; }
	.pg-realtimecanvas-seamdabs circle { opacity: 0; }
}