/* ════════════════════════════════════════════════════════════════
   LEISTUNGEN · FOTOGRAFIE — Prozess-Timeline Phase-Animationen
   Lessons: Position in äußerer <g>, Animation in innerer; theme-safe Fills
   (var(--base) auf var(--t1)-Flächen, var(--accent) ok in beiden Modi).
   ════════════════════════════════════════════════════════════════ */

/* ── Wrapper (analog Grafikdesign, eigenes lf-visual statt gd-visual) ── */
.ld-prozess-phase-visual { margin: 1.2rem 0 0; max-width: 100%; padding: 0.5rem;
    background: var(--surface, rgba(255,255,255,0.02)); border: 1px solid var(--tdeco, rgba(127,127,127,0.15)); border-radius: 6px; }
.ld-prozess-phase-visual .lf-visual { width: 100%; aspect-ratio: 1; max-width: none; }
.ld-prozess-phase-visual svg { width: 100%; height: 100%; display: block; }
.ld-prozess-phase-visual figcaption { margin-top: 0.5rem; font-family: var(--font-mono); font-size: 0.62rem;
    letter-spacing: 0.12em; text-transform: uppercase; color: var(--link); text-align: center; }

/* ═══ 01 BRIEFING — Checklist erscheint ═══ */
.vis-fg-briefing .lf-row { opacity: 0; animation: fg-row 9s ease-in-out infinite; }
.vis-fg-briefing .r1 { animation-delay: 0.6s; }
.vis-fg-briefing .r2 { animation-delay: 1.4s; }
.vis-fg-briefing .r3 { animation-delay: 2.2s; }
.vis-fg-briefing .check { stroke-dasharray: 16; stroke-dashoffset: 16; animation: fg-draw 9s ease-in-out infinite; }
.vis-fg-briefing .r1 .check { animation-delay: 0.9s; }
.vis-fg-briefing .r2 .check { animation-delay: 1.7s; }
.vis-fg-briefing .r3 .check { animation-delay: 2.5s; }
@keyframes fg-row { 0%,4% { opacity: 0; transform: translateX(-10px); } 9%,92% { opacity: 1; transform: translateX(0); } 100% { opacity: 0; } }
@keyframes fg-draw { 0%,6% { stroke-dashoffset: 16; } 14%,92% { stroke-dashoffset: 0; } 100% { stroke-dashoffset: 16; } }

/* ═══ 02 SHOOTING — Blende pulst, Auslöser blinkt ═══ */
.vis-fg-shooting .lf-aperture { transform-box: fill-box; transform-origin: center; animation: fg-aperture 4s ease-in-out infinite; }
.vis-fg-shooting .lf-flash { transform-box: fill-box; transform-origin: center; animation: fg-flash 4s ease-in-out infinite; }
.vis-fg-shooting .lf-focus { transform-box: fill-box; transform-origin: center; opacity: 0; animation: fg-focus 4s ease-in-out infinite; }
@keyframes fg-aperture { 0%,100% { transform: scale(1); } 48% { transform: scale(0.7); } 55% { transform: scale(1.04); } }
@keyframes fg-flash { 0%,44%,60%,100% { opacity: 0.35; } 50% { opacity: 1; } }
@keyframes fg-focus { 0%,40% { opacity: 0; transform: scale(1.3); } 52% { opacity: 0.8; transform: scale(1); } 70%,100% { opacity: 0; } }

/* ═══ 03 AUSWAHL & BEARBEITUNG — Stars poppen, Rejects dimmen ═══ */
.vis-fg-cull .lf-pick { opacity: 0; transform-box: fill-box; transform-origin: center; animation: fg-pick 8s ease-in-out infinite; }
.vis-fg-cull .p1 { animation-delay: 1s; } .vis-fg-cull .p2 { animation-delay: 1.8s; } .vis-fg-cull .p3 { animation-delay: 2.6s; }
.vis-fg-cull .lf-reject { animation: fg-reject 8s ease-in-out infinite; }
@keyframes fg-pick { 0%,8% { opacity: 0; transform: scale(0.4); } 16% { opacity: 1; transform: scale(1.25); } 24%,92% { opacity: 1; transform: scale(1); } 100% { opacity: 0; } }
@keyframes fg-reject { 0%,30% { opacity: 1; } 45%,92% { opacity: 0.3; } 100% { opacity: 1; } }

/* ═══ 04 ÜBERGABE & LIZENZEN — Fotos raus, Badge poppt ═══ */
.vis-fg-handover .lf-out { opacity: 0; animation: fg-out 9s ease-in-out infinite; }
.vis-fg-handover .o1 { animation-delay: 0.6s; } .vis-fg-handover .o2 { animation-delay: 1.3s; } .vis-fg-handover .o3 { animation-delay: 2s; }
.vis-fg-handover .lf-badge { opacity: 0; transform-box: fill-box; transform-origin: center; animation: fg-badge 9s ease-in-out infinite; }
@keyframes fg-out { 0%,4% { opacity: 0; transform: translateY(14px); } 12%,92% { opacity: 1; transform: translateY(0); } 100% { opacity: 0; } }
@keyframes fg-badge { 0%,62% { opacity: 0; transform: scale(0.6); } 70% { opacity: 1; transform: scale(1.18); } 78%,92% { opacity: 1; transform: scale(1); } 100% { opacity: 0; } }

/* ── Reduced Motion ── */
@media (prefers-reduced-motion: reduce) {
    .vis-fg-briefing *, .vis-fg-shooting *, .vis-fg-cull *, .vis-fg-handover * { animation: none !important; }
    .vis-fg-briefing .lf-row, .vis-fg-cull .lf-pick, .vis-fg-handover .lf-out, .vis-fg-handover .lf-badge { opacity: 1 !important; }
    .vis-fg-briefing .check { stroke-dashoffset: 0 !important; }
}