/* One shared clock for sunrise, sunset and care throughout the night. */
.tax-care-scene {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  border-radius: 25px 25px 8px 8px;
  aspect-ratio: 4 / 3;
}
.tax-care-scene picture, .tax-care-scene picture img { width: 100%; height: 100%; }
.tax-cycle-layer { position: absolute; inset: 0; pointer-events: none; opacity: 0; }
.tax-care-night { z-index: 1; }
[data-care-cycle] .tax-care-night img { width: 100%; height: 100%; object-fit: cover; border-radius: 0; }
/* Flatten the two scenery clips into one mask. Nested CSS SVG clips misplace
   the animated discs/filter bounds in Firefox. The mask stays fixed to the art. */
.tax-care-sky {
  position: absolute;
  inset: 0;
  z-index: 2;
  pointer-events: none;
  -webkit-mask: url('../img/care-sky-mask.svg') center / 100% 100% no-repeat;
  mask: url('../img/care-sky-mask.svg') center / 100% 100% no-repeat;
}
.tax-care-orbit { position: absolute; inset: 0; }
.tax-care-sun { transform: translate3d(69.37931%, 10.87753%, 0); }
.tax-care-moon { transform: translate3d(52%, 28%, 0); opacity: 0; }
.tax-care-disc {
  position: absolute;
  top: 0;
  left: 0;
  display: block;
  width: 12%;
  aspect-ratio: 1;
  transform: translate(-50%, -50%);
  background: url('../img/grija-impreuna-celestial-v2.webp') 0 0 / 200% 100% no-repeat;
}
/* A broad, quiet halo scales with each disc and stays inside the scenery clips. */
.tax-care-disc { isolation: isolate; }
.tax-care-disc::before {
  content: '';
  position: absolute;
  inset: -25%;
  z-index: -1;
  border-radius: 50%;
  background: radial-gradient(circle, rgb(var(--care-glow) / .20) 0%, rgb(var(--care-glow) / .12) 27%, rgb(var(--care-glow) / .04) 48%, rgb(var(--care-glow) / 0) 70%);
}
.tax-care-sun-disc { --care-glow: 255 214 124; filter: drop-shadow(0 0 6px #ffe2a64d); }
.tax-care-moon-disc { --care-glow: 242 231 194; background-position: 100% 0; filter: drop-shadow(0 0 5px #f5e6bb38); }
.tax-care-moon-disc::before { opacity: .75; }
[data-care-cycle] figcaption {
  display: flex;
  gap: 12px;
  align-items: center;
  justify-content: space-between;
  min-height: 60px;
  padding: 8px 6px 1px 13px;
}
.tax-care-toggle {
  display: grid;
  place-items: center;
  flex: 0 0 40px;
  width: 40px;
  height: 40px;
  padding: 0;
  color: #53624c;
  border: 1px solid #bfa46b99;
  border-radius: 50%;
  background: #f5eddc;
  transition: background .25s ease, border-color .25s ease;
}
.tax-care-toggle:hover { background: #e9e0c9; border-color: #a0844e; }
.tax-care-toggle:focus-visible { outline: 2px solid var(--forest); outline-offset: 3px; }
.tax-care-toggle[hidden], .tax-care-play, .tax-care-toggle[data-paused="true"] .tax-care-pause { display: none; }
.tax-care-toggle[data-paused="true"] .tax-care-play { display: block; }
@media (prefers-reduced-motion: reduce) {
  [data-care-cycle] .tax-cycle-layer, .tax-care-moon { opacity: 0 !important; }
  .tax-care-sun { transform: translate3d(69.37931%, 10.87753%, 0) !important; opacity: 1 !important; }
  .tax-care-toggle { display: none; }
}

.tax-care-day { width: 100%; height: 100%; }

@media (max-width: 600px) { .tax-care-scene { border-radius: 23px 23px 7px 7px; } }