/* PaikmalKart festival decoration overlay — see application/helpers/pk_festive_helper.php + festive.js.
   Only adds layers on top of the site; never changes the size or position of anything that is already there. */

/* ---------- Garland / lights hanging under the header ---------- */
.pkf-deco {
    position: absolute;
    left: 0;
    right: 0;
    top: calc(100% - 7px);
    height: 0;
    pointer-events: none;
    z-index: 2;
}
.pkf-garland {
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    background-repeat: repeat-x;
    background-position: center top;
    filter: drop-shadow(0 2px 2px rgba(80, 30, 0, .18));
    transition: opacity .35s ease, transform .35s ease;
}
.pkf-lights-glowA, .pkf-lights-glowB { filter: none; mix-blend-mode: screen; }
.pkf-lights-glowA { animation: pkf-twinkle 1.8s ease-in-out infinite alternate; }
.pkf-lights-glowB { animation: pkf-twinkle 1.8s ease-in-out -.9s infinite alternate; }
@keyframes pkf-twinkle { 0% { opacity: .15; } 100% { opacity: 1; } }

/* Corner strands (marigold latkan with bell) / Diwali sky lanterns */
.pkf-strand {
    position: absolute;
    top: 2px;
    width: 30px;
    transform-origin: 50% 0;
    animation: pkf-swing 3.8s ease-in-out infinite alternate;
    transition: opacity .4s ease, translate .4s ease;
    filter: drop-shadow(0 3px 3px rgba(80, 30, 0, .22));
}
.pkf-strand svg { display: block; width: 100%; height: auto; }
.pkf-strand--l { left: 12px; }
.pkf-strand--r { right: 12px; animation-delay: -1.9s; }
.pkf-diwali .pkf-strand { width: 40px; top: 0; filter: drop-shadow(0 0 10px rgba(255, 171, 0, .55)); }
.pkf-lantern-glow { animation: pkf-glow 2.4s ease-in-out infinite alternate; }
@keyframes pkf-glow { 0% { opacity: .55; } 100% { opacity: 1; } }
@keyframes pkf-swing { 0% { transform: rotate(-4deg); } 100% { transform: rotate(4deg); } }

/* Once the visitor scrolls into the page, the strands tuck away so they never sit over products. */
.pkf-scrolled .pkf-strand { opacity: 0; translate: 0 -24px; }

@media (max-width: 640px) {
    .pkf-strand { width: 21px; }
    .pkf-strand--l { left: 3px; }
    .pkf-strand--r { right: 3px; }
    .pkf-diwali .pkf-strand { width: 28px; }
}
@media (min-width: 1400px) {
    .pkf-strand { width: 36px; }
    .pkf-strand--l { left: 24px; }
    .pkf-strand--r { right: 24px; }
    .pkf-diwali .pkf-strand { width: 48px; }
}

/* ---------- Petal / sparkle shower ---------- */
.pkf-shower {
    position: fixed;
    inset: 0;
    overflow: hidden;
    pointer-events: none;
    z-index: 2147482000;
}
.pkf-piece {
    position: absolute;
    top: 0;
    display: block;
    transform: translate3d(0, -12vh, 0);
    animation-name: pkf-fall;
    animation-timing-function: cubic-bezier(.35, .1, .65, .9);
    animation-fill-mode: both;
    will-change: transform;
}
.pkf-piece b {
    display: block;
    width: 100%;
    height: 100%;
    background: center / contain no-repeat;
    animation: pkf-flutter ease-in-out infinite alternate;
    filter: drop-shadow(0 2px 2px rgba(0, 0, 0, .12));
}
@keyframes pkf-fall {
    0% { transform: translate3d(0, -12vh, 0); opacity: 0; }
    6% { opacity: 1; }
    88% { opacity: 1; }
    100% { transform: translate3d(0, 108vh, 0); opacity: 0; }
}
@keyframes pkf-flutter {
    0% { transform: translateX(calc(var(--sway, 30px) * -1)) rotate(0deg) rotateX(0deg); }
    50% { transform: translateX(0) rotate(calc(var(--spin, 180deg) * .5)) rotateX(55deg); }
    100% { transform: translateX(var(--sway, 30px)) rotate(var(--spin, 180deg)) rotateX(0deg); }
}

