/* ═══════════════════════════════════════════════════════
   ONBOARDING V2 — Enhanced Animations
   All keyframes, transitions, and dynamic effects
   ═══════════════════════════════════════════════════════ */

/* ══════ SKY & ATMOSPHERE ══════ */

@keyframes sunFloat {

    0%,
    100% {
        transform: translateY(0) scale(1);
    }

    50% {
        transform: translateY(-6px) scale(1.02);
    }
}

@keyframes sunPulse {

    0%,
    100% {
        transform: translate(-50%, -50%) scale(1);
        opacity: 0.8;
    }

    50% {
        transform: translate(-50%, -50%) scale(1.15);
        opacity: 1;
    }
}

@keyframes rayPulse {

    0%,
    100% {
        opacity: 0.4;
        height: 25px;
    }

    50% {
        opacity: 0.7;
        height: 35px;
    }
}

@keyframes cloudMove {
    0% {
        transform: translateX(-200px);
    }

    100% {
        transform: translateX(calc(100vw + 200px));
    }
}

@keyframes birdFly {
    0% {
        left: -50px;
        opacity: 0;
    }

    5% {
        opacity: 0.5;
    }

    95% {
        opacity: 0.5;
    }

    100% {
        left: calc(100vw + 50px);
        opacity: 0;
    }
}

@keyframes wingFlapL {

    0%,
    100% {
        transform: rotate(25deg) scaleY(1);
    }

    50% {
        transform: rotate(-15deg) scaleY(0.6);
    }
}

@keyframes wingFlapR {

    0%,
    100% {
        transform: rotate(-25deg) scaleY(1);
    }

    50% {
        transform: rotate(15deg) scaleY(0.6);
    }
}

/* ══════ LIGHTHOUSE ══════ */

@keyframes lighthouseBeam {
    0% {
        transform: rotate(-30deg);
        opacity: 0.6;
    }

    25% {
        opacity: 0.9;
    }

    50% {
        transform: rotate(30deg);
        opacity: 0.6;
    }

    75% {
        opacity: 0.9;
    }

    100% {
        transform: rotate(-30deg);
        opacity: 0.6;
    }
}

@keyframes lanternGlow {

    0%,
    100% {
        box-shadow: 0 0 12px rgba(246, 173, 85, 0.8);
    }

    50% {
        box-shadow: 0 0 20px rgba(246, 173, 85, 1), 0 0 40px rgba(246, 173, 85, 0.5);
    }
}

/* ══════ OCEAN ══════ */

@keyframes waveSlide {
    0% {
        transform: translateX(0);
    }

    100% {
        transform: translateX(-50%);
    }
}

@keyframes fishSwim {
    0% {
        left: -40px;
        opacity: 0;
    }

    5% {
        opacity: 0.7;
    }

    50% {
        transform: scaleX(1) translateY(-5px);
    }

    95% {
        opacity: 0.7;
    }

    100% {
        left: calc(100vw + 40px);
        opacity: 0;
    }
}

@keyframes bubbleRise {
    0% {
        transform: translateY(0) scale(0.6);
        opacity: 0;
    }

    10% {
        opacity: 0.6;
    }

    50% {
        transform: translateY(-60px) scale(1) translateX(8px);
        opacity: 0.5;
    }

    100% {
        transform: translateY(-150px) scale(0.3) translateX(-4px);
        opacity: 0;
    }
}

@keyframes seaweedSway {

    0%,
    100% {
        transform: rotate(-5deg);
    }

    50% {
        transform: rotate(8deg);
    }
}

/* ══════ PARTICLES ══════ */

@keyframes particleFloat {
    0% {
        transform: translateY(100vh) translateX(0);
        opacity: 0;
    }

    10% {
        opacity: var(--opacity);
    }

    90% {
        opacity: var(--opacity);
    }

    100% {
        transform: translateY(-20px) translateX(var(--drift));
        opacity: 0;
    }
}

/* ══════ UI ELEMENTS ══════ */

@keyframes emojiFloat {

    0%,
    100% {
        transform: translateY(0) rotate(0deg);
    }

    25% {
        transform: translateY(-6px) rotate(-3deg);
    }

    75% {
        transform: translateY(-4px) rotate(3deg);
    }
}

