/*
 * Service illustrations on the Leistungen pages (markup: src/lib/serviceMotions.ts).
 * Without the classes below the SVG shows its final state. ServiceMotions adds .svc-armed to illustrations below the
 * first screen (first keyframe, paused) and swaps it for .svc-play once they are half visible: one run, no loop.
 * Only transform, opacity and stroke-dashoffset are animated.
 */
.svc-motion-slot { display: block; line-height: 0; }
.svc-motion { display: block; overflow: hidden; }

.brand-fastkey .svc-motion-slot { margin: 0 0 1rem; }
.brand-fastkey .svc-motion {
  width: 72px; height: 72px;
  color: #177e7e;
  --svc-accent: #1474ba;
  --svc-bg: #fff;
  --svc-glow: #d4ebf8;
  --svc-wall: #e3f2f2;
  --svc-muted: #8db1b1;
}
/* phones: smaller so the five illustrations add less height above the headings */
@media (max-width: 639.98px) {
  .brand-fastkey .svc-motion-slot { margin-bottom: 0.5rem; }
  .brand-fastkey .svc-motion { width: 56px; height: 56px; }
}
.brand-noir .svc-motion {
  width: 80px; height: 80px;
  color: #a8c8ff;
  --svc-accent: #2d8aff;
  --svc-bg: #0f1b30;
  --svc-glow: rgba(168, 200, 255, 0.5);
  --svc-wall: #16264a;
  --svc-muted: #4d6488;
}

.svc-motion .s-fill { fill: var(--svc-bg); }
.svc-motion .s-acc { stroke: var(--svc-accent); }
.svc-motion .s-glow { fill: var(--svc-glow); }
.svc-motion .s-spill { fill: var(--svc-glow); opacity: 0.75; }
.svc-motion .s-wall { fill: var(--svc-wall); }
.svc-motion .s-old { stroke: var(--svc-muted); opacity: 0; }
.svc-motion .s-blank { stroke: var(--svc-muted); opacity: 0; }
.svc-motion :is(.s-gap, .s-check, .s-trunk, .s-branch, .s-cut) { stroke-dasharray: 1; stroke-dashoffset: 0; }
.svc-motion .s-leaf { vector-effect: non-scaling-stroke; }
.svc-motion :is(.s-leaf, .s-dial, .s-handle, .s-lever, .s-shield, .s-key, .s-old, .s-new, .s-copy, .s-shackle) { transform-box: fill-box; }
.svc-motion :is(.s-dial, .s-handle, .s-shield, .s-key) { transform-origin: center; }
.svc-motion .s-leaf { transform-origin: left center; }
.svc-motion .s-lever { transform-origin: 3px 3px; }

