/* ================= hero countdown by festival phase (js/countdown-states.js sets html[data-cs]) =================
   before: nothing here applies, the tiles run as they are.
   during: no box at all, a serif line in the h1's gold and the day/date line under it.
   after: one farewell card in the tiles' glass. Colours come from the page tokens, so light.css themes them. */

html:is([data-cs="during"],[data-cs="after"]) #count .unit,
html:is([data-cs="during"],[data-cs="after"]) #status{display:none}

/* ---------- during: banner, no box ---------- */
.cs-banner{display:grid;justify-items:center;gap:2px;max-width:min(100%,560px)}
.cs-banner p{margin:0}
.cs-orn{color:var(--gold);font-size:1rem;opacity:.9}
.cs-big{font-size:clamp(2.4rem,8.6vw,4.2rem);line-height:1.5;padding-top:.2em;font-weight:800;
  background:linear-gradient(180deg,#fff2c9,#ffc65c 55%,#ff9b3a);-webkit-background-clip:text;background-clip:text;color:transparent;
  filter:drop-shadow(0 3px 16px rgba(255,140,40,.5))}
.cs-line{font-size:clamp(.95rem,3vw,1.12rem);color:var(--gold);text-shadow:0 2px 12px #000}
:where(html[data-theme="light"]) .cs-big{background:linear-gradient(180deg,#7a0f26,#b3122b 55%,#9c2f0a);-webkit-background-clip:text;background-clip:text;
  filter:drop-shadow(0 2px 10px rgba(255,170,60,.4))}
:where(html[data-theme="light"]) .cs-line{color:var(--red);font-weight:600;text-shadow:0 1px 10px rgba(255,248,236,.9)}

/* ---------- বিজয়া দশমী line, and the after card ---------- */
.cs-bye{max-width:30em;margin:10px auto 0;font-size:clamp(.95rem,3vw,1.08rem);line-height:1.7;text-shadow:0 2px 12px #000}
:where(html[data-theme="light"]) .cs-bye{text-shadow:0 1px 10px rgba(255,248,236,.9)}
.cs-card{position:relative;display:grid;justify-items:center;gap:4px;width:min(100%,520px);padding:16px 18px 18px;border-radius:20px;
  background:var(--glass);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);border:1px solid var(--line);
  box-shadow:0 10px 30px rgba(0,0,0,.35),inset 0 1px 0 rgba(255,255,255,.12);overflow:hidden}
.cs-card::before{content:"";position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(115deg,transparent 35%,rgba(255,220,150,.18) 50%,transparent 65%);translate:-100% 0;animation:shine 5s ease-in-out infinite}
.cs-card>*{position:relative;margin:0}
.cs-card .cs-bye{text-shadow:none}
.cs-title{font-size:clamp(1.9rem,7vw,3rem);line-height:1.5;padding-top:.15em;color:var(--gold);text-shadow:0 0 18px rgba(255,170,60,.6)}
:where(html[data-theme="light"]) .cs-card{box-shadow:0 10px 26px rgba(120,50,20,.14),inset 0 1px 0 #fff}
:where(html[data-theme="light"]) .cs-title{color:var(--red);text-shadow:none}

/* timeline: from 16 Oct "today" always sits on a stop (the stop itself is lit as .now), so its word would print over that
   stop's date; keep just the marker line */
html:is([data-cs="during"],[data-cs="after"]) .mf-today{font-size:0;gap:0}

@media (prefers-reduced-motion:reduce){.cs-card::before{animation:none}}