/* Анимированные сцены в «Ich verbinde Design mit Strategie» (components/SvcScenes.astro, запуск — js/sections.js).
   Сцена видна, когда .is-on; анимации идут, пока у сцены класс .is-play (JS снимает/ставит его, чтобы перезапустить). */
.svc-view { position: sticky; overflow: visible; container-type: inline-size; } /* все cqw в сценах — от ширины этого блока */
.sv-scene {
  position: absolute; inset: 28px; overflow: hidden;
  border-radius: 12px; box-shadow: 0 30px 70px rgba(16,15,12,.25); transform: rotate(-2deg) scale(.96);
  opacity: 0; visibility: hidden; transition: opacity .3s ease, transform .5s cubic-bezier(.2,1.3,.4,1), visibility 0s .3s;
  font-family: 'Barlow', sans-serif;
}
.sv-scene.is-on { opacity: 1; visibility: visible; transform: rotate(-2deg); transition: opacity .3s ease .1s, transform .5s cubic-bezier(.2,1.3,.4,1) .1s, visibility 0s; }
.sv-kicker { display: block; font-size: 2.3cqw; font-weight: 700; letter-spacing: .28em; text-transform: uppercase; color: #8A8378; margin-bottom: 3.5cqw; }
.sv-scene em { font-style: normal; }
@keyframes sv-in { from { opacity: 0; transform: translateY(3cqw); } to { opacity: 1; transform: none; } }
@keyframes sv-pop { 0% { opacity: 0; transform: scale(.85); } 70% { transform: scale(1.03); } 100% { opacity: 1; transform: none; } }

/* 01 — Webdesign im Editor */
.sv-web { background: #1d1c19; display: grid; grid-template-columns: 23% 1fr; }
.sv-layers { padding: 4cqw 3cqw; display: flex; flex-direction: column; gap: 2.2cqw; font-size: 2.2cqw; color: #a8a299; }
.sv-layers b { font-size: 1.8cqw; letter-spacing: .25em; text-transform: uppercase; color: #6E6A63; margin-bottom: 1cqw; }
.sv-layers i { font-style: normal; padding: .5cqw 1cqw; border-radius: .8cqw; margin-left: -1cqw; }
.sv-layers i.in { padding-left: 2.5cqw; }
.sv-web.is-play .sv-layers i.in { animation: sv-hl 6s infinite; }
.sv-web.is-play .sv-layers i.in:nth-of-type(3) { animation-delay: .9s; }
.sv-web.is-play .sv-layers i.in:nth-of-type(4) { animation-delay: 1.8s; }
@keyframes sv-hl { 0%, 4% { background: transparent; color: #a8a299; } 6%, 22% { background: rgba(59,130,246,.25); color: #fff; } 26%, 100% { background: transparent; color: #a8a299; } }
.sv-canvas { position: relative; padding: 4.5cqw 4cqw 4cqw 2cqw; }
.sv-frame-lbl { position: absolute; top: 1.2cqw; left: 2cqw; font-size: 1.8cqw; color: #3B82F6; }
.sv-frame { position: relative; height: 100%; background: #fff; border: .45cqw solid #3B82F6; border-radius: 1.2cqw; }
.sv-frame span { position: absolute; display: block; border-radius: .5cqw; }
.sv-frame .w1 { left: 5%; top: 7%; width: 58%; height: 4.5%; background: #100F0C; transform-origin: left; }
.sv-frame .w2 { left: 5%; top: 15%; width: 38%; height: 4.5%; background: #D43C20; transform-origin: left; }
.sv-frame .w3 { left: 5%; top: 27%; width: 75%; height: 2.4%; background: #E3E3E3; transform-origin: left; }
.sv-frame .w4 { left: 5%; top: 32%; width: 66%; height: 2.4%; background: #E3E3E3; transform-origin: left; }
.sv-frame .w5 { left: 5%; top: 42%; width: 30%; height: 9%; background: #100F0C; border-radius: .8cqw; }
.sv-frame .w6 { right: 5%; bottom: 7%; width: 38%; height: 42%; background: #E8E8E8; border-radius: 1cqw; }
.sv-web.is-play .w1, .sv-web.is-play .w2, .sv-web.is-play .w3, .sv-web.is-play .w4 { animation: sv-grow .7s cubic-bezier(.2,.8,.2,1) both; }
.sv-web.is-play .w2 { animation-delay: .25s; } .sv-web.is-play .w3 { animation-delay: .5s; } .sv-web.is-play .w4 { animation-delay: .65s; }
.sv-web.is-play .w5 { animation: sv-pop .5s cubic-bezier(.2,.8,.2,1) 1.1s both; }
.sv-web.is-play .w6 { animation: sv-pop .6s cubic-bezier(.2,.8,.2,1) 1.6s both; }
@keyframes sv-grow { from { transform: scaleX(0); } to { transform: none; } }
.sv-cursor { width: 0; height: 0; border-left: 1.6cqw solid #D43C20; border-top: 1cqw solid transparent; border-bottom: 1cqw solid transparent; transform: rotate(-35deg); left: 70%; top: 60%; border-radius: 0 !important; filter: drop-shadow(0 .3cqw .4cqw rgba(0,0,0,.3)); }
.sv-web.is-play .sv-cursor { animation: sv-cur 6s ease-in-out infinite; }
@keyframes sv-cur { 0% { left: 70%; top: 60%; } 15% { left: 60%; top: 9%; } 30% { left: 42%; top: 17%; } 45% { left: 30%; top: 46%; } 60% { left: 80%; top: 70%; } 80%, 100% { left: 70%; top: 60%; } }

/* 02 — Sales Funnel */
.sv-funnel { background: #141210; padding: 5.5cqw 5cqw 4cqw; display: flex; flex-direction: column; justify-content: center; gap: 2cqw; }
.sv-funnel .fn { flex-shrink: 0; width: var(--w); margin: 0 auto; height: 7.6cqw; background: var(--c); display: flex; align-items: center; justify-content: space-between; padding: 0 3cqw; color: #fff; font-size: 3cqw; font-weight: 600; white-space: nowrap; overflow: hidden; }
.sv-funnel .fn em { font-weight: 700; }
.sv-funnel.is-play .fn { animation: sv-bar .9s cubic-bezier(.2,.8,.2,1) var(--d) both; }
@keyframes sv-bar { from { width: 0; opacity: .4; } to { width: var(--w); opacity: 1; } }

/* 03 — KPIs */
.sv-kpi { background: #EDEDED; padding: 4cqw; display: grid; grid-template-columns: 1fr 1fr; grid-template-rows: 1fr 1fr; gap: 3cqw; }
.sv-kpi .k { background: #fff; border-radius: 2cqw; padding: 3.5cqw 4cqw; display: flex; flex-direction: column; justify-content: space-between; }
.sv-kpi .k.dark { background: #100F0C; }
.sv-kpi .k span { font-size: 2.1cqw; font-weight: 700; letter-spacing: .2em; text-transform: uppercase; color: #8A8378; }
.sv-kpi .k em { font-family: 'Barlow Condensed', sans-serif; font-weight: 900; font-size: 10cqw; line-height: 1; color: #100F0C; }
.sv-kpi .k em.red { color: #D43C20; }
.sv-kpi.is-play .k { animation: sv-pop .6s cubic-bezier(.2,.8,.2,1) var(--d) both; }

/* 04 — Brand & Typografie */
.sv-brand { background: #F2F2F2; padding: 6cqw; }
.sv-brand .aa { font-family: 'Barlow Condensed', sans-serif; font-weight: 900; font-size: 21cqw; line-height: .9; color: #100F0C; }
.sv-brand .aa span { color: #D43C20; display: inline-block; }
.sv-brand.is-play .aa { animation: sv-track 1s cubic-bezier(.2,.8,.2,1) both; }
.sv-brand.is-play .aa span { animation: sv-drop .7s cubic-bezier(.3,1.6,.5,1) .7s both; }
@keyframes sv-track { from { opacity: 0; letter-spacing: .25em; } to { opacity: 1; letter-spacing: 0; } }
@keyframes sv-drop { from { opacity: 0; transform: translateY(-14cqw); } to { opacity: 1; transform: none; } }
.sv-brand .fonts { min-height: 3.6cqw; font-size: 2.8cqw; color: #6E6A63; margin: 2cqw 0 4.5cqw; }
.sv-brand .sw { position: relative; display: flex; gap: 2.5cqw; }
.sv-brand .sw i { width: 11cqw; height: 8cqw; border-radius: 1.2cqw; background: var(--c); border: .3cqw solid #ddd; }
.sv-brand.is-play .sw i { animation: sv-in .5s cubic-bezier(.2,.8,.2,1) calc(1.2s + var(--d)) both; }
.sv-brand .pick { position: absolute; top: -1cqw; left: 0; width: 13cqw; height: 10cqw; border: .5cqw solid #D43C20; border-radius: 1.8cqw; opacity: 0; }
.sv-brand.is-play .pick { animation: sv-pick 4s ease-in-out 2s infinite; }
@keyframes sv-pick { 0% { opacity: 1; left: -1cqw; } 20% { left: 12.5cqw; } 40% { left: 26cqw; } 60% { left: 12.5cqw; } 80%, 100% { left: -1cqw; opacity: 1; } }

/* 05 — KI-Assistent */
.sv-chat { background: #fff; padding: 4cqw 5cqw; display: flex; flex-direction: column; }
.sv-chat .hd { display: flex; align-items: center; gap: 2cqw; font-size: 3cqw; margin-bottom: 3.5cqw; }
.sv-chat .hd i { width: 4cqw; height: 4cqw; border-radius: 1cqw; background: #D43C20; }
.sv-chat .hd span { margin-left: auto; font-size: 2cqw; font-weight: 700; letter-spacing: .25em; text-transform: uppercase; color: #8A8378; }
.sv-chat .q { align-self: flex-end; max-width: 72%; background: #100F0C; color: #fff; border-radius: 2cqw; padding: 2.4cqw 3cqw; font-size: 2.7cqw; line-height: 1.45; }
.sv-chat .typing { display: flex; gap: 1cqw; padding: 2.5cqw 3cqw; margin-top: 2.5cqw; background: #F2F2F2; border-radius: 2cqw; width: max-content; opacity: 0; }
.sv-chat .typing i { width: 1.4cqw; height: 1.4cqw; border-radius: 50%; background: #8A8378; }
.sv-chat .a { max-width: 80%; margin-top: 2.5cqw; background: #F2F2F2; border-radius: 2cqw; padding: 2.4cqw 3cqw; font-size: 2.8cqw; line-height: 1.6; }
.sv-chat.is-play .q { animation: sv-in .5s cubic-bezier(.2,.8,.2,1) .2s both; }
.sv-chat.is-play .typing { animation: sv-typing 1.4s ease .9s both; position: absolute; top: 37cqw; }
.sv-chat.is-play .typing i { animation: sv-dot .6s ease-in-out infinite alternate; }
.sv-chat.is-play .typing i:nth-child(2) { animation-delay: .2s; } .sv-chat.is-play .typing i:nth-child(3) { animation-delay: .4s; }
@keyframes sv-typing { 0% { opacity: 0; } 10%, 85% { opacity: 1; } 100% { opacity: 0; } }
@keyframes sv-dot { from { transform: translateY(0); opacity: .4; } to { transform: translateY(-.8cqw); opacity: 1; } }
.sv-chat.is-play .a { animation: sv-in .5s cubic-bezier(.2,.8,.2,1) 2.3s both; }
.sv-chat.is-play .a p { animation: sv-in .45s cubic-bezier(.2,.8,.2,1) calc(2.5s + var(--d)) both; }

/* 06 — KI-Video */
.sv-video { background: #141210; padding: 4cqw; color: #C4BFAF; }
.sv-video .hd { display: flex; justify-content: space-between; font-size: 2.2cqw; font-weight: 700; letter-spacing: .2em; text-transform: uppercase; color: #8A8378; margin-bottom: 3cqw; }
.sv-video .hd .tc { letter-spacing: .05em; }
.sv-video .shots { position: relative; display: grid; grid-template-columns: repeat(4, 1fr); gap: 1.5cqw; }
.sv-video .shots i { aspect-ratio: 4 / 3.4; border-radius: 1cqw; background-size: cover; background-position: center; }
.sv-video .shots .sel { position: absolute; top: -.6cqw; left: -.6cqw; width: calc((100% - 4.5cqw) / 4 + 1.2cqw); height: calc(100% + 1.2cqw); border: .5cqw solid #D43C20; border-radius: 1.4cqw; }
.sv-video.is-play .shots .sel { animation: sv-sel 6s steps(1) infinite; }
@keyframes sv-sel { 0% { transform: translateX(0); } 25% { transform: translateX(calc(100% - 1.2cqw + 1.5cqw)); } 50% { transform: translateX(calc(200% - 2.4cqw + 3cqw)); } 75% { transform: translateX(calc(300% - 3.6cqw + 4.5cqw)); } }
.sv-video.is-play .shots i { animation: sv-in .5s ease both; }
.sv-video.is-play .shots i:nth-child(2) { animation-delay: .1s; } .sv-video.is-play .shots i:nth-child(3) { animation-delay: .2s; } .sv-video.is-play .shots i:nth-child(4) { animation-delay: .3s; }
.sv-video .bar { height: 1cqw; border-radius: 1cqw; background: #2a2723; margin: 3.5cqw 0; overflow: hidden; }
.sv-video .bar span { display: block; height: 100%; width: 100%; background: #D43C20; transform-origin: left; transform: scaleX(.4); }
.sv-video.is-play .bar span { animation: sv-progress 6s linear both; }
@keyframes sv-progress { from { transform: scaleX(0); } to { transform: scaleX(1); } }
.sv-video .prompt { font-family: ui-monospace, 'SFMono-Regular', Menlo, Consolas, monospace; font-size: 2.6cqw; line-height: 1.5; min-height: 8cqw; }

/* Tipp-Cursor für data-type */
.sv-scene .typing-now::after { content: '▍'; color: #D43C20; animation: sv-blink .8s steps(1) infinite; }
@keyframes sv-blink { 50% { opacity: 0; } }

@media (prefers-reduced-motion: reduce) {
  .sv-scene, .sv-scene * { animation: none !important; transition: none !important; }
}