/* ---------- Greeting card, hung from the garland by two threads ---------- */
.pkf-card {
    position: fixed;
    left: 50%;
    z-index: 1500;
    width: min(380px, calc(100vw - 32px));
    transform-origin: 50% -30px;
    transform: translateX(-50%) translateY(-28px) rotate(-7deg);
    opacity: 0;
    cursor: pointer;
    font-family: Inter, system-ui, -apple-system, sans-serif;
    -webkit-tap-highlight-color: transparent;
}
.pkf-card.is-in { animation: pkf-card-in 1.5s cubic-bezier(.3, .9, .4, 1) forwards; }
.pkf-card.is-leaving {
    animation: none;
    opacity: 0;
    transform: translateX(-50%) translateY(-40px) scale(.96);
    transition: opacity .45s ease, transform .5s ease;
}
@keyframes pkf-card-in {
    0% { opacity: 0; transform: translateX(-50%) translateY(-28px) rotate(-7deg); }
    25% { opacity: 1; transform: translateX(-50%) translateY(0) rotate(5deg); }
    48% { transform: translateX(-50%) translateY(0) rotate(-3deg); }
    68% { transform: translateX(-50%) translateY(0) rotate(1.6deg); }
    84% { transform: translateX(-50%) translateY(0) rotate(-.6deg); }
    100% { opacity: 1; transform: translateX(-50%) translateY(0) rotate(0); }
}
.pkf-card__thread {
    position: absolute;
    bottom: 100%;
    width: 2px;
    background: linear-gradient(#8d5a00, #ffcf5a);
    border-radius: 2px;
}
.pkf-card__thread::after {
    content: "";
    position: absolute;
    left: 50%;
    bottom: -3px;
    width: 7px;
    height: 7px;
    margin-left: -3.5px;
    border-radius: 50%;
    background: radial-gradient(circle at 35% 35%, #fff3c4, #e0a100 60%, #8d5a00);
}
.pkf-card__thread--l { left: 22%; }
.pkf-card__thread--r { right: 22%; }
.pkf-card__inner {
    position: relative;
    overflow: hidden;
    border-radius: 18px;
    background: #fffaf0;
    box-shadow: 0 22px 48px -12px rgba(110, 20, 10, .45), 0 0 0 1px rgba(183, 28, 28, .1);
}
/* "Laal paar" — the red-and-gold border of a puja saree */
.pkf-card__band {
    height: 12px;
    background:
        radial-gradient(circle at 6px 6px, #ffd54f 1.6px, transparent 2px) 0 0 / 12px 12px repeat-x,
        linear-gradient(#b71c1c, #b71c1c);
    box-shadow: inset 0 -2px 0 #e0a100;
}
.pkf-card__band--b { box-shadow: inset 0 2px 0 #e0a100; }
.pkf-card__body {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 14px 12px 14px;
    background:
        radial-gradient(120% 90% at 50% 0%, rgba(255, 213, 79, .22), transparent 60%),
        #fffaf0;
}
.pkf-card__text { flex: 1; min-width: 0; text-align: center; }
.pkf-card__eyebrow {
    font-size: 10px;
    font-weight: 800;
    letter-spacing: .16em;
    text-transform: uppercase;
    color: #b45309;
}
.pkf-card__title {
    margin-top: 2px;
    font-family: "Playfair Display", Georgia, "Times New Roman", serif;
    font-style: italic;
    font-weight: 800;
    font-size: 26px;
    line-height: 1.12;
    color: #b71c1c;
}
.pkf-card__sub {
    margin-top: 3px;
    font-family: "Noto Sans Oriya", "Noto Sans Odia", "Kalinga", sans-serif;
    font-size: 15px;
    font-weight: 700;
    color: #9a3412;
}
.pkf-card__msg {
    margin-top: 6px;
    font-size: 12.5px;
    line-height: 1.45;
    color: #57534e;
}
.pkf-card__preview {
    padding: 7px 12px;
    font-size: 11px;
    line-height: 1.4;
    text-align: center;
    color: #7c2d12;
    background: #ffedd5;
    border-top: 1px dashed #fdba74;
}
.pkf-card__x {
    position: absolute;
    top: 18px;
    right: 8px;
    width: 26px;
    height: 26px;
    border: 0;
    border-radius: 50%;
    background: rgba(183, 28, 28, .08);
    color: #9f1239;
    font-size: 18px;
    line-height: 26px;
    text-align: center;
    cursor: pointer;
    padding: 0;
}
.pkf-diya { flex: 0 0 auto; width: 46px; height: 42px; overflow: visible; }
.pkf-diya--r { transform: scaleX(-1); }
.pkf-diya__flame {
    transform-box: fill-box;
    transform-origin: 50% 100%;
    animation: pkf-flicker 1.1s ease-in-out infinite alternate;
}
.pkf-diya--r .pkf-diya__flame { animation-delay: -.5s; }
.pkf-diya__halo { animation: pkf-glow 1.6s ease-in-out infinite alternate; }
@keyframes pkf-flicker {
    0% { transform: scale(1, 1) skewX(0deg); }
    30% { transform: scale(.94, 1.08) skewX(-4deg); }
    60% { transform: scale(1.04, .95) skewX(3deg); }
    100% { transform: scale(.97, 1.1) skewX(-2deg); }
}

/* Diwali card: night sky + gold */
.pkf-card--diwali .pkf-card__inner {
    background: #2a0b2b;
    box-shadow: 0 22px 48px -12px rgba(40, 0, 40, .6), 0 0 0 1px rgba(255, 213, 79, .25);
}
.pkf-card--diwali .pkf-card__band {
    background:
        radial-gradient(circle at 6px 6px, #fff3c4 1.4px, transparent 2px) 0 0 / 12px 12px repeat-x,
        linear-gradient(90deg, #8d5a00, #ffd54f, #ffb300, #8d5a00);
    box-shadow: none;
}
.pkf-card--diwali .pkf-card__body {
    background:
        radial-gradient(140% 100% at 50% 0%, rgba(255, 179, 0, .28), transparent 60%),
        radial-gradient(circle at 15% 80%, rgba(236, 64, 122, .25), transparent 40%),
        linear-gradient(160deg, #3b0d3a, #1d0820);
}
.pkf-card--diwali .pkf-card__eyebrow { color: #fcd34d; }
.pkf-card--diwali .pkf-card__title {
    color: #ffd54f;
    background: linear-gradient(180deg, #fff3c4, #ffca28 55%, #ff8f00);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
}
.pkf-card--diwali .pkf-card__sub { color: #fde68a; }
.pkf-card--diwali .pkf-card__msg { color: #f5d0fe; }
.pkf-card--diwali .pkf-card__x { background: rgba(255, 255, 255, .12); color: #fde68a; }
.pkf-card--diwali .pkf-card__preview { background: #451a3f; color: #fde68a; border-color: #86198f; }

/* Any-festival card: brand orange + green */
.pkf-card--festive .pkf-card__band {
    background:
        radial-gradient(circle at 6px 6px, #fff 1.4px, transparent 2px) 0 0 / 12px 12px repeat-x,
        linear-gradient(90deg, #f3630f, #ff8a3d 50%, #3dbb4c);
    box-shadow: none;
}
.pkf-card--festive .pkf-card__title { color: #d4520a; }
.pkf-card--festive .pkf-card__sub { color: #2d9e3a; }

@media (max-width: 640px) {
    .pkf-card__title { font-size: 22px; }
    .pkf-card__sub { font-size: 14px; }
    .pkf-card__msg { font-size: 12px; }
    .pkf-diya { width: 36px; height: 33px; }
    .pkf-card__body { padding: 12px 8px; gap: 2px; }
}

/* Dark mode: soften the cream card a little so it doesn't glare */
[data-theme="dark"] .pkf-card--durga_puja .pkf-card__inner,
[data-theme="dark"] .pkf-card--festive .pkf-card__inner { box-shadow: 0 22px 48px -12px rgba(0, 0, 0, .7), 0 0 0 1px rgba(255, 213, 79, .2); }
[data-theme="dark"] .pkf-garland { filter: drop-shadow(0 2px 3px rgba(0, 0, 0, .5)); }

@media (prefers-reduced-motion: reduce) {
    .pkf-strand, .pkf-lights-glowA, .pkf-lights-glowB, .pkf-diya__flame, .pkf-diya__halo, .pkf-lantern-glow { animation: none; }
    .pkf-card.is-in { animation: none; opacity: 1; transform: translateX(-50%); }
}
@media print { .pkf-deco, .pkf-shower, .pkf-card { display: none !important; } }