/* Final autumn countdown: two distinct botanical branches with staged growth. */
.calendar-section {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  padding: clamp(5.5rem, 10vw, 8rem) clamp(1rem, 5vw, 3rem);
  color: #634536;
  background:
    radial-gradient(circle at 50% 46%, rgba(255, 255, 255, .95), transparent 34%),
    linear-gradient(180deg, #f7efe4 0%, #fffaf2 48%, #f3e8db 100%);
}
.calendar-section::before,
.calendar-section::after {
  position: absolute;
  right: 0;
  left: 0;
  z-index: -1;
  height: clamp(90px, 13vw, 160px);
  content: "";
  pointer-events: none;
}
.calendar-section::before {
  top: 0;
  background: linear-gradient(180deg, #f3e4cf 0%, rgba(247, 239, 228, .72) 44%, transparent 100%);
}
.calendar-section::after {
  bottom: 0;
  background: linear-gradient(0deg, #ede2d4 0%, rgba(243, 232, 219, .7) 42%, transparent 100%);
}
.calendar-card {
  position: relative;
  width: min(100%, 940px);
  min-height: 650px;
  margin: auto;
  padding: clamp(4.8rem, 9vw, 7.4rem) clamp(1rem, 7vw, 5rem);
  isolation: isolate;
}
.countdown-content {
  position: relative;
  z-index: 3;
  width: min(100%, 720px);
  margin: auto;
  padding: clamp(3rem, 6vw, 4.5rem) clamp(1rem, 6vw, 4rem) clamp(2.8rem, 6vw, 4rem);
  text-align: center;
  background: rgba(255, 252, 245, .76);
  border: 1px solid rgba(151, 103, 70, .19);
  border-radius: 46px;
  box-shadow: 0 28px 70px rgba(104, 69, 47, .12), inset 0 0 0 8px rgba(255, 255, 255, .24);
  backdrop-filter: blur(11px);
}
.countdown-content::before {
  position: absolute;
  inset: 11px;
  border: 1px solid rgba(189, 150, 81, .22);
  border-radius: 37px;
  content: "";
  pointer-events: none;
}
.calendar-hourglass {
  position: relative;
  z-index: 1;
  width: clamp(62px, 8vw, 82px);
  margin: 0 auto 1.15rem;
  filter: sepia(.12) drop-shadow(0 9px 8px rgba(102, 66, 41, .14));
}
.calendar-hourglass svg { display: block; width: 100%; height: auto; }
.calendar-heading { margin: 0 auto clamp(2rem, 4.5vw, 3rem); }
.calendar-heading > p {
  margin-bottom: .25rem;
  color: #a06a4e;
  font-size: clamp(.78rem, 2vw, .9rem);
  line-height: 2;
}
.calendar-card .calendar-heading h2 {
  margin: 0;
  padding: .12em .08em .25em;
  color: #6e392e;
  font-family: "Mina Miremad", Tahoma, sans-serif;
  font-size: clamp(2.15rem, 6vw, 3.75rem);
  font-weight: 400;
  line-height: 1.7;
}
.simple-countdown {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  width: min(100%, 610px);
  margin: 0 auto;
  direction: ltr;
}
.countdown-unit {
  position: relative;
  display: flex;
  min-width: 0;
  flex-direction: column;
  align-items: center;
  padding: .4rem .3rem .55rem;
}
.countdown-unit + .countdown-unit::before {
  position: absolute;
  top: 18%;
  bottom: 18%;
  left: 0;
  width: 1px;
  background: linear-gradient(transparent, rgba(173, 124, 78, .46), transparent);
  content: "";
}
.simple-countdown strong {
  display: block;
  min-width: 2ch;
  color: #704233;
  font-family: Georgia, "Times New Roman", serif;
  font-size: clamp(2.25rem, 7vw, 4.7rem);
  font-weight: 400;
  font-variant-numeric: tabular-nums;
  line-height: 1.2;
  white-space: nowrap;
}
.simple-countdown .long-days strong { font-size: clamp(1.7rem, 5vw, 3.4rem); }
.simple-countdown .calendar-label {
  margin-top: .6rem;
  color: #9a6a50;
  direction: rtl;
  font-family: Tahoma, "Segoe UI", sans-serif;
  font-size: clamp(.7rem, 1.7vw, .86rem);
  line-height: 1.9;
}
.countdown-ornament {
  position: relative;
  z-index: 1;
  display: flex;
  width: min(70%, 360px);
  align-items: center;
  justify-content: center;
  gap: .75rem;
  margin: 1.75rem auto .7rem;
  color: #bb8a53;
}
.countdown-ornament i { flex: 1; height: 1px; background: linear-gradient(90deg, transparent, rgba(184, 131, 78, .58)); }
.countdown-ornament i:last-child { transform: scaleX(-1); }
.countdown-ornament b { font-size: .68rem; font-weight: 400; }
.calendar-date {
  position: relative;
  z-index: 1;
  display: block;
  color: #805342;
  font-family: Georgia, "Times New Roman", serif;
  font-size: clamp(.82rem, 2vw, 1rem);
  font-variant-numeric: tabular-nums;
  letter-spacing: .15em;
  line-height: 2;
}
.countdown-botanical {
  position: absolute;
  z-index: 4;
  pointer-events: none;
  opacity: 0;
}
.calendar-flower-top-left {
  top: clamp(-6.8rem, -7vw, -4.4rem);
  left: clamp(-8.6rem, -8vw, -4.2rem);
  width: clamp(280px, 41vw, 440px);
  aspect-ratio: 871 / 1218;
}
.calendar-flower-bottom-right {
  right: clamp(-8.4rem, -8vw, -4rem);
  bottom: clamp(-7.6rem, -8vw, -4.6rem);
  width: clamp(260px, 37vw, 410px);
  aspect-ratio: 863 / 1295;
}
.countdown-branch-sway,
.countdown-botanical img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}
.countdown-botanical img { object-fit: contain; }
.countdown-branch-sway { will-change: transform; }
.calendar-flower-top-left .countdown-branch-sway { transform-origin: 3% 2%; }
.calendar-flower-bottom-right .countdown-branch-sway { transform-origin: 97% 97%; }
.countdown-branch-trace {
  opacity: 0;
  filter: sepia(.75) saturate(.38) brightness(.72);
}
.countdown-branch-bloom {
  opacity: 0;
  transform: scale(.86);
  filter: blur(2px) saturate(.9);
}
.calendar-card.visible .countdown-botanical { animation: countdown-branch-arrive .6s ease-out both; }
.calendar-card.visible .calendar-flower-bottom-right { animation-delay: .18s; }
.calendar-card.visible .calendar-flower-top-left .countdown-branch-trace { animation: countdown-trace-top 1.65s cubic-bezier(.2, .69, .23, 1) .1s both; }
.calendar-card.visible .calendar-flower-bottom-right .countdown-branch-trace { animation: countdown-trace-bottom 1.75s cubic-bezier(.2, .69, .23, 1) .28s both; }
.calendar-card.visible .calendar-flower-top-left .countdown-branch-bloom { animation: countdown-bloom 1.25s cubic-bezier(.2, .74, .22, 1.06) 1.05s both; }
.calendar-card.visible .calendar-flower-bottom-right .countdown-branch-bloom { animation: countdown-bloom 1.3s cubic-bezier(.2, .74, .22, 1.06) 1.3s both; }
.calendar-card.visible .calendar-flower-top-left .countdown-branch-sway { animation: countdown-breeze-left 9.8s ease-in-out 3s infinite; }
.calendar-card.visible .calendar-flower-bottom-right .countdown-branch-sway { animation: countdown-breeze-right 11.2s ease-in-out 3.2s infinite; }
.calendar-card.visible .sand-upper { transform-origin: 60px 82px; animation: sand-empty 12s linear infinite; }
.calendar-card.visible .sand-lower { transform-origin: 60px 145px; animation: sand-fill 12s linear infinite; }
.calendar-card.visible .sand-stream { animation: sand-fall .45s linear infinite; }
@keyframes countdown-branch-arrive { from { opacity: 0; } to { opacity: 1; } }
@keyframes countdown-trace-top {
  0% { opacity: 0; clip-path: inset(0 100% 100% 0); }
  18% { opacity: .45; }
  100% { opacity: .42; clip-path: inset(0); }
}
@keyframes countdown-trace-bottom {
  0% { opacity: 0; clip-path: inset(100% 0 0 100%); }
  18% { opacity: .45; }
  100% { opacity: .42; clip-path: inset(0); }
}
@keyframes countdown-bloom {
  0% { opacity: 0; transform: scale(.86); filter: blur(2px) saturate(.78); }
  68% { opacity: 1; transform: scale(1.018); filter: blur(0) saturate(.97); }
  100% { opacity: 1; transform: none; filter: blur(0) saturate(.94); }
}
@keyframes countdown-breeze-left {
  0%, 100% { transform: rotate(-.22deg) translate3d(0, 0, 0); }
  42% { transform: rotate(.48deg) translate3d(1px, -1px, 0); }
  72% { transform: rotate(-.08deg) translate3d(-1px, 0, 0); }
}
@keyframes countdown-breeze-right {
  0%, 100% { transform: rotate(.2deg) translate3d(0, 0, 0); }
  36% { transform: rotate(-.46deg) translate3d(-1px, -1px, 0); }
  70% { transform: rotate(.12deg) translate3d(1px, 0, 0); }
}
@keyframes sand-empty { 0% { transform: scaleY(1); } 96%, 100% { transform: scaleY(.05); } }
@keyframes sand-fill { 0% { transform: scaleY(.15); } 96%, 100% { transform: scaleY(1); } }
@keyframes sand-fall { to { stroke-dashoffset: -5; } }
@media (max-width: 640px) {
  .calendar-section { padding: 4.8rem .75rem 5.6rem; }
  .calendar-card { min-height: 620px; padding: 5.5rem 0 6.2rem; }
  .countdown-content { padding: 3rem .65rem 3.1rem; border-radius: 34px; }
  .countdown-content::before { inset: 8px; border-radius: 27px; }
  .calendar-heading { width: calc(100% - 2rem); margin-bottom: 2.2rem; }
  .calendar-card .calendar-heading h2 { font-size: clamp(2rem, 10vw, 2.85rem); }
  .simple-countdown { width: calc(100% - .6rem); }
  .countdown-unit { padding-inline: .12rem; }
  .simple-countdown strong { font-size: clamp(2rem, 12vw, 3.3rem); }
  .simple-countdown .long-days strong { font-size: clamp(1.45rem, 8vw, 2.5rem); }
  .simple-countdown .calendar-label { font-size: .69rem; }
  .calendar-flower-top-left { top: -2.1rem; left: -3.4rem; width: clamp(205px, 61vw, 258px); }
  .calendar-flower-bottom-right { right: -3.2rem; bottom: -2.9rem; width: clamp(198px, 58vw, 248px); }
}
@media (max-width: 390px) {
  .calendar-card { padding-block: 5.2rem 5.8rem; }
  .countdown-content { padding-inline: .4rem; }
  .countdown-ornament { width: 62%; }
  .calendar-date { letter-spacing: .1em; }
}
@media (prefers-reduced-motion: reduce) {
  .calendar-card .countdown-botanical,
  .calendar-card .countdown-branch-trace,
  .calendar-card .countdown-branch-bloom { opacity: 1 !important; clip-path: none !important; transform: none !important; filter: none !important; animation: none !important; }
  .calendar-card .countdown-branch-trace { display: none; }
  .calendar-card .countdown-branch-sway,
  .calendar-card .calendar-hourglass * { animation: none !important; }
}