/* Durga Puja 2026 welcome page — decorative styles scoped to this page only. */

.puja-font-display {
    font-family: 'Cinzel', serif;
}

.puja-font-accent {
    font-family: 'Cormorant Garamond', serif;
}

/* Deep maroon mandala backdrop behind the hero, echoing the invitation poster. */
.puja-mandala-bg {
    background-color: #2a0705;
    background-image:
        radial-gradient(circle at 15% 20%, rgba(240, 193, 92, 0.16) 0, transparent 32%),
        radial-gradient(circle at 85% 15%, rgba(240, 193, 92, 0.12) 0, transparent 28%),
        radial-gradient(circle at 50% 100%, rgba(207, 60, 46, 0.35) 0, transparent 55%),
        repeating-radial-gradient(circle at 50% 50%, rgba(240, 193, 92, 0.05) 0, rgba(240, 193, 92, 0.05) 1px, transparent 1px, transparent 64px);
}

.puja-hero-glow {
    background: radial-gradient(closest-side, rgba(240, 193, 92, 0.35), transparent);
    filter: blur(10px);
    animation: pujaGlowPulse 6s ease-in-out infinite alternate;
}

@keyframes pujaGlowPulse {
    from { opacity: 0.55; transform: scale(0.96); }
    to { opacity: 1; transform: scale(1.04); }
}

/* Gold foil shimmer across the hero headline. */
.gold-shimmer-text {
    background: linear-gradient(100deg, #f0c15c 20%, #fff3d2 38%, #e0a527 50%, #f0c15c 62%, #fff3d2 80%);
    background-size: 240% auto;
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    animation: pujaShimmer 5s linear infinite;
}

@keyframes pujaShimmer {
    to { background-position: -240% center; }
}

/* Hanging lantern ornaments in the hero, matching the poster's motif. */
.puja-lantern {
    transform-origin: top center;
    animation: pujaLanternSway 4.5s ease-in-out infinite;
}

.puja-lantern.puja-lantern-delay {
    animation-delay: 0.8s;
}

@keyframes pujaLanternSway {
    0%, 100% { transform: rotate(-4deg); }
    50% { transform: rotate(4deg); }
}

/* Countdown tiles */
.countdown-tile {
    background: linear-gradient(160deg, rgba(255, 255, 255, 0.08), rgba(255, 255, 255, 0.02));
    border: 1px solid rgba(240, 193, 92, 0.35);
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.25), inset 0 1px 0 rgba(255, 255, 255, 0.08);
}

/* ── Festival programme ────────────────────────────────────────────────
   Three keepsake-style programme cards: ceremonial maroon headers above
   a precise brass-pin timeline. Shared by the guest and member pages. */
.puja-programme-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 1.15rem;
    align-items: stretch;
}

.puja-programme-card {
    position: relative;
    display: flex;
    overflow: hidden;
    flex-direction: column;
    border: 1px solid #ead6ad;
    border-radius: 1.4rem;
    background:
        linear-gradient(150deg, rgba(255, 255, 255, 0.98), rgba(254, 250, 240, 0.94)),
        repeating-linear-gradient(0deg, transparent 0, transparent 23px, rgba(168, 114, 26, 0.045) 24px);
    box-shadow: 0 18px 44px rgba(61, 10, 8, 0.09), 0 2px 8px rgba(125, 85, 20, 0.07);
    transition: transform 240ms ease, border-color 240ms ease, box-shadow 240ms ease;
}

.puja-programme-card:nth-child(2) {
    border-color: #dfbd72;
    box-shadow: 0 24px 54px rgba(61, 10, 8, 0.13), 0 3px 10px rgba(125, 85, 20, 0.08);
}

.puja-programme-card:hover {
    z-index: 1;
    transform: translateY(-5px);
    border-color: #cf9020;
    box-shadow: 0 26px 58px rgba(61, 10, 8, 0.15), 0 3px 10px rgba(125, 85, 20, 0.1);
}

