/* ==========================================================================
   page-studios.css — public "AI Studios" explainer page (route /ai-studios).
   Loaded by app/Views/project/Pages/AiStudios.php on top of style.css.
   Dark only. Namespaced: .studios-*, .studio-*, .stflow-*, .sh/ig/rx/en/vs/rc.
   Reuses global tokens + .page-hero/.container/.eyebrow/.btn/.grad-text.
   ========================================================================== */

/* ---- Hero ---- */
.studios-lead {
	max-width: 720px;
	margin-top: 20px;
	color: var(--text-2);
	font-size: clamp(15px, 1vw + 12px, 18px);
	line-height: 1.7;
}
/* Two-column hero: copy on the left, portal art on the right (reads as the section's backdrop visual) */
.studios-hero-grid {
	display: grid;
	grid-template-columns: 1fr;
	gap: clamp(22px, 4vw, 40px);
	align-items: center;
}
.studios-hero-copy { min-width: 0; }
.studios-hero-art {
	max-width: 640px;
	margin: 6px auto 0;
}
@media (min-width: 900px) {
	.studios-hero-grid { grid-template-columns: 1.02fr .98fr; gap: clamp(30px, 4vw, 56px); }
	.studios-hero-copy .studios-lead { margin-right: 0; }
	.studios-hero-art { margin: 0; max-width: none; }
}
.sh-svg { display: block; width: 100%; height: auto; overflow: visible; }

/* soft aura + our dot-field */
.sh-aura { transform-box: fill-box; transform-origin: center; filter: blur(9px); animation: shBreathe 7s ease-in-out infinite; }
.sh-field .sh-dot { transform-box: fill-box; transform-origin: center; animation: shTwinkle 3.2s ease-in-out infinite; animation-delay: calc(var(--i) * -.34s); }

/* spinning portal rings + bright leading arc */
.sh-orbit { transform-box: fill-box; transform-origin: center; animation: shSpin 64s linear infinite; }
.sh-ring { fill: none; stroke: rgba(255, 255, 255, .1); stroke-width: 1; stroke-dasharray: 3 7; }
.sh-ring-2 { stroke: rgba(124, 92, 255, .18); stroke-dasharray: 2 10; }
.sh-arc { fill: none; opacity: .9; filter: drop-shadow(0 0 5px rgba(124, 92, 255, .55)); }

/* energy links core -> nodes */
.sh-link { stroke-dasharray: 5 9; opacity: .5; animation: shDash 2.6s linear infinite; animation-delay: calc(var(--i) * -.4s); }

/* orbiting studio chips */
.sh-node { transform-box: fill-box; transform-origin: center; animation: shFloat 5.4s ease-in-out infinite; animation-delay: calc(var(--i) * -1.05s); }

/* central portal core */
.sh-core { transform-box: fill-box; transform-origin: center; animation: shPulse 4.6s ease-in-out infinite; }
.sh-halo { transform-box: fill-box; transform-origin: center; animation: shBreathe 5s ease-in-out infinite; }
.sh-star { animation: shHue 6s ease-in-out infinite; }
.sh-mini { transform-box: fill-box; transform-origin: center; animation: shTwinkle 3s ease-in-out infinite; }
.sh-sparks .sh-spk { transform-box: fill-box; transform-origin: center; animation: shTwinkle 2.6s ease-in-out infinite; animation-delay: calc(var(--i) * -.42s); }

@keyframes shSpin { to { transform: rotate(360deg); } }
@keyframes shDash { to { stroke-dashoffset: -140; } }
@keyframes shFloat { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-7px); } }
@keyframes shPulse { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.05); } }
@keyframes shTwinkle { 0%, 100% { transform: scale(.55); opacity: .3; } 50% { transform: scale(1.15); opacity: 1; } }
@keyframes shBreathe { 0%, 100% { transform: scale(1); opacity: .85; } 50% { transform: scale(1.06); opacity: 1; } }
@keyframes shHue {
	0%, 100% { filter: hue-rotate(-20deg) drop-shadow(0 0 8px rgba(124, 92, 255, .5)); }
	50% { filter: hue-rotate(26deg) drop-shadow(0 0 14px rgba(34, 211, 238, .55)); }
}

