/* Hanging diyas and marigolds along the edges, with a clear centre. */
.cs-festival--diwali { position:fixed; inset:0; z-index:20; overflow:hidden; pointer-events:none; user-select:none; contain:strict; }
.cs-festival--diwali, .cs-festival--diwali * { pointer-events:none !important; box-sizing:border-box; }
.cs-diwali__toran { position:absolute; inset:0 0 auto; height:44px; background:url('../assets/toran.svg') repeat-x center top / 240px 44px; }
.cs-diwali__hanging { --edge-gap:12px; --lamp-height:38px; --lamp-size:28px 294px; --chain-size:28px 26px; --start-height:44px; position:absolute; top:0; width:28px; height:calc(100% - var(--edge-gap)); }
.cs-diwali__hanging::before { content:""; position:absolute; inset:0 0 var(--lamp-height); background:url('../assets/diwali-marigold-chain.svg') center top / var(--chain-size) repeat-y; }
.cs-diwali__hanging::after { content:""; position:absolute; inset:auto 0 0; height:var(--lamp-height); background:url('../assets/diwali-hanging-diyas.svg') center bottom / var(--lamp-size) no-repeat; }
.cs-diwali__hanging--left { left:0; }
.cs-diwali__hanging--right { right:0; transform:scaleX(-1); }
@media (prefers-reduced-motion:no-preference) {
  .cs-festival--diwali:not(.cs-festival--still) .cs-diwali__hanging { animation:cs-diwali-extend 4s ease-in-out 1; }
  .cs-festival--diwali:not(.cs-festival--still) .cs-diwali__toran { animation:cs-diwali-welcome 4s ease-in-out 1; }
}
@keyframes cs-diwali-welcome { 0%,100% { opacity:1; } 45% { opacity:.55; } 70% { opacity:.95; } }
@keyframes cs-diwali-extend { from { height:var(--start-height); } to { height:calc(100% - var(--edge-gap)); } }
@media (max-width:600px) {
  .cs-diwali__toran { height:29px; background-size:160px 29px; }
  .cs-diwali__hanging { --edge-gap:8px; --lamp-height:22px; --lamp-size:16px 168px; --chain-size:16px 15px; --start-height:29px; width:16px; }
}
@media (forced-colors:active), print { .cs-festival--diwali { display:none; } }