/* door: leaf swings open, light spills onto the floor */
.svc-motion:is(.svc-armed, .svc-play) .s-leaf { animation: svc-door 0.9s cubic-bezier(0.4, 0, 0.2, 1) 0.15s both; }
.svc-motion:is(.svc-armed, .svc-play) .s-knob { animation: svc-knob 0.9s cubic-bezier(0.4, 0, 0.2, 1) 0.15s both; }
.svc-motion:is(.svc-armed, .svc-play) .s-spill { animation: svc-fade 0.6s ease-out 0.6s both; }
/* safe: dial turns, handle swings, the door edge lights up */
.svc-motion:is(.svc-armed, .svc-play) .s-dial { animation: svc-dial 0.8s ease-in-out both; }
.svc-motion:is(.svc-armed, .svc-play) .s-handle { animation: svc-turn-90 0.35s ease-out 0.8s both; }
.svc-motion:is(.svc-armed, .svc-play) .s-gap { animation: svc-draw 0.4s ease-out 1.05s both; }
/* cylinder: old one out, new one in */
.svc-motion:is(.svc-armed, .svc-play) .s-old { animation: svc-pull 0.55s ease-in both; }
.svc-motion:is(.svc-armed, .svc-play) .s-new { animation: svc-push 0.6s cubic-bezier(0.2, 0.7, 0.3, 1) 0.55s both; }
/* window: handle turns down to locked, shield and check */
.svc-motion:is(.svc-armed, .svc-play) .s-lever { animation: svc-turn90 0.5s ease-in-out 0.1s both; }
.svc-motion:is(.svc-armed, .svc-play) .s-shield { animation: svc-pop 0.4s cubic-bezier(0.3, 1.4, 0.5, 1) 0.6s both; }
.svc-motion:is(.svc-armed, .svc-play) .s-check { animation: svc-draw 0.35s ease-out 1s both; }
/* locking system: key turns, the line reaches the three locks one after another */
.svc-motion:is(.svc-armed, .svc-play) .s-key { animation: svc-keyturn 0.4s ease-in-out both; }
.svc-motion:is(.svc-armed, .svc-play) .s-trunk { animation: svc-draw 0.35s ease-out 0.35s both; }
.svc-motion:is(.svc-armed, .svc-play) .s-branch.s-n1 { animation: svc-draw 0.2s ease-out 0.65s both; }
.svc-motion:is(.svc-armed, .svc-play) .s-branch.s-n2 { animation: svc-draw 0.2s ease-out 0.85s both; }
.svc-motion:is(.svc-armed, .svc-play) .s-branch.s-n3 { animation: svc-draw 0.2s ease-out 1.05s both; }
.svc-motion:is(.svc-armed, .svc-play) .s-shackle.s-n1 { animation: svc-lift 0.25s ease-out 0.8s both; }
.svc-motion:is(.svc-armed, .svc-play) .s-shackle.s-n2 { animation: svc-lift 0.25s ease-out 1s both; }
.svc-motion:is(.svc-armed, .svc-play) .s-shackle.s-n3 { animation: svc-lift 0.25s ease-out 1.2s both; }
/* key service: the copy slides out, its cut is traced */
.svc-motion:is(.svc-armed, .svc-play) .s-copy { animation: svc-drop 0.55s cubic-bezier(0.2, 0.7, 0.3, 1) both; }
.svc-motion:is(.svc-armed, .svc-play) .s-blank { animation: svc-blank 1.35s linear both; }
.svc-motion:is(.svc-armed, .svc-play) .s-cut { animation: svc-draw 0.8s linear 0.55s both; }

.svc-motion.svc-armed * { animation-play-state: paused !important; }

@keyframes svc-door { from { transform: scaleX(1.6923); } to { transform: none; } }
/* knob stays round and travels with the free edge of the leaf (46 -> 59.8 at scaleX 1.6923) */
@keyframes svc-knob { from { transform: translateX(13.8px); } to { transform: none; } }
@keyframes svc-blank { 0%, 85% { opacity: 1; } 100% { opacity: 0; } }
@keyframes svc-fade { from { opacity: 0; } }
@keyframes svc-dial { 0% { transform: rotate(-200deg); } 55% { transform: rotate(40deg); } 80% { transform: rotate(-10deg); } 100% { transform: none; } }
@keyframes svc-turn-90 { from { transform: rotate(-90deg); } to { transform: none; } }
@keyframes svc-turn90 { from { transform: rotate(90deg); } to { transform: none; } }
@keyframes svc-draw { from { stroke-dashoffset: 1; } to { stroke-dashoffset: 0; } }
@keyframes svc-pull { from { transform: none; opacity: 1; } to { transform: translateX(-34px); opacity: 0; } }
@keyframes svc-push { from { transform: translateX(-40px); opacity: 0; } to { transform: none; opacity: 1; } }
@keyframes svc-pop { from { transform: scale(0.4); opacity: 0; } to { transform: none; opacity: 1; } }
@keyframes svc-keyturn { 0%, 100% { transform: none; } 50% { transform: scaleY(0.25); } }
@keyframes svc-lift { from { transform: translateY(4px); } to { transform: none; } }
@keyframes svc-drop { from { transform: translateY(-30px); opacity: 0; } to { transform: none; opacity: 1; } }

@media (prefers-reduced-motion: reduce) {
  .svc-motion * { animation: none !important; }
}