:root {
  --ink: #1a2433;
  --ink-soft: rgba(26, 36, 51, 0.72);
  --paper: #f7f3ea;
  --gold: #f0c14b;
  --gold-deep: #e8a317;
  --sky-top: #7eb8d4;
  --sky-mid: #b8d4e3;
  --sky-bot: #e8e4d8;
  --fog: rgba(232, 236, 240, 0.55);
  --rain: rgba(120, 145, 170, 0.45);
  --glass: rgba(255, 252, 245, 0.38);
  --stroke: rgba(26, 36, 51, 0.12);
  --ease: cubic-bezier(0.22, 1, 0.36, 1);
}

*,
*::before,
*::after {
  box-sizing: border-box;
}

html,
body {
  margin: 0;
  min-height: 100%;
}

body {
  font-family: "Manrope", sans-serif;
  color: var(--ink);
  background: var(--sky-bot);
  overflow-x: hidden;
  min-height: 100vh;
  position: relative;
}

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  border: 0;
}

/* —— Sky scene —— */
.sky {
  position: fixed;
  inset: 0;
  z-index: 0;
  background:
    radial-gradient(ellipse 90% 60% at 70% 18%, rgba(255, 220, 140, 0.55), transparent 55%),
    linear-gradient(180deg, var(--sky-top) 0%, var(--sky-mid) 42%, var(--sky-bot) 100%);
  transition: background 1.2s var(--ease);
}

body.is-rain .sky {
  --sky-top: #5a7a8f;
  --sky-mid: #8aa3b5;
  --sky-bot: #c5cdd4;
}

body.is-clear .sky {
  --sky-top: #6eb0d4;
  --sky-mid: #a8d0e4;
  --sky-bot: #efe8d6;
}

body.is-fog .sky {
  --sky-top: #9aafbc;
  --sky-mid: #c2ced6;
  --sky-bot: #dfe4e8;
}

body.is-night .sky {
  --sky-top: #1e2a3a;
  --sky-mid: #2f4055;
  --sky-bot: #4a5a6a;
  color: #f2efe8;
}

body.is-night {
  --ink: #f2efe8;
  --ink-soft: rgba(242, 239, 232, 0.7);
  --glass: rgba(20, 28, 40, 0.35);
  --stroke: rgba(242, 239, 232, 0.14);
}

.sun {
  position: absolute;
  top: 8%;
  right: 12%;
  width: min(28vw, 220px);
  height: min(28vw, 220px);
  opacity: 0.95;
  transition: opacity 1s var(--ease), transform 1s var(--ease), filter 1s var(--ease);
  will-change: transform;
  animation: sun-drift 18s ease-in-out infinite;
}

body.is-rain .sun,
body.is-fog .sun {
  opacity: 0.35;
  filter: blur(1px) saturate(0.7);
}

body.is-night .sun {
  opacity: 0.15;
  filter: grayscale(0.4);
}

.sun-core {
  position: absolute;
  inset: 28%;
  border-radius: 50%;
  background:
    radial-gradient(circle at 35% 30%, #fff8d6 0%, var(--gold) 45%, var(--gold-deep) 100%);
  box-shadow:
    0 0 40px rgba(240, 193, 75, 0.75),
    0 0 90px rgba(232, 163, 23, 0.45);
  z-index: 2;
}

.sun-glow {
  position: absolute;
  inset: 10%;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(255, 230, 150, 0.5), transparent 70%);
  animation: glow-pulse 4s ease-in-out infinite;
  z-index: 1;
}

