/* ==========================================================================
   page-studio-video-studio.css — UNIQUE animated ART for Studio 04 (Video)
   Route: /ai-studios/video-studio

   Loaded AFTER page-studio.css. Contains ONLY the bespoke SVG art styling for
   this page (hero cinematic preview + showcase still→filmstrip morph). All
   layout, cards, panel, sibling and CTA styling lives in page-studio.css and
   is NOT redefined here.

   Everything namespaced .pg-videostudio-*  ·  keyframes prefixed pgvideostudio
   Gradient IDs inside the SVGs are prefixed "video-studio-".
   Accent for this studio: #ffb648 → #ff4ecd
   ========================================================================== */

/* ============================================================ HERO ART ==== */
.pg-videostudio-hero {
	filter: drop-shadow(0 30px 60px rgba(5, 6, 14, .55));
}
.pg-videostudio-float {
	animation: pgvideostudioFloat 7s ease-in-out infinite;
}

/* soft coloured glow blooming behind the play button */
.pg-videostudio-glow {
	transform-box: fill-box;
	transform-origin: center;
	animation: pgvideostudioGlow 4.4s ease-in-out infinite;
}

/* diagonal light sweeping across the preview screen */
.pg-videostudio-shimmer {
	animation: pgvideostudioShimmer 5s ease-in-out infinite;
	mix-blend-mode: screen;
}

/* concentric rings pulsing out of the play disc */
.pg-videostudio-ring {
	transform-box: fill-box;
	transform-origin: center;
	animation: pgvideostudioRing 3.2s ease-out infinite;
	animation-delay: calc(var(--i, 0) * 1.06s);
}

/* the crisp play triangle gets a gentle breathing scale */
.pg-videostudio-tri {
	transform-box: fill-box;
	transform-origin: center;
	animation: pgvideostudioTri 4.4s ease-in-out infinite;
}

/* audio waveform bars */
.pg-videostudio-bar {
	transform-box: fill-box;
	transform-origin: center bottom;
	animation: pgvideostudioWave 1.4s ease-in-out infinite;
	animation-delay: calc(var(--i, 0) * -0.11s);
}

/* the scrolling filmstrip of thumbnails */
.pg-videostudio-strip {
	animation: pgvideostudioStrip 9s linear infinite;
}

/* the playhead sweeping across the filmstrip track */
.pg-videostudio-head {
	animation: pgvideostudioHead 5.2s ease-in-out infinite alternate;
}

/* faint twinkling stars in the sky of the preview scene */
.pg-videostudio-star {
	animation: pgvideostudioTwinkle 3.4s ease-in-out infinite;
	animation-delay: calc(var(--i, 0) * -0.8s);
}

@keyframes pgvideostudioFloat {
	0%, 100% { transform: translateY(0); }
	50%      { transform: translateY(-9px); }
}
@keyframes pgvideostudioGlow {
	0%, 100% { transform: scale(.9);  opacity: .5; }
	50%      { transform: scale(1.14); opacity: .95; }
}
@keyframes pgvideostudioShimmer {
	0%   { transform: translateX(-190px); opacity: 0; }
	35%  { opacity: .65; }
	65%  { opacity: .65; }
	100% { transform: translateX(470px); opacity: 0; }
}
@keyframes pgvideostudioRing {
	0%   { transform: scale(.5);  opacity: 0; }
	14%  { opacity: .7; }
	100% { transform: scale(1.4); opacity: 0; }
}
@keyframes pgvideostudioTri {
	0%, 100% { transform: scale(1); }
	50%      { transform: scale(1.08); }
}
@keyframes pgvideostudioWave {
	0%, 100% { transform: scaleY(.32); }
	50%      { transform: scaleY(1); }
}
@keyframes pgvideostudioStrip {
	0%   { transform: translateX(0); }
	100% { transform: translateX(-448px); }
}
@keyframes pgvideostudioHead {
	0%   { transform: translateX(0); }
	100% { transform: translateX(392px); }
}
@keyframes pgvideostudioTwinkle {
	0%, 100% { opacity: .2; }
	50%      { opacity: 1; }
}

/* ======================================================== SHOWCASE ART ==== */
.pg-videostudio-sc {
	filter: drop-shadow(0 26px 54px rgba(5, 6, 14, .5));
}

