/* Animated sky, landscape and gentle precipitation for the VREMEPLOV activity. */
.time-clock-screen {
  position: relative;
  isolation: isolate;
  background: transparent;
}
.time-world-scene {
  position: fixed;
  inset: 0;
  z-index: 0;
  overflow: hidden;
  pointer-events: none;
  background: linear-gradient(180deg, var(--sky-top, #6ebce8), var(--sky-bottom, #d9f3ff));
  transition: background 1.05s ease;
}
.time-world-scene::before {
  position: absolute;
  inset: 0;
  content: '';
  background: linear-gradient(180deg, rgba(255,255,255,.04), transparent 42%, rgba(255,255,255,.1));
}
.time-clock-heading,
.time-clock-stage,
.time-weather-status,
.time-clock-readout,
.time-clock-instruction,
.time-clock-back {
  position: relative;
  z-index: 2;
}
.time-clock-heading .time-screen-title { letter-spacing: .045em; }
.time-clock-quick-controls { display: contents; }
.time-now-button {
  position: fixed;
  right: max(14px, env(safe-area-inset-right));
  bottom: max(14px, env(safe-area-inset-bottom));
  z-index: 5;
  min-height: clamp(42px, 6.2vh, 57px);
  padding: 5px clamp(19px, 3vw, 31px);
  border: 3px solid #fff;
  border-radius: 999px;
  color: #fff;
  background: linear-gradient(115deg, #f65f8e 0%, #ff9d49 32%, #e9c43c 57%, #46b985 78%, #5e8ee8 100%);
  box-shadow: 0 5px 0 #8d5aa4, 0 9px 18px rgba(45,35,80,.2), inset 0 1px 0 rgba(255,255,255,.3);
  font: 900 clamp(19px, 2.6vh, 25px)/1 'Baloo 2', sans-serif;
  letter-spacing: .045em;
  text-shadow: 0 2px 0 rgba(60,35,75,.23);
  cursor: pointer;
  touch-action: manipulation;
  transition: transform .16s, filter .16s, box-shadow .16s;
  animation: time-now-glow 2.8s ease-in-out infinite;
}
.time-now-button:hover:not(:disabled) { transform: translateY(-2px) scale(1.035); filter: saturate(1.12) brightness(1.06); }
.time-now-button:active:not(:disabled) { transform: translateY(3px) scale(.98); box-shadow: 0 2px 0 #8d5aa4; }
.time-now-button:focus-visible { outline: 4px solid #514173; outline-offset: 4px; }
.time-now-button:disabled { cursor: wait; filter: saturate(.7); }
@keyframes time-now-glow {
  0%, 100% { box-shadow: 0 5px 0 #8d5aa4, 0 9px 18px rgba(45,35,80,.2), 0 0 0 0 rgba(255,255,255,0); }
  50% { box-shadow: 0 5px 0 #8d5aa4, 0 9px 18px rgba(45,35,80,.2), 0 0 0 5px rgba(255,255,255,.27); }
}
.time-location-label {
  margin: 0;
  padding: 4px 13px;
  border: 2px solid rgba(255,255,255,.86);
  border-radius: 999px;
  color: #493766;
  background: rgba(255,255,255,.78);
  box-shadow: 0 3px 8px rgba(45,35,80,.1);
  font-size: clamp(12px, 1.7vh, 16px);
  font-weight: 800;
  line-height: 1.05;
}
.time-clock-stage { z-index: 1; }
.time-clock-board {
  filter: drop-shadow(0 16px 17px rgba(30,35,70,.22));
}
.time-weather-status {
  flex: 0 0 auto;
  max-width: min(94vw, 740px);
  min-height: 1.15em;
  margin: 0;
  padding: 3px 13px;
  border: 2px solid rgba(255,255,255,.84);
  border-radius: 999px;
  color: #493766;
  background: rgba(255,255,255,.73);
  font-size: clamp(12px, 1.7vh, 16px);
  font-weight: 800;
  line-height: 1.1;
  text-align: center;
}
.time-clock-instruction {
  flex: 0 0 auto;
  max-width: min(94vw, 940px);
  margin: 0;
  padding: 3px 14px;
  border: 2px solid rgba(255,255,255,.94);
  border-radius: 999px;
  color: #493766;
  background: rgba(255,255,255,.82);
  box-shadow: 0 3px 9px rgba(40,45,90,.1);
  font-size: calc(clamp(12px, 1.7vh, 16px) * 1.2);
  font-weight: 900;
  line-height: 1.1;
  text-align: center;
}
.time-world-sun,
.time-world-moon {
  position: absolute;
  z-index: 1;
  left: var(--sun-x, 50%);
  top: var(--sun-y, 45%);
  width: clamp(44px, 8vw, 92px);
  aspect-ratio: 1;
  border-radius: 50%;
  opacity: var(--sun-opacity, 0);
  background: radial-gradient(circle at 34% 31%, #fff9bf 0 14%, #ffd85c 47%, #ffad5a 100%);
  box-shadow: 0 0 30px 12px rgba(255,198,91,.36), 0 0 95px 38px rgba(255,206,129,.24);
  transform: translate(-50%, -50%);
  transition: left .8s ease, top .8s ease, opacity .8s ease;
}
.time-world-moon {
  left: var(--moon-x, 50%);
  top: var(--moon-y, 40%);
  width: clamp(32px, 5.4vw, 64px);
  opacity: var(--moon-opacity, 0);
  background: #fff4ce;
  box-shadow: 0 0 25px 7px rgba(230,235,255,.24);
  transition: left .9s ease, top .9s ease, opacity .8s ease;
}
.time-world-moon::after {
  position: absolute;
  top: -4%;
  left: 39%;
  width: 88%;
  height: 88%;
  border-radius: 50%;
  background: var(--sky-top, #111b49);
  content: '';
}
.time-stars { position: absolute; inset: 0; z-index: 1; opacity: var(--star-opacity, 0); transition: opacity .8s ease; }
.time-star {
  position: absolute;
  left: var(--star-x);
  top: var(--star-y);
  width: var(--star-size);
  height: var(--star-size);
  border-radius: 50%;
  background: #fffbe2;
  box-shadow: 0 0 9px rgba(255,255,255,.85);
  animation: time-star-twinkle 2.8s ease-in-out var(--star-delay) infinite alternate;
}
@keyframes time-star-twinkle { from { opacity: .38; transform: scale(.72); } to { opacity: 1; transform: scale(1.25); } }
.time-world-cloud {
  position: absolute;
  z-index: 1;
  top: 20%;
  left: 14%;
  width: clamp(92px, 17vw, 205px);
  height: clamp(26px, 4.7vw, 54px);
  border-radius: 999px;
  opacity: var(--cloud-opacity, .5);
  background: rgba(255,255,255,.71);
  filter: drop-shadow(0 7px 7px rgba(80,95,130,.1));
  animation: time-cloud-drift 28s ease-in-out infinite alternate;
  transition: opacity .8s ease;
}
.time-world-cloud::before,
.time-world-cloud::after {
  position: absolute;
  bottom: 34%;
  width: 42%;
  aspect-ratio: 1;
  border-radius: 50%;
  background: inherit;
  content: '';
}
.time-world-cloud::before { left: 16%; }
.time-world-cloud::after { right: 15%; width: 34%; }
.time-world-cloud-two { top: 33%; left: auto; right: 11%; width: clamp(72px, 12vw, 150px); transform: scale(.72); opacity: calc(var(--cloud-opacity, .5) * .76); animation-duration: 37s; animation-direction: alternate-reverse; }
@keyframes time-cloud-drift { from { translate: -12px 0; } to { translate: 35px 8px; } }
.time-world-landscape {
  position: absolute;
  inset: auto 0 0;
  z-index: 1;
  display: block;
  width: 100%;
  height: min(66vh, 700px);
  min-height: 240px;
}
.time-hill-far { fill: var(--hill-back, #69b77d); transition: fill 1.1s ease; }
.time-hill-near { fill: color-mix(in srgb, var(--hill-front, #3f9666), white 16%); transition: fill 1.1s ease; }
.time-hill-foreground { fill: var(--hill-front, #3f9666); transition: fill 1.1s ease; }
.time-hill-meadow { opacity: .42; }
.time-hill-snow { fill: #f3fbff; opacity: 0; transition: opacity .7s ease; }
.time-world-scene[data-season="winter"] .time-hill-snow { opacity: .86; }
.time-world-scene[data-season="spring"] { --hill-front: #42a877; }
.time-world-scene[data-season="summer"] { --hill-front: #4a9c62; }
.time-world-scene[data-season="autumn"] { --hill-front: #8d8156; }
.time-world-scene[data-season="winter"] { --hill-front: #597e88; --hill-back: #7799a3; }
.time-precipitation { position: absolute; inset: 0; z-index: 2; overflow: hidden; opacity: 0; transition: opacity .45s ease; }
.time-world-scene.is-rain .time-rain-layer,
.time-world-scene.is-snow .time-snow-layer { opacity: 1; }
.time-world-scene.is-cloudy .time-world-cloud { opacity: .82; }
.time-raindrop {
  position: absolute;
  left: var(--particle-x);
  top: -12%;
  width: 2px;
  height: clamp(14px, 2.6vh, 25px);
  border-radius: 50%;
  background: linear-gradient(transparent, rgba(224,247,255,.86));
  box-shadow: 0 0 4px rgba(215,244,255,.4);
  opacity: .73;
  animation: time-rain-fall var(--particle-duration) linear var(--particle-delay) infinite;
}
@keyframes time-rain-fall { to { transform: translate3d(-32px, 120vh, 0); } }
.time-snowflake {
  position: absolute;
  left: var(--particle-x);
  top: -10%;
  color: rgba(255,255,255,.92);
  font-size: var(--flake-size);
  line-height: 1;
  text-shadow: 0 1px 5px rgba(65,100,135,.35);
  animation: time-snow-fall var(--particle-duration) ease-in var(--particle-delay) infinite;
}
@keyframes time-snow-fall {
  0% { transform: translate3d(0, -3vh, 0) rotate(0deg); }
  50% { transform: translate3d(28px, 53vh, 0) rotate(170deg); }
  100% { transform: translate3d(-18px, 112vh, 0) rotate(340deg); }
}
.time-clock-screen.is-clock-dragging .time-world-scene,
.time-clock-screen.is-time-tweening .time-world-scene,
.time-clock-screen.is-clock-dragging .time-world-sun,
.time-clock-screen.is-clock-dragging .time-world-moon,
.time-clock-screen.is-time-tweening .time-world-sun,
.time-clock-screen.is-time-tweening .time-world-moon,
.time-clock-screen.is-clock-dragging .time-hill-far,
.time-clock-screen.is-clock-dragging .time-hill-near,
.time-clock-screen.is-clock-dragging .time-hill-foreground {
  transition: none;
}
.time-clock-screen.is-time-tweening .clock-hand { transition: none; }
.time-clock-screen.is-time-rewinding .clock-hand { transition-duration: 1.1s; }
@media (max-width: 560px) {
  .time-clock-quick-controls { gap: 5px; }
  .time-now-button { right: max(10px, env(safe-area-inset-right)); bottom: max(10px, env(safe-area-inset-bottom)); min-height: 40px; padding-inline: 17px; font-size: 18px; }
  .time-location-label { max-width: 82vw; padding: 3px 9px; font-size: 11px; }
  .time-weather-status { max-width: 94vw; font-size: 11px; }
  .time-clock-instruction { max-width: 96vw; font-size: 13.2px; }
  .time-world-landscape { height: 55vh; min-height: 205px; }
  .time-world-cloud { top: 21%; }
  .time-world-cloud-two { top: 36%; }
}
@media (max-height: 600px) {
  .time-clock-screen .time-clock-board { --clock-size: min(68vw, 40vh, 260px); }
  .time-clock-quick-controls { gap: 5px; }
  .time-now-button { right: max(10px, env(safe-area-inset-right)); bottom: max(10px, env(safe-area-inset-bottom)); min-height: 34px; padding-block: 2px; font-size: 16px; }
  .time-location-label, .time-weather-status { padding-block: 2px; font-size: 11px; }
  .time-clock-instruction { font-size: 13.2px; }
  .time-world-landscape { height: 60vh; min-height: 175px; }
  .time-world-cloud { top: 17%; }
  .time-world-cloud-two { top: 29%; }
}
@media (max-height: 600px) and (orientation: landscape) {
  .time-clock-screen .time-clock-board { --clock-size: min(46vh, 34vw, 330px); }
}
@media (prefers-reduced-motion: reduce) {
  .time-now-button { animation: none; transition: none; }
  .time-star, .time-world-cloud, .time-raindrop, .time-snowflake { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; }
  .time-world-scene, .time-world-sun, .time-world-moon, .time-stars, .time-world-cloud, .time-hill-far, .time-hill-near, .time-hill-foreground, .time-precipitation { transition-duration: .01ms !important; }
}