/* =====================================================================
   Saudi National Day 2026 — Falling Balloons Effect (TEMPORARY)
   =====================================================================
   Home page ONLY. Built and injected entirely by
   national-day-balloons-2026.js (this file only styles what that script
   creates) - both are included ONLY from resources/views/web/home.blade.php,
   so the effect can never appear on any other page.

   REMOVAL: delete the two <link>/<script> tags for
   "national-day-balloons-2026" from home.blade.php. Nothing else to change -
   no leftover DOM, no CSS/JS dependency anywhere else in the project.
   ===================================================================== */

.national-day-balloons {
    position: fixed;
    inset: 0;
    width: 100%;
    height: 100%;
    overflow: hidden;
    /* Purely decorative: never intercepts clicks/taps on the navbar,
       product cards, buttons or the WhatsApp button. */
    pointer-events: none;
    /* Comfortably above ordinary page content (which this theme keeps at
       z-index 1-3) but well below the header/menu (up to 3000), Bootstrap
       modals (1050+) and the floating WhatsApp button (10000) - so none of
       those are ever visually covered. */
    z-index: 40;
}

.national-day-balloon {
    position: absolute;
    top: -12vh;
    /* left / animation-duration / animation-delay / scale / drift are set
       per-balloon as inline custom properties by the JS. */
    left: var(--nd-left, 50%);
    width: calc(48px * var(--nd-scale, 1));
    height: calc(62px * var(--nd-scale, 1));
    opacity: 0;
    will-change: transform, opacity;
    animation-name: nd-balloon-fall;
    animation-timing-function: linear;
    animation-fill-mode: forwards;
    animation-duration: var(--nd-duration, 8s);
    animation-delay: var(--nd-delay, 0s);
}

/* ----- balloon shape: body + knot + string, pure CSS, no images ----- */
.national-day-balloon .nd-body {
    position: absolute;
    inset: 0;
    border-radius: 50% 50% 50% 50% / 58% 58% 42% 42%;
    box-shadow: inset -6px -8px 10px rgba(0, 0, 0, .12),
                inset 6px 6px 10px rgba(255, 255, 255, .25),
                0 6px 14px rgba(0, 0, 0, .10);
}

.national-day-balloon.nd-green .nd-body {
    background: linear-gradient(160deg, #1a9a5c 0%, #006C35 55%, #004D27 100%);
}

.national-day-balloon.nd-white .nd-body {
    background: linear-gradient(160deg, #ffffff 0%, #f2f2f2 55%, #e3ece7 100%);
    box-shadow: inset -6px -8px 10px rgba(0, 108, 53, .10),
                inset 6px 6px 10px rgba(255, 255, 255, .6),
                0 6px 14px rgba(0, 0, 0, .08);
}

.national-day-balloon .nd-knot {
    position: absolute;
    left: 50%;
    bottom: -6%;
    width: 12%;
    height: 8%;
    transform: translateX(-50%);
    border-radius: 0 0 50% 50%;
}

.national-day-balloon.nd-green .nd-knot {
    background: #004D27;
}

.national-day-balloon.nd-white .nd-knot {
    background: #d8ded9;
}

.national-day-balloon .nd-string {
    position: absolute;
    left: 50%;
    top: 100%;
    width: 1px;
    height: 26px;
    background: rgba(0, 0, 0, .18);
    transform: translateX(-50%);
}

/* ----- fall + gentle sway + spin, fading out near the end ----- */
@keyframes nd-balloon-fall {
    0% {
        opacity: 0;
        transform: translate3d(0, 0, 0) rotate(0deg);
    }

    8% {
        opacity: 1;
    }

    25% {
        transform: translate3d(var(--nd-drift, 24px), 25vh, 0) rotate(var(--nd-rotate, 6deg));
    }

    50% {
        transform: translate3d(calc(var(--nd-drift, 24px) * -1), 50vh, 0) rotate(calc(var(--nd-rotate, 6deg) * -1));
    }

    75% {
        transform: translate3d(var(--nd-drift, 24px), 75vh, 0) rotate(var(--nd-rotate, 6deg));
    }

    92% {
        opacity: 1;
    }

    100% {
        opacity: 0;
        transform: translate3d(0, 118vh, 0) rotate(0deg);
    }
}

/* Respect the user's OS-level motion preference: no animation at all. */
@media (prefers-reduced-motion: reduce) {
    .national-day-balloons {
        display: none;
    }
}