/* Page border decoration: blinking bulbs (top/left/right) + flying Madani flags (left/right)
   Fixed to viewport, aria-hidden, pointer-events:none — purely decorative, never blocks clicks. */
:root {
    --pd-green: #01411C;
    --pd-green-lit: #006600;
    --pd-white: #FFFFFF;
    --pd-gold: #C9A227;
}

.pd14 {
    position: fixed;
    inset: 0;
    /* must beat the sticky navbar's z-index: 99999999 (.header-style2.stricky-fixed)
       so the top bunting stays visible once the header pins on scroll */
    z-index: 2147483000;
    pointer-events: none;
    overflow: hidden;
    contain: strict;
    height: 100vh;
}

.pd14 * {
    pointer-events: none;
    box-sizing: border-box;
}

.pd-glow {
    position: absolute;
    will-change: opacity;
}

.pd-glow--l, .pd-glow--r {
    top: 0;
    bottom: 0;
    width: clamp(40px, 6vw, 92px);
    animation: pd-glow 7s ease-in-out infinite;
}

.pd-glow--l {
    left: 0;
    background: linear-gradient(to right, rgb(1 65 28 / .30), rgb(0 102 0 / .10) 45%, transparent);
}

.pd-glow--r {
    right: 0;
    background: linear-gradient(to left, rgb(1 65 28 / .30), rgb(0 102 0 / .10) 45%, transparent);
    animation-delay: -3.5s;
}

.pd-glow--t {
    left: 0;
    right: 0;
    top: 0;
    height: clamp(46px, 7vh, 86px);
    background: linear-gradient(to bottom, rgb(1 65 28 / .26), transparent);
    animation: pd-glow 9s ease-in-out infinite;
}

.pd-frame {
    position: absolute;
    inset: 0;
}

.pd-frame::after {
    content: "";
    position: absolute;
    inset: 6px;
    border: 1px solid rgb(201 162 39 / .28);
    border-radius: 6px;
}

.pd-rail {
    position: absolute;
    top: 0;
    bottom: 0;
    width: 2px;
    opacity: .55;
    overflow: hidden;
}

.pd-rail::before {
    content: "";
    position: absolute;
    left: 0;
    top: -46vh;
    width: 100%;
    height: 196vh;
    background: repeating-linear-gradient(to bottom, transparent 0, rgb(255 255 255 / .9) 3.7vh, rgb(0 102 0 / .9) 8.3vh, transparent 15.6vh, transparent 46vh);
    animation: pd-flow 14s linear infinite;
    will-change: transform;
}

.pd-rail--l {
    left: 3px;
}

.pd-rail--r {
    right: 3px;
}

.pd-rail--r::before {
    animation-delay: -7s;
}

.pd-top-bunt {
    position: absolute;
    top: -10px;
    left: 50%;
    height: 38px;
    width: 100%;
    display: flex;
    align-items: flex-start;
    justify-content: flex-start;
    gap: 37px;
    transform: translateX(-50%);
    border-top: 2px solid rgb(1 65 28 / .70);
    flex-wrap: nowrap;
    overflow: hidden;
    contain: layout paint style;
}

.pd-top-bunt .pd-light {
    --light: #f8fbff;
    --light-glow: #fff;
    position: relative;
    top: 10px;
    display: block;
    width: 8px;
    height: 10px;
    margin-top: 2px;
    flex: 0 0 auto;
    border-radius: 50%;
    background: var(--light);
    box-shadow: 0 0 7px var(--light-glow), 0 0 16px var(--light-glow);
    animation: pd-side-light-glow 2.4s ease-in-out infinite;
}

.pd-top-bunt .pd-light::before {
    content: '';
    position: absolute;
    top: -5px;
    left: 2px;
    width: 4px;
    height: 5px;
    border-radius: 2px;
    background: #3b321d;
}

.pd-top-bunt .pd-light:nth-child(3n+1) {
    --light: #f8fbff;
    --light-glow: #fff;
}

.pd-top-bunt .pd-light:nth-child(3n+2) {
    --light: #2499e8;
    --light-glow: #2499e8;
    animation-delay: -.8s;
}

.pd-top-bunt .pd-light:nth-child(3n) {
    --light: #18aa56;
    --light-glow: #18aa56;
    animation-delay: -1.5s;
}

.pd-bunt {
    position: absolute;
    top: 20px;
    bottom: 7px;
    width: 36px;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    gap: 14px;
    transform-origin: top center;
    animation: pd-sway 6.5s ease-in-out infinite;
}

.pd-bunt--l {
    left: -7px;
    align-items: flex-start;
}

.pd-bunt--r {
    right: -7px;
    align-items: flex-end;
    animation-delay: -3s;
}

.pd-bunt::before {
    content: "";
    position: absolute;
    top: 0;
    bottom: 0;
    width: 1px;
    border-radius: 2px;
    background: linear-gradient(180deg, rgb(201 162 39 / .75), rgb(201 162 39 / .10));
}

.pd-bunt--l::before {
    left: 6px;
}

.pd-bunt--r::before {
    right: 6px;
}

