/* ==========================================================================
   page-studio-image-generator.css
   UNIQUE animated art for /ai-studios/image-generator ONLY.
   All layout / cards / panel styling lives in page-studio.css — not here.
   Everything is namespaced .pg-imagegenerator-* and every @keyframes is
   prefixed pgimagegenerator so nothing can collide with other studio pages.
   Two pieces of art:
     1) HERO  — a framed app window: prompt bar (typing caret + spark),
        a canvas that denoises / scan-wipes into a generated landscape,
        and a vertical stack of 8 model chips lighting up one-by-one.
     2) SHOWCASE — a wide band of 8 model cards rendering the SAME portrait
        in 8 styles, with a sweep of light travelling left-to-right.
   ========================================================================== */

/* ============================ 1. HERO ART ============================ */

.pg-imagegenerator-hero { transform-box: fill-box; transform-origin: center; animation: pgimagegeneratorFloat 9s var(--ease-out, ease-in-out) infinite; }
@keyframes pgimagegeneratorFloat { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-9px); } }

/* soft window glow behind the frame */
.pg-imagegenerator-glow { transform-box: fill-box; transform-origin: center; animation: pgimagegeneratorGlow 7s ease-in-out infinite; }
@keyframes pgimagegeneratorGlow { 0%, 100% { opacity: .45; } 50% { opacity: .8; } }

/* the generated sun — gentle pulse */
.pg-imagegenerator-sun { transform-box: fill-box; transform-origin: center; animation: pgimagegeneratorSun 5s ease-in-out infinite; }
@keyframes pgimagegeneratorSun { 0%, 100% { transform: scale(1); opacity: .95; } 50% { transform: scale(1.06); opacity: 1; } }

/* denoise crossfade: raw noise fades out, finished image fades in — loops */
.pg-imagegenerator-noise { animation: pgimagegeneratorNoise 6.4s ease-in-out infinite; }
@keyframes pgimagegeneratorNoise {
	0%, 12% { opacity: .9; }
	42%, 78% { opacity: 0; }
	96%, 100% { opacity: .9; }
}
.pg-imagegenerator-shot { animation: pgimagegeneratorShot 6.4s ease-in-out infinite; }
@keyframes pgimagegeneratorShot {
	0%, 12% { opacity: 0; }
	42%, 78% { opacity: 1; }
	96%, 100% { opacity: 0; }
}

/* the scan line rides down the canvas during the reveal */
.pg-imagegenerator-scan { transform-box: fill-box; animation: pgimagegeneratorScan 6.4s cubic-bezier(.4, 0, .2, 1) infinite; }
@keyframes pgimagegeneratorScan {
	0% { transform: translateY(0); opacity: 0; }
	10% { opacity: 1; }
	40% { transform: translateY(186px); opacity: 1; }
	46%, 100% { transform: translateY(186px); opacity: 0; }
}

/* prompt-bar: a typed line grows in, then the caret keeps blinking */
.pg-imagegenerator-type { transform-box: fill-box; transform-origin: left center; animation: pgimagegeneratorType 6.4s steps(24, end) infinite; }
@keyframes pgimagegeneratorType {
	0% { transform: scaleX(0); }
	28% { transform: scaleX(1); }
	92% { transform: scaleX(1); }
	100% { transform: scaleX(0); }
}
.pg-imagegenerator-caret { animation: pgimagegeneratorCaret 1s steps(1, end) infinite; }
@keyframes pgimagegeneratorCaret { 0%, 49% { opacity: 1; } 50%, 100% { opacity: 0; } }

/* the little spark in the prompt bar twinkles */
.pg-imagegenerator-spark { transform-box: fill-box; transform-origin: center; animation: pgimagegeneratorSpark 3.2s ease-in-out infinite; }
@keyframes pgimagegeneratorSpark {
	0%, 100% { transform: scale(.82) rotate(0deg); opacity: .7; }
	50% { transform: scale(1.15) rotate(90deg); opacity: 1; }
}

