/* ── Barwi (12 Rabi-ul-Awwal) festive lighting & flying flags overlay ─────
   Fixed, non-interactive decorative layer shown across top/left/right.
   To pause all animation, add class "barwi-paused" to <body> or <html>.
────────────────────────────────────────────────────────────────────────── */
.barwi-paused .pd14 *,
.barwi-paused .pd14 *::before,
.barwi-paused .pd14 *::after {
    animation-play-state: paused !important;
}

.pd14 {
    position: fixed;
    inset: 0;
    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-glow--b {
    left: 0;
    right: 0;
    bottom: 0;
    height: clamp(34px, 5vh, 64px);
    background: linear-gradient(to top, rgb(1 65 28 / .20), transparent);
    animation: pd-glow 11s ease-in-out infinite;
    animation-delay: -5s;
}

.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: 0;
    height: 38px;
    width: 100%;
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 12px;
    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); }
[dir="rtl"] .pd-bunt.pd-bunt--l .pd-light { left: -20px; }
[dir="rtl"] .pd-bunt.pd-bunt--r .pd-light { right: -20px; }

.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-flag--l { left: -18px !important; }
    .pd-flag--r { right: 48px !important; }
    .pd-top-bunt { gap: 30px; }
}

@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 { height: 26px; border-top-width: 1px; gap: 25px; top: -5px; }
    .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; } }