/* =============================================
   LuxTool — /calculators/clock-tool/clock-tool.css
   Tool-specific styles only. Site chrome AND every shared
   building block used on this page (.tool-page, .tool-head,
   .panel, .form-group, .lux-input/.lux-select, .ts-seo,
   .lp-seo-*, .lp-list, .lp-faq, .back-link-btn, .status,
   .drop-zone, .btn, .tab-*) come from /style.css, which this
   page also loads and which is shared by every tool on the
   site. Do NOT duplicate those rules here.

   This file is reserved for CSS unique to this tool. Verified
   against the live site: this tool has no unique CSS rules of
   its own (it's built entirely from shared classes plus inline
   styles already present in its markup), so this file is
   intentionally empty.
   ============================================= */

/* Live weather motion in the former sun/moon slot on pinned world-clock cards. */
.ct-weather-slot {
  display: inline-grid;
  place-items: center;
  flex: 0 0 34px;
  width: 34px;
  height: 30px;
  margin-left: -3px;
}

.ct-weather-icon,
.ct-weather-scene {
  position: relative;
  display: block;
  width: 38px;
  height: 30px;
}

.ct-weather-scene {
  overflow: hidden;
  border-radius: 8px;
  transform: translateZ(0);
}

.ct-weather-scene > i {
  position: absolute;
  display: none;
  pointer-events: none;
}

.ct-weather-sun {
  top: 4px;
  right: 5px;
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: #fbbf24;
  box-shadow: 0 0 0 3px rgba(251, 191, 36, .13), 0 0 11px rgba(251, 191, 36, .72);
  animation: ct-weather-sun-pulse 2.8s ease-in-out infinite;
}

.ct-weather-sun::before {
  content: '';
  position: absolute;
  inset: -5px;
  border: 1px dashed rgba(251, 191, 36, .72);
  border-radius: 50%;
  animation: ct-weather-sun-spin 10s linear infinite;
}

.ct-weather-moon {
  top: 3px;
  right: 5px;
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: #dbeafe;
  box-shadow: 0 0 10px rgba(191, 219, 254, .72);
  animation: ct-weather-moon-float 3.6s ease-in-out infinite;
}

.ct-weather-moon::after {
  content: '';
  position: absolute;
  top: -3px;
  left: 5px;
  width: 13px;
  height: 13px;
  border-radius: 50%;
  background: #111827;
}

