/* Shared, section-scoped Diwali effects for the Index, Programs and Prime pages. */
.vmc-festive-page {
    --festive-purple: #7550bb;
    --festive-orange: #d76b28;
    --festive-teal: #188b91;
}

.festive-section {
    position: relative;
    isolation: isolate;
    --festive-primary: var(--festive-purple);
    --festive-secondary: var(--festive-orange);
    --festive-third: var(--festive-teal);
}

.festive-section[data-diwali-theme="dark"] {
    --festive-primary: #ffd064;
    --festive-secondary: #ff9f9a;
    --festive-third: #adceff;
}

.festive-scene {
    position: absolute;
    inset: 0;
    z-index: -1;
    overflow: hidden;
    pointer-events: none;
    user-select: none;
    contain: layout paint;
}

[data-diwali-theme="light"] > .festive-scene {
    background: radial-gradient(ellipse at 0 20%, rgb(117 80 187 / 5%), transparent 35%),
        radial-gradient(ellipse at 100% 75%, rgb(215 107 40 / 5%), transparent 35%);
}

.festive-firework,
.festive-molecule,
.festive-speck,
.festive-rocket {
    left: clamp(52px, var(--x), calc(100% - 52px));
    position: absolute;
    left: var(--x);
    top: var(--y);
    width: var(--size);
    color: var(--festive-primary);
    pointer-events: none;
}

.festive-scene > :nth-child(3n + 2) { color: var(--festive-secondary); }
.festive-scene > :nth-child(3n) { color: var(--festive-third); }

.festive-firework {
    transform: translate(-50%, -50%);
    filter: drop-shadow(0 2px 3px rgb(88 47 132 / 12%));
}

/* A fuller celebration around the Programs banner's central offer. */
.festive-section[data-diwali-density="high"] .festive-firework {
    filter: drop-shadow(0 0 5px rgb(255 208 100 / 32%));
}

.festive-section[data-diwali-density="high"] .festive-rocket { opacity: .9; }

.festive-firework svg,
.festive-card-burst svg {
    display: block;
    width: 100%;
    height: auto;
    overflow: visible;
    fill: none;
    stroke: currentColor;
    stroke-width: 2.6;
    stroke-linecap: round;
}

.festive-launch {
    stroke-dasharray: 12 100;
    animation: festive-launch var(--duration, 4.8s) cubic-bezier(.3, 0, .7, 1) var(--delay, 0s) infinite both;
}

.festive-burst {
    transform-origin: 0 0;
    animation: festive-settle var(--duration, 4.8s) ease-in var(--delay, 0s) infinite both;
}

.festive-ray {
    stroke-dasharray: 15 100;
    animation: festive-explode var(--duration, 4.8s) cubic-bezier(.16, .7, .3, 1) var(--delay, 0s) infinite both;
}

.festive-embers {
    fill: currentColor;
    stroke: none;
    transform-origin: 0 0;
    animation: festive-embers var(--duration, 4.8s) ease-out var(--delay, 0s) infinite both;
}

