/**
 * MSBela – Owl Flight Animation  v1.2.0
 *
 * Letová animace sovičky na homepage.
 * Podmíněně enqueue: jen is_front_page() + animace zapnutá.
 *
 * Intro state machine (CSS třídy na .owlAnim):
 *   (žádná)           → IDLE – sova sedí, mrkání + bob
 *   .owlAnim--flyOut  → sova letí doprava, za pravý okraj
 *   .owlAnim--offscreen → sova je mimo, čekáme
 *   .owlAnim--flyBack → sova + miminka letí zleva do pozice
 *   .owlAnim--landed  → všichni sedí, miminka viditelná
 *   .owlAnim--babiesLeave → miminka odlétají nahoru
 *   .owlAnim--final   → jen máma + text (finální stav)
 *
 * Loop phase (CSS třídy na .owlAnim__baby elementech):
 *   .owlAnim__baby--loopEnter{Left|Right|Top}  → přílet z náhodné strany
 *   .owlAnim__baby--loopSitting                 → idle animace (mrkání, bob)
 *   .owlAnim__baby--loopLeave{Left|Right|Top}   → odlet společně
 *
 * Timing se řídí CSS custom properties z Customizeru:
 *   --owl-fly-speed (default 1.5s)
 *
 * @package MSBela
 * @since   2.50.0
 */

/* =========================================================================
 * 1. Layout – animation wrapper
 * ====================================================================== */

.owlAnim {
    display: inline-flex;
    align-items: center;
    position: relative;
    /* Owl flies UNDER menu – lower z-index than .mainNav */
    z-index: 0;
}

.owlAnim__mama {
    position: relative;
    z-index: 1;
    flex-shrink: 0;
}

/* =========================================================================
 * 2. Baby owl base styles – hidden by default
 * ====================================================================== */

.owlAnim__baby {
    display: inline-flex;
    align-items: center;
    flex-shrink: 0;
    opacity: 0;
    visibility: hidden;
    position: relative;
    z-index: 1;
    /* Start scaled down for entrance effect */
    transform: scale(0.8);
    /* NOTE: No transition here – animations handle all state changes.
     * A base transition on transform/opacity would conflict with animation
     * classes and cause 0.3s flicker when animation class is removed. */
}

.owlAnim__baby svg {
    display: block;
    overflow: visible;
}

/* =========================================================================
 * 3. mainNav z-index override – owl flies BEHIND menu text
 * ====================================================================== */

.owlAnim-active .mainNav {
    position: relative;
    z-index: 2;
}

.owlAnim-active .siteHeader__ctas {
    position: relative;
    z-index: 2;
}

.owlAnim-active .navToggle {
    position: relative;
    z-index: 2;
}

/* =========================================================================
 * 4. Animation text – always visible (unlike tagline which hides on mobile)
 * ====================================================================== */

