/* ============================================================================
   Studios — interactive two-column showcase (mirrored vs How-it-works).
   LEFT = persistent app-window STAGE (its inner .stu-demo swaps per studio),
   RIGHT = clickable studio list. Only the visible .stu-demo animates: every
   loop below is gated on `.stu-demo.is-on`, so hidden demos hold still.
   All rules are scoped under .stu-section / #studios. Dark theme only.
   ============================================================================ */

/* seamless blend with the section above — no solid full-section fill, just a
   faint violet aura that fades to nothing over the first ~180px */
.stu-section {
	position: relative;
	background: transparent;
	overflow-x: clip;
}
.stu-aura {
	position: absolute; left: 50%; top: 8%; z-index: 0;
	width: min(1080px, 122vw); aspect-ratio: 1 / .5;
	transform: translateX(-50%);
	background: radial-gradient(50% 50% at 50% 50%, rgba(124, 92, 255, .18), rgba(34, 211, 238, .06) 48%, transparent 72%);
	pointer-events: none;
}
.stu-defs { position: absolute; width: 0; height: 0; overflow: hidden; }
.stu-section .container { position: relative; z-index: 1; }

/* ---------------------------------------------------------------- layout grid
   Mirrored: stage on the left, list on the right. DOM order is stage → list,
   so the mobile 1-column stack naturally puts the stage on top. */
.stu {
	position: relative; z-index: 1;
	display: grid;
	grid-template-columns: minmax(0, 1.08fr) minmax(0, .92fr);
	gap: clamp(24px, 3.2vw, 54px);
	align-items: start;
}

/* ============================================================ LEFT · STAGE */
.stu-stage {
	position: sticky;
	top: clamp(84px, 12vh, 118px);
	isolation: isolate;
	aspect-ratio: 4 / 3;
	border-radius: var(--radius-lg);
	border: 1px solid var(--border);
	background:
		radial-gradient(120% 92% at 50% 0%, rgba(124, 92, 255, .18), transparent 62%),
		linear-gradient(160deg, rgba(255, 255, 255, .05), rgba(255, 255, 255, .012) 64%),
		var(--bg-1);
	box-shadow: var(--shadow-card);
	overflow: hidden;
}
/* slow conic edge, same language as the eyebrow pill */
.stu-stage::after {
	content: ""; position: absolute; inset: 0; z-index: 9; border-radius: inherit; padding: 1.5px;
	background: conic-gradient(from var(--eb-ring-angle, 0deg), rgba(34, 211, 238, .7), rgba(124, 92, 255, .7), rgba(255, 78, 205, .7), rgba(34, 211, 238, .7));
	-webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
	        mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
	-webkit-mask-composite: xor; mask-composite: exclude;
	opacity: .42; animation: eyebrowRingSpin 9s linear infinite; pointer-events: none;
}

/* embers rising through the stage, so it keeps breathing between studios */
.stu-dust { position: absolute; inset: 0; z-index: 1; pointer-events: none; }
.stu-dust i {
	position: absolute; bottom: -6px;
	width: 3px; height: 3px; border-radius: 50%;
	background: rgba(255, 255, 255, .8);
	box-shadow: 0 0 9px rgba(124, 92, 255, .95);
	opacity: 0; animation: stuDust 8s linear infinite;
}
.stu-dust i:nth-child(1) { left: 12%; animation-delay: 0s; animation-duration: 8.4s; }
.stu-dust i:nth-child(2) { left: 32%; animation-delay: 1.6s; animation-duration: 7s; }
.stu-dust i:nth-child(3) { left: 54%; animation-delay: 3.1s; animation-duration: 9.2s; }
.stu-dust i:nth-child(4) { left: 74%; animation-delay: 4.4s; animation-duration: 7.6s; }
.stu-dust i:nth-child(5) { left: 90%; animation-delay: 5.8s; animation-duration: 8.8s; }
@keyframes stuDust {
	0% { opacity: 0; transform: translateY(0) scale(.6); }
	14% { opacity: .85; }
	72% { opacity: .4; }
	100% { opacity: 0; transform: translateY(-360px) scale(1); }
}