.sun-rays {
  position: absolute;
  inset: 0;
  border-radius: 50%;
  background: conic-gradient(
    from 0deg,
    transparent 0deg,
    rgba(255, 220, 120, 0.55) 8deg,
    transparent 16deg,
    transparent 30deg,
    rgba(255, 210, 100, 0.4) 38deg,
    transparent 46deg,
    transparent 60deg,
    rgba(255, 220, 120, 0.5) 68deg,
    transparent 76deg,
    transparent 90deg,
    rgba(255, 210, 100, 0.35) 98deg,
    transparent 106deg,
    transparent 120deg,
    rgba(255, 220, 120, 0.5) 128deg,
    transparent 136deg,
    transparent 150deg,
    rgba(255, 210, 100, 0.4) 158deg,
    transparent 166deg,
    transparent 180deg,
    rgba(255, 220, 120, 0.55) 188deg,
    transparent 196deg,
    transparent 210deg,
    rgba(255, 210, 100, 0.35) 218deg,
    transparent 226deg,
    transparent 240deg,
    rgba(255, 220, 120, 0.5) 248deg,
    transparent 256deg,
    transparent 270deg,
    rgba(255, 210, 100, 0.4) 278deg,
    transparent 286deg,
    transparent 300deg,
    rgba(255, 220, 120, 0.5) 308deg,
    transparent 316deg,
    transparent 330deg,
    rgba(255, 210, 100, 0.35) 338deg,
    transparent 346deg,
    transparent 360deg
  );
  mask-image: radial-gradient(circle, transparent 32%, #000 48%, #000 70%, transparent 78%);
  -webkit-mask-image: radial-gradient(circle, transparent 32%, #000 48%, #000 70%, transparent 78%);
  animation: ray-spin 48s linear infinite;
  z-index: 0;
}

.sun-rays::after {
  content: "";
  position: absolute;
  inset: -8%;
  border-radius: 50%;
  background: conic-gradient(
    from 12deg,
    transparent 0deg,
    rgba(255, 240, 180, 0.25) 4deg,
    transparent 10deg,
    transparent 45deg,
    rgba(255, 240, 180, 0.2) 49deg,
    transparent 55deg,
    transparent 90deg,
    rgba(255, 240, 180, 0.25) 94deg,
    transparent 100deg,
    transparent 135deg,
    rgba(255, 240, 180, 0.2) 139deg,
    transparent 145deg,
    transparent 180deg,
    rgba(255, 240, 180, 0.25) 184deg,
    transparent 190deg,
    transparent 225deg,
    rgba(255, 240, 180, 0.2) 229deg,
    transparent 235deg,
    transparent 270deg,
    rgba(255, 240, 180, 0.25) 274deg,
    transparent 280deg,
    transparent 315deg,
    rgba(255, 240, 180, 0.2) 319deg,
    transparent 325deg,
    transparent 360deg
  );
  mask-image: radial-gradient(circle, transparent 38%, #000 52%, transparent 80%);
  -webkit-mask-image: radial-gradient(circle, transparent 38%, #000 52%, transparent 80%);
  animation: ray-spin 72s linear infinite reverse;
}

@keyframes ray-spin {
  to {
    transform: rotate(360deg);
  }
}

@keyframes glow-pulse {
  0%,
  100% {
    transform: scale(1);
    opacity: 0.7;
  }
  50% {
    transform: scale(1.12);
    opacity: 1;
  }
}

@keyframes sun-drift {
  0%,
  100% {
    transform: translate(0, 0);
  }
  50% {
    transform: translate(-12px, 10px);
  }
}

.rain-canvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  opacity: 0;
  transition: opacity 1s var(--ease);
}

body.is-rain .rain-canvas,
body.is-drizzle .rain-canvas {
  opacity: 1;
}

.fog {
  position: absolute;
  left: -20%;
  width: 140%;
  height: 40%;
  pointer-events: none;
  background: radial-gradient(
    ellipse at center,
    var(--fog) 0%,
    rgba(220, 228, 235, 0.25) 45%,
    transparent 70%
  );
  filter: blur(28px);
  opacity: 0.35;
  transition: opacity 1.2s var(--ease);
  animation: fog-drift 28s ease-in-out infinite;
}

body.is-rain .fog,
body.is-fog .fog,
body.is-drizzle .fog {
  opacity: 0.85;
}

.fog-1 {
  bottom: 8%;
  animation-duration: 32s;
}

.fog-2 {
  bottom: 22%;
  height: 30%;
  opacity: 0.25;
  animation-duration: 40s;
  animation-direction: reverse;
}

.fog-3 {
  bottom: -5%;
  height: 35%;
  opacity: 0.4;
  animation-duration: 36s;
  animation-delay: -8s;
}

@keyframes fog-drift {
  0%,
  100% {
    transform: translateX(0) scaleX(1);
  }
  50% {
    transform: translateX(4%) scaleX(1.05);
  }
}

/* —— UI —— */
.top,
.stage,
.credit {
  position: relative;
  z-index: 2;
}

.top {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 1rem 1.5rem;
  padding: 1.4rem clamp(1.2rem, 4vw, 3rem) 0;
}

.brand {
  margin: 0;
  font-family: "Syne", sans-serif;
  font-weight: 800;
  font-size: clamp(2.4rem, 7vw, 4.2rem);
  letter-spacing: -0.04em;
  line-height: 0.9;
  text-shadow: 0 2px 24px rgba(255, 255, 255, 0.35);
}

.search {
  display: flex;
  gap: 0.5rem;
  flex: 1 1 280px;
  max-width: 480px;
  align-items: flex-start;
}

.search-field {
  position: relative;
  flex: 1;
  min-width: 0;
}

.search input {
  width: 100%;
  border: 1px solid var(--stroke);
  background: var(--glass);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border-radius: 999px;
  padding: 0.85rem 1.2rem;
  font: inherit;
  font-size: 1rem;
  color: var(--ink);
  outline: none;
  transition: border-color 0.2s, background 0.2s, box-shadow 0.2s;
}

.search input::placeholder {
  color: var(--ink-soft);
}

.search input:focus {
  border-color: rgba(26, 36, 51, 0.35);
  background: rgba(255, 252, 245, 0.55);
  box-shadow: 0 8px 28px rgba(26, 36, 51, 0.08);
}

.suggestions {
  position: absolute;
  top: calc(100% + 0.4rem);
  left: 0;
  right: 0;
  margin: 0;
  padding: 0.35rem;
  list-style: none;
  border: 1px solid var(--stroke);
  background: rgba(255, 252, 245, 0.92);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border-radius: 1rem;
  box-shadow: 0 16px 40px rgba(26, 36, 51, 0.12);
  max-height: 280px;
  overflow-y: auto;
  z-index: 20;
}

body.is-night .suggestions {
  background: rgba(28, 38, 52, 0.92);
}

.suggestions[hidden] {
  display: none;
}

.suggestions li {
  margin: 0;
}

.suggestion-btn {
  width: 100%;
  border: 0;
  background: transparent;
  color: var(--ink);
  font: inherit;
  text-align: left;
  padding: 0.7rem 0.9rem;
  border-radius: 0.7rem;
  cursor: pointer;
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
  transition: background 0.15s;
}

.suggestion-btn:hover,
.suggestion-btn.is-active,
.suggestion-btn:focus-visible {
  background: rgba(26, 36, 51, 0.08);
  outline: none;
}

body.is-night .suggestion-btn:hover,
body.is-night .suggestion-btn.is-active,
body.is-night .suggestion-btn:focus-visible {
  background: rgba(242, 239, 232, 0.1);
}

.suggestion-name {
  font-weight: 600;
  font-size: 0.95rem;
}

.suggestion-meta {
  font-size: 0.78rem;
  color: var(--ink-soft);
}

.search button,
.ghost {
  border: 1px solid var(--stroke);
  background: var(--glass);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  color: var(--ink);
  font: inherit;
  font-weight: 600;
  font-size: 0.9rem;
  padding: 0.75rem 1.15rem;
  border-radius: 999px;
  cursor: pointer;
  transition: transform 0.2s var(--ease), background 0.2s, border-color 0.2s;
}

.search button:hover,
.ghost:hover {
  background: rgba(255, 252, 245, 0.65);
  border-color: rgba(26, 36, 51, 0.28);
}

.search button:active,
.ghost:active {
  transform: scale(0.97);
}

.stage {
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  min-height: calc(100vh - 7rem);
  padding: 2rem clamp(1.2rem, 4vw, 3rem) 2.5rem;
  gap: 2.5rem;
}

.hero {
  max-width: 28rem;
  animation: rise-in 0.9s var(--ease) both;
}

.place {
  margin: 0 0 0.35rem;
  font-size: 1rem;
  font-weight: 500;
  color: var(--ink-soft);
  letter-spacing: 0.02em;
}

.temp {
  margin: 0;
  font-family: "Syne", sans-serif;
  font-weight: 800;
  font-size: clamp(5.5rem, 18vw, 9rem);
  letter-spacing: -0.06em;
  line-height: 0.85;
}

.condition {
  margin: 0.85rem 0 0;
  font-size: 1.2rem;
  font-weight: 500;
  color: var(--ink-soft);
  max-width: 22ch;
}

.cta-row {
  display: flex;
  flex-wrap: wrap;
  gap: 0.6rem;
  margin-top: 1.4rem;
}

.details {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 1rem 1.5rem;
  max-width: 42rem;
  padding-top: 1.25rem;
  border-top: 1px solid var(--stroke);
  animation: rise-in 1s var(--ease) 0.15s both;
}

.stat {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
}

.stat-label {
  font-size: 0.78rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--ink-soft);
}

.stat-value {
  font-family: "Syne", sans-serif;
  font-weight: 700;
  font-size: 1.25rem;
  letter-spacing: -0.02em;
}

.credit {
  position: fixed;
  right: 1.2rem;
  bottom: 0.9rem;
  margin: 0;
  font-size: 0.75rem;
  color: var(--ink-soft);
  z-index: 3;
}

.credit a {
  color: inherit;
}

@keyframes rise-in {
  from {
    opacity: 0;
    transform: translateY(18px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@media (max-width: 720px) {
  .sun {
    top: 4%;
    right: 4%;
    width: 36vw;
    height: 36vw;
  }

  .details {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .stage {
    min-height: calc(100vh - 9rem);
    justify-content: center;
  }

  .credit {
    position: static;
    padding: 0 1.2rem 1.2rem;
  }
}

@media (prefers-reduced-motion: reduce) {
  .sun,
  .sun-rays,
  .sun-rays::after,
  .sun-glow,
  .fog,
  .hero,
  .details {
    animation: none !important;
  }
}