.owlAnim__text1 {
    font-family: var(--owl-text1-font, var(--font-display));
    font-size: var(--owl-text1-size, 22px);
    font-weight: 400;
    color: var(--ds-teal-dark);
    line-height: 1.2;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.owlAnim__text2 {
    font-family: var(--owl-text2-font, var(--font-ui));
    font-size: var(--owl-text2-size, 16px);
    font-weight: var(--font-weight-semibold, 600);
    color: var(--ds-text-light, #666);
    line-height: 1.3;
    /* Always visible, unlike normal tagline */
    display: block;
}

/* =========================================================================
 * 5. Keyframes – Flight
 * ====================================================================== */

/* ── Fly out to the right ── */
@keyframes owlAnimFlyOut {
    0% {
        transform: translateX(0) translateY(0) rotate(0deg);
    }
    15% {
        transform: translateX(5%) translateY(-12px) rotate(5deg);
    }
    50% {
        transform: translateX(50vw) translateY(-20px) rotate(3deg);
    }
    100% {
        transform: translateX(calc(100vw + 80px)) translateY(-8px) rotate(2deg);
    }
}

/* ── Fly back from the left (mama) ── */
@keyframes owlAnimFlyBack {
    0% {
        transform: translateX(calc(-100vw - 80px)) translateY(-15px) rotate(-2deg);
    }
    50% {
        transform: translateX(-50%) translateY(-22px) rotate(-4deg);
    }
    85% {
        transform: translateX(0) translateY(-8px) rotate(-1deg);
    }
    100% {
        transform: translateX(0) translateY(0) rotate(0deg);
    }
}

/* ── Baby fly back – slight delay behind mama ── */
@keyframes owlAnimBabyFlyBack1 {
    0% {
        transform: translateX(calc(-100vw - 140px)) translateY(-18px) rotate(-3deg) scale(0.85);
        opacity: 0;
    }
    15% {
        opacity: 1;
    }
    50% {
        transform: translateX(-60%) translateY(-25px) rotate(-5deg) scale(0.95);
        opacity: 1;
    }
    85% {
        transform: translateX(0) translateY(-10px) rotate(-1deg) scale(1);
    }
    100% {
        transform: translateX(0) translateY(0) rotate(0deg) scale(1);
        opacity: 1;
    }
}

@keyframes owlAnimBabyFlyBack2 {
    0% {
        transform: translateX(calc(-100vw - 200px)) translateY(-12px) rotate(-2deg) scale(0.8);
        opacity: 0;
    }
    20% {
        opacity: 1;
    }
    50% {
        transform: translateX(-70%) translateY(-20px) rotate(-3deg) scale(0.9);
        opacity: 1;
    }
    85% {
        transform: translateX(0) translateY(-8px) rotate(-1deg) scale(1);
    }
    100% {
        transform: translateX(0) translateY(0) rotate(0deg) scale(1);
        opacity: 1;
    }
}

/* ── Babies fly away upward ── */
@keyframes owlAnimBabyLeave1 {
    0% {
        transform: translateX(0) translateY(0) rotate(0deg) scale(1);
        opacity: 1;
    }
    40% {
        transform: translateX(-30px) translateY(-40px) rotate(-15deg) scale(0.9);
        opacity: 0.9;
    }
    100% {
        transform: translateX(-120px) translateY(-100px) rotate(-25deg) scale(0.5);
        opacity: 0;
    }
}

@keyframes owlAnimBabyLeave2 {
    0% {
        transform: translateX(0) translateY(0) rotate(0deg) scale(1);
        opacity: 1;
    }
    40% {
        transform: translateX(-50px) translateY(-50px) rotate(-20deg) scale(0.85);
        opacity: 0.9;
    }
    100% {
        transform: translateX(-150px) translateY(-120px) rotate(-30deg) scale(0.4);
        opacity: 0;
    }
}

/* =========================================================================
 * 6. Keyframes – Wing flapping during flight (faster than idle)
 * ====================================================================== */

@keyframes owlAnimFlyWingLeft {
    0%   { transform: rotate(0deg) translateX(0) translateY(0); }
    25%  { transform: rotate(-42deg) translateX(-6px) translateY(-4px); }
    50%  { transform: rotate(5deg) translateX(1px) translateY(0); }
    75%  { transform: rotate(-42deg) translateX(-6px) translateY(-4px); }
    100% { transform: rotate(0deg) translateX(0) translateY(0); }
}

@keyframes owlAnimFlyWingRight {
    0%   { transform: rotate(0deg) translateX(0) translateY(0); }
    25%  { transform: rotate(42deg) translateX(6px) translateY(-4px); }
    50%  { transform: rotate(-5deg) translateX(-1px) translateY(0); }
    75%  { transform: rotate(42deg) translateX(6px) translateY(-4px); }
    100% { transform: rotate(0deg) translateX(0) translateY(0); }
}

/* Baby wing flap – smaller amplitude */
@keyframes owlAnimBabyWingLeft {
    0%   { transform: rotate(0deg); }
    25%  { transform: rotate(-35deg) translateX(-3px) translateY(-2px); }
    50%  { transform: rotate(3deg); }
    75%  { transform: rotate(-35deg) translateX(-3px) translateY(-2px); }
    100% { transform: rotate(0deg); }
}

@keyframes owlAnimBabyWingRight {
    0%   { transform: rotate(0deg); }
    25%  { transform: rotate(35deg) translateX(3px) translateY(-2px); }
    50%  { transform: rotate(-3deg); }
    75%  { transform: rotate(35deg) translateX(3px) translateY(-2px); }
    100% { transform: rotate(0deg); }
}

/* ── Baby idle blink ── */
@keyframes babyOwlBlink {
    0%, 86%, 100% { transform: scaleY(1); }
    90%, 96%      { transform: scaleY(0.06); }
    93%           { transform: scaleY(0.03); }
}

/* ── Baby idle bob ── */
@keyframes babyOwlBob {
    0%, 100% { transform: translateY(0) rotate(0deg); }
    30%      { transform: translateY(-1.5px) rotate(1.5deg); }
    70%      { transform: translateY(0.5px) rotate(-0.8deg); }
}

/* =========================================================================
 * 7. State: FLY_OUT – mama flies right
 * ====================================================================== */

.owlAnim--flyOut .owlAnim__mama {
    animation: owlAnimFlyOut var(--owl-fly-speed, 1.5s) cubic-bezier(0.4, 0, 0.2, 1) forwards;
}

/* Fast wing flap during flight */
.owlAnim--flyOut .owlAnim__mama .headerOwl__wingLeft {
    animation: owlAnimFlyWingLeft 0.3s linear infinite !important;
}

.owlAnim--flyOut .owlAnim__mama .headerOwl__wingRight {
    animation: owlAnimFlyWingRight 0.3s linear infinite !important;
}

/* Stop bob during flight */
.owlAnim--flyOut .owlAnim__mama .siteHeader__owlSvg {
    animation: none !important;
}

/* =========================================================================
 * 8. State: OFFSCREEN – mama invisible
 * ====================================================================== */

.owlAnim--offscreen .owlAnim__mama {
    transform: translateX(calc(100vw + 80px));
    opacity: 0;
}

/* =========================================================================
 * 9. State: FLY_BACK – mama + babies fly in from left
 * ====================================================================== */

.owlAnim--flyBack .owlAnim__mama {
    animation: owlAnimFlyBack var(--owl-fly-speed, 1.5s) cubic-bezier(0.4, 0, 0.2, 1) forwards;
}

.owlAnim--flyBack .owlAnim__mama .headerOwl__wingLeft {
    animation: owlAnimFlyWingLeft 0.3s linear infinite !important;
}

.owlAnim--flyBack .owlAnim__mama .headerOwl__wingRight {
    animation: owlAnimFlyWingRight 0.3s linear infinite !important;
}

.owlAnim--flyBack .owlAnim__mama .siteHeader__owlSvg {
    animation: none !important;
}

/* Babies appear during fly-back */
.owlAnim--flyBack .owlAnim__baby {
    visibility: visible;
}

.owlAnim--flyBack .owlAnim__baby--1 {
    animation: owlAnimBabyFlyBack1 var(--owl-fly-speed, 1.5s) cubic-bezier(0.4, 0, 0.2, 1) forwards;
}

.owlAnim--flyBack .owlAnim__baby--2 {
    animation: owlAnimBabyFlyBack2 var(--owl-fly-speed, 1.5s) cubic-bezier(0.4, 0, 0.2, 1) forwards;
}

/* Baby wings flap during flight */
.owlAnim--flyBack .owlAnim__baby .babyOwl__wingLeft {
    animation: owlAnimBabyWingLeft 0.35s linear infinite;
}

.owlAnim--flyBack .owlAnim__baby .babyOwl__wingRight {
    animation: owlAnimBabyWingRight 0.35s linear infinite;
}

/* =========================================================================
 * 9b. Local idle wing keyframes – duplicated from main.css to avoid
 *     cross-file dependency. If main.css renames these keyframes,
 *     owl animation wing idle still works.
 * ====================================================================== */

@keyframes owlAnimIdleWingLeft {
    0%, 70%, 100% { transform: rotate(0deg) translateX(0); }
    78%           { transform: rotate(-28deg) translateX(-4px); }
    92%           { transform: rotate(-26deg) translateX(-4px); }
}

@keyframes owlAnimIdleWingRight {
    0%, 70%, 100% { transform: rotate(0deg) translateX(0); }
    78%           { transform: rotate(28deg) translateX(4px); }
    92%           { transform: rotate(26deg) translateX(4px); }
}

/* =========================================================================
 * 10. State: LANDED – all sitting, babies visible with idle animations
 * ====================================================================== */

.owlAnim--landed .owlAnim__baby {
    visibility: visible;
    opacity: 1;
    transform: scale(1);
}

/* Baby idle animations */
.owlAnim--landed .owlAnim__baby .babyOwl__eyes {
    transform-origin: 32px 22px;
    animation: babyOwlBlink 3.5s ease-in-out infinite 0.8s;
}

.owlAnim--landed .owlAnim__baby--2 .babyOwl__eyes {
    animation-delay: 1.5s;
    animation-duration: 4.2s;
}

.owlAnim--landed .owlAnim__baby svg {
    animation: babyOwlBob 4s ease-in-out infinite;
}

.owlAnim--landed .owlAnim__baby--2 svg {
    animation-delay: 0.7s;
    animation-duration: 4.5s;
}

/* Baby wings idle – gentle stretch */
.owlAnim--landed .owlAnim__baby .babyOwl__wingLeft {
    transform-origin: 20px 40px;
    animation: owlAnimIdleWingLeft 9s ease-in-out infinite 2s;
}

.owlAnim--landed .owlAnim__baby .babyOwl__wingRight {
    transform-origin: 44px 40px;
    animation: owlAnimIdleWingRight 9s ease-in-out infinite 2s;
}

/* =========================================================================
 * 11. State: BABIES_LEAVE – babies fly away
 * ====================================================================== */

.owlAnim--babiesLeave .owlAnim__baby {
    visibility: visible;
}

.owlAnim--babiesLeave .owlAnim__baby--1 {
    animation: owlAnimBabyLeave1 1.2s cubic-bezier(0.4, 0, 0.2, 1) forwards;
}

.owlAnim--babiesLeave .owlAnim__baby--2 {
    animation: owlAnimBabyLeave2 1.4s cubic-bezier(0.4, 0, 0.2, 1) forwards;
}

/* Flap wings while leaving */
.owlAnim--babiesLeave .owlAnim__baby .babyOwl__wingLeft {
    animation: owlAnimBabyWingLeft 0.3s linear infinite;
}

.owlAnim--babiesLeave .owlAnim__baby .babyOwl__wingRight {
    animation: owlAnimBabyWingRight 0.3s linear infinite;
}

/* =========================================================================
 * 12. State: FINAL – only mama + text, babies hidden
 * ====================================================================== */

.owlAnim--final .owlAnim__baby {
    opacity: 0;
    visibility: hidden;
    transform: scale(0.5);
}

/* Mama returns to normal idle animations – handled by main.css defaults */

/* =========================================================================
 * 13. prefers-reduced-motion – skip everything, show final state
 * ====================================================================== */

@media (prefers-reduced-motion: reduce) {
    .owlAnim,
    .owlAnim__mama,
    .owlAnim__baby,
    .owlAnim__daddy,
    .owlAnim__heart {
        animation: none !important;
        transition: none !important;
    }

    /* Show final state immediately – no babies, daddy, or heart */
    .owlAnim__baby,
    .owlAnim__daddy,
    .owlAnim__heart {
        display: none !important;
    }

    .owlAnim__mama {
        transform: none !important;
        opacity: 1 !important;
    }
}

/* =========================================================================
 * 14. Responsive tweaks
 * ====================================================================== */

/* Mobile: smaller text sizes */
@media (max-width: 479px) {
    .owlAnim__text1 {
        font-size: calc(var(--owl-text1-size, 22px) * 0.75);
        white-space: normal;
    }

    .owlAnim__text2 {
        font-size: calc(var(--owl-text2-size, 16px) * 0.8);
    }

    /* Baby owls slightly smaller on tiny screens */
    .owlAnim__baby svg {
        width: 24px;
        height: 24px;
    }
}

@media (min-width: 480px) and (max-width: 767px) {
    .owlAnim__text1 {
        font-size: calc(var(--owl-text1-size, 22px) * 0.85);
        white-space: normal;
    }

    .owlAnim__text2 {
        font-size: calc(var(--owl-text2-size, 16px) * 0.9);
    }
}

/* Tablet portrait – text wrapping allowed */
@media (max-width: 767px) {
    .owlAnim__text1 {
        white-space: normal;
    }
}

/* =========================================================================
 * 15. Baby owl gap spacing
 * ====================================================================== */

.owlAnim__baby + .owlAnim__baby {
    margin-left: 2px;
}

/* FIX: :last-of-type nefunguje správně po přidání daddy/heart <span>
 * elementů – proto explicitní třída --2. */
.owlAnim__baby--2 {
    margin-right: 4px;
}

/* =========================================================================
 * 16. LOOP PHASE – Keyframes: baby enter from 3 directions
 * ====================================================================== */

/* ── Enter from LEFT ── */
@keyframes loopEnterLeft {
    0% {
        transform: translateX(calc(-100vw - 60px)) translateY(-12px) rotate(-8deg) scale(0.7);
        opacity: 0;
    }
    10% { opacity: 1; }
    60% {
        transform: translateX(-20px) translateY(-18px) rotate(-3deg) scale(0.95);
    }
    85% {
        transform: translateX(2px) translateY(-4px) rotate(1deg) scale(1);
    }
    100% {
        transform: translateX(0) translateY(0) rotate(0deg) scale(1);
        opacity: 1;
    }
}

/* ── Enter from RIGHT ── */
@keyframes loopEnterRight {
    0% {
        transform: translateX(calc(100vw + 60px)) translateY(-10px) rotate(8deg) scale(0.7);
        opacity: 0;
    }
    10% { opacity: 1; }
    60% {
        transform: translateX(20px) translateY(-20px) rotate(4deg) scale(0.95);
    }
    85% {
        transform: translateX(-2px) translateY(-3px) rotate(-1deg) scale(1);
    }
    100% {
        transform: translateX(0) translateY(0) rotate(0deg) scale(1);
        opacity: 1;
    }
}

/* ── Enter from TOP ── */
@keyframes loopEnterTop {
    0% {
        transform: translateX(0) translateY(calc(-100vh - 40px)) rotate(0deg) scale(0.6);
        opacity: 0;
    }
    10% { opacity: 1; }
    40% {
        transform: translateX(8px) translateY(-60px) rotate(5deg) scale(0.85);
    }
    70% {
        transform: translateX(-4px) translateY(-15px) rotate(-3deg) scale(0.95);
    }
    100% {
        transform: translateX(0) translateY(0) rotate(0deg) scale(1);
        opacity: 1;
    }
}

/* =========================================================================
 * 17. LOOP PHASE – Keyframes: baby leave in 3 directions
 * ====================================================================== */

/* ── Leave to LEFT ── */
@keyframes loopLeaveLeft {
    0% {
        transform: translateX(0) translateY(0) rotate(0deg) scale(1);
        opacity: 1;
    }
    20% {
        transform: translateX(-10px) translateY(-15px) rotate(-5deg) scale(1);
        opacity: 1;
    }
    100% {
        transform: translateX(calc(-100vw - 80px)) translateY(-30px) rotate(-12deg) scale(0.7);
        opacity: 0;
    }
}

/* ── Leave to RIGHT ── */
@keyframes loopLeaveRight {
    0% {
        transform: translateX(0) translateY(0) rotate(0deg) scale(1);
        opacity: 1;
    }
    20% {
        transform: translateX(10px) translateY(-15px) rotate(5deg) scale(1);
        opacity: 1;
    }
    100% {
        transform: translateX(calc(100vw + 80px)) translateY(-25px) rotate(10deg) scale(0.7);
        opacity: 0;
    }
}

/* ── Leave to TOP ── */
@keyframes loopLeaveTop {
    0% {
        transform: translateX(0) translateY(0) rotate(0deg) scale(1);
        opacity: 1;
    }
    30% {
        transform: translateX(5px) translateY(-30px) rotate(-4deg) scale(0.95);
        opacity: 1;
    }
    100% {
        transform: translateX(-10px) translateY(calc(-100vh - 40px)) rotate(-8deg) scale(0.5);
        opacity: 0;
    }
}

/* =========================================================================
 * 18. LOOP PHASE – State classes on baby elements
 * ====================================================================== */

/* ── Enter classes ── */
.owlAnim__baby--loopEnterLeft {
    visibility: visible !important;
    animation: loopEnterLeft 1.2s cubic-bezier(0.34, 1.2, 0.64, 1) forwards;
}

.owlAnim__baby--loopEnterRight {
    visibility: visible !important;
    animation: loopEnterRight 1.2s cubic-bezier(0.34, 1.2, 0.64, 1) forwards;
}

.owlAnim__baby--loopEnterTop {
    visibility: visible !important;
    animation: loopEnterTop 1.2s cubic-bezier(0.34, 1.2, 0.64, 1) forwards;
}

/* Wing flap during loop entry */
.owlAnim__baby--loopEnterLeft .babyOwl__wingLeft,
.owlAnim__baby--loopEnterRight .babyOwl__wingLeft,
.owlAnim__baby--loopEnterTop .babyOwl__wingLeft {
    animation: owlAnimBabyWingLeft 0.32s linear infinite;
}

.owlAnim__baby--loopEnterLeft .babyOwl__wingRight,
.owlAnim__baby--loopEnterRight .babyOwl__wingRight,
.owlAnim__baby--loopEnterTop .babyOwl__wingRight {
    animation: owlAnimBabyWingRight 0.32s linear infinite;
}

/* ── Sitting class – idle animations ── */
.owlAnim__baby--loopSitting {
    visibility: visible !important;
    opacity: 1 !important;
    transform: scale(1) !important;
}

.owlAnim__baby--loopSitting svg {
    animation: babyOwlBob 4s ease-in-out infinite;
}

.owlAnim__baby--loopSitting .babyOwl__eyes {
    transform-origin: 32px 22px;
    animation: babyOwlBlink 3.5s ease-in-out infinite 0.5s;
}

/* Second baby: offset animation timing for natural feel */
.owlAnim__baby--2.owlAnim__baby--loopSitting svg {
    animation-delay: 0.6s;
    animation-duration: 4.4s;
}

.owlAnim__baby--2.owlAnim__baby--loopSitting .babyOwl__eyes {
    animation-delay: 1.2s;
    animation-duration: 4s;
}

/* Gentle wing stretch while sitting */
.owlAnim__baby--loopSitting .babyOwl__wingLeft {
    transform-origin: 20px 40px;
    animation: owlAnimIdleWingLeft 9s ease-in-out infinite 1.5s;
}

.owlAnim__baby--loopSitting .babyOwl__wingRight {
    transform-origin: 44px 40px;
    animation: owlAnimIdleWingRight 9s ease-in-out infinite 1.5s;
}

/* ── Leave classes ── */
.owlAnim__baby--loopLeaveLeft {
    visibility: visible !important;
    animation: loopLeaveLeft 1.4s cubic-bezier(0.4, 0, 0.2, 1) forwards;
}

.owlAnim__baby--loopLeaveRight {
    visibility: visible !important;
    animation: loopLeaveRight 1.4s cubic-bezier(0.4, 0, 0.2, 1) forwards;
}

.owlAnim__baby--loopLeaveTop {
    visibility: visible !important;
    animation: loopLeaveTop 1.4s cubic-bezier(0.4, 0, 0.2, 1) forwards;
}

/* Wing flap during loop leave */
.owlAnim__baby--loopLeaveLeft .babyOwl__wingLeft,
.owlAnim__baby--loopLeaveRight .babyOwl__wingLeft,
.owlAnim__baby--loopLeaveTop .babyOwl__wingLeft {
    animation: owlAnimBabyWingLeft 0.28s linear infinite;
}

.owlAnim__baby--loopLeaveLeft .babyOwl__wingRight,
.owlAnim__baby--loopLeaveRight .babyOwl__wingRight,
.owlAnim__baby--loopLeaveTop .babyOwl__wingRight {
    animation: owlAnimBabyWingRight 0.28s linear infinite;
}

/* Stagger: baby 2 leaves slightly delayed via animation-delay */
.owlAnim__baby--2.owlAnim__baby--loopLeaveLeft,
.owlAnim__baby--2.owlAnim__baby--loopLeaveRight,
.owlAnim__baby--2.owlAnim__baby--loopLeaveTop {
    animation-delay: 0.15s;
}

/* =========================================================================
 * 19. DADDY OWL – base styles (hidden by default)
 * ====================================================================== */

.owlAnim__daddy {
    display: inline-flex;
    align-items: center;
    flex-shrink: 0;
    position: absolute;
    right: -70px;
    top: 50%;
    transform: translateY(-50%);
    opacity: 0;
    visibility: hidden;
    z-index: 0;
}

.owlAnim__daddy svg {
    display: block;
    overflow: visible;
}

/* ── Heart ── */
.owlAnim__heart {
    position: absolute;
    top: -8px;
    left: 50%;
    transform: translateX(-50%) scale(0);
    opacity: 0;
    z-index: 10;
    pointer-events: none;
}

/* =========================================================================
 * 20. DADDY – Keyframes
 * ====================================================================== */

/* ── Daddy flies in from right, stops next to mama ── */
@keyframes daddyFlyIn {
    0% {
        transform: translateX(calc(100vw + 80px)) translateY(-50%) rotate(3deg);
        opacity: 0;
    }
    10% { opacity: 1; }
    60% {
        transform: translateX(20px) translateY(calc(-50% - 12px)) rotate(2deg);
    }
    85% {
        transform: translateX(-2px) translateY(calc(-50% - 3px)) rotate(-1deg);
    }
    100% {
        transform: translateX(0) translateY(-50%) rotate(0deg);
        opacity: 1;
    }
}

/* ── Daddy lean in (kiss) ── */
@keyframes daddyLeanIn {
    0%   { transform: translateX(0) translateY(-50%) rotate(0deg); }
    40%  { transform: translateX(-8px) translateY(-50%) rotate(-8deg); }
    60%  { transform: translateX(-12px) translateY(-50%) rotate(-10deg); }
    80%  { transform: translateX(-6px) translateY(-50%) rotate(-4deg); }
    100% { transform: translateX(0) translateY(-50%) rotate(0deg); }
}

/* ── Daddy flies away upward-right ── */
@keyframes daddyFlyAway {
    0% {
        transform: translateX(0) translateY(-50%) rotate(0deg);
        opacity: 1;
    }
    20% {
        transform: translateX(15px) translateY(calc(-50% - 20px)) rotate(5deg);
    }
    100% {
        transform: translateX(calc(100vw + 80px)) translateY(calc(-50% - 60px)) rotate(12deg);
        opacity: 0;
    }
}

/* ── Heart pop ── */
@keyframes heartPop {
    0% {
        transform: translateX(-50%) scale(0);
        opacity: 0;
    }
    20% {
        transform: translateX(-50%) scale(1.3);
        opacity: 1;
    }
    40% {
        transform: translateX(-50%) scale(1);
        opacity: 1;
    }
    70% {
        transform: translateX(-50%) translateY(-14px) scale(1.1);
        opacity: 0.9;
    }
    100% {
        transform: translateX(-50%) translateY(-28px) scale(0.6);
        opacity: 0;
    }
}

/* ── Daddy wing flap during flight ── */
@keyframes daddyWingFlapLeft {
    0%   { transform: rotate(0deg); }
    25%  { transform: rotate(-45deg) translateX(-7px) translateY(-5px); }
    50%  { transform: rotate(5deg); }
    75%  { transform: rotate(-45deg) translateX(-7px) translateY(-5px); }
    100% { transform: rotate(0deg); }
}

@keyframes daddyWingFlapRight {
    0%   { transform: rotate(0deg); }
    25%  { transform: rotate(45deg) translateX(7px) translateY(-5px); }
    50%  { transform: rotate(-5deg); }
    75%  { transform: rotate(45deg) translateX(7px) translateY(-5px); }
    100% { transform: rotate(0deg); }
}

/* ── Daddy idle blink ── */
@keyframes daddyBlink {
    0%, 88%, 100% { transform: scaleY(1); }
    91%, 95%      { transform: scaleY(0.06); }
    93%           { transform: scaleY(0.03); }
}

/* =========================================================================
 * 21. DADDY – State classes (applied by JS)
 * ====================================================================== */

/* ── daddyFlyIn ── */
.owlAnim__daddy--flyIn {
    visibility: visible !important;
    opacity: 1;
    animation: daddyFlyIn 1.4s cubic-bezier(0.34, 1.2, 0.64, 1) forwards;
}

.owlAnim__daddy--flyIn .daddyOwl__wingLeft {
    transform-origin: 20px 44px;
    animation: daddyWingFlapLeft 0.3s linear infinite;
}

.owlAnim__daddy--flyIn .daddyOwl__wingRight {
    transform-origin: 44px 44px;
    animation: daddyWingFlapRight 0.3s linear infinite;
}

/* ── daddyKiss ── */
.owlAnim__daddy--kiss {
    visibility: visible !important;
    opacity: 1;
    animation: daddyLeanIn 1.2s ease-in-out forwards;
}

.owlAnim__daddy--kiss .daddyOwl__eyes {
    transform-origin: 32px 22px;
    animation: daddyBlink 2s ease-in-out infinite 0.3s;
}

/* Heart appears during kiss */
.owlAnim__heart--visible {
    animation: heartPop 1.5s ease-out forwards;
}

/* ── daddyFlyAway ── */
.owlAnim__daddy--flyAway {
    visibility: visible !important;
    animation: daddyFlyAway 1.5s cubic-bezier(0.4, 0, 0.2, 1) forwards;
}

.owlAnim__daddy--flyAway .daddyOwl__wingLeft {
    transform-origin: 20px 44px;
    animation: daddyWingFlapLeft 0.28s linear infinite;
}

.owlAnim__daddy--flyAway .daddyOwl__wingRight {
    transform-origin: 44px 44px;
    animation: daddyWingFlapRight 0.28s linear infinite;
}