/* ════════════════════════════════════════════════════════════════
   LEISTUNGEN · GRAFIKDESIGN — Timeline-Phasen-Animationen
   ════════════════════════════════════════════════════════════════ */

/* ─── Visual-Wrapper innerhalb Timeline-Steps ─── */
.ld-prozess-phase-visual {
    margin: 1.5rem 0 0;
    max-width: 100%;
    padding: 0.5rem;
    background: var(--surface, rgba(255, 255, 255, 0.02));
    border: 1px solid var(--border, rgba(127, 127, 127, 0.15));
    border-radius: 6px;
}
.ld-prozess-phase-visual .gd-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;
}

/* ═══════════ PHASE 01: Briefing → 3 Konzept-Skizzen ═══════════ */
.vis-gd-briefing .briefing-bubble { opacity: 0; animation: gp-bubble 10s ease-in-out infinite; }
.vis-gd-briefing .briefing-arrow { stroke-dasharray: 60; stroke-dashoffset: 60; animation: gp-draw 10s ease-in-out infinite; animation-delay: 1.5s; }
.vis-gd-briefing .sketch { opacity: 0; animation: gp-fade-in 10s ease-in-out infinite; }
.vis-gd-briefing .sketch-stroke { stroke-dasharray: 100; stroke-dashoffset: 100; animation: gp-draw 10s ease-in-out infinite; }
.vis-gd-briefing .sk-1 { animation-delay: 2.5s; }
.vis-gd-briefing .sk-2 { animation-delay: 3.4s; }
.vis-gd-briefing .sk-3 { animation-delay: 4.3s; }
.vis-gd-briefing .sk-1 .sketch-stroke { animation-delay: 2.5s; }
.vis-gd-briefing .sk-2 .sketch-stroke { animation-delay: 3.4s; }
.vis-gd-briefing .sk-3 .sketch-stroke { animation-delay: 4.3s; }
@keyframes gp-bubble { 0%, 5%{opacity:0} 12%{opacity:1} 95%{opacity:1} 100%{opacity:0} }
@keyframes gp-fade-in { 0%, 15%{opacity:0} 25%{opacity:1} 95%{opacity:1} 100%{opacity:0} }
@keyframes gp-draw { 0%, 15%{stroke-dashoffset:60} 30%{stroke-dashoffset:0} 95%{stroke-dashoffset:0} 100%{stroke-dashoffset:60} }

/* ═══════════ PHASE 02: 3 Entwürfe → 1 Auswahl ═══════════ */
.vis-gd-curate .concept { opacity: 0.4; transform-origin: center; transform-box: fill-box; animation: gc-base 12s ease-in-out infinite; }
.vis-gd-curate .c1 { animation-delay: 0s; }
.vis-gd-curate .c2 { animation-delay: 0s; animation-name: gc-winner; }
.vis-gd-curate .c3 { animation-delay: 0s; }
@keyframes gc-base {
    0%, 5%   { opacity: 0; transform: scale(0.85); }
    15%      { opacity: 0.4; transform: scale(1); }
    50%      { opacity: 0.5; transform: scale(1); }
    60%, 90% { opacity: 0.15; transform: scale(0.92); }
    100%     { opacity: 0; }
}
@keyframes gc-winner {
    0%, 5%   { opacity: 0; transform: scale(0.85); }
    15%      { opacity: 0.4; transform: scale(1); }
    50%      { opacity: 0.5; transform: scale(1); }
    60%, 90% { opacity: 1; transform: scale(1.08); }
    100%     { opacity: 0; }
}
.vis-gd-curate .winner-frame { stroke: var(--accent); stroke-width: 0; transform-origin: center; transform-box: fill-box; animation: gc-frame 12s ease-in-out infinite; }
@keyframes gc-frame {
    0%, 55%  { stroke-width: 0; }
    62%, 90% { stroke-width: 2.5; }
    100%     { stroke-width: 0; }
}
.vis-gd-curate .check-pick { opacity: 0; transform-origin: center; transform-box: fill-box; animation: gc-check 12s ease-in-out infinite; }
@keyframes gc-check {
    0%, 62%  { opacity: 0; transform: scale(0.5); }
    70%      { opacity: 1; transform: scale(1.4); }
    78%, 90% { opacity: 1; transform: scale(1); }
    100%     { opacity: 0; }
}