.pd-bunt .pd-light {
    --light: #f8fbff;
    --light-glow: #fff;
    position: relative;
    display: block;
    width: 8px;
    height: 10px;
    flex: 0 0 auto;
    border-radius: 50%;
    background: var(--light);
    box-shadow: 0 0 7px var(--light-glow), 0 0 16px var(--light-glow);
    animation: pd-side-light-glow 2.4s ease-in-out infinite;
}

.pd-bunt.pd-bunt--l .pd-light {
    left: 8px;
    top: 5px;
    transform: rotate(-15deg);
}

.pd-bunt.pd-bunt--r .pd-light {
    right: 8px;
    top: 5px;
    transform: rotate(15deg);
}

.pd-bunt .pd-light:nth-child(3n+1) {
    --light: #f8fbff;
    --light-glow: #fff;
}

.pd-bunt .pd-light:nth-child(3n+2) {
    --light: #2499e8;
    --light-glow: #2499e8;
    animation-delay: -.8s;
}

.pd-bunt .pd-light:nth-child(3n) {
    --light: #18aa56;
    --light-glow: #18aa56;
    animation-delay: -1.5s;
}

.pd-bunt .pd-light::before {
    content: '';
    position: absolute;
    top: -5px;
    left: 2px;
    width: 4px;
    height: 5px;
    border-radius: 2px;
    background: #3b321d;
}

.pd-flag {
    position: absolute;
    display: flex;
    align-items: flex-start;
    gap: 0;
}

.pd-flag--l {
    left: -25px;
}

.pd-flag--r {
    right: 55px;
    transform: scaleX(-1);
    transform-origin: right top;
}

.pd-flag-image {
    display: block;
    width: 80px;
    height: auto;
    transform-origin: 13% center;
    animation: pd-wave-left var(--flag-duration, 2.9s) cubic-bezier(.45, .05, .55, .95) var(--flag-delay, 0s) var(--flag-direction, normal) infinite;
    will-change: transform;
}

.pd-spark {
    position: absolute;
    width: 3px;
    height: 3px;
    border-radius: 50%;
    background: #fff;
    box-shadow: 0 0 6px 2px rgb(255 255 255 / .55), 0 0 12px 4px rgb(0 102 0 / .35);
    opacity: 0;
    animation: pd-spark 9s ease-in-out infinite;
    will-change: transform, opacity;
}

.pd-spark.pd-g {
    background: #8FD4A4;
    box-shadow: 0 0 6px 2px rgb(0 102 0 / .5);
}

@keyframes pd-glow {
    0%, 100% { opacity: .45; }
    50% { opacity: .85; }
}

@keyframes pd-flow {
    from { transform: translate3d(0, 0, 0); }
    to { transform: translate3d(0, 46vh, 0); }
}

@keyframes pd-sway {
    0%, 100% { transform: rotate(-1.1deg); }
    50% { transform: rotate(1.1deg); }
}

@keyframes pd-side-light-glow {
    0%, 100% { opacity: .18; }
    48% { opacity: 1; }
    56% { opacity: .25; }
    64% { opacity: 1; }
}

@keyframes pd-wave-left {
    0%, 100% { transform: perspective(90px) rotateY(0deg) skewY(0deg) scaleX(1); }
    22% { transform: perspective(90px) rotateY(-17deg) skewY(-5deg) scaleX(.91); }
    49% { transform: perspective(90px) rotateY(10deg) skewY(3deg) scaleX(1.02); }
    73% { transform: perspective(90px) rotateY(-11deg) skewY(-2deg) scaleX(.95); }
}

@keyframes pd-spark {
    0%, 100% { opacity: 0; transform: translateY(8px) scale(.6); }
    45% { opacity: .85; transform: translateY(-10px) scale(1); }
    60% { opacity: .5; transform: translateY(-16px) scale(.9); }
}

@media (max-width: 1024px) {
    .pd-flag-image {
        width: 65px;
    }
    .pd-top-bunt {
        gap: 30px;
    }
    .pd-flag--l {
        left: -18px !important;
    }
    .pd-flag--r {
        right: 48px !important;
    }
}

@media (max-width: 640px) {
    .pd-glow--l, .pd-glow--r {
        width: 26px;
    }
    .pd-bunt {
        bottom: 5px;
    }
    .pd-flag--l {
        left: -16px !important;
    }
    .pd-flag--r {
        right: 45px !important;
    }
    .pd-flag-image {
        width: 60px;
    }
    .pd-top-bunt {
        top: -5px;
        height: 26px;
        border-top-width: 1px;
        gap: 25px;
    }
    .pd-top-bunt .pd-light {
        top: 5px;
    }
    .pd-frame::after {
        inset: 4px;
    }
}

@media (prefers-reduced-motion: reduce) {
    .pd14 *, .pd14 *::before, .pd14 *::after {
        animation: none !important;
        transition: none !important;
    }
    .pd-glow {
        opacity: .5;
    }
    .pd-spark {
        opacity: .45;
    }
}

@media print {
    .pd14 {
        display: none;
    }
}