/* ============================================================
   ilabs forms — Animationen
   Ein orchestrierter Einstiegsmoment (Logo) + ruhige, gezielte
   Übergänge zwischen den Formular-Schritten. Bewusst zurückhaltend
   dosiert, respektiert prefers-reduced-motion (siehe theme.css).
   ============================================================ */

@keyframes popItem{
    0%{ opacity:0; transform: scale(0.85) translateY(40px); }
    100%{ opacity:1; transform: scale(1) translateY(0); }
}
@keyframes revealElement{
    0%{ opacity:0; transform: translateY(20px) scale(0.96); }
    100%{ opacity:1; transform: translateY(0) scale(1); }
}
.pop-in{ opacity:0; animation: popItem 0.8s cubic-bezier(0.175,0.885,0.32,1.275) forwards; }
.reveal{ opacity:0; animation: revealElement 0.7s cubic-bezier(0.16,1,0.3,1) forwards; }

/* ---------- Logo: self-drawing form-check mark ---------- */
.logo-mark{
    width: 92px; height: 92px;
    filter: drop-shadow(0 12px 26px rgba(0,120,220,0.28));
}
.logo-mark .lm-doc{
    stroke-dasharray: 220;
    stroke-dashoffset: 220;
    animation: drawLine 1.1s cubic-bezier(0.65,0,0.35,1) forwards 0.15s;
}
.logo-mark .lm-check{
    stroke-dasharray: 40;
    stroke-dashoffset: 40;
    animation: drawLine 0.5s ease-out forwards 1.05s;
}
.logo-mark .lm-ring{
    transform-origin: 50% 50%;
    animation: ringPulse 2.6s ease-in-out infinite 1.5s;
}
@keyframes drawLine{ to{ stroke-dashoffset: 0; } }
@keyframes ringPulse{
    0%,100%{ opacity: 0.35; transform: scale(1); }
    50%{ opacity: 0.75; transform: scale(1.06); }
}

/* ---------- Staggered hero text ---------- */
.stagger > *{ opacity:0; animation: revealElement 0.7s cubic-bezier(0.16,1,0.3,1) forwards; }
.stagger > *:nth-child(1){ animation-delay: 0.35s; }
.stagger > *:nth-child(2){ animation-delay: 0.5s; }
.stagger > *:nth-child(3){ animation-delay: 0.65s; }
.stagger > *:nth-child(4){ animation-delay: 0.8s; }

/* ---------- Progress bar ---------- */
.progress-track{ position: relative; height: 8px; border-radius: 999px; background: rgba(0,60,120,0.08); overflow: hidden; }
.progress-fill{ position:absolute; inset:0 auto 0 0; height:100%; border-radius:999px; background: var(--blue-glass); transition: width 0.55s cubic-bezier(0.65,0,0.35,1); }
.progress-fill::after{
    content:''; position:absolute; right:-2px; top:50%; width:14px; height:14px; border-radius:50%;
    background:#fff; transform: translate(50%,-50%); box-shadow: 0 0 0 4px rgba(0,162,255,0.25), 0 2px 6px rgba(0,80,150,0.3);
    animation: dotPulse 1.6s ease-in-out infinite;
}
@keyframes dotPulse{ 0%,100%{ box-shadow: 0 0 0 4px rgba(0,162,255,0.25), 0 2px 6px rgba(0,80,150,0.3);} 50%{ box-shadow: 0 0 0 8px rgba(0,162,255,0.10), 0 2px 6px rgba(0,80,150,0.3);} }

/* ---------- Question slide transitions ---------- */
.q-stage{ position: relative; }
.q-slide{ animation: qEnterRight 0.5s cubic-bezier(0.16,1,0.3,1) both; }
.q-slide.back{ animation-name: qEnterLeft; }
@keyframes qEnterRight{ 0%{ opacity:0; transform: translateX(36px); } 100%{ opacity:1; transform: translateX(0); } }
@keyframes qEnterLeft{ 0%{ opacity:0; transform: translateX(-36px); } 100%{ opacity:1; transform: translateX(0); } }

/* ---------- Option tiles ---------- */
.option-tile{ transition: transform 0.25s cubic-bezier(0.16,1,0.3,1), box-shadow 0.25s, border-color 0.2s; }
.option-tile:hover{ transform: translateY(-2px); }
.option-tile.selected{ animation: selectPop 0.35s cubic-bezier(0.34,1.56,0.64,1); }
@keyframes selectPop{ 0%{ transform: scale(0.97);} 60%{ transform: scale(1.015);} 100%{ transform: scale(1);} }

/* ---------- Success check (final screen) ---------- */
.big-check{ width: 74px; height: 74px; }
.big-check circle{ stroke-dasharray: 200; stroke-dashoffset: 200; animation: drawLine 0.7s ease-out forwards 0.1s; }
.big-check path{ stroke-dasharray: 40; stroke-dashoffset: 40; animation: drawLine 0.45s ease-out forwards 0.75s; }

/* ---------- Gentle float for ambient icons ---------- */
.floaty{ animation: floatY 5s ease-in-out infinite; }
@keyframes floatY{ 0%,100%{ transform: translateY(0);} 50%{ transform: translateY(-8px);} }

/* ---------- Shake for validation errors ---------- */
.shake{ animation: shakeX 0.4s; }
@keyframes shakeX{ 10%,90%{ transform: translateX(-1px);} 20%,80%{ transform: translateX(2px);} 30%,50%,70%{ transform: translateX(-4px);} 40%,60%{ transform: translateX(4px);} }