/* A miniature sky at the top of every reminder day. Dates and boats stay in front. */
.calendar-day .reminder-clouds {
  --cloud-width: 50px;
  --cloud-height: 19px;
  --cloud-row-step: 11px;
  position: absolute;
  z-index: 2;
  top: 2px;
  right: 2px;
  bottom: auto;
  left: 2px;
  display: block;
  height: 38px;
  max-height: 38px;
  margin: 0;
  padding: 0;
  overflow: hidden;
  scrollbar-width: none;
  touch-action: manipulation;
  pointer-events: none;
  opacity: 1;
}
.calendar-day .reminder-clouds[data-cloud-count="1"] { height: 26px; }
/* The carrier wraps one logical cloud; its two shapes meet at the cell edges. */
.calendar-day .reminder-cloud {
  --cloud-opacity: .98;
  --cloud-color: #bdcdd7;
  position: absolute;
  left: 0;
  top: calc(2px + var(--cloud-row, 0) * var(--cloud-row-step));
  display: block;
  width: min(var(--cloud-width), calc(var(--sky-width, 104px) - 2px));
  height: var(--cloud-height);
  margin: 0;
  border: 0;
  border-radius: 0;
  background: none;
  box-shadow: none;
  opacity: var(--cloud-opacity);
  pointer-events: none;
  animation: reminder-cloud-right-v47 var(--cloud-period, 24s) linear infinite;
  animation-delay: var(--cloud-delay, -8s);
  animation-play-state: paused;
}
.calendar-day .reminder-cloud::before,
.calendar-day .reminder-cloud::after { content: none; }
.calendar-day .reminder-cloud-shape {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  overflow: visible;
  color: var(--cloud-color);
  stroke: none;
  filter: drop-shadow(0 1px 1px rgba(67, 93, 110, .18));
  pointer-events: auto;
  transform: scale(var(--cloud-scale, 1));
  transform-origin: center;
  transition: color 2.8s ease;
}
.calendar-day .reminder-cloud-shape.is-wrap { left: calc(var(--sky-width, 104px) * -1); }
.calendar-day .reminder-cloud.is-completed { --cloud-opacity: .82; }
.calendar-day .reminder-clouds:not([data-cloud-count="1"]):not([data-cloud-count="2"]):not([data-cloud-count="3"]):not([data-cloud-count="4"]) { --cloud-width: 46px; height: 48px; max-height: 48px; }

@keyframes reminder-cloud-right-v47 {
  from { transform: translate3d(0, 0, 0); }
  to { transform: translate3d(var(--sky-width, 104px), 0, 0); }
}

.calendar-day.has-reminders .day-number { z-index: 5; }
.calendar-day.has-reminders:not(.is-today) .day-number { border-radius: 7px; background: #fbfdfbe8; }
.calendar-day.has-reminders .day-wave-art { z-index: 3; }
.calendar-day .reminder-weather {
  position: absolute;
  z-index: 1;
  inset: 0;
  overflow: hidden;
  pointer-events: none;
}
.calendar-day .reminder-weather::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 0;
  box-shadow: none;
  clip-path: none;
  opacity: 0;
  background: rgba(112, 139, 151, .085);
  transition: opacity 2.6s ease;
}
.calendar-day.is-overcast .reminder-weather::before { opacity: 1; }
.calendar-day.is-weather-clearing .reminder-weather::before { opacity: .28; }
.calendar-day .reminder-rain {
  position: absolute;
  top: 25px;
  right: 2px;
  bottom: 1px;
  left: 2px;
  overflow: hidden;
  opacity: 0;
  transition: opacity 1.6s ease;
}
.calendar-day.is-rainy .reminder-rain { opacity: .7; }
.calendar-day .reminder-raindrop {
  position: absolute;
  top: -7px;
  left: var(--drop-x);
  width: 1px;
  height: 6px;
  border-radius: 100%;
  background: linear-gradient(180deg, #6f9eb80a, #5e93b48f);
  opacity: 0;
  animation: none;
}
.calendar-day.is-rainy .reminder-raindrop {
  animation: reminder-rainfall-v44 var(--drop-period, 1.6s) linear infinite;
  animation-delay: var(--drop-delay, 0s);
  animation-play-state: paused;
}
@keyframes reminder-rainfall-v44 {
  0% { transform: translate3d(0, 0, 0) rotate(14deg); opacity: 0; }
  16% { opacity: .8; }
  75% { opacity: .65; }
  100% { transform: translate3d(-10px, 48px, 0) rotate(14deg); opacity: 0; }
}
.calendar-day.is-motion-visible .reminder-cloud,
.calendar-day.is-motion-visible.is-rainy .reminder-raindrop { animation-play-state: running; }
html.calendar-motion-paused .calendar-day .reminder-cloud,
html.calendar-motion-paused .calendar-day.is-rainy .reminder-raindrop { animation-play-state: paused; }
.calendar-day.is-time-visible .reminder-clouds { opacity: .32; }
.calendar-day.is-time-visible .reminder-weather { opacity: .3; }
@media (hover: hover) and (pointer: fine) {
  .calendar-day:hover .reminder-clouds { opacity: .32; }
  .calendar-day:hover .reminder-weather { opacity: .3; }
}
@media (max-width: 720px) {
  .calendar-day .reminder-clouds {
    --cloud-width: 39px;
    --cloud-height: 15px;
    --cloud-row-step: 10px;
    top: 1px;
    right: 1px;
    left: 1px;
    height: 40px;
    max-height: 40px;
  }
  .calendar-day .reminder-clouds[data-cloud-count="1"] { height: 23px; }
  .calendar-day .reminder-clouds:not([data-cloud-count="1"]):not([data-cloud-count="2"]):not([data-cloud-count="3"]):not([data-cloud-count="4"]) { --cloud-width: 36px; height: 40px; max-height: 40px; }
  .calendar-day .reminder-cloud {
    top: calc(1px + var(--cloud-row-mobile, 0) * var(--cloud-row-step));
    animation-duration: var(--cloud-period-mobile, 18s);
    animation-delay: var(--cloud-delay-mobile, -7s);
  }
  .calendar-day .reminder-rain { top: 23px; }
  .calendar-day .reminder-raindrop { height: 5px; }
  .calendar-day .reminder-raindrop:nth-child(even) { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  .calendar-day .reminder-cloud {
    left: var(--still-x, 34%);
    animation: none;
    transform: none;
    opacity: var(--cloud-opacity);
    transition: none;
  }
  .calendar-day .reminder-weather { display: none; }
  .calendar-day .reminder-cloud-shape { transition: none; }
  .calendar-day .reminder-cloud-shape.is-wrap { display: none; }
}
@media (max-width: 720px) and (prefers-reduced-motion: reduce) {
  .calendar-day .reminder-cloud { left: var(--still-x-mobile, 30%); }
}