.festive-embers,
.festive-ray:nth-child(even) { color: var(--festive-secondary, #d76b28); }

@keyframes festive-launch {
    0%, 6% { opacity: 0; stroke-dashoffset: 12; }
    9% { opacity: .85; stroke-dashoffset: 12; }
    25% { opacity: 1; stroke-dashoffset: -88; }
    27%, 100% { opacity: 0; stroke-dashoffset: -100; }
}

@keyframes festive-explode {
    0%, 24% { opacity: 0; stroke-dashoffset: 15; stroke-dasharray: 15 100; }
    27% { opacity: 1; stroke-dashoffset: 0; stroke-dasharray: 22 100; }
    42% { opacity: 1; stroke-dashoffset: -46; stroke-dasharray: 15 100; }
    63% { opacity: .65; stroke-dashoffset: -82; stroke-dasharray: 5 100; }
    76%, 100% { opacity: 0; stroke-dashoffset: -100; stroke-dasharray: 1 100; }
}

@keyframes festive-settle {
    0%, 27% { transform: translateY(0); }
    80%, 100% { transform: translateY(26px); }
}

@keyframes festive-embers {
    0%, 27% { opacity: 0; transform: scale(.08); }
    34% { opacity: .95; transform: scale(.4); }
    56% { opacity: .9; transform: scale(.95); }
    78%, 100% { opacity: 0; transform: scale(1.12); }
}

.festive-molecule {
    opacity: .38;
    translate: -50% 0;
    animation: festive-float var(--duration, 12s) ease-in-out var(--delay, 0s) infinite alternate;
}

.festive-molecule svg {
    display: block;
    width: 100%;
    overflow: visible;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.8;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.festive-orbits {
    transform-box: view-box;
    transform-origin: center;
    animation: festive-orbit 24s linear var(--delay, 0s) infinite;
}

@keyframes festive-orbit { to { transform: rotate(360deg); } }
@keyframes festive-float {
    from { transform: translate3d(-6px, 10px, 0) rotate(-8deg); }
    to { transform: translate3d(8px, -16px, 0) rotate(8deg); }
}

.festive-speck {
    height: var(--size);
    border-radius: 50%;
    background: currentColor;
    opacity: .4;
    animation: festive-drift var(--duration, 8s) ease-in-out var(--delay, 0s) infinite;
}

.festive-speck--diamond { border-radius: 1px; }
.festive-speck--ring { background: transparent; border: 1.5px solid currentColor; }

@keyframes festive-drift {
    0% { opacity: 0; transform: translate3d(0, 20px, 0) rotate(0); }
    20% { opacity: .55; }
    75% { opacity: .35; }
    100% { opacity: 0; transform: translate3d(var(--drift, 14px), -55px, 0) rotate(120deg); }
}

.festive-rocket {
    opacity: .75;
    translate: -50% 0;
    animation: festive-float var(--duration, 8s) ease-in-out var(--delay, 0s) infinite alternate;
}

.festive-rocket svg { display: block; width: 100%; overflow: visible; transform: rotate(var(--tilt, 0deg)); }
.festive-fuse {
    transform-box: fill-box;
    transform-origin: center;
    animation: festive-fuse 1.8s ease-in-out var(--delay, 0s) infinite alternate;
}
@keyframes festive-fuse {
    from { opacity: .35; transform: scale(.65); }
    to { opacity: 1; transform: scale(1.1); }
}

/* Card accents sit at the edge, leaving titles, prices and links unobscured. */
.vmc-festive-page .festive-card {
    position: relative;
    outline: 1px solid rgb(202 146 60 / 48%);
    outline-offset: -1px;
}

.festive-card-burst {
    position: absolute;
    top: -22px;
    right: -6px;
    width: 52px;
    height: 58px;
    color: var(--festive-purple);
    --festive-secondary: #d76b28;
    --duration: 4.6s;
    pointer-events: none;
    user-select: none;
    z-index: 2;
}

.festive-card:nth-child(even) > .festive-card-burst { color: var(--festive-orange); }
.festive-card-burst svg { stroke-width: 3.4; }

/* Keep the homepage layout while replacing its old static-star decorations. */
.vmc-festive-page .bnr { overflow: hidden; isolation: isolate; }
.vmc-festive-page .diwali-hero-inner > .container { position: relative; z-index: 1; }
.vmc-festive-page .diwali-course-category::after { content: none; }
.vmc-festive-page .diwali-course-category { max-width: 100%; }
.vmc-festive-page .diwali-course-grid .festive-card { outline-color: #d59d42; }

.festive-paused .festive-scene *,
.festive-card.festive-paused > .festive-card-burst *,
.festive-document-hidden .festive-scene *,
.festive-document-hidden .festive-card-burst * {
    animation-play-state: paused !important;
}

@media (max-width: 767.98px) {
    .festive-extra { display: none; }
    .festive-firework { max-width: 76px; }
    .festive-molecule { max-width: 40px; opacity: .24; }
    .festive-rocket { left: clamp(36px, var(--x), calc(100% - 36px)); max-width: 34px; opacity: .55; }
    .festive-section[data-diwali-density="high"] .festive-firework { opacity: .7; }
    .festive-section[data-diwali-density="high"] .festive-rocket { max-width: 28px; opacity: .6; }
    .festive-card-burst { top: -16px; right: 0; width: 40px; height: 46px; }
}

@media (prefers-reduced-motion: reduce) {
    .festive-scene *, .festive-card-burst * { animation: none !important; }
    .festive-launch, .festive-fuse { display: none; }
    .festive-ray { opacity: .6; stroke-dasharray: 15 100; stroke-dashoffset: -65; }
    .festive-embers { opacity: .5; transform: scale(.9); }
    .festive-speck { opacity: .3; }
}

@media print {
    .festive-scene, .festive-card-burst { display: none !important; }
}