/* ---- Studio blocks (shared) ---- */
.studio-block { padding-top: 58px; padding-bottom: 58px; }
.studio-row {
	display: grid;
	grid-template-columns: 1fr;
	gap: 34px;
	align-items: center;
}
.studio-art { min-width: 0; }
.studio-figure {
	position: relative;
	margin: 0;
	padding: 20px;
	border: 1px solid var(--border);
	border-radius: var(--radius-lg);
	background:
		radial-gradient(120% 120% at 20% 0%, rgba(124, 92, 255, .12), transparent 55%),
		linear-gradient(165deg, rgba(255, 255, 255, .05), rgba(255, 255, 255, .012) 62%);
	overflow: hidden;
}
.studio-figure::after {
	content: "";
	position: absolute;
	inset: 0;
	border-radius: inherit;
	box-shadow: inset 0 1px 0 rgba(255, 255, 255, .06);
	pointer-events: none;
}
.studio-figure svg { display: block; width: 100%; height: auto; }

.studio-copy { min-width: 0; }
.studio-title {
	font-size: clamp(25px, 2vw + 14px, 34px);
	letter-spacing: -.02em;
	line-height: 1.12;
	color: var(--text-1);
	margin: 14px 0 6px;
}
.studio-tags { display: flex; flex-wrap: wrap; gap: 8px; margin: 12px 0 18px; }
.studio-tag {
	display: inline-flex;
	align-items: center;
	padding: 5px 12px;
	font-size: 12.5px;
	font-weight: 500;
	color: var(--text-2);
	background: var(--surface);
	border: 1px solid var(--border);
	border-radius: 999px;
}
.studio-copy p { color: var(--text-2); font-size: 15.5px; line-height: 1.72; margin-bottom: 14px; }
.studio-uses { list-style: none; margin: 4px 0 24px; padding: 0; display: grid; gap: 11px; }
.studio-uses li { display: flex; align-items: flex-start; gap: 11px; color: var(--text-2); font-size: 15px; line-height: 1.5; }
.studio-uses svg {
	flex: 0 0 auto;
	width: 20px; height: 20px;
	margin-top: 1px;
	fill: none;
	stroke: var(--violet);
	stroke-width: 2.4;
	stroke-linecap: round;
	stroke-linejoin: round;
}
.studio-uses li:nth-child(2) svg { stroke: #22d3ee; }
.studio-uses li:nth-child(3) svg { stroke: var(--magenta); }
.studio-uses li:nth-child(4) svg { stroke: var(--amber); }
.studio-cta { margin-top: 4px; }
.studio-ctas { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; margin-top: 8px; }
@media (max-width: 400px) { .studio-ctas .btn { width: 100%; justify-content: center; } }

/* Alternate sides on desktop */
@media (min-width: 880px) {
	.studio-row { grid-template-columns: 1.02fr 1fr; gap: 52px; }
	.studio-block.is-reverse .studio-art { order: 2; }
}

/* ---- Studio 1: Image Generator ---- */
.ig-scanwrap { pointer-events: none; }
.ig-scan { animation: igScan 3.6s ease-in-out infinite; }
.ig-caret { animation: igCaret 1s steps(1) infinite; }
.ig-spark { transform-box: fill-box; transform-origin: center; animation: shSparkle 3.2s ease-in-out infinite; }
.ig-chip { opacity: .26; animation: igChip 4s ease-in-out infinite; animation-delay: calc(var(--i) * .38s); }
@keyframes igScan { 0% { transform: translateY(0); opacity: 0; } 12% { opacity: 1; } 86% { opacity: 1; } 100% { transform: translateY(186px); opacity: 0; } }
@keyframes igCaret { 0%, 50% { opacity: 1; } 51%, 100% { opacity: 0; } }
@keyframes igChip { 0% { opacity: .26; } 8% { opacity: 1; } 22% { opacity: .26; } 100% { opacity: .26; } }

/* ---- Studio 2: Photo Remix ---- */
.rx-hue { transform-box: fill-box; transform-origin: center; animation: rxHue 7.5s linear infinite; }
.rx-loop { stroke-dasharray: 4 6; animation: rxLoop 2s linear infinite; }
.rx-p { animation: rxFlow 2.8s linear infinite; animation-delay: calc(var(--i) * .6s); }
.rx-dab { transform-box: fill-box; transform-origin: center; animation: rxDab 3.2s ease-in-out infinite; animation-delay: calc(var(--i) * .4s); }
@keyframes rxHue { to { filter: hue-rotate(360deg); } }
@keyframes rxLoop { to { stroke-dashoffset: -40; } }
@keyframes rxFlow {
	0% { transform: translateX(-42px); opacity: 0; }
	20% { opacity: 1; }
	80% { opacity: 1; }
	100% { transform: translateX(120px); opacity: 0; }
}
@keyframes rxDab { 0%, 60%, 100% { transform: scale(1); opacity: .55; } 22% { transform: scale(1.35); opacity: 1; } }

/* ---- Studio 3: Enhance ---- */
.en-corners { transform-box: fill-box; transform-origin: center; animation: enExpand 3.8s ease-in-out infinite; }
.en-ants { animation: enAnts 1.4s linear infinite; }
.en-glint { opacity: 0; animation: enGlint 3.2s ease-in-out infinite; }
.en-mag { animation: enMag 6s ease-in-out infinite; }
.en-pix { animation: enPix 2.8s ease-in-out infinite; }
@keyframes enExpand { 0%, 100% { transform: scale(.95); } 50% { transform: scale(1.05); } }
@keyframes enAnts { to { stroke-dashoffset: -30; } }
@keyframes enGlint { 0%, 72%, 100% { opacity: 0; } 22% { opacity: .9; } }
@keyframes enMag { 0%, 100% { transform: translate(0, 0); } 50% { transform: translate(9px, -7px); } }
@keyframes enPix { 0%, 100% { opacity: .55; } 50% { opacity: .95; } }

/* ---- Studio 4: Video Studio ---- */
.vs-strip { animation: vsStrip 6s linear infinite; }
.vs-head { animation: vsHead 4.2s ease-in-out infinite alternate; }
.vs-play { transform-box: fill-box; transform-origin: center; animation: vsPlay 3s ease-in-out infinite; }
.vs-pulse { transform-box: fill-box; transform-origin: center; animation: vsPulseRing 2.6s ease-out infinite; }
.vs-bar { transform-box: fill-box; transform-origin: center bottom; animation: vsBar 1.1s ease-in-out infinite; animation-delay: calc(var(--i) * .11s); }
@keyframes vsStrip { to { transform: translateX(-48px); } }
@keyframes vsHead { 0% { transform: translateX(0); } 100% { transform: translateX(258px); } }
@keyframes vsPlay { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.05); } }
@keyframes vsPulseRing { 0% { transform: scale(.72); opacity: .85; } 100% { transform: scale(1.5); opacity: 0; } }
@keyframes vsBar { 0%, 100% { transform: scaleY(.4); } 50% { transform: scaleY(1.35); } }