@keyframes cardSlideUp {
    0% {
        opacity: 0;
        transform: translateY(30px) scale(0.97);
    }

    100% {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}

@keyframes cardShimmer {
    0% {
        left: -100%;
    }

    50% {
        left: 100%;
    }

    100% {
        left: 100%;
    }
}

@keyframes titleReveal {
    0% {
        opacity: 0;
        transform: translateY(15px);
        letter-spacing: 4px;
    }

    100% {
        opacity: 1;
        transform: translateY(0);
        letter-spacing: normal;
    }
}

@keyframes fadeInUp {
    0% {
        opacity: 0;
        transform: translateY(12px);
    }

    100% {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes logoFloat {

    0%,
    100% {
        transform: translateY(0);
    }

    50% {
        transform: translateY(-3px);
    }
}

@keyframes dotPulse {

    0%,
    100% {
        box-shadow: 0 0 20px rgba(79, 209, 197, 0.4);
    }

    50% {
        box-shadow: 0 0 30px rgba(79, 209, 197, 0.7);
    }
}

@keyframes btnShine {
    0% {
        left: -100%;
    }

    30% {
        left: 100%;
    }

    100% {
        left: 100%;
    }
}

/* ══════ BOAT & WAITING ══════ */

@keyframes boatRock {

    0%,
    100% {
        transform: translateX(-50%) rotate(-3deg) translateY(0);
    }

    25% {
        transform: translateX(-50%) rotate(2deg) translateY(-8px);
    }

    50% {
        transform: translateX(-50%) rotate(-2deg) translateY(3px);
    }

    75% {
        transform: translateX(-50%) rotate(3deg) translateY(-5px);
    }
}

@keyframes flagWave {

    0%,
    100% {
        transform: rotate(0deg) scaleX(1);
    }

    25% {
        transform: rotate(8deg) scaleX(1.1);
    }

    75% {
        transform: rotate(-4deg) scaleX(0.95);
    }
}

@keyframes sailBillow {

    0%,
    100% {
        transform: scaleX(1) skewY(0deg);
    }

    30% {
        transform: scaleX(1.1) skewY(1deg);
    }

    70% {
        transform: scaleX(0.95) skewY(-1deg);
    }
}

@keyframes reflectionPulse {

    0%,
    100% {
        opacity: 0.3;
        transform: scaleX(1);
    }

    50% {
        opacity: 0.6;
        transform: scaleX(1.1);
    }
}

@keyframes wakeExpand {
    0% {
        width: 0;
        opacity: 0.5;
        transform: translateX(0);
    }

    50% {
        opacity: 0.3;
    }

    100% {
        width: 80px;
        opacity: 0;
        transform: translateX(-40px);
    }
}

@keyframes splashPulse {

    0%,
    100% {
        transform: translateX(-50%) scaleX(1);
        opacity: 0.4;
    }

    50% {
        transform: translateX(-50%) scaleX(1.2);
        opacity: 0.7;
    }
}

@keyframes helmSpin {
    0% {
        transform: rotate(0deg);
    }

    100% {
        transform: rotate(360deg);
    }
}

/* Progress bar animations */
@keyframes progressGradient {
    0% {
        background-position: 0% 50%;
    }

    50% {
        background-position: 100% 50%;
    }

    100% {
        background-position: 0% 50%;
    }
}

@keyframes shimmerSlide {
    0% {
        transform: translateX(-100%);
    }

    100% {
        transform: translateX(100%);
    }
}

@keyframes statusPulse {

    0%,
    100% {
        transform: scale(1);
        opacity: 1;
    }

    50% {
        transform: scale(1.5);
        opacity: 0.4;
    }
}

/* ══════ SUCCESS ══════ */

@keyframes drawRing {
    to {
        stroke-dashoffset: 0;
    }
}

@keyframes drawCheck {
    to {
        stroke-dashoffset: 0;
    }
}

@keyframes successPop {
    0% {
        transform: scale(0) rotate(-10deg);
    }

    60% {
        transform: scale(1.15) rotate(3deg);
    }

    100% {
        transform: scale(1) rotate(0deg);
    }
}

@keyframes sparkleAnim {
    0% {
        opacity: 0;
        transform: translate(0, 0) scale(0);
    }

    50% {
        opacity: 1;
        transform: translate(calc(var(--sx) * 0.6), calc(var(--sy) * 0.6)) scale(1.2);
    }

    100% {
        opacity: 0;
        transform: translate(var(--sx), var(--sy)) scale(0.5);
    }
}

@keyframes errorShake {

    0%,
    100% {
        transform: translateX(0) rotate(0);
    }

    15% {
        transform: translateX(-12px) rotate(-3deg);
    }

    30% {
        transform: translateX(12px) rotate(3deg);
    }

    45% {
        transform: translateX(-8px) rotate(-2deg);
    }

    60% {
        transform: translateX(8px) rotate(2deg);
    }

    75% {
        transform: translateX(-4px) rotate(-1deg);
    }
}

@keyframes confettiFall {
    0% {
        transform: translate(0, 0) rotate(0deg) scale(1);
        opacity: 1;
    }

    50% {
        opacity: 1;
    }

    100% {
        transform: translate(var(--x), var(--y)) rotate(720deg) scale(0.5);
        opacity: 0;
    }
}

/* ══════ STEP TRANSITIONS ══════ */

.step-panel {
    transition: opacity 0.4s ease, transform 0.4s ease;
}

.step-panel.slide-out-left {
    animation: slideOutLeft 0.35s ease-in forwards;
}

.step-panel.slide-in-right {
    animation: slideInRight 0.45s ease-out forwards;
}

.step-panel.slide-out-right {
    animation: slideOutRight 0.35s ease-in forwards;
}

.step-panel.slide-in-left {
    animation: slideInLeft 0.45s ease-out forwards;
}

@keyframes slideOutLeft {
    0% {
        opacity: 1;
        transform: translateX(0) scale(1);
    }

    100% {
        opacity: 0;
        transform: translateX(-80px) scale(0.95);
    }
}

@keyframes slideInRight {
    0% {
        opacity: 0;
        transform: translateX(80px) scale(0.95);
    }

    100% {
        opacity: 1;
        transform: translateX(0) scale(1);
    }
}

@keyframes slideOutRight {
    0% {
        opacity: 1;
        transform: translateX(0) scale(1);
    }

    100% {
        opacity: 0;
        transform: translateX(80px) scale(0.95);
    }
}

@keyframes slideInLeft {
    0% {
        opacity: 0;
        transform: translateX(-80px) scale(0.95);
    }

    100% {
        opacity: 1;
        transform: translateX(0) scale(1);
    }
}

/* ── Message fade ── */
.msg-fade-out {
    animation: fadeOut 0.3s ease-out forwards;
}

.msg-fade-in {
    animation: fadeIn 0.3s ease-in forwards;
}

@keyframes fadeOut {
    0% {
        opacity: 1;
        transform: translateY(0);
    }

    100% {
        opacity: 0;
        transform: translateY(-10px);
    }
}

@keyframes fadeIn {
    0% {
        opacity: 0;
        transform: translateY(10px);
    }

    100% {
        opacity: 1;
        transform: translateY(0);
    }
}