/* ============================================================
   Zestio — Onboarding-flow (vanilla port van het React-prototype)
   design_handoff_onboarding/prototype/* → 1-op-1 overgenomen.

   Bevat: animaties (ob-*), de fullscreen "stage", en het iOS-device
   frame dat enkel in de losse preview/screenshot-harness gebruikt
   wordt. In de app zelf rendert de flow fullscreen bovenop de
   welkomstpoort. Tokens komen uit de :root van index.html
   (--accent #e8401a, --accent-light #f5a623, --bg-primary #f5f0e8,
   Poppins) en zijn hier nog eens als OB-equivalent vastgelegd zodat
   de module ook standalone klopt.
   ============================================================ */

/* ── Fullscreen host (in-app): boven de app, onder de auth-modals ──
   Zelfde z-index-laag als de welkomstpoort (400): boven nav/fab,
   onder login/register-overlay (500) en modal (600). */
.zob-gate {
    position: fixed;
    inset: 0;
    z-index: 410;
    background: #0e0d0f;
    font-family: 'Poppins', system-ui, sans-serif;
    -webkit-font-smoothing: antialiased;
    overflow: hidden;
}
.zob-gate.hidden { display: none; }

/* De schermen vullen een 402×874 "toestel"-canvas. In-app schalen we
   dat naar de echte viewport; in de preview/harness staat het gecentreerd
   op een donkere achtergrond (zoals het prototype). */
.zob-stage {
    position: absolute; inset: 0;
    display: flex; align-items: center; justify-content: center;
    background:
        radial-gradient(80% 60% at 50% 0%, #1b1916 0%, transparent 60%),
        #0e0d0f;
}
.zob-canvas {
    width: 402px; height: 874px;
    flex-shrink: 0;
    transform-origin: center;
    position: relative;
}

/* In-app fullscreen variant: responsive kolom (geen bezel, geen donkere
   rand). De stage centreert de canvas horizontaal; fit() zet width/height.
   Op brede schermen/tablets blijft de kolom gecentreerd met de
   thema-achtergrond eromheen i.p.v. een scheef geschaald telefoonframe. */
.zob-gate.zob-fullscreen {
    background: var(--bg-primary, #f5f0e8);
}
.zob-gate.zob-fullscreen .zob-stage {
    background: none;
    align-items: center;             /* canvas verticaal gecentreerd */
}
.zob-gate.zob-fullscreen .zob-canvas {
    /* width/height worden door fit() gezet (gecapt op 460×940) */
    transform: none;
}

/* Het scherm zelf (één per stap). */
.zob-screen { height: 100%; }

/* ── scherm-entree-transities ── */
.ob-enter-r { animation: obEnterR .42s cubic-bezier(.25,.46,.45,.94); }
.ob-enter-l { animation: obEnterL .42s cubic-bezier(.25,.46,.45,.94); }
@keyframes obEnterR { from { opacity: 0; transform: translateX(36px); } to { opacity: 1; transform: none; } }
@keyframes obEnterL { from { opacity: 0; transform: translateX(-36px); } to { opacity: 1; transform: none; } }

/* ── warme ambient-glow achtergrond (zoals de live welkomstpoort) ──
   De solide laag volgt het thema; de warme glow blijft constant. */
.ob-glowbg { background:
    radial-gradient(120% 80% at 50% -6%, rgba(232,64,26,0.14) 0%, rgba(245,166,35,0.05) 38%, transparent 64%),
    var(--bg-primary, #f5f0e8); }

/* ── element-animaties ── */
.ob-card-in { animation: obFade .6s ease both; }
@keyframes obFade { from { opacity: 0; } to { opacity: 1; } }
.ob-fade-up { animation: obFadeUp .5s cubic-bezier(.25,.46,.45,.94) both; }
@keyframes obFadeUp { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }
.ob-sheet-up { animation: obSheet .5s cubic-bezier(.25,.46,.45,.94) both; }
@keyframes obSheet { from { transform: translateY(40px); opacity: .4; } to { transform: none; opacity: 1; } }
.ob-scan { animation: obScan 2.4s cubic-bezier(.45,0,.55,1) infinite; }
@keyframes obScan { 0%,100% { top: 6%; opacity: 0; } 18%,82% { opacity: 1; } 50% { top: 92%; } }
.ob-pulse { animation: obPulse 2.3s ease-out infinite; }
@keyframes obPulse { 0% { transform: scale(.92); opacity: .8; } 100% { transform: scale(1.4); opacity: 0; } }
.ob-spin { animation: obSpin 2.4s linear infinite; }
@keyframes obSpin { to { transform: rotate(360deg); } }
.ob-float { animation: obFloat 2.6s ease-in-out infinite; }
@keyframes obFloat { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-4px); } }
.ob-bar { width: 38%; animation: obBar 1.7s ease-in-out infinite; }
@keyframes obBar { 0% { transform: translateX(-105%); } 100% { transform: translateX(320%); } }
.ob-chip-pop { animation: obChipPop .42s cubic-bezier(.34,1.56,.64,1) both; }
@keyframes obChipPop { from { opacity: 0; transform: scale(.7) translateY(6px); } to { opacity: 1; transform: none; } }
.ob-pop { animation: obPop .55s cubic-bezier(.34,1.56,.64,1) both; }
@keyframes obPop { 0% { transform: scale(.4); opacity: 0; } 60% { transform: scale(1.12); } 100% { transform: scale(1); opacity: 1; } }
.ob-zestio-pop { animation: obZestioPop 1.6s ease-in-out infinite; }
@keyframes obZestioPop { 0%,100% { transform: scale(1); } 50% { transform: scale(1.07); } }
.ob-tap { animation: obTap 1.6s ease-in-out infinite; }
@keyframes obTap { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-5px); } }
.ob-send-bounce { animation: obTap 1.6s ease-in-out infinite; }

/* Knop-tik: subtiele schaalreductie (vervangt de React onMouseDown-handlers). */
.zob-press { transition: transform 0.12s ease, opacity 0.15s ease, box-shadow 0.2s ease; }
.zob-press:active { transform: scale(0.975); }
.zob-press-sm:active { transform: scale(0.98); }

@media (prefers-reduced-motion: reduce) {
    .ob-enter-r, .ob-enter-l, .ob-card-in, .ob-fade-up, .ob-sheet-up,
    .ob-pulse, .ob-spin, .ob-float, .ob-bar, .ob-chip-pop, .ob-pop,
    .ob-zestio-pop, .ob-tap, .ob-send-bounce { animation: none !important; }
}