/* ---- Studio 5: Realtime Canvas — sketch draws, then the painted image is revealed
       (mirrors the landing "sd4" demo: draw 3 mountains -> those same 3 mountains, painted) ---- */
.rc-fig { padding: 14px; }
.rcp-board { position: relative; width: 100%; aspect-ratio: 320 / 200; border-radius: 14px; overflow: hidden; border: 1px solid var(--border); background: radial-gradient(120% 120% at 30% 20%, rgba(124, 92, 255, .14), transparent 60%), #080a18; }
.rcp-paint { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 2; clip-path: inset(0 100% 0 0); animation: rcpReveal 5.4s var(--ease-out) infinite; }
.rcp-sketch { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 1; }
.rcp-guide { fill: none; }
.rcp-sun { fill: none; stroke-dasharray: 1; stroke-dashoffset: 1; animation: rcpDraw 5.4s var(--ease-out) .2s infinite; }
.rcp-stroke { fill: none; stroke-dasharray: 1; stroke-dashoffset: 1; animation: rcpDraw 5.4s var(--ease-out) infinite; }
/* brush rides the exact sketch vertices; keyTimes weighted by segment length so the tip tracks the draw */
.rcp-brush { transform: translate(8px, 170px); animation: rcpBrush 5.4s linear infinite; }
.rcp-edge { position: absolute; top: 0; bottom: 0; left: -12%; width: 42px; z-index: 3; opacity: 0; pointer-events: none; background: linear-gradient(90deg, transparent, rgba(124, 92, 255, .5), rgba(255, 255, 255, .85)); animation: rcpEdge 5.4s var(--ease-out) infinite; }
.rcp-tag { position: absolute; right: 12px; top: 12px; z-index: 4; padding: .3em .7em; border-radius: 999px; font-family: var(--font-display); font-size: clamp(10px, 1vw, 12px); letter-spacing: .02em; color: var(--text-2); background: rgba(5, 6, 14, .6); border: 1px solid var(--border); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); }
.rcp-palette { position: absolute; left: 12px; bottom: 12px; z-index: 4; display: flex; gap: 8px; }
.rcp-palette i { width: 13px; height: 13px; border-radius: 50%; animation: rcpDot 4.5s ease-in-out infinite; }
.rcp-palette i:nth-child(1) { color: #22d3ee; box-shadow: 0 0 9px currentColor; }
.rcp-palette i:nth-child(2) { color: #7c5cff; box-shadow: 0 0 9px currentColor; animation-delay: .2s; }
.rcp-palette i:nth-child(3) { color: #ff4ecd; box-shadow: 0 0 9px currentColor; animation-delay: .4s; }
.rcp-palette i:nth-child(4) { color: #ffb648; box-shadow: 0 0 9px currentColor; animation-delay: .6s; }
@keyframes rcpReveal { 0%, 50% { clip-path: inset(0 100% 0 0); } 72% { clip-path: inset(0 0 0 0); } 92% { clip-path: inset(0 0 0 0); } 100% { clip-path: inset(0 100% 0 0); } }
@keyframes rcpDraw { 0% { stroke-dashoffset: 1; } 44% { stroke-dashoffset: 0; } 100% { stroke-dashoffset: 0; } }
@keyframes rcpBrush {
	0%    { transform: translate(8px, 170px);   opacity: 0; }
	4%    { opacity: 1; }
	10%   { transform: translate(78px, 96px); }
	15.4% { transform: translate(120px, 132px); }
	23.1% { transform: translate(168px, 70px); }
	29.8% { transform: translate(212px, 122px); }
	35.7% { transform: translate(258px, 84px); }
	44%   { transform: translate(312px, 150px); opacity: 1; }
	52%, 100% { transform: translate(312px, 150px); opacity: 0; }
}
@keyframes rcpEdge { 0%, 50% { left: -12%; opacity: 0; } 54% { opacity: 1; } 72% { left: 100%; opacity: 1; } 76%, 100% { left: 100%; opacity: 0; } }
@keyframes rcpDot { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.25); } }

/* ---- How they work together ---- */
.studios-flow-section { position: relative; overflow: hidden; }
.stflow-glow {
	position: absolute; inset: 0; pointer-events: none;
	background: radial-gradient(50% 62% at 50% 55%, rgba(124, 92, 255, .12), transparent 72%);
}
.stflow {
	position: relative;
	display: flex;
	align-items: flex-start;
	justify-content: center;
	gap: 6px;
	margin-top: clamp(38px, 4vw, 60px);
}
.stflow-node {
	flex: 0 0 auto;
	width: clamp(120px, 15vw, 176px);
	display: flex;
	flex-direction: column;
	align-items: center;
	text-align: center;
}
.stflow-orb {
	width: 66px; height: 66px;
	display: grid;
	place-items: center;
	border-radius: 20px;
	background: var(--surface-2);
	border: 1px solid var(--border-strong);
	color: var(--c, var(--violet));
	box-shadow: 0 0 0 0 color-mix(in srgb, var(--c, #7c5cff) 55%, transparent);
	animation: stflowPulse 3.4s ease-in-out infinite;
}
.stflow-node:nth-child(3) .stflow-orb { animation-delay: -.85s; }
.stflow-node:nth-child(5) .stflow-orb { animation-delay: -1.7s; }
.stflow-node:nth-child(7) .stflow-orb { animation-delay: -2.55s; }
.stflow-node:nth-child(9) .stflow-orb { animation-delay: -3.4s; }
.stflow-orb svg {
	width: 30px; height: 30px;
	fill: none;
	stroke: currentColor;
	stroke-width: 1.9;
	stroke-linecap: round;
	stroke-linejoin: round;
}
.stflow-step { margin-top: 14px; font-family: var(--font-display, inherit); font-size: 15.5px; font-weight: 600; color: var(--text-1); }
.stflow-sub { margin-top: 2px; font-size: 12.5px; color: var(--text-3); }
.stflow-link {
	align-self: flex-start;
	margin-top: 32px;
	flex: 1 1 34px;
	min-width: 26px;
	max-width: 90px;
	height: 2px;
	border-radius: 2px;
	background: linear-gradient(90deg, rgba(124, 92, 255, .18), rgba(124, 92, 255, .5), rgba(255, 78, 205, .18));
	position: relative;
	overflow: hidden;
}
.stflow-link i {
	position: absolute;
	top: 0; left: 0;
	width: 40%; height: 100%;
	border-radius: 2px;
	background: linear-gradient(90deg, transparent, #22d3ee, #ff4ecd, transparent);
	animation: stflowRun 2.4s linear infinite;
}
@keyframes stflowPulse {
	0%, 100% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--c, #7c5cff) 45%, transparent); transform: translateY(0); }
	50% { box-shadow: 0 0 22px 2px color-mix(in srgb, var(--c, #7c5cff) 32%, transparent); transform: translateY(-4px); }
}
@keyframes stflowRun { 0% { transform: translateX(-120%); } 100% { transform: translateX(320%); } }

@media (max-width: 640px) {
	.stflow { flex-direction: column; align-items: center; gap: 0; }
	.stflow-node { width: 100%; max-width: 300px; }
	.stflow-link {
		align-self: center;
		width: 2px; height: 34px; min-width: 0;
		margin: 10px 0;
		flex: 0 0 auto;
		background: linear-gradient(180deg, rgba(124, 92, 255, .18), rgba(124, 92, 255, .5), rgba(255, 78, 205, .18));
	}
	.stflow-link i { width: 100%; height: 40%; background: linear-gradient(180deg, transparent, #22d3ee, #ff4ecd, transparent); animation-name: stflowRunV; }
}
@keyframes stflowRunV { 0% { transform: translateY(-120%); } 100% { transform: translateY(320%); } }

/* ---- Final CTA ---- */
.studios-final { padding-top: 20px; }
.studios-final-card {
	position: relative;
	overflow: hidden;
	text-align: center;
	padding: clamp(38px, 5vw, 64px) clamp(20px, 4vw, 56px);
	border: 1px solid var(--border-strong);
	border-radius: var(--radius-lg);
	background:
		radial-gradient(90% 130% at 50% 0%, rgba(124, 92, 255, .2), transparent 60%),
		linear-gradient(165deg, rgba(255, 255, 255, .06), rgba(255, 255, 255, .015) 65%);
}
.studios-final-glow {
	position: absolute;
	left: 50%; top: -40%;
	width: 520px; height: 520px;
	max-width: 120%;
	transform: translateX(-50%);
	pointer-events: none;
	background: radial-gradient(closest-side, rgba(255, 78, 205, .16), transparent);
	animation: finalDrift 9s ease-in-out infinite;
}
.studios-final-title {
	position: relative;
	font-size: clamp(26px, 3vw + 12px, 42px);
	letter-spacing: -.025em;
	color: var(--text-1);
	line-height: 1.1;
}
.studios-final-sub {
	position: relative;
	max-width: 560px;
	margin: 16px auto 0;
	color: var(--text-2);
	font-size: clamp(15px, 1vw + 12px, 17px);
	line-height: 1.65;
}
.studios-final-actions {
	position: relative;
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 14px;
	margin-top: 30px;
}
@keyframes finalDrift { 0%, 100% { transform: translateX(-50%) translateY(0); opacity: .9; } 50% { transform: translateX(-46%) translateY(14px); opacity: 1; } }

@media (max-width: 400px) {
	.studios-final-actions .btn { width: 100%; }
}

/* ==========================================================================
   Reduced motion — halt all page motion, settle on a legible static frame.
   ========================================================================== */
@media (prefers-reduced-motion: reduce) {
	.sh-orbit, .sh-node, .sh-core, .sh-halo, .sh-star, .sh-mini, .sh-link, .sh-aura, .sh-dot, .sh-spk,
	.ig-scan, .ig-caret, .ig-spark, .ig-chip,
	.rx-hue, .rx-loop, .rx-p, .rx-dab,
	.en-corners, .en-ants, .en-glint, .en-mag, .en-pix,
	.vs-strip, .vs-head, .vs-play, .vs-pulse, .vs-bar,
	.rcp-paint, .rcp-stroke, .rcp-sun, .rcp-brush, .rcp-edge, .rcp-palette i,
	.stflow-orb, .stflow-link i, .studios-final-glow {
		animation: none !important;
	}
	/* settle final states so nothing is stuck mid-motion */
	.rcp-paint { clip-path: inset(0 0 0 0); }
	.rcp-stroke, .rcp-sun { stroke-dashoffset: 0; }
	.rcp-brush, .rcp-edge { opacity: 0; }
	.rx-p, .vs-pulse, .ig-scan, .en-glint { opacity: 0; }
	.ig-chip { opacity: .8; }
	.ig-caret, .sh-star { opacity: 1; }
	.sh-dot, .sh-spk { transform: scale(1); opacity: .8; }
	.stflow-link i { transform: translateX(60%); opacity: .8; }
}