.puja-programme-card__header {
    position: relative;
    display: flex;
    min-height: 8.6rem;
    align-items: flex-end;
    justify-content: space-between;
    overflow: hidden;
    background:
        radial-gradient(circle at 88% 20%, rgba(240, 193, 92, 0.24), transparent 30%),
        repeating-radial-gradient(circle at 100% 0, transparent 0, transparent 20px, rgba(240, 193, 92, 0.08) 21px, transparent 22px),
        linear-gradient(135deg, #2a0705, #6b2117);
    padding: 1.35rem 1.45rem 1.2rem;
    color: #fbeecb;
}

.puja-programme-card__header::after {
    position: absolute;
    right: -1.8rem;
    bottom: -3.8rem;
    width: 8.5rem;
    height: 8.5rem;
    border: 1px solid rgba(240, 193, 92, 0.26);
    border-radius: 50%;
    box-shadow: 0 0 0 12px rgba(240, 193, 92, 0.05), 0 0 0 25px rgba(240, 193, 92, 0.035);
    content: '';
}

.puja-programme-card__eyebrow {
    margin: 0 0 0.2rem;
    color: rgba(251, 238, 203, 0.72);
    font-size: 0.66rem;
    font-weight: 700;
    letter-spacing: 0.2em;
    text-transform: uppercase;
}

.puja-programme-card__date {
    margin: 0;
    font-family: 'Cinzel', serif;
    font-size: 1.65rem;
    font-weight: 700;
    line-height: 1;
}

.puja-programme-card__number {
    position: relative;
    z-index: 1;
    color: rgba(240, 193, 92, 0.22);
    font-family: 'Cormorant Garamond', serif;
    font-size: 4.8rem;
    font-style: italic;
    font-weight: 600;
    line-height: 0.65;
}

.puja-programme-card__body {
    display: flex;
    flex: 1;
    flex-direction: column;
    padding: 1.35rem 1.35rem 1.5rem;
}

.puja-programme-card__title {
    min-height: 3rem;
    margin: 0 0 1.1rem;
    color: #551910;
    font-family: 'Cormorant Garamond', serif;
    font-size: 1.28rem;
    font-style: italic;
    font-weight: 600;
    line-height: 1.18;
}

.puja-programme-timeline {
    position: relative;
    display: grid;
    flex: 1;
    align-content: space-between;
    gap: 0.25rem;
    margin: 0;
    padding: 0;
    list-style: none;
}

.puja-programme-timeline::before {
    position: absolute;
    top: 0.8rem;
    bottom: 0.8rem;
    left: 5.78rem;
    width: 1px;
    background: linear-gradient(#e3bf71, #f1dfb6);
    content: '';
}

.puja-programme-event {
    position: relative;
    display: grid;
    grid-template-columns: 5.15rem minmax(0, 1fr);
    gap: 1rem;
    align-items: center;
    min-height: 2.6rem;
    border-radius: 0.75rem;
    padding: 0.42rem 0.5rem;
    color: #3d302b;
}

.puja-programme-event::before {
    position: absolute;
    top: 50%;
    left: 5.02rem;
    width: 0.55rem;
    height: 0.55rem;
    border: 2px solid #fffdf8;
    border-radius: 50%;
    background: #a8721a;
    box-shadow: 0 0 0 1px #d8ad55;
    content: '';
    transform: translateY(-50%);
}

.puja-programme-event time {
    color: #7d5514;
    font-family: 'Cinzel', serif;
    font-size: 0.67rem;
    font-weight: 700;
    letter-spacing: -0.02em;
    white-space: nowrap;
}

.puja-programme-event > span {
    font-size: 0.82rem;
    font-weight: 600;
    line-height: 1.3;
}

.puja-programme-event--meal,
.puja-programme-event--culture,
.puja-programme-event--celebration {
    background: linear-gradient(90deg, rgba(251, 238, 203, 0.58), rgba(255, 255, 255, 0));
}

.puja-programme-event--culture::before { background: #872f20; box-shadow: 0 0 0 1px #c96c54; }
.puja-programme-event--celebration::before { background: #f97700; box-shadow: 0 0 0 1px #ffb84d; }
.puja-programme-event--closing { color: #6b2117; }

@media (max-width: 899px) {
    .puja-programme-grid {
        grid-template-columns: 1fr;
        gap: 1rem;
        max-width: 38rem;
        margin-inline: auto;
    }

    .puja-programme-card__header { min-height: 7.4rem; }
    .puja-programme-card__title { min-height: 0; }
    .puja-programme-timeline { align-content: start; }
}

@media (max-width: 399px) {
    .puja-programme-card__body { padding-inline: 1rem; }
    .puja-programme-event {
        grid-template-columns: 4.85rem minmax(0, 1fr);
        gap: 0.8rem;
        padding-inline: 0.35rem;
    }
    .puja-programme-timeline::before { left: 5.2rem; }
    .puja-programme-event::before { left: 4.94rem; }
    .puja-programme-event time { font-size: 0.62rem; }
}

/* ── "The Three Days", ekchala-arch variant ────────────────────────────
   Scoped to .puja-schedule-arch, which is set only on the guest page's
   #schedule section. The member/volunteer pages keep the flat-topped
   cards until the same class is added there, so this file stays shared
   and nothing else on those pages moves.

   The one bold move: each day card is cut to the silhouette of a
   thakur-dalan arch — the ekchala frame the idol sits under — with a
   hairline gold moulding traced inside it. Everything else is quieter
   than before: the 01/02/03 numeral is dropped (the dates already say
   which day is which) and the tracked-caps eyebrow becomes text. */
/* html { scroll-padding-top } already insets every fragment jump by 8rem
   (14rem from md up), which is sized for headings sitting tight under the
   sticky header. This section adds its own 5rem of top padding on top of
   that, so a #schedule deep link stopped high enough to leave the previous
   section on screen. A negative scroll-margin cancels the global padding
   and re-imposes a flat 4.5rem, measured to the section's border rather
   than its heading. Scoped here so no other anchor on the site moves. */
.puja-schedule-arch {
    scroll-margin-top: calc(4.5rem - var(--site-header-scroll-padding, 8rem));
}

.puja-schedule-arch .puja-schedule-daterange {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.75rem;
    margin-top: 0.65rem;
    color: #8a5a18;
    font-size: 1.2rem;
    font-style: italic;
    line-height: 1.2;
}

.puja-schedule-arch .puja-schedule-daterange span {
    width: 2.25rem;
    height: 1px;
    flex: 0 0 auto;
    background: linear-gradient(90deg, transparent, #d8ad55);
}

.puja-schedule-arch .puja-schedule-daterange span:last-child {
    background: linear-gradient(90deg, #d8ad55, transparent);
}

.puja-schedule-arch .puja-programme-grid {
    gap: 1.5rem;
}

.puja-schedule-arch .puja-programme-card {
    border-radius: 50% 50% 1.3rem 1.3rem / 24% 24% 1.3rem 1.3rem;
    border-color: #e4c88f;
}

.puja-schedule-arch .puja-programme-card__header {
    min-height: 11.25rem;
    flex-direction: column;
    align-items: center;
    justify-content: flex-end;
    padding: 3.4rem 1.45rem 1.25rem;
    text-align: center;
}

/* The ornament markup exists only on the guest page, but hide it anywhere
   the arch variant is not in play so a flat-topped card never shows a
   toran floating over its square header. */
.puja-arch-ornament {
    display: none;
}

.puja-schedule-arch .puja-arch-ornament {
    position: absolute;
    top: 0;
    right: 0;
    left: 0;
    display: block;
    height: 100%;
    color: rgba(240, 193, 92, 0.68);
    pointer-events: none;
}

.puja-schedule-arch .puja-arch-ornament__crown {
    position: absolute;
    top: 0.6rem;
    left: 50%;
    width: 3.9rem;
    height: 2.35rem;
    transform: translateX(-50%);
}

.puja-schedule-arch .puja-arch-ornament__toran {
    position: absolute;
    top: 2.55rem;
    right: 0;
    left: 0;
    width: 100%;
    height: 3.3rem;
    color: rgba(240, 193, 92, 0.55);
}

/* Hairline moulding following the arch, and the brass ring the flat card
   used in its bottom corner is dropped — the moulding replaces it. */
.puja-schedule-arch .puja-programme-card__header::before {
    position: absolute;
    top: 0.55rem;
    right: 0.55rem;
    left: 0.55rem;
    height: 12rem;
    border: 1px solid rgba(240, 193, 92, 0.3);
    border-bottom: 0;
    border-radius: 50% 50% 0 0 / 6rem 6rem 0 0;
    content: '';
    pointer-events: none;
}

.puja-schedule-arch .puja-programme-card__header::after {
    display: none;
}

.puja-schedule-arch .puja-programme-card__eyebrow {
    margin-bottom: 0.35rem;
    color: rgba(251, 238, 203, 0.78);
    font-family: 'Cormorant Garamond', serif;
    font-size: 1rem;
    font-style: italic;
    font-weight: 600;
    letter-spacing: 0.02em;
    text-transform: none;
}

.puja-schedule-arch .puja-programme-card__date {
    font-size: 1.75rem;
    letter-spacing: 0.01em;
}

.puja-schedule-arch .puja-programme-card__number {
    display: none;
}

/* Two lines' worth, so "Saptami — Welcoming the Goddess" wrapping does not
   drop its timeline half a line below the other two cards'. */
.puja-schedule-arch .puja-programme-card__title {
    position: relative;
    display: flex;
    min-height: 3.9rem;
    align-items: center;
    justify-content: center;
    margin-bottom: 1.35rem;
    padding-bottom: 0.85rem;
    text-align: center;
    font-size: 1.32rem;
}

.puja-schedule-arch .puja-programme-card__title::after {
    position: absolute;
    bottom: 0;
    left: 50%;
    width: 2.5rem;
    height: 1px;
    background: linear-gradient(90deg, transparent, #d8ad55, transparent);
    content: '';
    transform: translateX(-50%);
}

@media (max-width: 899px) {
    .puja-schedule-arch .puja-programme-card {
        border-radius: 50% 50% 1.2rem 1.2rem / 7rem 7rem 1.2rem 1.2rem;
    }

    .puja-schedule-arch .puja-programme-card__header {
        min-height: 10.5rem;
        padding-top: 3rem;
    }

    .puja-schedule-arch .puja-programme-card__title {
        min-height: 0;
    }
}

/* ── Homepage announcement banner ──────────────────────────────────────
   Same maroon-and-gold family as the event page's .puja-mandala-bg, one
   shade lighter (maroon-800 vs. maroon-900) so the homepage portal reads
   as an earlier, warmer moment of the same festival rather than a
   disconnected re-skin. */
.puja-alpona-bg {
    background-color: #3d0a08;
    background-image:
        radial-gradient(circle at 12% 18%, rgba(240, 193, 92, 0.22) 0, transparent 34%),
        radial-gradient(circle at 88% 10%, rgba(255, 232, 195, 0.12) 0, transparent 30%),
        radial-gradient(circle at 50% 112%, rgba(249, 119, 0, 0.4) 0, transparent 58%),
        repeating-radial-gradient(circle at 50% 50%, rgba(255, 232, 195, 0.06) 0, rgba(255, 232, 195, 0.06) 1px, transparent 1px, transparent 58px);
}

/* Marigold counterpart to .gold-shimmer-text. */
.marigold-shimmer-text {
    background: linear-gradient(100deg, #ff9920 20%, #ffe8c3 38%, #f97700 50%, #ffb84d 62%, #fff3d2 80%);
    background-size: 240% auto;
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    animation: pujaShimmer 5s linear infinite;
}

.puja-countdown-rule {
    display: block;
    width: 1.75rem;
    height: 1px;
    flex: 0 0 auto;
    background: linear-gradient(90deg, transparent, rgba(255, 184, 77, 0.75));
}

.puja-countdown-rule:last-child {
    background: linear-gradient(90deg, rgba(255, 184, 77, 0.75), transparent);
}

/* One continuous brass plate with blinking colons, rather than the event
   page's four separate glass tiles. */
.puja-countdown-plate {
    position: relative;
    display: inline-flex;
    align-items: flex-start;
    gap: 0.1rem;
    border: 1px solid rgba(255, 184, 77, 0.45);
    border-radius: 999px;
    background:
        linear-gradient(150deg, rgba(255, 153, 32, 0.18), rgba(61, 10, 8, 0.62) 52%, rgba(255, 209, 131, 0.12));
    padding: 0.55rem 0.85rem;
    box-shadow: 0 14px 34px rgba(4, 8, 24, 0.5), inset 0 1px 0 rgba(255, 232, 195, 0.16);
}

.puja-countdown-plate::after {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: 999px;
    background: linear-gradient(105deg, transparent 38%, rgba(255, 243, 210, 0.16) 50%, transparent 62%);
    background-size: 280% 100%;
    animation: pujaCountdownSheen 7s linear infinite;
    pointer-events: none;
}

.puja-countdown-cell {
    min-width: 3.05rem;
    text-align: center;
}

.puja-countdown-cell [data-countdown] {
    display: block;
    font-family: 'Cinzel', serif;
    font-size: 1.5rem;
    font-weight: 700;
    line-height: 1.05;
    color: #ffd183;
}

.puja-countdown-cell span {
    display: block;
    margin-top: 0.15rem;
    color: rgba(255, 232, 195, 0.6);
    font-size: 0.55rem;
    font-weight: 700;
    letter-spacing: 0.16em;
    text-transform: uppercase;
}

.puja-countdown-colon {
    margin-top: 0.1rem;
    color: rgba(255, 184, 77, 0.7);
    font-family: 'Cinzel', serif;
    font-size: 1.25rem;
    font-weight: 700;
    line-height: 1.15;
    animation: pujaColonBlink 1s steps(1, end) infinite;
}

.puja-countdown-plate [data-countdown].is-ticking {
    animation: pujaCountdownTick 460ms cubic-bezier(0.16, 1, 0.3, 1);
}

@keyframes pujaCountdownSheen {
    from { background-position: 180% center; }
    to { background-position: -180% center; }
}

@keyframes pujaCountdownTick {
    from { transform: translateY(-2px) scale(1.07); color: #fff3d2; }
    to { transform: translateY(0) scale(1); }
}

@keyframes pujaColonBlink {
    0%, 49% { opacity: 1; }
    50%, 100% { opacity: 0.2; }
}

@media (min-width: 640px) {
    .puja-countdown-plate { gap: 0.35rem; padding: 0.7rem 1.35rem; }
    .puja-countdown-cell { min-width: 3.75rem; }
    .puja-countdown-cell [data-countdown] { font-size: 1.9rem; }
    .puja-countdown-cell span { font-size: 0.6rem; }
    .puja-countdown-colon { font-size: 1.5rem; }
}

/* Invitation card holding the poster image — tilted, straightens on hover. */
.puja-invitation-card {
    transform: rotate(3deg);
    transition: transform 450ms cubic-bezier(0.16, 1, 0.3, 1);
}

.puja-invitation-card:hover {
    transform: rotate(0deg) translateY(-4px);
}

/* Ticket-stub perforation divider used inside registration path cards. */
.ticket-perforation {
    position: relative;
    border-top: 2px dashed rgba(122, 20, 16, 0.25);
}

.ticket-perforation::before,
.ticket-perforation::after {
    content: '';
    position: absolute;
    top: -10px;
    width: 20px;
    height: 20px;
    border-radius: 9999px;
    background: #fff8ea;
    border: 2px dashed rgba(122, 20, 16, 0.25);
}

.ticket-perforation::before { left: -34px; }
.ticket-perforation::after { right: -34px; }

/* Sticky mobile register bar */
.puja-sticky-cta {
    transform: translateY(120%);
    transition: transform 380ms cubic-bezier(0.16, 1, 0.3, 1);
}

.puja-sticky-cta.is-visible {
    transform: translateY(0);
}

/* Scalloped divider between hero and page content */
.puja-scallop {
    display: block;
    width: 100%;
    height: 48px;
}

/* Member registration modal — backdrop fade + card pop, matching the invitation-card's easing. */
.puja-modal-backdrop {
    opacity: 0;
    transition: opacity 220ms ease;
}

.puja-modal-backdrop.is-open {
    opacity: 1;
}

.puja-modal-card {
    transform: translateY(16px) scale(0.97);
    opacity: 0;
    transition: transform 280ms cubic-bezier(0.16, 1, 0.3, 1), opacity 220ms ease;
}

.puja-modal-backdrop.is-open .puja-modal-card {
    transform: translateY(0) scale(1);
    opacity: 1;
}

/* Seat-based Pujo registration flow. */
.puja-form-step {
    position: relative;
    overflow: hidden;
    border: 1px solid rgba(230, 171, 52, 0.42);
    border-radius: 1.25rem;
    background:
        radial-gradient(circle at 100% 0, rgba(240, 193, 92, 0.13), transparent 28%),
        rgba(255, 255, 255, 0.68);
    padding: 1.25rem;
    box-shadow: 0 12px 34px rgba(61, 10, 8, 0.055);
}

.puja-step-heading {
    display: flex;
    align-items: center;
    gap: 0.85rem;
    color: #3d0a08;
}

.puja-step-heading > span:last-child {
    min-width: 0;
}

.puja-step-heading strong,
.puja-step-heading legend {
    display: block;
    font-family: 'Cinzel', serif;
    font-size: 0.92rem;
    font-weight: 700;
    letter-spacing: 0.015em;
}

.puja-step-heading small {
    display: block;
    margin-top: 0.15rem;
    color: #64748b;
    font-size: 0.76rem;
    font-weight: 500;
}

.puja-step-number {
    display: inline-flex;
    width: 2.5rem;
    height: 2.5rem;
    flex: 0 0 auto;
    align-items: center;
    justify-content: center;
    border: 1px solid rgba(207, 144, 32, 0.58);
    border-radius: 999px;
    background: #3d0a08;
    color: #f6db92;
    font-family: 'Cinzel', serif;
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    box-shadow: 0 4px 12px rgba(61, 10, 8, 0.16);
}

.puja-greeting-mark {
    display: inline-flex;
    width: 2.75rem;
    height: 2.75rem;
    flex: 0 0 auto;
    align-items: center;
    justify-content: center;
    border-radius: 999px;
    background: #3d0a08;
    color: #f0c15c;
}

/* ── Person cards ─────────────────────────────────────────────────────────
   One card per person. Everything that person decides — which days they are
   here for, and which of those days they want bhog on — lives inside their
   own card, so a party is filled in one person at a time instead of picking
   days for everyone and then meals for everyone in a second pass. */

.puja-person-card {
    border: 1px solid #f1d59b;
    border-radius: 1.15rem;
    background: #fff;
    box-shadow: 0 5px 16px rgba(61, 10, 8, 0.045);
    overflow: hidden;
    animation: pujaSeatIn 260ms cubic-bezier(0.16, 1, 0.3, 1) both;
}

.puja-person-card.is-primary {
    border-color: rgba(168, 114, 26, 0.58);
}

.puja-person-card.is-child {
    background: #fffdf8;
}

@keyframes pujaSeatIn {
    from { opacity: 0; transform: translateY(5px) scale(0.985); }
    to { opacity: 1; transform: translateY(0) scale(1); }
}

.puja-person-head {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    border-bottom: 1px solid #f6e4b8;
    background: linear-gradient(135deg, #fffdf8, #fef7e7);
    padding: 0.8rem 0.9rem;
}

.puja-person-card.is-child .puja-person-head {
    background: #fdf8ec;
}

.puja-person-index {
    display: inline-flex;
    width: 1.75rem;
    height: 1.75rem;
    flex: 0 0 auto;
    align-items: center;
    justify-content: center;
    border-radius: 999px;
    background: #fbeecb;
    color: #551910;
    font-family: 'Cinzel', serif;
    font-size: 0.78rem;
    font-weight: 800;
}

.puja-person-ident {
    display: block;
    min-width: 0;
    flex: 1 1 auto;
}

.puja-person-name {
    display: block;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    color: #551910;
    font-size: 0.95rem;
    font-weight: 700;
}

.puja-person-name-input {
    display: block;
    width: 100%;
    min-width: 0;
    box-sizing: border-box;
    border: 1px solid transparent;
    border-radius: 0.5rem;
    background: #fbeecb;
    padding: 0.35rem 0.6rem;
    color: #551910;
    font-family: inherit;
    /* 16px keeps iOS Safari from zooming the viewport on focus. */
    font-size: 1rem;
    font-weight: 700;
}

.puja-person-name-input::placeholder {
    color: #b08a4a;
    font-weight: 500;
}

.puja-person-name-input:hover { background: #f6e4b8; }

.puja-person-name-input:focus {
    outline: none;
    border-color: #a8721a;
    background: #fff;
}

.puja-person-meta {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.3rem 0.5rem;
    margin-top: 0.2rem;
}

.puja-person-badge {
    border-radius: 999px;
    background: #fbeecb;
    padding: 0.1rem 0.5rem;
    color: #8a5a12;
    font-size: 0.62rem;
    font-weight: 800;
    letter-spacing: 0.07em;
    text-transform: uppercase;
}

.puja-person-sub {
    color: #7c7268;
    font-size: 0.68rem;
    font-weight: 500;
}

/* Under-12 checkbox. A real, visible checkbox rather than the day/bhog
   plates' hidden-input pattern: this states a fact about the person, not an
   action to take, and .puja-cultural-check below (the cultural-programme
   toggle) is already this form's answer to exactly that kind of question --
   reused here rather than invented again.

   Its own row, padded 0.9rem to match .puja-person-head exactly, so the
   checkbox and its label line up under the name above and the schedule rows
   below -- a margin-based version of this drifted ~14px right of both,
   because width: 100% on .puja-pick (below) beat a hand-set width at equal
   specificity. Padding on a block-level row has no such fight to lose. */
.puja-child-row {
    border-bottom: 1px solid #f6e4b8;
    background: #fffdf8;
    padding: 0.65rem 0.9rem 0.75rem;
}

.puja-person-card.is-child .puja-child-row {
    background: #fdf8ec;
}

.puja-child-toggle {
    display: flex;
    align-items: center;
    gap: 0.7rem;
    cursor: pointer;
}

.puja-child-check {
    width: 1.15rem;
    height: 1.15rem;
    flex: 0 0 auto;
    accent-color: #7a1d13;
    cursor: pointer;
}

.puja-child-body {
    display: flex;
    flex-direction: column;
    gap: 0.05rem;
    min-width: 0;
}

.puja-child-title {
    color: #551910;
    font-size: 0.82rem;
    font-weight: 700;
    line-height: 1.2;
}

.puja-child-note {
    color: #8a5a12;
    font-size: 0.68rem;
    font-weight: 600;
}

.puja-person-total {
    flex: 0 0 auto;
    text-align: right;
}

.puja-person-total-label {
    display: block;
    color: #a08c72;
    font-size: 0.58rem;
    font-weight: 800;
    letter-spacing: 0.12em;
    text-transform: uppercase;
}

.puja-person-total strong {
    display: block;
    color: #551910;
    font-family: 'Cinzel', serif;
    font-size: 1rem;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
}

.puja-person-remove {
    display: inline-flex;
    width: 1.85rem;
    height: 1.85rem;
    flex: 0 0 auto;
    align-items: center;
    justify-content: center;
    border: 1px solid #eed6aa;
    border-radius: 999px;
    background: #fff;
    color: #872f20;
    font-size: 1.15rem;
    line-height: 1;
    transition: border-color 160ms ease, background-color 160ms ease, color 160ms ease, transform 160ms ease;
}

.puja-person-remove:hover {
    border-color: #872f20;
    background: #872f20;
    color: #fff8ea;
    transform: translateY(-1px);
}

.puja-person-remove:focus-visible {
    outline: 2px solid #a8721a;
    outline-offset: 2px;
}


/* ── The schedule table ───────────────────────────────────────────────────
   Two columns, Day and Bhog, and in both of them the cell IS the control:
   pressing the day plate marks that person present, pressing the bhog plate
   orders their food. There is no separate "Here" checkbox beside the day any
   more, and no Price column either — the figure lives on the bhog plate, the
   person subtotal and the grand total.

   Cells are spaced by border-spacing rather than separated by rules: each
   plate already carries its own border, so a second line between them only
   competed with it. */

.puja-schedule {
    width: 100%;
    border-collapse: separate;
    border-spacing: 0.45rem;
    padding: 0.15rem 0.45rem 0.5rem;
    font-size: 0.82rem;
}

.puja-schedule thead th {
    padding: 0.35rem 0.25rem 0;
    color: #a08c72;
    font-size: 0.58rem;
    font-weight: 800;
    letter-spacing: 0.12em;
    text-align: left;
    text-transform: uppercase;
}

.puja-schedule th,
.puja-schedule td {
    padding: 0;
    vertical-align: middle;
}

/* A fixed rail for the bhog column so every plate in the card starts on the
   same edge, whatever the day beside it is called. A width rather than a
   flex basis: the "Members only" cell on a guest's Day 3 has to fill the
   same rail, and it holds no plate at all. */
.puja-schedule-meal { width: 9.5rem; }

.puja-schedule-weekday {
    color: #551910;
    font-weight: 700;
}

.puja-schedule-month {
    display: block;
    color: #9a8b7b;
    font-size: 0.66rem;
}

/* Phone-only short weekday; the full name and the date line show instead at
   every width above the breakpoint. */
.puja-schedule-abbr { display: none; }

/* Day 3 for a guest: bhog is members-only, so there is nothing to press.
   Dashed rather than solid, to read as a note in the rail instead of a
   control that refuses to work. */
.puja-schedule-na {
    display: flex;
    min-height: 3rem;
    align-items: center;
    border: 1px dashed #ecdcbe;
    border-radius: 0.85rem;
    padding: 0.45rem 0.7rem;
    color: #a4907c;
    font-size: 0.68rem;
    font-style: italic;
    line-height: 1.3;
}

/* ── Day and bhog plates ─────────────────────────────────────────────────
   A real checkbox, visually hidden, inside a label that fills its whole
   cell — so keyboard, focus and screen-reader semantics come for free while
   the entire plate is the hit target.

   The two states are deliberately different in kind, not just in shade: a
   selected day warms to parchment with its date medallion inverted, while an
   ordered meal goes solid maroon. Attending and paying for food are not the
   same commitment and should not look alike at a glance down a party of
   four. */

.puja-pick {
    position: relative;
    display: flex;
    width: 100%;
    min-height: 3rem;
    align-items: center;
    gap: 0.6rem;
    border: 1px solid #f0dcb4;
    border-radius: 0.85rem;
    background: #fff;
    padding: 0.45rem 0.7rem;
    cursor: pointer;
    text-align: left;
    transition: border-color 160ms ease, background 160ms ease, box-shadow 160ms ease, transform 120ms ease;
}

.puja-pick input {
    position: absolute;
    width: 1px;
    height: 1px;
    opacity: 0;
    pointer-events: none;
}

.puja-pick:hover { border-color: #cf9020; }
.puja-pick:active { transform: translateY(1px); }

.puja-pick:has(input:focus-visible) {
    outline: 2px solid #a8721a;
    outline-offset: 2px;
}

.puja-pick-body {
    min-width: 0;
    flex: 1 1 auto;
}

.puja-pick-title {
    display: block;
    color: #551910;
    font-size: 0.8rem;
    font-weight: 700;
    line-height: 1.2;
}

.puja-pick-note {
    display: block;
    color: #8a5a12;
    font-size: 0.68rem;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
}

/* -- the day plate -- */

.puja-pick-date {
    display: inline-flex;
    width: 2.1rem;
    height: 2.1rem;
    flex: 0 0 auto;
    align-items: center;
    justify-content: center;
    border: 1px solid #eed6aa;
    border-radius: 0.6rem;
    background: #fdf8ee;
    color: #551910;
    font-family: 'Cinzel', serif;
    font-size: 0.85rem;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
    transition: border-color 160ms ease, background-color 160ms ease, color 160ms ease;
}

.puja-pick--day.is-on {
    border-color: rgba(135, 47, 32, 0.5);
    background: linear-gradient(115deg, #fdf2df, #fffdf8 65%);
    box-shadow: inset 3px 0 0 #cf9020;
}

.puja-pick--day.is-on .puja-pick-date {
    border-color: #872f20;
    background: #872f20;
    color: #fff8ea;
}

/* -- the bhog plate --
   One line, and the same one at every width: marker and label at the left
   edge, the figure hard against the right. An "Attending"/"Add day" word
   used to sit on the day plate as well, but only above the phone
   breakpoint — there is no room for it beside a 118px bhog plate — so the
   two widths disagreed about what a selected day looked like. The inverted
   medallion and the warm ground say it at both, which is why the word is
   gone rather than made smaller. */

.puja-pick--bhog { justify-content: space-between; }

/* An unordered bhog reads as an offer, not a selection. Selecting the day
   beside it must not change the bhog plate's visual state — only clicking
   Bhog itself should fill it. The off state is drawn as a dashed ghost that
   no solid, filled control can be confused with. Only .is-on below is filled. */
.puja-pick--bhog:not(.is-on) {
    border-style: dashed;
    border-color: #e4d0a6;
    background: transparent;
    opacity: 0.55;
}

.puja-pick--bhog:not(.is-on) .puja-pick-title { color: #b8a586; }
.puja-pick--bhog:not(.is-on) .puja-pick-note { color: #b8a586; font-weight: 600; }

.puja-pick--bhog:not(.is-on):hover {
    border-style: solid;
    background: #fffdf7;
}

.puja-pick--bhog .puja-pick-title {
    flex: 0 1 auto;
    white-space: nowrap;
}

.puja-pick--bhog .puja-pick-note {
    flex: 0 0 auto;
    margin-left: auto;
    text-align: right;
    white-space: nowrap;
}

.puja-pick--bhog .puja-pick-title::before {
    content: '+';
    display: inline-block;
    width: 0.8rem;
    color: #b8a586;
    font-weight: 800;
}

.puja-pick--bhog.is-on {
    border-color: #6f2418;
    background: linear-gradient(125deg, #872f20, #a53a27);
    box-shadow: 0 4px 12px rgba(85, 25, 16, 0.18);
}

.puja-pick--bhog.is-on:hover { border-color: #a53a27; }

.puja-pick--bhog.is-on .puja-pick-title {
    color: #fff8ea;
}

.puja-pick--bhog.is-on .puja-pick-title::before {
    content: '✓';
    color: #f3cf86;
}

.puja-pick--bhog.is-on .puja-pick-note { color: #f6dfae; }

.puja-pick--bhog.is-on .puja-pick-note.is-bundled {
    font-style: italic;
    font-weight: 600;
}

/* ── Bundle banners ──────────────────────────────────────────────────────
   The bundle is never chosen, only earned: order bhog on every day it covers
   and it applies itself. The hint is the nudge toward that, the applied
   banner the confirmation. */

.puja-bundle-applied,
.puja-bundle-hint {
    display: flex;
    align-items: flex-start;
    gap: 0.5rem;
    border-top: 1px solid #f6e4b8;
    padding: 0.6rem 0.9rem;
    font-size: 0.73rem;
    line-height: 1.5;
}

.puja-bundle-applied {
    background: #e9f5ee;
    color: #14533a;
}

.puja-bundle-applied > span { color: #1a6b4a; font-weight: 800; }

.puja-bundle-hint {
    background: #fdf6e6;
    color: #6b5a2c;
}

.puja-bundle-hint > span { color: #cf9020; }

@media (max-width: 639px) {
    /* Four nested paddings (section, step, panel, card) leave the card about
       250px wide on a 375px phone. Give the two innermost some of it back. */
    .puja-form-step { padding: 0.9rem; }

    /* The table stops being a table: one flex row per day, day plate on the
       left taking whatever is left over, bhog plate on a narrower rail to the
       right. Same two columns as desktop, same two controls — they simply
       stop being laid out by the table algorithm, which cannot give a 262px
       card a sensible column split. */
    .puja-schedule {
        border-spacing: 0;
        padding: 0.15rem 0.55rem 0.55rem;
    }

    .puja-schedule thead {
        position: absolute;
        width: 1px;
        height: 1px;
        overflow: hidden;
        clip: rect(0 0 0 0);
        white-space: nowrap;
    }

    .puja-schedule tbody tr {
        display: flex;
        align-items: stretch;
        flex-wrap: nowrap;
        gap: 0.4rem;
        padding: 0.2rem 0;
    }

    .puja-schedule-day {
        display: block;
        min-width: 0;
        flex: 1 1 auto;
    }

    .puja-schedule-meal {
        width: auto;
        flex: 0 0 8.25rem;
    }

    /* "Saturday" plus "Sat 17 Oct" costs 95px of a 262px row. Three letters
       beside the date medallion costs 30, which is what buys the single
       line — the medallion is already showing the date. */
    .puja-schedule-weekday,
    .puja-schedule-month { display: none; }
    .puja-schedule-abbr { display: inline; }

    .puja-pick {
        min-height: 3.1rem;
        gap: 0.5rem;
        padding: 0.4rem 0.55rem;
    }

    .puja-pick--bhog { padding-left: 0.5rem; }

    .puja-schedule-na {
        min-height: 3.1rem;
        padding: 0.4rem 0.55rem;
        font-size: 0.64rem;
    }

    .puja-person-total-label { display: none; }

    /* An accompanying adult types their own name here, and between the index
       badge, the subtotal and the remove button the input was left about 97px
       wide on a 375px phone -- not enough for a first name, let alone with the
       browser's autofill icon sitting on top of it. Let the head wrap so the
       identity block drops to a full-width row of its own. Only cards that
       actually carry an input wrap; a static name still fits on one line. */
    .puja-person-head:has(.puja-person-name-input) { flex-wrap: wrap; }
    .puja-person-head:has(.puja-person-name-input) .puja-person-total { margin-left: auto; }
    .puja-person-head:has(.puja-person-name-input) .puja-person-ident { order: 3; flex: 1 1 100%; }
}

.puja-stepper-button {
    display: inline-flex;
    width: 2rem;
    height: 2rem;
    flex: 0 0 auto;
    align-items: center;
    justify-content: center;
    border: 1px solid #eed6aa;
    border-radius: 999px;
    background: #fff;
    color: #872f20;
    font-size: 1.1rem;
    font-weight: 700;
    transition: border-color 160ms ease, background-color 160ms ease, color 160ms ease, transform 160ms ease;
}

.puja-stepper-button:hover:not(:disabled) {
    border-color: #872f20;
    background: #872f20;
    color: #fff8ea;
    transform: translateY(-1px);
}

.puja-stepper-button:disabled {
    cursor: not-allowed;
    opacity: 0.35;
}

.puja-meal-guidance {
    display: flex;
    align-items: flex-start;
    gap: 0.7rem;
    border: 1px solid rgba(207, 144, 32, 0.55);
    border-radius: 1rem;
    background: linear-gradient(135deg, #fbeecb, #fef7e7);
    padding: 0.85rem 1rem;
    color: #551910;
    font-size: 0.78rem;
    line-height: 1.55;
}

.puja-meal-guidance > span {
    color: #a8721a;
}

.puja-order-total {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    border: 1px solid #cf9020;
    border-radius: 1rem;
    background: linear-gradient(115deg, #fbeecb, #fffdf8 58%, #fef7e7);
    padding: 1rem 1.15rem;
    box-shadow: 0 8px 20px rgba(125, 85, 20, 0.08);
}

.puja-alert-success,
.puja-alert-error {
    border: 1px solid;
    border-radius: 0.85rem;
    padding: 0.85rem 1rem;
}

.puja-alert-success {
    border-color: rgba(22, 101, 52, 0.26);
    background: #dcfce7;
    color: #166534;
}

.puja-alert-error {
    border-color: rgba(185, 28, 28, 0.24);
    background: #fef2f2;
    color: #991b1b;
}

@media (min-width: 768px) {
    .puja-form-step { padding: 1.5rem; }
    /* The plates carry their own padding now, so a wider card is spent on the
       gutters between them rather than on the cells around them. */
    .puja-schedule {
        border-spacing: 0.55rem;
        padding: 0.25rem 0.65rem 0.7rem;
        font-size: 0.86rem;
    }
    .puja-schedule thead th { padding: 0.5rem 0.35rem 0; }
    .puja-schedule-meal { width: 11rem; }
    .puja-pick { min-height: 3.25rem; padding: 0.5rem 0.85rem; }
    .puja-schedule-na { min-height: 3.25rem; padding: 0.5rem 0.85rem; }
    .puja-person-head { padding: 0.95rem 1.1rem; }
    /* Match DAY's rendered left inset. The base flex layout centers the
       checkbox beside both lines of the label, just as it does on mobile. */
    .puja-child-row { padding-left: 1.5rem; }
    .puja-bundle-applied,
    .puja-bundle-hint { padding: 0.7rem 1.1rem; }
}

/* Cultural programme (guest form, step 04) — one tickable card per person in
   the party, adults and kids alike. A kid's card also carries a name input,
   revealed only once their box is ticked, because kid seats are anonymous
   counters everywhere else in this form. */
.puja-cultural-card {
    display: flex;
    min-width: 0;
    flex-direction: column;
    gap: 0.55rem;
    border: 1px solid #f1d59b;
    border-radius: 1rem;
    background: #fff;
    padding: 0.8rem;
    box-shadow: 0 5px 16px rgba(61, 10, 8, 0.045);
    transition: border-color 160ms ease, background-color 160ms ease, box-shadow 160ms ease;
}

.puja-cultural-card.is-selected {
    border-color: rgba(168, 114, 26, 0.58);
    background: linear-gradient(135deg, #fffdf8, #fef7e7);
    box-shadow: 0 8px 20px rgba(61, 10, 8, 0.08);
}

.puja-cultural-toggle {
    display: flex;
    min-width: 0;
    align-items: center;
    gap: 0.7rem;
    cursor: pointer;
}

.puja-cultural-check {
    width: 1.15rem;
    height: 1.15rem;
    flex: 0 0 auto;
    accent-color: #7a1d13;
    cursor: pointer;
}

.puja-cultural-body {
    display: block;
    min-width: 0;
    flex: 1 1 auto;
}

.puja-cultural-name {
    display: block;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    color: #3d0a08;
    font-size: 0.875rem;
    font-weight: 700;
}

.puja-cultural-kind {
    display: block;
    margin-top: 0.1rem;
    color: #7c8695;
    font-size: 0.7rem;
    font-weight: 500;
}

    .puja-countdown-plate::after { animation: none; opacity: 0; }
    .puja-countdown-plate [data-countdown].is-ticking { animation: none; }
    .puja-countdown-colon { animation: none; }
    .puja-person-remove,
    .puja-stepper-button,
    .puja-pick,
    .puja-pick-date,
    .puja-cultural-card,
}

/* Collapsing site header -- opt-in, via data-collapse-on-scroll on
   #site-header. Only the two Pujo registration pages set it; index.php and
   puja-payment-return.php load this stylesheet too and deliberately do not,
   so their headers are untouched. main.js adds .is-collapsed past 120px of
   scroll. The logo link and the "Register for Pujo" button survive the
   collapse, so there is always a way home and a way to the form. */
#site-header[data-collapse-on-scroll] [data-header-logo] {
    transition: height 200ms ease, width 200ms ease;
}

#site-header[data-collapse-on-scroll] [data-header-pad],
#site-header[data-collapse-on-scroll] [data-header-card] {
    transition: padding 200ms ease;
}

#site-header.is-collapsed [data-header-strip],
#site-header.is-collapsed [data-header-sub],
#site-header.is-collapsed [data-header-rule],
#site-header.is-collapsed [data-header-nav] {
    display: none;
}

#site-header.is-collapsed [data-header-logo] {
    height: 2.5rem;
    width: 2.5rem;
}

#site-header.is-collapsed [data-header-pad] {
    padding-top: 0.4rem;
    padding-bottom: 0.4rem;
}

#site-header.is-collapsed [data-header-card] {
    padding-top: 0.45rem;
    padding-bottom: 0.45rem;
}

@media (prefers-reduced-motion: reduce) {
    #site-header[data-collapse-on-scroll] [data-header-logo],
    #site-header[data-collapse-on-scroll] [data-header-pad],
    #site-header[data-collapse-on-scroll] [data-header-card] {
        transition: none;
    }
}

/* ------------------------------------------------------------------ */
/* Desi Beats — DJ night on Day 1                                      */
/* ------------------------------------------------------------------ */
/* Effects are adapted from the standalone Desi Beats embed: deep      */
/* poster-night backdrop, rangoli frame, top/left festoon bulbs, tap   */
/* hint, ticker strip and 3D shake. The real JPG remains the visual    */
/* focus, and the existing bottom equaliser/amplifier is preserved.    */
/* ------------------------------------------------------------------ */

.desi-beats-section {
    position: relative;
    overflow: hidden;
    background:
        radial-gradient(70rem 45rem at 15% 0%, rgba(58, 18, 80, 0.95) 0%, rgba(32, 10, 48, 0.98) 45%, #150720 100%),
        linear-gradient(135deg, #200a30 0%, #150720 100%);
    color: #fbf1de;
}

.desi-beats-section::before {
    content: '';
    position: absolute;
    inset: 0;
    opacity: 0.18;
    pointer-events: none;
    background-image:
        radial-gradient(circle at 1px 1px, rgba(232, 184, 75, 0.5) 1px, transparent 0),
        radial-gradient(circle at 50% 50%, rgba(209, 35, 107, 0.18), transparent 30rem);
    background-size: 24px 24px, 100% 100%;
}

.desi-section-motif {
    position: absolute;
    width: 18rem;
    height: 18rem;
    border: 3px solid currentColor;
    border-radius: 53% 47% 50% 50%;
    opacity: 0.18;
    pointer-events: none;
}

.desi-section-motif::before,
.desi-section-motif::after {
    content: '';
    position: absolute;
    border-radius: 999px;
    background: currentColor;
}

.desi-section-motif::before { width: 0.6rem; height: 0.6rem; top: 1rem; left: 50%; }
.desi-section-motif::after { width: 0.45rem; height: 0.45rem; right: 2rem; top: 45%; }
.desi-section-motif--tl { top: -5rem; left: -4rem; color: #d1236b; transform: rotate(-18deg); }
.desi-section-motif--br { right: -5rem; bottom: -5rem; color: #0b7a75; transform: rotate(12deg); }

.desi-poster-frame {
    position: relative;
    width: 100%;
    max-width: 24rem;
    margin-inline: auto;
    padding-bottom: 1.75rem;
    perspective: 1200px;
}

@media (min-width: 1024px) {
    .desi-poster-frame { max-width: none; }
}

.desi-poster {
    position: relative;
    transform-style: preserve-3d;
    will-change: transform, box-shadow;
    background: #150720;
    box-shadow: 0 30px 80px rgba(0, 0, 0, 0.6);
}

.desi-poster:hover,
.desi-poster:focus-visible {
    box-shadow: -18px 40px 82px rgba(0, 0, 0, 0.68), 0 0 34px rgba(232, 184, 75, 0.26);
}

.desi-poster.lit {
    animation: desi-poster-shake-3d 600ms ease;
}

.desi-poster__image {
    position: relative;
    z-index: 1;
    display: block;
    opacity: 1;
    filter: saturate(1.04) contrast(1.02);
}

.desi-dot-frame {
    position: absolute;
    inset: 1rem;
    z-index: 5;
    border: 1.5px dashed rgba(232, 184, 75, 0.58);
    border-radius: 1.15rem;
    pointer-events: none;
}

.desi-bulb-frame {
    position: absolute;
    inset: 0;
    z-index: 6;
    pointer-events: none;
}

.desi-bulb-frame__svg {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
}

.desi-bulb-wire {
    fill: none;
    stroke: rgba(232, 184, 75, 0.5);
    stroke-width: 1.5;
}

.desi-bulb {
    position: absolute;
    width: 9px;
    height: 9px;
    margin: -4.5px 0 0 -4.5px;
    border-radius: 50%;
    background: radial-gradient(circle at 35% 30%, #fffbe8 0%, #e8b84b 55%, #a67418 100%);
    opacity: 0.42;
    box-shadow: 0 0 3px 1px rgba(232, 184, 75, 0.35);
    transition: opacity 300ms ease, box-shadow 300ms ease, transform 300ms ease;
}

.desi-poster.lit .desi-bulb,
.desi-poster:hover .desi-bulb,
.desi-poster:focus-visible .desi-bulb {
    animation: desi-bulb-flash 1.1s ease-in-out 3;
}

.desi-tap-hint {
    position: absolute;
    top: 0.9rem;
    left: 50%;
    z-index: 7;
    transform: translateX(-50%);
    border-radius: 999px;
    background: rgba(21, 7, 32, 0.55);
    padding: 0.25rem 0.7rem;
    color: rgba(251, 241, 222, 0.78);
    font-size: 0.66rem;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    backdrop-filter: blur(6px);
    pointer-events: none;
}

.desi-strip {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 4;
    display: flex;
    align-items: center;
    height: 2.35rem;
    overflow: hidden;
    background: rgba(232, 184, 75, 0.95);
    color: #150720;
    pointer-events: none;
}

.desi-strip__track {
    display: flex;
    align-items: center;
    white-space: nowrap;
    animation: desi-ticker-scroll 16s linear infinite;
}

.desi-strip__track span {
    display: inline-block;
    padding: 0 1.1rem;
    font-family: 'Baloo 2', 'Poppins', sans-serif;
    font-weight: 800;
    font-size: 0.78rem;
    white-space: nowrap;
}

.desi-eq {
    position: absolute;
    bottom: 0;
    left: 50%;
    z-index: 8;
    transform: translateX(-50%);
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.35rem;
    height: 3.5rem;
    padding: 0 1.35rem;
    border-radius: 999px;
    background: #2a0f3d;
    border: 2px solid rgba(230, 180, 34, 0.75);
    box-shadow: 0 0.75rem 1.5rem rgba(0, 0, 0, 0.35), 0 0 26px rgba(209, 35, 107, 0.22);
}

.desi-eq__bar {
    display: block;
    width: 0.32rem;
    height: 1.8rem;
    border-radius: 999px;
    transform-origin: center;
    transform: scaleY(0.18);
    animation: desi-eq-bounce 900ms ease-in-out infinite alternate;
    animation-play-state: paused;
}

.reveal.is-visible .desi-eq__bar { animation-play-state: running; }
.desi-eq__bar:nth-child(1) { background: #d1236b; animation-duration: 620ms; }
.desi-eq__bar:nth-child(2) { background: #f2941f; animation-duration: 840ms; }
.desi-eq__bar:nth-child(3) { background: #0b7a75; animation-duration: 500ms; }
.desi-eq__bar:nth-child(4) { background: #e8b84b; animation-duration: 760ms; }
.desi-eq__bar:nth-child(5) { background: #d1236b; animation-duration: 940ms; }
.desi-eq__bar:nth-child(6) { background: #0b7a75; animation-duration: 680ms; }
.desi-eq__bar:nth-child(7) { background: #f2941f; animation-duration: 580ms; }

.desi-kicker {
    color: #e8b84b;
    font-size: 0.86rem;
    font-weight: 700;
    letter-spacing: 0.02em;
}

.desi-title {
    font-family: 'Baloo 2', 'Poppins', sans-serif;
    font-size: clamp(3.75rem, 9vw, 6.25rem);
    font-weight: 800;
    line-height: 0.88;
    color: #e8b84b;
    text-shadow: 0 0.2rem 0 rgba(209, 35, 107, 0.28), 0 1rem 2.5rem rgba(0, 0, 0, 0.35);
}

.desi-rule {
    width: 8.5rem;
    height: 0.65rem;
    margin: 1.1rem auto 0;
    background:
        radial-gradient(circle at 8px 5px, #d1236b 4px, transparent 4.5px),
        radial-gradient(circle at 24px 5px, #f2941f 4px, transparent 4.5px),
        radial-gradient(circle at 40px 5px, #0b7a75 4px, transparent 4.5px),
        radial-gradient(circle at 56px 5px, #e8b84b 4px, transparent 4.5px);
    background-repeat: repeat-x;
    background-size: 66px 10px;
}

@media (min-width: 1024px) {
    .desi-rule { margin-left: 0; margin-right: 0; }
}

.desi-pill {
    opacity: 0;
    transform: translateY(0.6rem);
}

.reveal.is-visible .desi-pill {
    animation: desi-pill-in 420ms cubic-bezier(0.2, 0.8, 0.3, 1) forwards;
}

.reveal.is-visible .desi-pill:nth-child(1) { animation-delay: 120ms; }
.reveal.is-visible .desi-pill:nth-child(2) { animation-delay: 220ms; }
.reveal.is-visible .desi-pill:nth-child(3) { animation-delay: 320ms; }
.reveal.is-visible .desi-pill:nth-child(4) { animation-delay: 420ms; }

.desi-lineup,
.desi-details {
    border: 1.5px solid rgba(232, 184, 75, 0.66);
    border-radius: 1rem;
    background: rgba(232, 184, 75, 0.11);
}

.desi-lineup {
    padding: 1.15rem 1.35rem;
}

.desi-lineup__label,
.desi-details span {
    display: block;
    color: #e8b84b;
    font-size: 0.72rem;
    font-weight: 800;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.desi-lineup strong {
    display: block;
    margin-top: 0.2rem;
    font-family: 'Baloo 2', 'Poppins', sans-serif;
    font-size: 2.5rem;
    line-height: 1;
    color: #d1236b;
    -webkit-text-stroke: 0.6px #e8b84b;
}

.desi-lineup small,
.desi-details small {
    display: block;
    margin-top: 0.25rem;
    color: rgba(251, 241, 222, 0.68);
    font-weight: 600;
}

.desi-details {
    display: grid;
    gap: 1rem;
    padding: 1.15rem 1.35rem;
}

@media (min-width: 640px) {
    .desi-details { grid-template-columns: 0.9fr 1.25fr; }
    .desi-details > div + div { border-left: 1.5px solid rgba(232, 184, 75, 0.34); padding-left: 1rem; }
}

.desi-details strong {
    display: block;
    margin-top: 0.22rem;
    font-family: 'Baloo 2', 'Poppins', sans-serif;
    color: #fbf1de;
    font-size: 1.25rem;
    line-height: 1.15;
}

@keyframes desi-eq-bounce {
    from { transform: scaleY(0.18); }
    to { transform: scaleY(1); }
}

@keyframes desi-pill-in {
    to { opacity: 1; transform: translateY(0); }
}

@keyframes desi-ticker-scroll {
    from { transform: translateX(0); }
    to { transform: translateX(-50%); }
}

@keyframes desi-bulb-flash {
    0%, 100% {
        opacity: 0.42;
        box-shadow: 0 0 3px 1px rgba(232, 184, 75, 0.35);
        transform: scale(1);
    }
    50% {
        opacity: 1;
        box-shadow: 0 0 16px 6px rgba(255, 251, 232, 0.95), 0 0 28px 10px rgba(232, 184, 75, 0.6);
        transform: scale(1.35);
    }
}

@keyframes desi-poster-shake-3d {
    0%   { transform: translate(0, 0) rotateZ(0deg) rotateX(0deg) rotateY(0deg); box-shadow: 0 30px 80px rgba(0, 0, 0, 0.6); }
    12%  { transform: translate(-7px, 3px) rotateZ(-1deg) rotateX(4deg) rotateY(-5deg); box-shadow: -28px 46px 70px rgba(0, 0, 0, 0.65); }
    24%  { transform: translate(6px, -4px) rotateZ(1deg) rotateX(-4deg) rotateY(5deg); box-shadow: 30px 20px 65px rgba(0, 0, 0, 0.55); }
    36%  { transform: translate(-5px, 4px) rotateZ(-0.8deg) rotateX(3deg) rotateY(-4deg); box-shadow: -24px 40px 70px rgba(0, 0, 0, 0.6); }
    48%  { transform: translate(4px, -3px) rotateZ(0.7deg) rotateX(-3deg) rotateY(4deg); box-shadow: 22px 22px 62px rgba(0, 0, 0, 0.55); }
    60%  { transform: translate(-3px, 2px) rotateZ(-0.5deg) rotateX(2deg) rotateY(-2.5deg); box-shadow: -14px 34px 66px rgba(0, 0, 0, 0.58); }
    72%  { transform: translate(2px, -2px) rotateZ(0.3deg) rotateX(-1.5deg) rotateY(2deg); box-shadow: 10px 28px 64px rgba(0, 0, 0, 0.56); }
    84%  { transform: translate(-1px, 1px) rotateZ(-0.15deg) rotateX(0.8deg) rotateY(-1deg); box-shadow: -4px 32px 78px rgba(0, 0, 0, 0.6); }
    100% { transform: translate(0, 0) rotateZ(0deg) rotateX(0deg) rotateY(0deg); box-shadow: 0 30px 80px rgba(0, 0, 0, 0.6); }
}

@media (prefers-reduced-motion: reduce) {
    .desi-eq__bar,
    .desi-strip__track,
    .desi-poster.lit,
    .desi-poster.lit .desi-bulb,
    .desi-poster:hover .desi-bulb,
    .desi-poster:focus-visible .desi-bulb,
    .reveal.is-visible .desi-pill {
        animation: none;
    }

    .desi-eq__bar:nth-child(1) { transform: scaleY(0.45); }
    .desi-eq__bar:nth-child(2) { transform: scaleY(0.85); }
    .desi-eq__bar:nth-child(3) { transform: scaleY(0.3); }
    .desi-eq__bar:nth-child(4) { transform: scaleY(1); }
    .desi-eq__bar:nth-child(5) { transform: scaleY(0.55); }
    .desi-eq__bar:nth-child(6) { transform: scaleY(0.75); }
    .desi-eq__bar:nth-child(7) { transform: scaleY(0.4); }

    .desi-pill { opacity: 1; transform: none; }
    .desi-bulb { opacity: 1; box-shadow: 0 0 6px rgba(232, 184, 75, 0.55); }
}