/* the framed app window — persistent chrome, only the screen changes */
.stu-app {
	position: absolute; z-index: 2;
	left: clamp(9px, 1.2vw, 16px); right: clamp(9px, 1.2vw, 16px);
	top: clamp(9px, 1.2vw, 16px); bottom: clamp(44px, 5.4vw, 54px);
	display: flex; flex-direction: column;
	border-radius: 16px; border: 1px solid var(--border);
	background: linear-gradient(168deg, rgba(255, 255, 255, .05), rgba(255, 255, 255, .01) 60%), rgba(6, 7, 16, .74);
	overflow: hidden;
}
.stu-bar {
	flex: 0 0 auto;
	display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 8px;
	height: clamp(30px, 3.6vw, 40px); padding: 0 clamp(9px, 1.1vw, 14px);
	border-bottom: 1px solid var(--border);
	background: rgba(255, 255, 255, .022);
}
.stu-dots { display: inline-flex; gap: 5px; }
.stu-dots i { width: 7px; height: 7px; border-radius: 50%; }
.stu-dots i:nth-child(1) { background: rgba(255, 78, 205, .6); }
.stu-dots i:nth-child(2) { background: rgba(255, 182, 72, .6); }
.stu-dots i:nth-child(3) { background: rgba(34, 211, 238, .6); }
.stu-bar-title {
	justify-self: center;
	display: inline-flex; align-items: center; gap: 6px;
	font-family: var(--font-display); font-size: clamp(9.5px, 1vw, 12px); letter-spacing: .04em;
	color: var(--text-2); white-space: nowrap;
}
.stu-bar-title svg { width: 13px; height: 13px; flex: 0 0 auto; fill: var(--violet); }
.stu-live {
	display: inline-flex; align-items: center; gap: 5px;
	padding: .24em .58em; border-radius: 999px;
	border: 1px solid var(--border); background: rgba(34, 211, 238, .12);
	font-size: clamp(8.5px, .9vw, 10.5px); letter-spacing: .06em; text-transform: uppercase; color: var(--text-1);
}
.stu-live i { width: 6px; height: 6px; border-radius: 50%; background: #22d3ee; box-shadow: 0 0 8px #22d3ee; animation: stuBlink 1.6s ease-in-out infinite; }
@keyframes stuBlink { 0%, 100% { opacity: 1; } 50% { opacity: .3; } }

/* the swap area: demos are absolutely stacked, only .is-on is shown */
.stu-screen { position: relative; flex: 1 1 auto; min-height: 0; }
.stu-demo {
	position: absolute; inset: 0; z-index: 1;
	display: flex; flex-direction: column;
	padding: clamp(10px, 1.5vw, 18px); gap: clamp(8px, 1.2vw, 12px);
	opacity: 0; visibility: hidden;
	transform: scale(.965) translateY(10px);
	filter: blur(6px);
	transition: opacity .55s var(--ease-out), transform .6s var(--ease-out), filter .55s var(--ease-out), visibility 0s linear .6s;
}
.stu-demo.is-on {
	opacity: 1; visibility: visible; z-index: 2;
	transform: none; filter: blur(0);
	transition: opacity .55s var(--ease-out), transform .6s var(--ease-out), filter .55s var(--ease-out);
}
@media (prefers-reduced-motion: reduce) {
	.stu-demo { transform: none; filter: none; transition: opacity .3s linear, visibility 0s linear .3s; }
	.stu-demo.is-on { transition: opacity .3s linear; }
}
.stu-demo img { display: block; width: 100%; height: 100%; object-fit: cover; }

/* ---------------------------------------------------- demo 0 · Image Generator */
.sd0-prompt {
	flex: 0 0 auto;
	display: flex; align-items: center; gap: 8px;
	padding: clamp(7px, 1vw, 11px) clamp(9px, 1.2vw, 13px);
	border-radius: 12px; border: 1px solid var(--border);
	background: rgba(255, 255, 255, .04);
}
.sd0-spark { width: 15px; height: 15px; flex: 0 0 auto; fill: var(--violet); }
.sd0-lines { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 5px; }
.sd0-line { height: 6px; border-radius: 4px; background: linear-gradient(90deg, rgba(124, 92, 255, .8), rgba(34, 211, 238, .5)); width: 0; }
.sd0-caret { flex: 0 0 auto; width: 2px; height: 15px; background: var(--violet); border-radius: 2px; }
.stu-demo.is-on .sd0-l1 { animation: sd0Type1 4.5s var(--ease-out) infinite; }
.stu-demo.is-on .sd0-l2 { animation: sd0Type2 4.5s var(--ease-out) infinite; }
.stu-demo.is-on .sd0-caret { animation: sd0Caret 4.5s steps(1) infinite; }
@keyframes sd0Type1 { 0% { width: 0; } 20% { width: 88%; } 70%, 100% { width: 88%; } }
@keyframes sd0Type2 { 0%, 14% { width: 0; } 34% { width: 62%; } 70%, 100% { width: 62%; } }
@keyframes sd0Caret { 0%, 36% { opacity: 1; } 40%, 100% { opacity: 0; } }

.sd0-canvas { position: relative; flex: 1 1 auto; min-height: 0; border-radius: 12px; overflow: hidden; border: 1px solid var(--border); }
.sd0-canvas img { filter: blur(16px) saturate(.6) brightness(.7); transform: scale(1.08); }
.stu-demo.is-on .sd0-canvas img { animation: sd0Develop 4.5s var(--ease-out) infinite; }
@keyframes sd0Develop {
	0%, 30% { filter: blur(16px) saturate(.6) brightness(.7); transform: scale(1.08); }
	66%, 100% { filter: blur(0) saturate(1.05) brightness(1); transform: scale(1); }
}
.sd0-noise {
	position: absolute; inset: 0;
	background:
		repeating-linear-gradient(45deg, rgba(255, 255, 255, .08) 0 2px, transparent 2px 4px),
		repeating-linear-gradient(-45deg, rgba(124, 92, 255, .12) 0 2px, transparent 2px 4px);
	mix-blend-mode: screen; opacity: 0;
}
.stu-demo.is-on .sd0-noise { animation: sd0Noise 4.5s linear infinite; }
@keyframes sd0Noise { 0%, 28% { opacity: .9; } 62%, 100% { opacity: 0; } }
.sd0-wipe {
	position: absolute; left: 0; right: 0; top: 0; height: 40%;
	background: linear-gradient(180deg, transparent, rgba(34, 211, 238, .5) 60%, rgba(255, 255, 255, .85));
	opacity: 0;
}
.stu-demo.is-on .sd0-wipe { animation: sd0Wipe 4.5s var(--ease-out) infinite; }
@keyframes sd0Wipe {
	0%, 26% { opacity: 0; transform: translateY(-100%); }
	32% { opacity: 1; }
	60% { opacity: .9; transform: translateY(250%); }
	64%, 100% { opacity: 0; transform: translateY(250%); }
}
.sd0-core { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; }
.stu-demo.is-on .sd0-core { animation: sd0Core 4.5s var(--ease-out) infinite; }
@keyframes sd0Core { 0%, 24% { opacity: 0; transform: scale(.4); } 40% { opacity: .9; } 60% { opacity: 0; transform: scale(1.5); } 100% { opacity: 0; } }
.sd0-go {
	flex: 0 0 auto; align-self: flex-start;
	display: inline-flex; align-items: center; gap: 6px;
	padding: .5em 1em; border-radius: 999px;
	background: var(--grad); background-size: 160% 100%;
	color: #fff; font-family: var(--font-display); font-weight: 600; font-size: clamp(11px, 1.1vw, 13px);
	box-shadow: 0 10px 26px -12px rgba(124, 92, 255, .8);
}
.sd0-go svg { width: 14px; height: 14px; fill: none; stroke: #fff; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.stu-demo.is-on .sd0-go { animation: sd0Go 4.5s var(--ease-out) infinite; }
@keyframes sd0Go { 0%, 20% { transform: scale(1); } 26% { transform: scale(.94); } 34% { transform: scale(1); } }

/* -------------------------------------------------------- demo 1 · Photo Remix */
.sd1-pair { flex: 1 1 auto; min-height: 0; display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: clamp(6px, 1vw, 12px); }
.sd1-tile { position: relative; height: 100%; border-radius: 12px; overflow: hidden; border: 1px solid var(--border); }
.sd1-tag {
	position: absolute; left: 8px; bottom: 8px; z-index: 3;
	padding: .22em .6em; border-radius: 999px;
	background: rgba(5, 6, 14, .72); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
	font-family: var(--font-display); font-weight: 600; font-size: clamp(9px, .95vw, 11px); color: var(--text-1); font-style: normal;
}
.sd1-tag2 { color: #ff9be9; }
.sd1-styled { filter: hue-rotate(0) saturate(1); }
.stu-demo.is-on .sd1-styled { animation: sd1Style 4.5s var(--ease-out) infinite; }
@keyframes sd1Style {
	0%, 22% { filter: hue-rotate(0deg) saturate(1) brightness(1); }
	52%, 100% { filter: hue-rotate(210deg) saturate(1.5) brightness(1.08); }
}
.sd1-sweep {
	position: absolute; inset: 0; z-index: 2;
	background: linear-gradient(110deg, transparent 40%, rgba(34, 211, 238, .55) 50%, rgba(255, 78, 205, .55) 56%, transparent 66%);
	background-size: 260% 100%; opacity: 0;
}
.stu-demo.is-on .sd1-sweep { animation: sd1Sweep 4.5s var(--ease-out) infinite; }
@keyframes sd1Sweep {
	0%, 20% { opacity: 0; background-position: 130% 0; }
	28% { opacity: 1; }
	56% { opacity: .9; background-position: -130% 0; }
	60%, 100% { opacity: 0; background-position: -130% 0; }
}
.sd1-arrow { display: grid; place-items: center; }
.sd1-arrow svg { width: clamp(20px, 2.6vw, 30px); height: auto; fill: none; stroke: var(--violet); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.stu-demo.is-on .sd1-arrow svg { animation: sd1Arrow 4.5s var(--ease-out) infinite; }
@keyframes sd1Arrow { 0%, 100% { transform: translateX(0); opacity: .7; } 30% { transform: translateX(3px); opacity: 1; } }
.sd1-styles { flex: 0 0 auto; display: flex; flex-wrap: wrap; gap: 6px; }
.sd1-st {
	padding: .34em .8em; border-radius: 999px;
	border: 1px solid var(--border); background: var(--surface);
	font-size: clamp(10px, 1vw, 12px); color: var(--text-2); font-weight: 600;
}
.sd1-st.sd1-on { border-color: transparent; background: rgba(124, 92, 255, .2); color: var(--text-1); }
.stu-demo.is-on .sd1-st.sd1-on { animation: sd1Chip 4.5s var(--ease-out) infinite; }
@keyframes sd1Chip { 0%, 24% { box-shadow: 0 0 0 0 rgba(124, 92, 255, 0); } 40% { box-shadow: 0 0 18px 0 rgba(124, 92, 255, .55); } 70%, 100% { box-shadow: 0 0 0 0 rgba(124, 92, 255, 0); } }

/* ------------------------------------------------------------ demo 2 · Enhance */
.sd2-stage { position: relative; flex: 1 1 auto; min-height: 0; display: grid; place-items: center; }
.sd2-checker {
	position: absolute; right: 0; top: 0; width: 34%; height: 34%; z-index: 1; border-radius: 0 0 0 12px;
	background: conic-gradient(rgba(255, 255, 255, .14) 0 25%, transparent 0 50%, rgba(255, 255, 255, .14) 0 75%, transparent 0);
	background-size: 12px 12px; opacity: 0;
}
.stu-demo.is-on .sd2-checker { animation: sd2Check 4.5s var(--ease-out) infinite; }
@keyframes sd2Check { 0%, 22% { opacity: .8; } 55%, 100% { opacity: 0; } }
.sd2-tile { position: relative; z-index: 2; width: 46%; border-radius: 10px; overflow: hidden; border: 1px solid var(--border); aspect-ratio: 4 / 3; box-shadow: 0 18px 40px -20px rgba(0, 0, 0, .8); }
.sd2-tile img { filter: blur(6px) brightness(.86); }
.stu-demo.is-on .sd2-tile { animation: sd2Snap 4.5s var(--ease-out) infinite; }
.stu-demo.is-on .sd2-tile img { animation: sd2Sharp 4.5s var(--ease-out) infinite; }
@keyframes sd2Snap {
	0%, 24% { width: 46%; box-shadow: 0 12px 30px -20px rgba(0, 0, 0, .8); }
	40%, 100% { width: 82%; box-shadow: 0 22px 48px -22px rgba(34, 211, 238, .5); }
}
@keyframes sd2Sharp {
	0%, 24% { filter: blur(6px) brightness(.86); }
	48%, 100% { filter: blur(0) brightness(1.04); }
}
.sd2-scan {
	position: absolute; left: 0; right: 0; top: 0; height: 3px; z-index: 3;
	background: linear-gradient(90deg, transparent, #22d3ee, transparent);
	box-shadow: 0 0 14px 2px rgba(34, 211, 238, .8); opacity: 0;
}
.stu-demo.is-on .sd2-scan { animation: sd2Scan 4.5s var(--ease-out) infinite; }
@keyframes sd2Scan {
	0%, 26% { opacity: 0; top: 0; }
	30% { opacity: 1; }
	58% { opacity: 1; top: 100%; }
	62%, 100% { opacity: 0; top: 100%; }
}
.sd2-marks { position: absolute; inset: 6%; z-index: 4; width: 88%; height: 88%; }
.sd2-mk { fill: none; stroke: url(#stuStroke); stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 40; stroke-dashoffset: 40; opacity: 0; }
.stu-demo.is-on .sd2-mk { animation: sd2Mark 4.5s var(--ease-out) var(--d, 0s) infinite; }
@keyframes sd2Mark {
	0%, 40% { stroke-dashoffset: 40; opacity: 0; }
	52% { stroke-dashoffset: 0; opacity: 1; }
	86%, 100% { stroke-dashoffset: 0; opacity: .5; }
}
.sd2-badge {
	position: absolute; left: 10px; bottom: 10px; z-index: 5;
	display: inline-flex; align-items: center; gap: 5px;
	padding: .3em .7em; border-radius: 999px;
	border: 1px solid transparent; background: rgba(124, 92, 255, .2);
	font-family: var(--font-display); font-weight: 700; font-size: clamp(10px, 1vw, 12px); letter-spacing: .04em; color: var(--text-1);
	opacity: 0;
}
.sd2-badge svg { width: 13px; height: 13px; fill: none; stroke: #22d3ee; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.stu-demo.is-on .sd2-badge { animation: sd2Badge 4.5s var(--ease-out) infinite; }
@keyframes sd2Badge { 0%, 46% { opacity: 0; transform: translateY(6px); } 58%, 100% { opacity: 1; transform: none; } }

/* ------------------------------------------------------ demo 3 · Video Studio */
.sd3-frame { position: relative; flex: 1 1 auto; min-height: 0; display: flex; flex-direction: column; border-radius: 12px; overflow: hidden; border: 1px solid var(--border); background: #05060e; }
/* film perforations — a full-width centered dashed band (repeating bg), so it never clusters left */
.sd3-holes { position: relative; flex: 0 0 auto; height: clamp(12px, 2vw, 18px); background: rgba(255, 255, 255, .04); overflow: hidden; }
.sd3-holes i { display: none; }
.sd3-holes::before {
	content: ""; position: absolute; left: 0; right: 0; top: 50%; transform: translateY(-50%);
	height: clamp(6px, .9vw, 9px);
	background: repeating-linear-gradient(90deg, rgba(255, 255, 255, .22) 0 10px, transparent 10px 24px);
}
.stu-demo.is-on .sd3-top::before { animation: sd3Roll 2.4s linear infinite; }
.stu-demo.is-on .sd3-bot::before { animation: sd3Roll 2.4s linear infinite; }
@keyframes sd3Roll { from { background-position-x: 0; } to { background-position-x: 24px; } }
.sd3-film { position: relative; flex: 1 1 auto; min-height: 0; overflow: hidden; }
.sd3-film img { filter: brightness(.82) saturate(1.05); }
.sd3-streaks { position: absolute; inset: 0; z-index: 2; pointer-events: none; }
.sd3-streaks i {
	position: absolute; left: -30%; height: 2px; width: 42%;
	background: linear-gradient(90deg, transparent, rgba(255, 255, 255, .85), transparent);
	opacity: 0;
}
.sd3-streaks i:nth-child(1) { top: 26%; }
.sd3-streaks i:nth-child(2) { top: 46%; }
.sd3-streaks i:nth-child(3) { top: 62%; }
.sd3-streaks i:nth-child(4) { top: 78%; }
.stu-demo.is-on .sd3-streaks i { animation: sd3Streak 2.2s linear infinite; }
.stu-demo.is-on .sd3-streaks i:nth-child(1) { animation-delay: 0s; }
.stu-demo.is-on .sd3-streaks i:nth-child(2) { animation-delay: .4s; }
.stu-demo.is-on .sd3-streaks i:nth-child(3) { animation-delay: .8s; }
.stu-demo.is-on .sd3-streaks i:nth-child(4) { animation-delay: 1.2s; }
@keyframes sd3Streak { 0% { left: -40%; opacity: 0; } 30% { opacity: .9; } 100% { left: 120%; opacity: 0; } }
/* Rich play button: glassy disc + rotating gradient arc + twin pulse rings + halo */
.sd3-play {
	position: absolute; left: 50%; top: 50%; z-index: 3;
	transform: translate(-50%, -50%);
	width: clamp(52px, 7.4vw, 74px); height: clamp(52px, 7.4vw, 74px);
	display: grid; place-items: center;
	border-radius: 50%;
	background: radial-gradient(circle at 50% 30%, rgba(255, 255, 255, .16), rgba(5, 6, 14, .58) 72%);
	-webkit-backdrop-filter: blur(5px); backdrop-filter: blur(5px);
	border: 1.5px solid rgba(255, 255, 255, .42);
	box-shadow: 0 12px 34px -10px rgba(0, 0, 0, .8), 0 0 0 6px rgba(255, 255, 255, .045), inset 0 1px 0 rgba(255, 255, 255, .3);
	isolation: isolate;
}
.sd3-play svg { position: relative; z-index: 3; width: 40%; height: 40%; margin-left: 7%; filter: drop-shadow(0 2px 5px rgba(0, 0, 0, .55)) drop-shadow(0 0 9px rgba(124, 92, 255, .55)); }
/* halo — a soft coloured donut hugging the disc's edge (transparent centre keeps the glass clean) */
.sd3-glow { position: absolute; inset: -62%; z-index: 0; border-radius: 50%; pointer-events: none;
	background: radial-gradient(closest-side, transparent 38%, rgba(124, 92, 255, .5) 60%, rgba(34, 211, 238, .22) 80%, transparent); filter: blur(5px); opacity: .5; }
/* rotating gradient arc ring — the "live" sweep, in our brand gradient */
.sd3-arc { position: absolute; inset: -9px; z-index: 1; border-radius: 50%; pointer-events: none; opacity: .95;
	background: conic-gradient(from 0deg, transparent 0 58%, #22d3ee 74%, #7c5cff 86%, #ff4ecd 95%, transparent 100%);
	-webkit-mask: radial-gradient(farthest-side, transparent calc(100% - 3.5px), #000 calc(100% - 2.5px));
	mask: radial-gradient(farthest-side, transparent calc(100% - 3.5px), #000 calc(100% - 2.5px)); }
.sd3-ring { position: absolute; inset: -7px; z-index: 1; border-radius: 50%; border: 2px solid rgba(34, 211, 238, .75); opacity: 0; pointer-events: none; }
.sd3-ring2 { border-color: rgba(255, 78, 205, .68); }
.stu-demo.is-on .sd3-glow { animation: sd3Glow 3s ease-in-out infinite; }
.stu-demo.is-on .sd3-arc { animation: sd3Arc 3.6s linear infinite; }
.stu-demo.is-on .sd3-ring { animation: sd3Ring 2.4s var(--ease-out) infinite; }
.stu-demo.is-on .sd3-ring2 { animation-delay: 1.2s; }
.stu-demo.is-on .sd3-play { animation: sd3Pulse 2.4s ease-in-out infinite; }
@keyframes sd3Ring { 0% { opacity: .85; transform: scale(.78); } 100% { opacity: 0; transform: scale(1.95); } }
@keyframes sd3Arc { to { transform: rotate(360deg); } }
@keyframes sd3Glow { 0%, 100% { opacity: .38; transform: scale(1); } 50% { opacity: .72; transform: scale(1.12); } }
@keyframes sd3Pulse { 0%, 100% { transform: translate(-50%, -50%) scale(1); } 50% { transform: translate(-50%, -50%) scale(1.06); } }
.sd3-scrub { flex: 0 0 auto; height: 6px; border-radius: 4px; background: rgba(255, 255, 255, .1); overflow: hidden; }
.sd3-scrub i { display: block; height: 100%; width: 0; border-radius: 4px; background: var(--grad); }
.stu-demo.is-on .sd3-scrub i { animation: sd3Scrub 4.5s linear infinite; }
@keyframes sd3Scrub { 0% { width: 0; } 92% { width: 100%; } 100% { width: 100%; } }

/* --------------------------------------------------- demo 4 · Realtime Canvas
   Sketch three mountains, then the AI "repaints" the SAME three mountains — a
   painted scene wipes in over the drawn lines. The brush follows the sketch
   points exactly (keyframed translate in the SVG user-space, not offset-path). */
.sd4-board { position: relative; flex: 1 1 auto; min-height: 0; border-radius: 12px; overflow: hidden; border: 1px solid var(--border); background: radial-gradient(120% 120% at 30% 20%, rgba(124, 92, 255, .12), transparent 60%), #080a18; }
/* the painted result sits on top of the sketch and is wiped in from the left */
.sd4-paint { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 2; clip-path: inset(0 100% 0 0); }
.stu-demo.is-on .sd4-paint { animation: sd4Reveal 5.4s var(--ease-out) infinite; }
@keyframes sd4Reveal {
	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); }
}
.sd4-svg { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 1; }
.sd4-guide { fill: none; }
.sd4-sun { fill: none; stroke-dasharray: 1; stroke-dashoffset: 1; }
.sd4-stroke { fill: none; stroke-dasharray: 1; stroke-dashoffset: 1; }
.stu-demo.is-on .sd4-stroke { animation: sd4Draw 5.4s var(--ease-out) infinite; }
.stu-demo.is-on .sd4-sun { animation: sd4Draw 5.4s var(--ease-out) .2s infinite; }
@keyframes sd4Draw {
	0% { stroke-dashoffset: 1; }
	44% { stroke-dashoffset: 0; }
	100% { stroke-dashoffset: 0; }
}
/* brush rides the exact sketch vertices; keyTimes weighted by segment length so
   the tip tracks the length-based stroke draw. Translate on an SVG <g> is in user units. */
.sd4-brush { transform: translate(8px, 170px); }
.stu-demo.is-on .sd4-brush { animation: sd4Brush 5.4s linear infinite; }
@keyframes sd4Brush {
	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; }
}
/* the light edge that travels with the paint wipe */
.sd4-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)); }
.stu-demo.is-on .sd4-edge { animation: sd4Edge 5.4s var(--ease-out) infinite; }
@keyframes sd4Edge {
	0%, 50% { left: -12%; opacity: 0; }
	54% { opacity: 1; }
	72% { left: 100%; opacity: 1; }
	76%, 100% { left: 100%; opacity: 0; }
}
.sd4-tag { position: absolute; right: 12px; top: 12px; z-index: 4; padding: .28em .6em; border-radius: 999px; font-family: var(--font-display); font-size: clamp(9px, 1vw, 11px); 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); }
.sd4-palette {
	z-index: 4; position: absolute; left: 12px; bottom: 12px; display: inline-flex; gap: 6px; padding: .34em .5em; border-radius: 999px; border: 1px solid var(--border); background: rgba(5, 6, 14, .6); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); }
.sd4-palette i { width: 12px; height: 12px; border-radius: 50%; box-shadow: 0 0 8px currentColor; }
.stu-demo.is-on .sd4-palette i { animation: sd4Dot 4.5s ease-in-out infinite; }
.stu-demo.is-on .sd4-palette i:nth-child(2) { animation-delay: .2s; }
.stu-demo.is-on .sd4-palette i:nth-child(3) { animation-delay: .4s; }
.stu-demo.is-on .sd4-palette i:nth-child(4) { animation-delay: .6s; }
@keyframes sd4Dot { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.25); } }

/* ------------------------------------------------------------- stage caption */
.stu-cap {
	position: absolute; left: 50%; bottom: clamp(10px, 1.4vw, 16px); z-index: 8;
	transform: translateX(-50%);
	display: inline-flex; align-items: center; gap: .5em;
	max-width: calc(100% - 28px);
	padding: .44em .9em;
	border-radius: 999px; border: 1px solid var(--border);
	background: rgba(5, 6, 14, .8);
	-webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
	font-family: ui-monospace, "SFMono-Regular", Menlo, Consolas, "Liberation Mono", monospace;
	font-size: clamp(9.5px, 1vw, 11.5px); color: var(--text-2);
	white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.stu-cap i { font-style: normal; color: var(--cyan); }
.stu-cap-text::after {
	content: ""; display: inline-block; vertical-align: -.14em;
	width: 6px; height: 1em; margin-left: .34em;
	background: var(--violet);
	animation: stuCaret .9s steps(1) infinite;
}
@keyframes stuCaret { 0%, 49% { opacity: 1; } 50%, 100% { opacity: 0; } }

/* ============================================================ RIGHT · LIST */
.stu-side { position: relative; min-width: 0; }
.stu-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: clamp(5px, .7vw, 10px); }
.stu-item { position: relative; }

.stu-btn {
	position: relative;
	display: grid; grid-template-columns: auto 1fr auto; align-items: start;
	gap: clamp(11px, 1.3vw, 16px);
	width: 100%; text-align: left;
	padding: clamp(12px, 1.4vw, 17px) clamp(13px, 1.6vw, 19px);
	border: 1px solid transparent; border-radius: var(--radius);
	background: transparent; color: inherit; font: inherit; cursor: pointer;
	transition: background .5s var(--ease-out), border-color .5s ease, box-shadow .5s var(--ease-out);
}
.stu-btn:hover { background: rgba(255, 255, 255, .035); }
.stu-btn:focus-visible { outline: 2px solid var(--violet); outline-offset: 3px; }
.stu-item.is-active .stu-btn {
	background: linear-gradient(120deg, rgba(255, 255, 255, .062), rgba(255, 255, 255, .014) 68%);
	box-shadow: 0 24px 54px -32px rgba(124, 92, 255, .7);
}
/* live conic frame on the active card — same language as the stage edge */
.stu-btn::before {
	content: ""; position: absolute; inset: 0; z-index: 0;
	border-radius: inherit; padding: 1px;
	background: conic-gradient(from var(--eb-ring-angle, 0deg), rgba(34, 211, 238, .85), rgba(124, 92, 255, .9), rgba(255, 78, 205, .85), rgba(34, 211, 238, .85));
	-webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
	        mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
	-webkit-mask-composite: xor; mask-composite: exclude;
	opacity: 0; transition: opacity .5s ease; pointer-events: none;
}
.stu-item.is-active .stu-btn::before { opacity: .95; animation: eyebrowRingSpin 6s linear infinite; }
/* gradient accent bar on the stage-facing (left) edge of the active card */
.stu-btn::after {
	content: ""; position: absolute; left: -1px; top: 50%; z-index: 1;
	width: 3px; height: 0; border-radius: 3px; transform: translateY(-50%);
	background: var(--grad);
	box-shadow: 0 0 16px rgba(124, 92, 255, .8);
	opacity: 0; transition: height .5s var(--ease-out), opacity .5s ease;
}
.stu-item.is-active .stu-btn::after { height: 62%; opacity: 1; }

.stu-badge {
	position: relative; z-index: 1;
	width: clamp(38px, 3.4vw, 44px); height: clamp(38px, 3.4vw, 44px); flex: 0 0 auto;
	display: grid; place-items: center;
	border-radius: 13px;
	background: var(--bg-2); border: 1px solid var(--border);
	transition: background .5s ease, border-color .5s ease, transform .5s var(--ease-spring);
}
.stu-badge svg { width: 55%; height: 55%; fill: none; stroke: var(--text-3); stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; transition: stroke .5s ease; }
.stu-item.is-active .stu-badge { background: rgba(124, 92, 255, .16); border-color: transparent; transform: scale(1.04); }
.stu-item.is-active .stu-badge svg { stroke: var(--cyan); }

.stu-txt { position: relative; z-index: 1; display: flex; flex-direction: column; gap: 5px; min-width: 0; }
.stu-name {
	font-family: var(--font-display); font-weight: 600;
	font-size: clamp(16px, 1.1vw + 9px, 20px); letter-spacing: -.01em;
	color: var(--text-2); transition: color .5s ease, text-shadow .6s ease;
}
.stu-item.is-active .stu-name { color: var(--text-1); text-shadow: 0 0 26px rgba(124, 92, 255, .6); }
.stu-desc {
	font-size: 14px; line-height: 1.5; color: var(--text-3);
	opacity: .62; transition: opacity .5s ease, color .5s ease;
}
.stu-item.is-active .stu-desc { opacity: 1; color: var(--text-2); }
.stu-chips { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 2px; }
.stu-chip {
	font-size: 11.5px; font-weight: 600; color: var(--text-2);
	background: var(--surface-2); border: 1px solid var(--border);
	border-radius: 100px; padding: 3px 10px;
	transition: background-color .5s ease, border-color .5s ease, color .5s ease;
}
.stu-item.is-active .stu-chip { color: var(--text-1); background: rgba(124, 92, 255, .16); border-color: rgba(124, 92, 255, .4); }

.stu-go { position: relative; z-index: 1; align-self: center; width: 22px; height: 22px; flex: 0 0 auto; opacity: 0; transform: translateX(-6px); transition: opacity .5s ease, transform .5s var(--ease-spring); }
.stu-go svg { width: 100%; height: 100%; fill: none; stroke: var(--cyan); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.stu-item.is-active .stu-go { opacity: 1; transform: none; }

.stu-cta { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; margin-top: clamp(20px, 2.4vw, 30px); }

/* ============================================================ RESPONSIVE */
@media (max-width: 900px) {
	/* stack: stage on top (DOM order), list below */
	.stu { grid-template-columns: 1fr; gap: clamp(22px, 4vw, 34px); }
	.stu-stage { order: -1; }
}
@media (max-width: 560px) {
	.stu-btn { grid-template-columns: auto 1fr; gap: 12px; padding: 13px 13px; }
	.stu-go { display: none; }
	.stu-badge { width: 40px; height: 40px; }
	.stu-desc { font-size: 13.5px; }
	.stu-dust { display: none; }
	.stu-cta .btn { flex: 1 1 auto; justify-content: center; }
}
@media (max-width: 380px) {
	.sd1-styles { display: none; }
	.stu-stage { aspect-ratio: 1 / 1; }
}

/* ============================================================ REDUCED MOTION
   Hold each studio on a clean, finished frame; the rail stays clickable and
   auto-advance is disabled in JS. */
@media (prefers-reduced-motion: reduce) {
	.stu-section::before, .stu-stage::after, .stu-dust, .stu-live i,
	.sd0-noise, .sd0-wipe, .sd0-core, .sd1-sweep, .sd2-scan, .sd2-checker,
	.sd3-streaks, .sd3-ring, .sd3-ring2, .sd3-arc, .sd3-glow, .sd3-play, .stu-cap-text::after { animation: none; }
	.stu-stage::after { --eb-ring-angle: 210deg; opacity: .28; }
	.stu-btn::before { animation: none; --eb-ring-angle: 210deg; }

	/* land every looping demo element on its resolved state */
	.stu-demo.is-on .sd0-canvas img,
	.stu-demo.is-on .sd0-l1, .stu-demo.is-on .sd0-l2,
	.stu-demo.is-on .sd1-styled, .stu-demo.is-on .sd2-tile, .stu-demo.is-on .sd2-tile img,
	.stu-demo.is-on .sd2-mk, .stu-demo.is-on .sd2-badge,
	.stu-demo.is-on .sd3-scrub i, .stu-demo.is-on .sd3-top, .stu-demo.is-on .sd3-bot,
	.stu-demo.is-on .sd4-stroke, .stu-demo.is-on .sd4-brush, .stu-demo.is-on .sd4-palette i { animation: none; }

	.sd0-noise, .sd0-wipe, .sd0-core, .sd1-sweep, .sd2-scan, .sd2-checker, .sd3-streaks i, .sd3-ring, .sd3-ring2 { opacity: 0; }
	.sd3-glow { opacity: .4; } .sd3-arc { opacity: .85; }
	.sd0-canvas img { filter: none; transform: none; }
	.sd0-l1 { width: 88%; }
	.sd0-l2 { width: 62%; }
	.sd1-styled { filter: hue-rotate(210deg) saturate(1.5); }
	.sd2-tile { width: 82%; }
	.sd2-tile img { filter: none; }
	.sd2-mk { stroke-dashoffset: 0; opacity: .6; }
	.sd2-badge { opacity: 1; }
	.sd3-scrub i { width: 100%; }
	.sd4-stroke { stroke-dashoffset: 0; }
	.sd4-brush { opacity: 0; }
}