/* Occasional changes stay within the hero's existing rhythm. */
.hero__occasion {
  color: var(--accent-text);
  font: 500 .85rem/1.5 var(--font);
  letter-spacing: .04em;
  margin-bottom: 8px;
  text-wrap: balance;
}
.seasonal-reference {
  display: inline-block;
  margin-top: 14px;
  color: color-mix(in srgb, var(--ink) 88%, var(--bg));
  font: .8rem/1.5 var(--font);
  text-underline-offset: 4px;
}
.seasonal-reference:hover { color: var(--ink); text-decoration: underline; }
.seasonal-verse { margin: 0; max-width: 34em; font: 1.18rem/1.6 var(--font-display); text-wrap: pretty; }
.seasonal-verse cite { display: block; font-style: normal; }
.seasonal-verse p { margin: 0; }
:is([data-language="zh"], [data-language="zh-Hant"], [data-language="ja"], [data-language="ko"]) .seasonal-verse { font-family: var(--font); line-height: 1.75; }
.seasonal-credits { max-width: 36em; margin-top: 8px; color: color-mix(in srgb, var(--ink) 88%, var(--bg)); font: .7rem/1.6 var(--font); }
.seasonal-credits summary { cursor: pointer; width: fit-content; padding-block: 4px; }
.seasonal-credits p { margin-top: 6px; }
.seasonal-credits[open] p { padding: 10px 12px; border-radius: 8px; background: color-mix(in srgb, var(--bg) 90%, transparent); }
html[data-occasion="christmas"] .hero { --signature-accent: #a26c2e; --accent-text: #765020; }
html[data-theme="dark"][data-occasion="christmas"] .hero { --signature-accent: #dfb66e; --accent-text: #e6c284; }
html[data-occasion="christmas"] .hero__backdrop img { object-position: 68% center; }
html[data-occasion="good-friday"] .hero__backdrop img { object-position: 74% center; }
html[data-occasion="easter"] .hero__backdrop img { object-position: 75% center; }
html[data-occasion="thanksgiving"] .hero__backdrop img { object-position: 72% center; }
html[data-occasion="palm-sunday"] .hero__backdrop img { object-position: 78% center; }
html[data-occasion="good-friday"] .hero__photo { filter: brightness(.88) saturate(.72); }
html[data-theme="dark"][data-occasion="good-friday"] .hero__photo { filter: brightness(.66) saturate(.76); }
html[data-occasion]:not([data-new-year-phase="countdown"]) .hero__backdrop::before {
  background:
    linear-gradient(to bottom, rgb(251 249 244 / 62%), transparent 28%),
    linear-gradient(90deg, rgb(251 249 244 / 95%), rgb(251 249 244 / 88%) 36%, rgb(251 249 244 / 68%) 60%, rgb(251 249 244 / 12%));
}
html[data-occasion]:not([data-new-year-phase="countdown"]) .hero__backdrop::after {
  background:
    linear-gradient(to bottom, rgb(20 23 25 / 55%), transparent 28%),
    linear-gradient(90deg, rgb(20 23 25 / 92%), rgb(20 23 25 / 80%) 36%, rgb(20 23 25 / 62%) 60%, rgb(20 23 25 / 10%));
}
.seasonal-countdown {
  width: fit-content;
  max-height: 150px;
  margin-top: 24px;
  color: var(--ink);
  transition: max-height 600ms cubic-bezier(.22, 1, .36, 1), margin-top 600ms cubic-bezier(.22, 1, .36, 1), opacity 350ms ease;
}
.seasonal-countdown.is-finished { max-height: 0; margin-top: 0; opacity: 0; overflow: hidden; }
.seasonal-countdown__label { font: .75rem/1.5 var(--font); color: var(--mute); margin-bottom: 4px; }
.seasonal-countdown__digits {
  display: flex;
  align-items: center;
  font: 500 clamp(2.75rem, 5vw, 3.75rem)/1 var(--font);
  font-variant-numeric: tabular-nums;
  letter-spacing: -.045em;
  white-space: nowrap;
}
.seasonal-countdown__digits number-flow { --number-flow-mask-height: .12em; --number-flow-mask-width: 0em; }
.seasonal-countdown__minute { display: none; }
.seasonal-countdown.is-expanded { width: min(100%, 240px); max-height: 160px; padding-bottom: 16px; }
.seasonal-countdown.is-expanded .seasonal-countdown__label { margin-bottom: 4px; }
.seasonal-countdown.is-expanded .seasonal-countdown__digits { display: none; }
.seasonal-countdown.is-expanded .seasonal-countdown__minute { position: relative; display: flex; align-items: baseline; gap: 12px; padding-bottom: 14px; font: 400 clamp(4rem, 10vw, 5.5rem)/1 var(--font); font-variant-numeric: tabular-nums; letter-spacing: -.06em; }
.seasonal-countdown.is-expanded.is-finished { max-height: 0; padding-bottom: 0; }
.seasonal-countdown__minute number-flow { --number-flow-mask-height: .12em; --number-flow-mask-width: 0em; }
.seasonal-countdown__unit { color: var(--mute); font: .8rem/1.5 var(--font); letter-spacing: 0; }
.seasonal-countdown__minute::before, .seasonal-countdown__minute::after { content: ""; position: absolute; left: 0; bottom: 0; height: 2px; border-radius: 1px; }
.seasonal-countdown__minute::before { width: 100%; background: var(--rule); }
.seasonal-countdown__minute::after { width: 100%; background: var(--accent-text); transform: scaleX(calc(var(--remaining, 60) / 60)); transform-origin: left; transition: transform 1s linear; }
.seasonal-countdown__colon { opacity: .45; padding-inline: .08em; transform: translateY(-.06em); }
.seasonal-countdown.is-floating {
  position: fixed;
  z-index: 90;
  right: max(20px, env(safe-area-inset-right));
  bottom: max(20px, env(safe-area-inset-bottom));
  margin: 0;
  padding: 12px 18px;
  border: 1px solid var(--rule);
  border-radius: 16px;
  background: var(--bg);
  box-shadow: 0 5px 24px rgb(0 0 0 / 8%);
}
.seasonal-countdown.is-floating .seasonal-countdown__digits { font-size: 2rem; }
.seasonal-fireworks { position: fixed; inset: 0; z-index: 95; pointer-events: none; contain: strict; transition: opacity 600ms ease; }
.seasonal-fireworks.is-ending { opacity: 0; }
.seasonal-fireworks canvas { display: block; }
.season-stage {
  position: fixed;
  inset: 0;
  width: 100%;
  height: 100%;
  height: 100dvh;
  max-width: none;
  max-height: none;
  margin: 0;
  padding: max(16px, env(safe-area-inset-top)) 24px max(16px, env(safe-area-inset-bottom));
  border: 0;
  color: #f1f3f4;
  background: radial-gradient(ellipse at 50% 35%, #233442, #10171e 75%);
  overflow: auto;
}
.season-stage:not([open]) { display: none; }
.season-stage[open] { display: grid; place-items: center; animation: season-stage-in 600ms cubic-bezier(.22, 1, .36, 1) both; }
.season-stage::backdrop { background: #10171e; animation: season-backdrop-in 600ms ease both; }
.season-stage.is-leaving { animation: season-stage-out 600ms ease both; }
.season-stage.is-leaving::backdrop { animation: season-stage-out 600ms ease both; }
.season-stage__inner { display: flex; flex-direction: column; align-items: center; gap: 12px; text-align: center; width: 100%; }
.season-stage__title { font: 400 clamp(1rem, 2.5vw, 1.25rem)/1.5 var(--font-display); max-width: 26em; text-wrap: balance; color: #d6dce1; }
.season-stage__clock { position: relative; display: grid; place-items: center; width: min(68vw, 48dvh, 360px); aspect-ratio: 1; font: 400 clamp(5rem, 24vmin, 12rem)/1 var(--font); font-variant-numeric: tabular-nums; letter-spacing: -.06em; }
.season-stage__clock number-flow { --number-flow-mask-height: .12em; --number-flow-mask-width: 0em; }
.season-stage__ring { position: absolute; inset: 0; width: 100%; height: 100%; transform: rotate(-90deg); fill: none; stroke-width: 1; }
.season-stage__track { stroke: rgb(241 243 244 / 12%); }
.season-stage__progress { stroke: #e1c99a; stroke-dasharray: 60; stroke-dashoffset: calc(60 - var(--remaining, 60)); transition: stroke-dashoffset 1s linear; }
.season-stage__year { font: 400 1rem/1.5 var(--font); color: #e1c99a; letter-spacing: .2em; }
html[data-theme="light"] .season-stage { color: var(--ink); background: radial-gradient(ellipse at 50% 35%, #fff, #edf1f4 75%); }
html[data-theme="light"] .season-stage::backdrop { background: var(--bg); }
html[data-theme="light"] .season-stage__title { color: var(--mute); }
html[data-theme="light"] .season-stage__year, html[data-theme="light"] .season-stage__progress { color: var(--accent-text); stroke: var(--accent-text); }
html[data-theme="light"] .season-stage__track { stroke: var(--rule); }
.home-page .hero__backdrop .seasonal-year-photo { opacity: 0; transform: scale(1.025); transition: opacity 1200ms ease, transform 1800ms cubic-bezier(.22, 1, .36, 1); object-position: 75% center; }
.home-page .hero__backdrop .seasonal-year-photo.is-active { opacity: 1; transform: scale(1); }
html[data-new-year-phase="greeting"] .hero__backdrop img { object-position: 75% center; }
@keyframes season-stage-in { from { opacity: 0; transform: scale(.985); } to { opacity: 1; transform: scale(1); } }
@keyframes season-stage-out { from { opacity: 1; } to { opacity: 0; } }
@keyframes season-backdrop-in { from { opacity: 0; } to { opacity: 1; } }
.seasonal-countdown[hidden], .seasonal-reference[hidden], .seasonal-credits[hidden], .seasonal-verse[hidden], .hero__occasion[hidden], .hero__note[hidden] { display: none; }
@media (max-width: 1024px) {
  html[data-new-year-phase="greeting"] .hero__backdrop img,
  .home-page .hero__backdrop .seasonal-year-photo { object-position: 83% center; }
  html[data-occasion="easter"] .hero__backdrop img { object-position: 88% center; }
  html[data-occasion]:not([data-new-year-phase="countdown"]) .hero__backdrop::before {
    background: linear-gradient(90deg, rgb(251 249 244 / 92%), rgb(251 249 244 / 82%) 45%, rgb(251 249 244 / 68%));
  }
  html[data-occasion]:not([data-new-year-phase="countdown"]) .hero__backdrop::after {
    background: linear-gradient(90deg, rgb(20 23 25 / 88%), rgb(20 23 25 / 72%) 45%, rgb(20 23 25 / 58%));
  }
}
@media (max-width: 767px) {
  html[data-occasion="christmas"] .hero__backdrop img { object-position: 76% center; }
  html[data-occasion="good-friday"] .hero__backdrop img { object-position: 82% center; }
  html[data-occasion="easter"] .hero__backdrop img { object-position: 88% center; }
  html[data-occasion="thanksgiving"] .hero__backdrop img { object-position: 85% center; }
  html[data-occasion="palm-sunday"] .hero__backdrop img { object-position: 86% center; }
  .hero__occasion { font-size: .8rem; }
  .seasonal-verse { font-size: 1.05rem; line-height: 1.6; }
  html[data-occasion]:not([data-new-year-phase="countdown"]) .home-page .hero__name { font-size: clamp(4rem, 18vw, 4.75rem); margin-bottom: 16px; }
  .seasonal-countdown { margin-top: 20px; }
}
@media (prefers-reduced-motion: reduce) {
  .seasonal-countdown { transition: none; }
  .season-stage[open], .season-stage.is-leaving, .season-stage::backdrop, .season-stage.is-leaving::backdrop { animation: none; }
  .season-stage__progress, .home-page .hero__backdrop .seasonal-year-photo { transition: none; transform: none; }
  .seasonal-countdown__minute::after { transition: none; }
}