/* the single still on the left gently breathes */
.pg-videostudio-sc-still {
	animation: pgvideostudioScFloat 6.5s ease-in-out infinite;
}

/* dashed morph arrow drawing the still toward the filmstrip */
.pg-videostudio-sc-arrow {
	stroke-dasharray: 5 7;
	animation: pgvideostudioScArrow 1.1s linear infinite;
}

/* the strip of progressive-motion frames scrolling right → left */
.pg-videostudio-sc-frames {
	animation: pgvideostudioScScroll 11s linear infinite;
}

/* light bar scanning across the filmstrip viewport */
.pg-videostudio-sc-scan {
	animation: pgvideostudioScScan 4.6s ease-in-out infinite;
	mix-blend-mode: screen;
}

/* bold play button pulsing at the seam */
.pg-videostudio-sc-glow {
	transform-box: fill-box;
	transform-origin: center;
	animation: pgvideostudioScGlow 4s ease-in-out infinite;
}
.pg-videostudio-sc-ring {
	transform-box: fill-box;
	transform-origin: center;
	animation: pgvideostudioScRing 3s ease-out infinite;
	animation-delay: calc(var(--i, 0) * 1s);
}
.pg-videostudio-sc-tri {
	transform-box: fill-box;
	transform-origin: center;
	animation: pgvideostudioScTri 4s ease-in-out infinite;
}

@keyframes pgvideostudioScFloat {
	0%, 100% { transform: translateY(0); }
	50%      { transform: translateY(-6px); }
}
@keyframes pgvideostudioScArrow {
	0%   { stroke-dashoffset: 24; }
	100% { stroke-dashoffset: 0; }
}
@keyframes pgvideostudioScScroll {
	0%   { transform: translateX(0); }
	100% { transform: translateX(-488px); }
}
@keyframes pgvideostudioScScan {
	0%   { transform: translateX(0);   opacity: 0; }
	25%  { opacity: .55; }
	75%  { opacity: .55; }
	100% { transform: translateX(370px); opacity: 0; }
}
@keyframes pgvideostudioScGlow {
	0%, 100% { transform: scale(.9);  opacity: .5; }
	50%      { transform: scale(1.12); opacity: .9; }
}
@keyframes pgvideostudioScRing {
	0%   { transform: scale(.5);  opacity: 0; }
	14%  { opacity: .75; }
	100% { transform: scale(1.45); opacity: 0; }
}
@keyframes pgvideostudioScTri {
	0%, 100% { transform: scale(1); }
	50%      { transform: scale(1.09); }
}

/* ============================================ REDUCED MOTION — settle ==== */
@media (prefers-reduced-motion: reduce) {
	.pg-videostudio-float,
	.pg-videostudio-glow,
	.pg-videostudio-shimmer,
	.pg-videostudio-ring,
	.pg-videostudio-tri,
	.pg-videostudio-bar,
	.pg-videostudio-strip,
	.pg-videostudio-head,
	.pg-videostudio-star,
	.pg-videostudio-sc-still,
	.pg-videostudio-sc-arrow,
	.pg-videostudio-sc-frames,
	.pg-videostudio-sc-scan,
	.pg-videostudio-sc-glow,
	.pg-videostudio-sc-ring,
	.pg-videostudio-sc-tri {
		animation: none !important;
	}
	/* settle to a clean, composed static frame */
	.pg-videostudio-float,
	.pg-videostudio-sc-still { transform: none; }
	.pg-videostudio-glow,
	.pg-videostudio-sc-glow { transform: scale(1); opacity: .7; }
	.pg-videostudio-tri,
	.pg-videostudio-sc-tri { transform: scale(1); }
	.pg-videostudio-shimmer,
	.pg-videostudio-sc-scan { opacity: 0; }
	.pg-videostudio-ring,
	.pg-videostudio-sc-ring { opacity: 0; }
	.pg-videostudio-bar { transform: scaleY(.62); }
	.pg-videostudio-strip,
	.pg-videostudio-head,
	.pg-videostudio-sc-frames { transform: translateX(0); }
	.pg-videostudio-sc-arrow { stroke-dashoffset: 0; }
}