/* the 8 model chips light up one after another (staggered by --i) */
.pg-imagegenerator-chipglow { opacity: 0; animation: pgimagegeneratorChip 8s ease-in-out infinite; animation-delay: calc(var(--i) * 1s); }
@keyframes pgimagegeneratorChip {
	0% { opacity: 0; }
	4% { opacity: 1; }
	9% { opacity: 1; }
	14%, 100% { opacity: 0; }
}
.pg-imagegenerator-chipdot { transform-box: fill-box; transform-origin: center; animation: pgimagegeneratorChipDot 8s ease-in-out infinite; animation-delay: calc(var(--i) * 1s); }
@keyframes pgimagegeneratorChipDot {
	0% { transform: scale(1); opacity: .4; }
	5% { transform: scale(1.5); opacity: 1; }
	12% { transform: scale(1); opacity: .4; }
	100% { transform: scale(1); opacity: .4; }
}

/* ========================== 2. SHOWCASE ART ========================== */

/* each of the 8 style cards floats gently, staggered by --i */
.pg-imagegenerator-scard { transform-box: fill-box; transform-origin: center; animation: pgimagegeneratorScard 6s ease-in-out infinite; animation-delay: calc(var(--i) * -.6s); }
@keyframes pgimagegeneratorScard { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-7px); } }

/* the subject inside each card shimmers subtly as the sweep passes */
.pg-imagegenerator-subj { transform-box: fill-box; transform-origin: center; animation: pgimagegeneratorSubj 6s ease-in-out infinite; animation-delay: calc(var(--i) * -.6s); }
@keyframes pgimagegeneratorSubj { 0%, 100% { opacity: .92; } 50% { opacity: 1; } }

/* a bright bar of light travels across the whole band, left to right */
.pg-imagegenerator-sweep { transform-box: fill-box; animation: pgimagegeneratorSweep 5.5s ease-in-out infinite; }
@keyframes pgimagegeneratorSweep {
	0% { transform: translateX(-260px); opacity: 0; }
	12% { opacity: 1; }
	88% { opacity: 1; }
	100% { transform: translateX(940px); opacity: 0; }
}

/* the label under each card brightens as the light reaches it */
.pg-imagegenerator-label { animation: pgimagegeneratorLabel 5.5s ease-in-out infinite; animation-delay: calc(var(--i) * .34s); }
@keyframes pgimagegeneratorLabel { 0%, 100% { opacity: .55; } 50% { opacity: 1; } }

/* ==================== REDUCED MOTION — settle static ==================== */
@media (prefers-reduced-motion: reduce) {
	.pg-imagegenerator-hero,
	.pg-imagegenerator-glow,
	.pg-imagegenerator-sun,
	.pg-imagegenerator-noise,
	.pg-imagegenerator-shot,
	.pg-imagegenerator-scan,
	.pg-imagegenerator-type,
	.pg-imagegenerator-caret,
	.pg-imagegenerator-spark,
	.pg-imagegenerator-chipglow,
	.pg-imagegenerator-chipdot,
	.pg-imagegenerator-scard,
	.pg-imagegenerator-subj,
	.pg-imagegenerator-sweep,
	.pg-imagegenerator-label {
		animation: none !important;
	}
	/* settle to a clean, finished frame */
	.pg-imagegenerator-hero { transform: none; }
	.pg-imagegenerator-noise { opacity: 0; }
	.pg-imagegenerator-shot { opacity: 1; }
	.pg-imagegenerator-scan { opacity: 0; }
	.pg-imagegenerator-type { transform: scaleX(1); }
	.pg-imagegenerator-caret { opacity: 1; }
	.pg-imagegenerator-spark { opacity: 1; transform: none; }
	.pg-imagegenerator-chipglow { opacity: 0; }
	.pg-imagegenerator-chipglow.is-on { opacity: 1; }
	.pg-imagegenerator-chipdot { opacity: 1; transform: none; }
	.pg-imagegenerator-scard,
	.pg-imagegenerator-subj { transform: none; opacity: 1; }
	.pg-imagegenerator-sweep { opacity: 0; }
	.pg-imagegenerator-label { opacity: 1; }
}