.ct-weather-cloud {
  z-index: 3;
  width: 25px;
  height: 8px;
  border-radius: 999px;
  background: linear-gradient(180deg, #f8fafc, #b8c6d8);
  box-shadow: 0 3px 7px rgba(2, 6, 23, .22);
}

.ct-weather-cloud::before,
.ct-weather-cloud::after {
  content: '';
  position: absolute;
  bottom: 2px;
  border-radius: 50%;
  background: inherit;
}

.ct-weather-cloud::before {
  left: 5px;
  width: 10px;
  height: 10px;
}

.ct-weather-cloud::after {
  right: 4px;
  width: 13px;
  height: 13px;
}

.ct-weather-cloud-front {
  top: 11px;
  left: 4px;
  animation: ct-weather-cloud-drift 4.8s ease-in-out infinite alternate;
}

.ct-weather-cloud-back {
  top: 5px;
  left: 18px;
  opacity: .45;
  transform: scale(.72);
  animation: ct-weather-cloud-drift-back 6.2s ease-in-out infinite alternate;
}

.ct-weather-rain-layer {
  z-index: 2;
  top: 17px;
  left: 6px;
  width: 29px;
  height: 15px;
  opacity: .8;
  background: repeating-linear-gradient(112deg, transparent 0 5px, #60a5fa 5.5px 7px, transparent 7.5px 11px);
  background-size: 18px 18px;
  animation: ct-weather-rain-fall .58s linear infinite;
}

.ct-weather-snow-layer {
  z-index: 2;
  inset: 16px 3px 0;
  background-image: radial-gradient(circle, #f8fafc 0 1.2px, transparent 1.5px), radial-gradient(circle, #bfdbfe 0 1px, transparent 1.3px);
  background-position: 1px 0, 10px 4px;
  background-size: 13px 10px, 15px 12px;
  animation: ct-weather-snow-fall 2s linear infinite;
}

.ct-weather-fog-layer {
  z-index: 4;
  top: 9px;
  left: 2px;
  width: 39px;
  height: 17px;
  opacity: .72;
  background: repeating-linear-gradient(180deg, transparent 0 3px, rgba(203, 213, 225, .9) 3.5px 5px, transparent 5.5px 7px);
  animation: ct-weather-fog-drift 4s ease-in-out infinite alternate;
}

.ct-weather-wind-layer {
  z-index: 4;
  top: 7px;
  left: 1px;
  width: 40px;
  height: 18px;
  opacity: .9;
  background: repeating-linear-gradient(180deg, transparent 0 4px, rgba(147, 197, 253, .9) 4.5px 5.5px, transparent 6px 8px);
  mask-image: linear-gradient(90deg, transparent, #000 15%, #000 80%, transparent);
  animation: ct-weather-wind-pass 1.45s linear infinite;
}

.ct-weather-lightning-layer {
  z-index: 5;
  top: 14px;
  left: 20px;
  width: 8px;
  height: 14px;
  background: #fde047;
  clip-path: polygon(48% 0, 100% 0, 67% 39%, 100% 39%, 20% 100%, 38% 54%, 0 54%);
  filter: drop-shadow(0 0 4px rgba(253, 224, 71, .9));
  animation: ct-weather-lightning 4.8s steps(1) infinite;
}

.ct-weather-clear.is-day .ct-weather-sun,
.ct-weather-mostly-clear.is-day .ct-weather-sun,
.ct-weather-partly-cloudy.is-day .ct-weather-sun,
.ct-weather-showers.is-day .ct-weather-sun,
.ct-weather-windy.is-day .ct-weather-sun,
.ct-weather-clear.is-night .ct-weather-moon,
.ct-weather-mostly-clear.is-night .ct-weather-moon,
.ct-weather-partly-cloudy.is-night .ct-weather-moon,
.ct-weather-showers.is-night .ct-weather-moon,
.ct-weather-windy.is-night .ct-weather-moon,
.ct-weather-mostly-clear .ct-weather-cloud-front,
.ct-weather-partly-cloudy .ct-weather-cloud-front,
.ct-weather-cloudy .ct-weather-cloud,
.ct-weather-drizzle .ct-weather-cloud-front,
.ct-weather-rain .ct-weather-cloud,
.ct-weather-heavy-rain .ct-weather-cloud,
.ct-weather-showers .ct-weather-cloud-front,
.ct-weather-snow .ct-weather-cloud-front,
.ct-weather-heavy-snow .ct-weather-cloud,
.ct-weather-fog .ct-weather-cloud-back,
.ct-weather-storm .ct-weather-cloud,
.ct-weather-drizzle .ct-weather-rain-layer,
.ct-weather-rain .ct-weather-rain-layer,
.ct-weather-heavy-rain .ct-weather-rain-layer,
.ct-weather-showers .ct-weather-rain-layer,
.ct-weather-snow .ct-weather-snow-layer,
.ct-weather-heavy-snow .ct-weather-snow-layer,
.ct-weather-fog .ct-weather-fog-layer,
.ct-weather-windy .ct-weather-wind-layer,
.ct-weather-storm .ct-weather-rain-layer,
.ct-weather-storm .ct-weather-lightning-layer {
  display: block;
}

.ct-weather-mostly-clear .ct-weather-cloud-front {
  top: 15px;
  left: 3px;
  opacity: .72;
  transform: scale(.72);
}

.ct-weather-cloudy .ct-weather-cloud,
.ct-weather-heavy-rain .ct-weather-cloud,
.ct-weather-heavy-snow .ct-weather-cloud,
.ct-weather-storm .ct-weather-cloud {
  background: linear-gradient(180deg, #94a3b8, #475569);
}

.ct-weather-drizzle .ct-weather-rain-layer {
  opacity: .45;
  animation-duration: 1.05s;
}

.ct-weather-heavy-rain .ct-weather-rain-layer,
.ct-weather-storm .ct-weather-rain-layer {
  opacity: 1;
  animation-duration: .34s;
}

.ct-weather-heavy-snow .ct-weather-snow-layer {
  animation-duration: 1.05s;
}

@keyframes ct-weather-sun-pulse {
  50% { transform: scale(1.08); box-shadow: 0 0 0 4px rgba(251, 191, 36, .17), 0 0 14px rgba(251, 191, 36, .88); }
}

@keyframes ct-weather-sun-spin { to { transform: rotate(360deg); } }
@keyframes ct-weather-moon-float { 50% { transform: translateY(-1.5px) rotate(-3deg); } }
@keyframes ct-weather-cloud-drift { to { transform: translateX(3px); } }
@keyframes ct-weather-cloud-drift-back { to { transform: translateX(-3px) scale(.72); } }
@keyframes ct-weather-rain-fall { to { background-position: -7px 18px; } }
@keyframes ct-weather-snow-fall { to { background-position: 4px 20px, 7px 28px; } }
@keyframes ct-weather-fog-drift { to { transform: translateX(4px); opacity: .5; } }
@keyframes ct-weather-wind-pass { to { background-position: 40px 0; } }

@keyframes ct-weather-lightning {
  0%, 82%, 86%, 89%, 100% { opacity: 0; }
  83%, 87% { opacity: 1; }
}

html.theme-light .ct-weather-moon::after { background: #f8fafc; }
html.theme-light .ct-weather-cloud { box-shadow: 0 3px 7px rgba(15, 23, 42, .16); }

/* Clock/world-clock light mode: override legacy inline dark surfaces. */
html.theme-light #ct-format-group,
html.theme-light #ct-style-group {
  background: rgba(241, 245, 249, .96) !important;
  border-color: rgba(15, 23, 42, .16) !important;
}

html.theme-light #ct-analog-canvas {
  filter: drop-shadow(0 10px 18px rgba(15, 23, 42, .08));
}

html.theme-light .ct-clock-meta-card,
html.theme-light .ct-wc-card,
html.theme-light .ct-wc-bc-card {
  background: rgba(255, 255, 255, .88) !important;
  border-color: rgba(15, 23, 42, .14);
  box-shadow: 0 8px 24px rgba(15, 23, 42, .055);
}

html.theme-light .ct-wc-card:hover,
html.theme-light .ct-wc-bc-card:hover {
  border-color: rgba(161, 98, 7, .32);
  background: #fff !important;
}

html.theme-light #ct-wc-search {
  background: rgba(255, 255, 255, .94) !important;
  color: #0f172a !important;
}

html.theme-light #ct-wc-dropdown {
  background: #fff !important;
  border-color: rgba(15, 23, 42, .16) !important;
  box-shadow: 0 16px 40px rgba(15, 23, 42, .13) !important;
}

html.theme-light .ct-wc-search-item:hover,
html.theme-light .ct-wc-region-hdr {
  background: #f1f5f9;
}

html.theme-light #ct-wc-count,
html.theme-light .ct-wc-zone-badge,
html.theme-light .ct-wc-region-count {
  background: #f1f5f9 !important;
  border-color: rgba(15, 23, 42, .15) !important;
}

html.theme-light #ct-wc-browse-toggle {
  background: rgba(255, 255, 255, .9) !important;
  border-color: rgba(15, 23, 42, .15) !important;
  color: #475569 !important;
}

html.theme-light #ct-wc-browse-toggle:hover {
  background: #fff !important;
  border-color: rgba(161, 98, 7, .34) !important;
  color: #a16207 !important;
}

html.theme-light #ct-wc-browse-section > div > div:first-child {
  border-bottom-color: rgba(15, 23, 42, .14) !important;
}

html.theme-light .ct-wc-pin-btn {
  background: rgba(248, 250, 252, .92);
}

@media (prefers-reduced-motion: reduce) {
  .ct-weather-scene > i,
  .ct-weather-scene > i::before {
    animation: none !important;
  }
}