/* ═══════════ PHASE 03: CMYK-Passermarken Reinzeichnung ═══════════ */
.vis-gd-cmyk .cmyk-layer { mix-blend-mode: multiply; animation: gp-snap 8s ease-in-out infinite; }
.vis-gd-cmyk .lay-c { fill: cyan; animation-delay: 0s; --ox:-25px; --oy:-15px; }
.vis-gd-cmyk .lay-m { fill: magenta; animation-delay: 0.2s; --ox:22px; --oy:-18px; }
.vis-gd-cmyk .lay-y { fill: yellow; animation-delay: 0.4s; --ox:-18px; --oy:22px; }
.vis-gd-cmyk .lay-k { fill: #1d1d1d; animation-delay: 0.6s; --ox:20px; --oy:18px; }
@keyframes gp-snap { 0%,100%{transform:translate(var(--ox),var(--oy))} 45%,80%{transform:translate(0,0)} }
.vis-gd-cmyk .passer-cross { stroke: var(--t1); stroke-width: 1; opacity: 0.4; }
.vis-gd-cmyk .passer-circle { fill: none; stroke: var(--t1); stroke-width: 1; opacity: 0.4; }
.vis-gd-cmyk .snap-flash { fill: var(--accent); opacity: 0; animation: gp-flash 8s ease-in-out infinite; }
@keyframes gp-flash { 0%,40%,65%,100%{opacity:0} 45%,50%{opacity:0.45} }
.vis-gd-cmyk .ok-tag { opacity: 0; animation: gp-fade-in-late 8s ease-in-out infinite; }
@keyframes gp-fade-in-late { 0%,70%{opacity:0} 78%,92%{opacity:1} 100%{opacity:0} }

/* ═══════════ PHASE 04: Druckmaschine → Stack → ✓ Geliefert ═══════════ */
.vis-gd-print .printer { fill: var(--t1); opacity: 0.85; }
.vis-gd-print .sheet { opacity: 0; animation: gd-print-sheet 9s ease-in-out infinite; }
.vis-gd-print .sh-1 { animation-delay: 0.5s; }
.vis-gd-print .sh-2 { animation-delay: 1.5s; }
.vis-gd-print .sh-3 { animation-delay: 2.5s; }
.vis-gd-print .sh-4 { animation-delay: 3.5s; }
.vis-gd-print .sh-5 { animation-delay: 4.5s; }
@keyframes gd-print-sheet {
    0%, 5%   { opacity: 0; transform: translateY(-20px); }
    10%      { opacity: 1; transform: translateY(0); }
    95%      { opacity: 1; transform: translateY(0); }
    100%     { opacity: 0; }
}
.vis-gd-print .delivered-badge { opacity: 0; transform-origin: center; transform-box: fill-box; animation: gd-delivered 9s ease-in-out infinite; }
@keyframes gd-delivered {
    0%, 65%  { opacity: 0; transform: scale(0.6); }
    72%      { opacity: 1; transform: scale(1.2); }
    80%, 92% { opacity: 1; transform: scale(1); }
    100%     { opacity: 0; }
}

/* Reduced-Motion */
@media (prefers-reduced-motion: reduce) {
    .vis-gd-briefing *, .vis-gd-curate *, .vis-gd-cmyk *, .vis-gd-print * {
        animation: none !important;
    }
    .vis-gd-briefing .briefing-bubble, .vis-gd-briefing .sketch,
    .vis-gd-curate .concept, .vis-gd-curate .check-pick,
    .vis-gd-cmyk .ok-tag, .vis-gd-print .sheet, .vis-gd-print .delivered-badge { opacity: 1; }
    .vis-gd-briefing .sketch-stroke, .vis-gd-briefing .briefing-arrow { stroke-dashoffset: 0; }
    .vis-gd-curate .winner-frame { stroke-width: 2.5; }
    .vis-gd-cmyk .cmyk-layer { transform: translate(0, 0); }
}