/* Service visuals: animated "living prototypes" (resources/views/components/service-visual.blade.php).
   Each scene is a tilted 3D stage; layers sit at different depths (.z1–.z3) and the stage leans toward the
   pointer (--tx/--ty, set by public/js/visuals.js). Animations only run while the scene is on screen
   (.is-playing) and are off under prefers-reduced-motion. Sizes are in em, and the scene's font size follows
   its own width (container units), so every scene scales cleanly from a phone card to a hero. */

.sv {
  --blue: #3B82F6; --teal: #2DD4BF; --mist: #C9D4E3; --ink: #F2F6FC; --panel: #10233F; --line: rgba(148, 178, 220, .22);
  position: relative; aspect-ratio: 16 / 10; container-type: inline-size; overflow: hidden; isolation: isolate;
  border-radius: 18px; border: 1px solid var(--line);
  background:
    radial-gradient(110% 90% at 85% 0%, rgba(59, 130, 246, .26), transparent 60%),
    radial-gradient(90% 80% at 0% 100%, rgba(45, 212, 191, .16), transparent 60%),
    #0A1830;
  perspective: 1000px;
}
.sv::before { /* faint blueprint grid */
  content: ""; position: absolute; inset: 0; z-index: -1; opacity: .5;
  background-image: linear-gradient(rgba(148, 178, 220, .08) 1px, transparent 1px), linear-gradient(90deg, rgba(148, 178, 220, .08) 1px, transparent 1px);
  background-size: 6cqw 6cqw;
  -webkit-mask-image: radial-gradient(80% 70% at 50% 40%, #000, transparent); mask-image: radial-gradient(80% 70% at 50% 40%, #000, transparent);
}
.sv__stage {
  position: absolute; inset: 9% 7% 8%; font-size: clamp(8px, 2.9cqw, 16px); color: var(--mist); line-height: 1.3;
  transform-style: preserve-3d;
  transform: rotateX(calc(12deg + var(--ty, 0deg))) rotateY(calc(-14deg + var(--tx, 0deg)));
  transition: transform 700ms cubic-bezier(.32, .72, 0, 1);
}
.sv__stage > * { position: absolute; }
.z1 { transform: translateZ(10px); }
.z2 { transform: translateZ(40px); }
.z3 { transform: translateZ(70px); }

/* Building blocks */
.sv-win, .sv-card, .sv-call, .sv-board {
  border-radius: .9em; background: linear-gradient(180deg, #14294B, #0E1F3B); border: 1px solid var(--line);
  box-shadow: 0 2em 3.5em rgba(0, 0, 0, .45), inset 0 1px 0 rgba(255, 255, 255, .08); overflow: hidden;
}
.sv-card, .sv-call { padding: 1em; }
.sv-bar { display: flex; align-items: center; gap: .35em; padding: .55em .8em; border-bottom: 1px solid var(--line); background: rgba(255, 255, 255, .03); }
.sv-bar i { width: .5em; height: .5em; border-radius: 50%; background: rgba(201, 212, 227, .3); }
.sv-url { margin-left: .6em; flex: 1; height: .7em; border-radius: 1em; background: rgba(201, 212, 227, .12); }
.sv-pad { padding: 1em 1.1em; }
.sv-line { height: .45em; border-radius: 1em; background: rgba(201, 212, 227, .22); margin-bottom: .45em; transform-origin: left; }
.sv-line--hi { background: linear-gradient(90deg, var(--ink), rgba(242, 246, 252, .6)); height: .6em; }
.sv-btn { display: inline-block; padding: .45em .9em; border-radius: 2em; background: var(--blue); color: #fff; font-weight: 600; font-size: .8em; box-shadow: 0 .6em 1.4em rgba(59, 130, 246, .45); }
.sv-row { display: flex; gap: .5em; }
.sv-tile { flex: 1; height: 2.6em; border-radius: .5em; background: linear-gradient(135deg, rgba(59, 130, 246, calc(.35 + var(--o, 0))), rgba(59, 130, 246, .08)); border: 1px solid var(--line); }
.sv-tile--teal { background: linear-gradient(135deg, rgba(45, 212, 191, .4), rgba(45, 212, 191, .08)); }
.sv-chip, .sv-toast {
  display: flex; align-items: center; gap: .5em; padding: .55em .85em; border-radius: .8em; white-space: nowrap;
  background: rgba(16, 35, 63, .82); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
  border: 1px solid rgba(148, 178, 220, .3); box-shadow: 0 1.4em 2.6em rgba(0, 0, 0, .45), inset 0 1px 0 rgba(255, 255, 255, .1);
  font-size: .85em; font-weight: 500; color: var(--ink);
}
.sv-chip i, .sv-toast i { font-size: 1.4em; color: var(--teal); }
.sv-toast { border-color: rgba(45, 212, 191, .45); }
.sv-cursor { font-size: 1.6em; color: #fff; filter: drop-shadow(0 .2em .4em rgba(0, 0, 0, .5)); }

/* Web */
.sv-ring { width: 2.2em; height: 2.2em; transform: rotate(-90deg); }
.sv-ring circle { fill: none; stroke: rgba(201, 212, 227, .18); stroke-width: 4; }
.sv-ring .sv-ring__val { stroke: var(--teal); stroke-linecap: round; stroke-dasharray: 94.2; stroke-dashoffset: 4; animation: sv-ring 7s cubic-bezier(.32, .72, 0, 1) infinite; }
@keyframes sv-ring { 0%, 10% { stroke-dashoffset: 94.2; } 40%, 88% { stroke-dashoffset: 4; } 100% { stroke-dashoffset: 94.2; } }
.sv-cursor--web { left: 20%; top: 80%; animation: sv-cursor-web 7s cubic-bezier(.32, .72, 0, 1) infinite; }
@keyframes sv-cursor-web { 0%, 20% { left: 62%; top: 88%; } 38%, 44% { left: 12%; top: 44%; } 46% { scale: .85; } 48%, 70% { left: 12%; top: 44%; scale: 1; } 100% { left: 62%; top: 88%; } }

/* Apps */
.sv-phone {
  padding: .7em .7em 1em; border-radius: 1.6em; background: linear-gradient(180deg, #0B1F3A, #0A1830);
  border: .3em solid #1C3459; box-shadow: 0 2.4em 4em rgba(0, 0, 0, .55), inset 0 0 0 1px rgba(255, 255, 255, .06);
}
.sv-notch { width: 34%; height: .5em; margin: 0 auto; border-radius: 1em; background: #1C3459; }
.sv-chart { width: 100%; height: 34%; margin: .8em 0; overflow: visible; }
.sv-draw { fill: none; stroke: var(--teal); stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 220; stroke-dashoffset: 0; animation: sv-draw 7s cubic-bezier(.32, .72, 0, 1) infinite; vector-effect: non-scaling-stroke; }
@keyframes sv-draw { 0%, 8% { stroke-dashoffset: 220; } 45%, 88% { stroke-dashoffset: 0; } 100% { stroke-dashoffset: 220; } }

/* Software */
.sv-node-card { display: flex; flex-direction: column; align-items: center; gap: .3em; width: 24%; padding: .7em .4em; border-radius: .8em; background: linear-gradient(180deg, #14294B, #0E1F3B); border: 1px solid var(--line); font-size: .85em; box-shadow: 0 1.4em 2.4em rgba(0, 0, 0, .4); }
.sv-node-card i { font-size: 1.7em; color: #8AB8FF; }
.sv-wire { width: 15%; height: 2px; background: linear-gradient(90deg, rgba(45, 212, 191, .2), rgba(59, 130, 246, .5)); }
.sv-wire--rev { transform: translateZ(10px) scaleX(-1); }
.sv-wire b { position: absolute; top: 50%; width: .55em; height: .55em; margin-top: -.275em; border-radius: 50%; background: var(--teal); box-shadow: 0 0 .8em var(--teal); animation: sv-travel 2s linear infinite; animation-delay: var(--delay, 0s); }
@keyframes sv-travel { from { left: 0; opacity: 0; } 15% { opacity: 1; } 85% { opacity: 1; } to { left: 100%; opacity: 0; } }
.sv-hub { left: 39%; top: 26%; width: 22%; aspect-ratio: 1; display: grid; place-items: center; border-radius: 1.1em; font-size: 2.6em; color: #fff; background: linear-gradient(145deg, #2563EB, #0D9488); box-shadow: 0 0 0 .2em rgba(45, 212, 191, .25), 0 1.4em 3em rgba(37, 99, 235, .55); animation: sv-glow 2.4s ease-in-out infinite; }
.sv-hub i { font-size: .62em; }
@keyframes sv-glow { 50% { box-shadow: 0 0 0 .5em rgba(45, 212, 191, .12), 0 1.4em 3em rgba(37, 99, 235, .7); } }

/* E-commerce */
.sv-img { height: 44%; border-radius: .6em; background: radial-gradient(60% 70% at 50% 60%, rgba(45, 212, 191, .5), transparent 70%), linear-gradient(135deg, #1D4ED8, #0B1F3A); }
.sv-btn--press { animation: sv-press 7s ease infinite; }
@keyframes sv-press { 0%, 30% { scale: 1; } 33% { scale: .9; } 36%, 100% { scale: 1; } }
.sv-count { display: inline-block; height: 1.3em; overflow: hidden; line-height: 1.3em; min-width: 1.3em; text-align: center; border-radius: 1em; background: var(--blue); color: #fff; font-weight: 700; }
.sv-count span { display: block; animation: sv-count 7s steps(1, end) infinite; }
@keyframes sv-count { 0%, 33% { transform: translateY(0); } 34%, 66% { transform: translateY(-100%); } 67%, 100% { transform: translateY(-200%); } }

/* Design */
.sv-artboard { position: relative; height: calc(100% - 1.9em); background: rgba(255, 255, 255, .03); }
.sv-shape { position: absolute; }
.sv-shape--circle { left: 12%; top: 18%; width: 22%; aspect-ratio: 1; border-radius: 50%; background: linear-gradient(135deg, var(--teal), #0D9488); }
.sv-shape--rect { left: 44%; top: 46%; width: 40%; height: 34%; border-radius: .6em; background: linear-gradient(135deg, var(--blue), #1D4ED8); outline: 1px dashed rgba(255, 255, 255, .7); outline-offset: .35em; }
.sv-shape--rect b { position: absolute; width: .5em; height: .5em; background: #fff; border-radius: 1px; }
.sv-shape--rect b:nth-child(1) { left: -.6em; top: -.6em; } .sv-shape--rect b:nth-child(2) { right: -.6em; top: -.6em; }
.sv-shape--rect b:nth-child(3) { left: -.6em; bottom: -.6em; } .sv-shape--rect b:nth-child(4) { right: -.6em; bottom: -.6em; }
.sv-pen { position: absolute; inset: 8% 4%; width: 92%; height: 84%; overflow: visible; }
.sv-pen .sv-draw { stroke: var(--ink); stroke-width: 2; }
.sv-panel { display: grid; grid-template-columns: 1fr 1fr; gap: .4em; padding: .6em; border-radius: .8em; background: rgba(16, 35, 63, .85); border: 1px solid rgba(148, 178, 220, .3); box-shadow: 0 1.4em 2.4em rgba(0, 0, 0, .45); }
.sv-sw { width: 1.6em; height: 1.6em; border-radius: .45em; background: var(--c); border: 1px solid rgba(255, 255, 255, .2); }
.sv-cursor--design { animation: sv-cursor-design 7s cubic-bezier(.32, .72, 0, 1) infinite; }
@keyframes sv-cursor-design { 0%, 15% { left: 30%; top: 30%; } 40%, 70% { left: 84%; top: 82%; } 100% { left: 30%; top: 30%; } }

/* Agents & GEO chat */
.sv-call { display: flex; flex-direction: column; gap: .55em; }
.sv-caller { display: flex; align-items: center; gap: .6em; padding-bottom: .55em; border-bottom: 1px solid var(--line); }
.sv-caller b { display: block; color: var(--ink); font-size: .95em; }
.sv-caller small { color: #8B9BB4; font-size: .75em; }
.sv-ringer { position: relative; display: grid; place-items: center; width: 2.2em; height: 2.2em; border-radius: 50%; background: rgba(45, 212, 191, .18); color: var(--teal); font-size: 1em; }
.sv-ringer::after { content: ""; position: absolute; inset: 0; border-radius: 50%; border: 2px solid var(--teal); animation: sv-ping 1.6s ease-out infinite; }
@keyframes sv-ping { from { transform: scale(1); opacity: .8; } to { transform: scale(1.8); opacity: 0; } }
.sv-bubble { align-self: flex-start; max-width: 86%; padding: .5em .75em; border-radius: .9em .9em .9em .2em; background: rgba(201, 212, 227, .12); font-size: .85em; color: var(--ink); }
.sv-bubble--ai, .sv-bubble--user { align-self: flex-end; border-radius: .9em .9em .2em .9em; }
.sv-bubble--ai { display: flex; gap: .45em; align-items: flex-start; background: linear-gradient(135deg, rgba(37, 99, 235, .55), rgba(13, 148, 136, .45)); }
.sv-bubble--user { background: rgba(201, 212, 227, .14); }
.sv-bubble--wide { align-self: flex-start; max-width: 96%; border-radius: .9em .9em .9em .2em; }
.sv-bubble i { color: #A7F3EA; font-size: 1.2em; }
.sv-you { color: #fff; background: rgba(45, 212, 191, .3); padding: 0 .3em; border-radius: .3em; }
.sv-src { padding: .25em .6em; border-radius: 1em; font-size: .75em; background: rgba(59, 130, 246, .18); border: 1px solid rgba(59, 130, 246, .4); color: #BFD8FF; }
.sv-cal { display: grid; gap: .35em; padding: .8em; border-radius: .9em; background: rgba(16, 35, 63, .88); border: 1px solid rgba(148, 178, 220, .3); box-shadow: 0 1.4em 2.6em rgba(0, 0, 0, .45); }
.sv-cal b { color: var(--ink); font-size: .9em; }
.sv-cal span { height: 1.4em; border-radius: .4em; background: rgba(201, 212, 227, .1); }
.sv-cal .sv-cal__slot { display: flex; align-items: center; padding: 0 .5em; font-size: .75em; height: 1.85em; color: #fff; font-weight: 600; background: linear-gradient(90deg, rgba(45, 212, 191, .55), rgba(59, 130, 246, .45)); }

/* AI integration */
.sv-docs span { position: absolute; width: 5.2em; height: 6.6em; border-radius: .5em; background: linear-gradient(180deg, #1A3157, #10233F); border: 1px solid var(--line); box-shadow: 0 1em 2em rgba(0, 0, 0, .4); }
.sv-docs span:nth-child(1) { left: 0; top: 0; rotate: -8deg; }
.sv-docs span:nth-child(2) { left: .6em; top: .3em; rotate: -2deg; }
.sv-docs span:nth-child(3) { left: 1.2em; top: .6em; rotate: 5deg; display: grid; place-items: center; font-size: 1em; color: #8AB8FF; }
.sv-docs span:nth-child(3) i { font-size: 2.2em; }
.sv-search { display: flex; align-items: center; gap: .6em; padding: .7em 1em; border-radius: 2em; background: rgba(16, 35, 63, .9); border: 1px solid rgba(59, 130, 246, .55); box-shadow: 0 0 0 .3em rgba(59, 130, 246, .12), 0 1.4em 2.6em rgba(0, 0, 0, .45); color: var(--ink); font-size: .95em; }
.sv-search i { color: var(--teal); font-size: 1.3em; }
.sv-type { display: inline-block; overflow: hidden; white-space: nowrap; border-right: 2px solid var(--teal); width: 11.5em; animation: sv-type 7s steps(22, end) infinite, sv-caret .8s step-end infinite; }
@keyframes sv-type { 0%, 4% { width: 0; } 30%, 90% { width: 11.5em; } 100% { width: 0; } }
@keyframes sv-caret { 50% { border-color: transparent; } }
.sv-cite { display: inline-flex; align-items: center; gap: .35em; margin-top: .5em; padding: .3em .6em; border-radius: 1em; font-size: .78em; color: #A7F3EA; background: rgba(45, 212, 191, .14); border: 1px solid rgba(45, 212, 191, .4); }

/* Training */
.sv-net { inset: 0; width: 76%; height: 100%; overflow: visible; }
.sv-net line { stroke: rgba(59, 130, 246, .35); stroke-width: 1; }
.sv-neuron { fill: #10233F; stroke: var(--blue); stroke-width: 2; animation: sv-fire 2.4s ease-in-out infinite; animation-delay: calc(var(--c) * .35s); }
@keyframes sv-fire { 0%, 100% { fill: #10233F; stroke: var(--blue); } 30% { fill: var(--teal); stroke: #A7F3EA; } }
.sv-chip--chart svg { width: 4.4em; height: 2.2em; overflow: visible; }

/* Strategy */
.sv-board { display: grid; grid-template-columns: repeat(3, 1fr); gap: .6em; padding: .8em; }
.sv-col { display: flex; flex-direction: column; gap: .45em; padding: .6em; border-radius: .7em; background: rgba(255, 255, 255, .03); border: 1px solid var(--line); }
.sv-col b { color: var(--ink); font-size: .85em; }
.sv-col span { height: 2em; border-radius: .45em; background: rgba(201, 212, 227, .1); }
.sv-col--1 { animation: sv-focus 7s ease infinite; } .sv-col--2 { animation: sv-focus 7s ease infinite 2.33s; } .sv-col--3 { animation: sv-focus 7s ease infinite 4.66s; }
@keyframes sv-focus { 0%, 30% { border-color: rgba(45, 212, 191, .7); background: rgba(45, 212, 191, .1); box-shadow: 0 0 1.4em rgba(45, 212, 191, .2); } 34%, 100% { border-color: var(--line); background: rgba(255, 255, 255, .03); box-shadow: none; } }
.sv-bars { display: flex; align-items: flex-end; gap: .2em; height: 2em; }
.sv-bars i { width: .45em; height: var(--h); border-radius: .15em; background: linear-gradient(180deg, var(--teal), var(--blue)); transform-origin: bottom; animation: sv-bar 7s cubic-bezier(.32, .72, 0, 1) infinite; }
@keyframes sv-bar { 0%, 8% { scale: 1 0; } 40%, 88% { scale: 1 1; } 100% { scale: 1 0; } }

/* Marketing */
.sv-area { width: 100%; height: calc(100% - 1.9em); overflow: visible; }
.sv-area__fill { fill: rgba(45, 212, 191, .12); }
.sv-rank { display: grid; gap: .35em; padding: .6em; border-radius: .9em; background: rgba(16, 35, 63, .9); border: 1px solid rgba(148, 178, 220, .3); box-shadow: 0 1.4em 2.6em rgba(0, 0, 0, .45); }
.sv-rank__row { position: relative; padding: .4em .6em; border-radius: .5em; font-size: .78em; background: rgba(201, 212, 227, .08); }
.sv-rank__row--you { color: #fff; font-weight: 600; background: linear-gradient(90deg, rgba(45, 212, 191, .4), rgba(59, 130, 246, .3)); animation: sv-rank-up 7s cubic-bezier(.32, .72, 0, 1) infinite; }
.sv-rank__row--a { animation: sv-rank-down 7s cubic-bezier(.32, .72, 0, 1) infinite; }
@keyframes sv-rank-up { 0%, 30% { translate: 0 0; } 45%, 88% { translate: 0 calc(-100% - .35em); } 100% { translate: 0 0; } }
@keyframes sv-rank-down { 0%, 30% { translate: 0 0; } 45%, 88% { translate: 0 calc(100% + .35em); } 100% { translate: 0 0; } }

/* Hosting */
.sv-server { display: grid; gap: .3em; width: 22%; padding: .6em; border-radius: .7em; background: linear-gradient(180deg, #14294B, #0E1F3B); border: 1px solid var(--line); opacity: .7; }
.sv-server span { height: 1em; border-radius: .3em; background: rgba(201, 212, 227, .14); }
.sv-server small { font-size: .7em; text-align: center; color: #8B9BB4; }
.sv-pipe { left: 26%; top: 44%; width: 40%; height: 2px; background: repeating-linear-gradient(90deg, rgba(148, 178, 220, .4) 0 .4em, transparent .4em .8em); }
.sv-pipe b { position: absolute; top: 50%; width: .9em; height: .6em; margin-top: -.3em; border-radius: .2em; background: var(--teal); box-shadow: 0 0 .8em var(--teal); animation: sv-travel 2.1s linear infinite; animation-delay: var(--delay, 0s); }
.sv-cloud { right: 2%; top: 14%; width: 30%; aspect-ratio: 1; display: grid; place-items: center; border-radius: 50%; font-size: 3.4em; color: #fff; background: radial-gradient(circle at 35% 30%, #3B82F6, #1D4ED8 55%, #0B1F3A); box-shadow: 0 0 0 .1em rgba(255, 255, 255, .08), 0 .4em 1.4em rgba(37, 99, 235, .6); }
.sv-cloud i { font-size: .7em; }
.sv-progress { display: block; width: 6em; height: .45em; border-radius: 1em; background: rgba(201, 212, 227, .16); overflow: hidden; }
.sv-progress i { display: block; height: 100%; border-radius: inherit; background: linear-gradient(90deg, var(--blue), var(--teal)); transform-origin: left; animation: sv-fill 7s cubic-bezier(.32, .72, 0, 1) infinite; }
@keyframes sv-fill { 0%, 6% { scale: 0 1; } 70%, 92% { scale: 1 1; } 100% { scale: 0 1; } }

/* Maintenance & security checklists */
.sv-task { display: flex; align-items: center; gap: .6em; padding: .55em 0; font-size: .88em; color: var(--ink); border-bottom: 1px solid var(--line); }
.sv-task:last-of-type { border-bottom: 0; }
.sv-tick { display: grid; place-items: center; width: 1.5em; height: 1.5em; border-radius: 50%; background: var(--teal); color: #052E2B; font-size: .85em; box-shadow: 0 0 .8em rgba(45, 212, 191, .5); }
.sv-beat { fill: none; stroke: var(--teal); stroke-width: 2; stroke-dasharray: 100; animation: sv-beat 1.8s linear infinite; vector-effect: non-scaling-stroke; }
.sv-chip--pulse svg { width: 4.4em; height: 1.4em; overflow: visible; }
@keyframes sv-beat { from { stroke-dashoffset: 200; } to { stroke-dashoffset: 0; } }
.sv-scan { overflow: hidden; }
.sv-task--scan .sv-tick { background: rgba(201, 212, 227, .16); color: transparent; box-shadow: none; animation: sv-scan-tick 7s ease infinite; animation-delay: calc(var(--r) * .9s); }
@keyframes sv-scan-tick { 0%, 14% { background: rgba(201, 212, 227, .16); color: transparent; box-shadow: none; } 18%, 80% { background: var(--teal); color: #052E2B; box-shadow: 0 0 .8em rgba(45, 212, 191, .5); } 100% { background: rgba(201, 212, 227, .16); color: transparent; } }
.sv-beam { position: absolute; left: 0; right: 0; height: 2.4em; background: linear-gradient(180deg, transparent, rgba(45, 212, 191, .28), transparent); border-bottom: 1px solid rgba(45, 212, 191, .7); animation: sv-beam 7s linear infinite; }
@keyframes sv-beam { 0% { top: -2.4em; } 60% { top: 100%; } 100% { top: 100%; } }
.sv-shield { left: 0; top: 18%; width: 30%; aspect-ratio: 1; display: grid; place-items: center; border-radius: 1.4em; font-size: 3.4em; color: #fff; background: linear-gradient(145deg, #0D9488, #1D4ED8); box-shadow: 0 1.4em 3em rgba(13, 148, 136, .45), inset 0 1px 0 rgba(255, 255, 255, .2); animation: sv-glow 2.4s ease-in-out infinite; }
.sv-shield i { font-size: .62em; }

/* Shared motion: float, and two sequences on one 7s loop (appear in order, grow in order). */
.float { animation: sv-float 6s ease-in-out infinite alternate; }
.float--b { animation-delay: -3s; }
@keyframes sv-float { from { translate: 0 0; } to { translate: 0 -.6em; } }
.in1, .in2, .in3, .in4, .in5 { animation: 7s cubic-bezier(.32, .72, 0, 1) infinite both; }
.in1 { animation-name: sv-in1; } .in2 { animation-name: sv-in2; } .in3 { animation-name: sv-in3; } .in4 { animation-name: sv-in4; } .in5 { animation-name: sv-in5; }
@keyframes sv-in1 { 0%, 6% { opacity: 0; translate: 0 .6em; } 12%, 90% { opacity: 1; translate: 0 0; } 97%, 100% { opacity: 0; } }
@keyframes sv-in2 { 0%, 20% { opacity: 0; translate: 0 .6em; } 26%, 90% { opacity: 1; translate: 0 0; } 97%, 100% { opacity: 0; } }
@keyframes sv-in3 { 0%, 34% { opacity: 0; translate: 0 .6em; } 40%, 90% { opacity: 1; translate: 0 0; } 97%, 100% { opacity: 0; } }
@keyframes sv-in4 { 0%, 48% { opacity: 0; translate: 0 .6em; } 54%, 90% { opacity: 1; translate: 0 0; } 97%, 100% { opacity: 0; } }
@keyframes sv-in5 { 0%, 60% { opacity: 0; translate: 0 .6em; } 66%, 90% { opacity: 1; translate: 0 0; } 97%, 100% { opacity: 0; } }
.gx1, .gx2, .gx3 { animation: 7s cubic-bezier(.32, .72, 0, 1) infinite both; }
.gx1 { animation-name: sv-gx1; } .gx2 { animation-name: sv-gx2; } .gx3 { animation-name: sv-gx3; }
@keyframes sv-gx1 { 0%, 4% { scale: 0 1; } 14%, 90% { scale: 1 1; } 97%, 100% { scale: 0 1; } }
@keyframes sv-gx2 { 0%, 12% { scale: 0 1; } 22%, 90% { scale: 1 1; } 97%, 100% { scale: 0 1; } }
@keyframes sv-gx3 { 0%, 20% { scale: 0 1; } 30%, 90% { scale: 1 1; } 97%, 100% { scale: 0 1; } }

/* Play only while visible. A scene that isn't playing shows its finished, composed frame (no animation at all),
   so cards never look empty before they scroll into view or when motion is reduced. */
.sv:not(.is-playing) *, .sv:not(.is-playing) *::before, .sv:not(.is-playing) *::after { animation: none !important; }

/* Reduced motion: a composed still frame with every element visible. */
@media (prefers-reduced-motion: reduce) {
  .sv *, .sv *::before, .sv *::after { animation: none !important; }
  .sv__stage { transition: none; }
  .sv-draw, .sv-ring .sv-ring__val { stroke-dashoffset: 0; }
  .sv-type { width: 11.5em; }
}