/* Cielo — global styles */

:root {
  --cream: #F4ECDC;
  --cream-soft: #FAF4E6;
  --cream-deep: #E9DFCB;
  --ink: #1a1a1a;
  --ink-soft: #3a3530;
  --ink-mute: #847b6e;
  --line: rgba(26,26,26,0.12);
  --line-soft: rgba(26,26,26,0.06);

  /* accent dots */
  --orange: #F08A3E;
  --scarlet: #E85F3D;
  --lavender: #B8A4D9;
  --gold: #EAB94A;
  --turquoise: #6EC3B4;
  --sky: #7AA9E0;
  --rose: #E88FA0;
}

/* ─── Theme variants (mantienen estética; sólo varían base/tinte) ─── */
[data-theme="bosque"] {
  --cream: #E8E9DC;
  --cream-soft: #F2F2E6;
  --cream-deep: #D6D9C4;
  --ink: #1f2a1d;
  --ink-soft: #34402e;
  --ink-mute: #6f7e69;
  --line: rgba(31,42,29,0.12);
  --line-soft: rgba(31,42,29,0.06);
}
[data-theme="lavanda"] {
  --cream: #EFEAF1;
  --cream-soft: #F7F3F8;
  --cream-deep: #DFD6E5;
  --ink: #221b2c;
  --ink-soft: #3a3148;
  --ink-mute: #7d7388;
  --line: rgba(34,27,44,0.12);
  --line-soft: rgba(34,27,44,0.06);
}
[data-theme="arena"] {
  --cream: #F4E3CC;
  --cream-soft: #FBEFD9;
  --cream-deep: #E5CFAE;
  --ink: #2a1f12;
  --ink-soft: #443322;
  --ink-mute: #8a7256;
  --line: rgba(42,31,18,0.12);
  --line-soft: rgba(42,31,18,0.06);
}
[data-theme="dark"] {
  --cream: #14130F;
  --cream-soft: #1C1B17;
  --cream-deep: #262521;
  --ink: #F2EBDA;
  --ink-soft: #D5CEBE;
  --ink-mute: #8a8378;
  --line: rgba(242,235,218,0.14);
  --line-soft: rgba(242,235,218,0.06);
}
[data-theme="dark"] body,
[data-theme="dark"] html { background: #0E0D0A; }

/* en dark mode, los chips/cards con fondo blanco translúcido del hero invierten para legibilidad */
[data-theme="dark"] .input { background: #1C1B17; color: var(--ink); }
[data-theme="dark"] .input:focus { background: #24231E; }

/* nav shell — uses theme vars so dark mode no longer shows a white bar */
.nav-shell {
  background: linear-gradient(
    180deg,
    color-mix(in oklab, var(--cream) 0%, transparent) 0%,
    color-mix(in oklab, var(--cream-soft) 92%, transparent) 28%,
    var(--cream-soft) 100%
  );
}
[data-theme="dark"] .bottom-nav { background: transparent; }
[data-theme="dark"] .card { background: var(--cream-soft); border-color: var(--line-soft); }

/* search row weather thumb: stable gradient background, no placeholder jump */
.live-sky-holder {
  width: 48px;
  height: 48px;
  border-radius: 14px;
  overflow: hidden;
  flex-shrink: 0;
  position: relative;
  background: linear-gradient(145deg, var(--cream-deep), var(--cream-soft));
  animation: live-sky-fade .42s ease both;
}
.live-sky-holder::after {
  content: '';
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: radial-gradient(circle at 26% 24%, rgba(255,255,255,0.86) 0 16%, transparent 17%);
}
.live-sky-grain {
  position: absolute;
  inset: 0;
  pointer-events: none;
  opacity: 0.22;
  mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='120' height='120'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/></filter><rect width='100%' height='100%' filter='url(%23n)' opacity='0.5'/></svg>");
}
.live-sky-clear-day, .live-sky-day { background: radial-gradient(ellipse 130% 70% at 50% 100%, #FCE9A8 0%, #DCEFC9 22%, #9DD6E0 48%, #75B2DE 72%, #5790D2 100%); }
.live-sky-hot { background: radial-gradient(ellipse 140% 75% at 50% 100%, #FFD085 0%, #FFA64E 22%, #F26C3D 45%, #C44A4F 72%, #7E3B70 100%); }
.live-sky-partly-day { background: linear-gradient(180deg, #6FA8D8 0%, #95C0DC 30%, #C3D5DE 60%, #DFD6C7 85%, #E8D2BB 100%); }
.live-sky-cloudy-day { background: linear-gradient(180deg, #B6BDC9 0%, #C8CCD4 40%, #DAD9D0 75%, #E5DCC6 100%); }
.live-sky-overcast-day { background: linear-gradient(180deg, #93989F 0%, #ACB1B5 50%, #C4C5C0 100%); }
.live-sky-fog-day { background: linear-gradient(180deg, #D3D2CB 0%, #DFDCCF 40%, #E9E2D2 75%, #EDE3CD 100%); }
.live-sky-drizzle-day { background: linear-gradient(180deg, #7F8CA2 0%, #9AA5B7 50%, #BBC0C5 100%); }
.live-sky-rain-day { background: linear-gradient(180deg, #5C6478 0%, #707686 45%, #8E929A 100%); }
.live-sky-heavy-rain { background: linear-gradient(180deg, #2F3344 0%, #3D4253 45%, #4D5263 100%); }
.live-sky-storm-day { background: radial-gradient(ellipse 130% 70% at 50% 90%, #6C5C76 0%, #4C4156 30%, #2D2839 65%, #1A1828 100%); }
.live-sky-clear-night, .live-sky-night { background: radial-gradient(ellipse 140% 80% at 50% 110%, #3F4378 0%, #2A2D5F 35%, #181B45 65%, #0B0D2C 100%); }
.live-sky-partly-night { background: linear-gradient(180deg, #16193E 0%, #232859 40%, #353A6C 70%, #4B4E7F 100%); }
.live-sky-cloudy-night { background: linear-gradient(180deg, #1F2238 0%, #2C2F47 50%, #3B3E58 100%); }
.live-sky-overcast-night { background: linear-gradient(180deg, #1B1D2A 0%, #2A2C38 60%, #3A3C46 100%); }
.live-sky-fog-night { background: linear-gradient(180deg, #2D2F40 0%, #44475A 50%, #5C5F6F 100%); }
.live-sky-drizzle-night { background: linear-gradient(180deg, #181B30 0%, #262A44 50%, #3B3F58 100%); }
.live-sky-rain-night { background: linear-gradient(180deg, #0F1226 0%, #1A1E36 45%, #2A2E48 100%); }
.live-sky-storm-night { background: radial-gradient(ellipse 130% 70% at 50% 90%, #2A1F40 0%, #19142C 35%, #0D0A1C 70%, #050310 100%); }
.live-sky-snow-day { background: linear-gradient(180deg, #C8CFDB 0%, #DCE2E6 30%, #EDEAE2 65%, #F3E8D6 100%); }
.live-sky-snow-night { background: linear-gradient(180deg, #2A314A 0%, #3F4660 40%, #58607A 80%, #717890 100%); }
.live-sky-sleet { background: linear-gradient(180deg, #7F8B9D 0%, #98A0AE 40%, #B3B8BD 75%, #C8C9C5 100%); }
.live-sky-haze { background: radial-gradient(ellipse 140% 80% at 50% 100%, #F0B989 0%, #E89E7E 25%, #C68F90 55%, #A38AA8 85%, #8B82B0 100%); }
.live-sky-frost { background: linear-gradient(180deg, #C9DCE6 0%, #DEEAEE 30%, #ECEEEA 60%, #F6EAD9 100%); }
@keyframes live-sky-fade {
  from { opacity: .35; }
  to { opacity: 1; }
}

* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }

html, body {
  margin: 0; padding: 0;
  height: 100%;
  background: #ECE6DA;
  font-family: 'Manrope', system-ui, sans-serif;
  color: var(--ink);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

body {
  min-height: 100vh;
  background: var(--cream);
}

#root { height: 100%; }

/* ─── Type ─── */
.serif { font-family: 'Instrument Serif', 'Times New Roman', serif; font-weight: 400; letter-spacing: -0.01em; }
.serif-it { font-family: 'Instrument Serif', serif; font-style: italic; letter-spacing: -0.01em; }
.mono { font-family: 'JetBrains Mono', ui-monospace, monospace; }
.caps { font-family: 'JetBrains Mono', ui-monospace, monospace; text-transform: uppercase; letter-spacing: 0.08em; font-size: 10.5px; font-weight: 500; }
.caps-sm { font-family: 'JetBrains Mono', ui-monospace, monospace; text-transform: uppercase; letter-spacing: 0.1em; font-size: 9.5px; font-weight: 500; }

/* ─── App shell ─── */
.cielo-app {
  width: 100%; height: 100%;
  position: relative; overflow: hidden;
  background: var(--cream);
  display: flex; flex-direction: column;
}

.screen {
  position: absolute; inset: 0;
  min-height: 100vh;
  display: flex; flex-direction: column;
  background: var(--cream);
  overflow: hidden;
}

.scroll {
  flex: 1; overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
  overscroll-behavior: contain;
}
.scroll::-webkit-scrollbar { display: none; }

.home-scroll {
  padding-bottom: calc(132px + env(safe-area-inset-bottom));
}

/* ─── Sky backgrounds ─── */
.sky {
  position: relative;
  overflow: hidden;
}
.sky::after {
  /* grain */
  content: ''; position: absolute; inset: 0; pointer-events: none;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='180' height='180'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.5 0'/></filter><rect width='100%' height='100%' filter='url(%23n)' opacity='0.55'/></svg>");
  mix-blend-mode: overlay; opacity: 0.35;
}

/* ─── Time-of-day clear/partly skies ─── */
.sky-dawn         { background: radial-gradient(ellipse 130% 75% at 50% 105%, #FFE7B0 0%, #FFC78E 20%, #F4A0A7 42%, #C9A2D0 65%, #8FA3D6 85%, #6A86C0 100%); }
.sky-sunset       { background: radial-gradient(ellipse 140% 70% at 50% 100%, #FFD68A 0%, #FFA75A 18%, #FF7A4E 34%, #E26566 50%, #B091C5 70%, #7A83B9 88%, #5C6BA8 100%); }
/* legacy aliases (kept so older code paths still render) */
.sky-day          { background: radial-gradient(ellipse 130% 70% at 50% 100%, #FCE9A8 0%, #DCEFC9 22%, #9DD6E0 48%, #75B2DE 72%, #5790D2 100%); }
.sky-night        { background: radial-gradient(ellipse 140% 75% at 50% 100%, #6A6CA3 0%, #4C5290 25%, #353B7C 50%, #232854 75%, #14163A 100%); }
.sky-storm        { background: radial-gradient(ellipse 140% 75% at 50% 100%, #BFC8D8 0%, #8E96B0 30%, #5E657F 60%, #3D4256 100%); }

/* ─── CLEAR ─── */
.sky-clear-day    { background: radial-gradient(ellipse 130% 70% at 50% 100%, #FCE9A8 0%, #DCEFC9 22%, #9DD6E0 48%, #75B2DE 72%, #5790D2 100%); }
.sky-clear-night  { background: radial-gradient(ellipse 140% 80% at 50% 110%, #3F4378 0%, #2A2D5F 35%, #181B45 65%, #0B0D2C 100%); }

/* ─── PARTLY CLOUDY ─── */
.sky-partly-day   { background: linear-gradient(180deg, #6FA8D8 0%, #95C0DC 30%, #C3D5DE 60%, #DFD6C7 85%, #E8D2BB 100%); }
.sky-partly-night { background: linear-gradient(180deg, #16193E 0%, #232859 40%, #353A6C 70%, #4B4E7F 100%); }

/* ─── CLOUDY ─── */
.sky-cloudy-day   { background: linear-gradient(180deg, #B6BDC9 0%, #C8CCD4 40%, #DAD9D0 75%, #E5DCC6 100%); }
.sky-cloudy-night { background: linear-gradient(180deg, #1F2238 0%, #2C2F47 50%, #3B3E58 100%); }

/* ─── OVERCAST (flatter) ─── */
.sky-overcast-day   { background: linear-gradient(180deg, #93989F 0%, #ACB1B5 50%, #C4C5C0 100%); }
.sky-overcast-night { background: linear-gradient(180deg, #1B1D2A 0%, #2A2C38 60%, #3A3C46 100%); }

/* ─── FOG ─── */
.sky-fog-day   { background: linear-gradient(180deg, #D3D2CB 0%, #DFDCCF 40%, #E9E2D2 75%, #EDE3CD 100%); }
.sky-fog-night { background: linear-gradient(180deg, #2D2F40 0%, #44475A 50%, #5C5F6F 100%); }

/* ─── DRIZZLE ─── */
.sky-drizzle-day   { background: linear-gradient(180deg, #7F8CA2 0%, #9AA5B7 50%, #BBC0C5 100%); }
.sky-drizzle-night { background: linear-gradient(180deg, #181B30 0%, #262A44 50%, #3B3F58 100%); }

/* ─── RAIN ─── */
.sky-rain-day      { background: linear-gradient(180deg, #5C6478 0%, #707686 45%, #8E929A 100%); }
.sky-rain-night    { background: linear-gradient(180deg, #0F1226 0%, #1A1E36 45%, #2A2E48 100%); }
.sky-heavy-rain    { background: linear-gradient(180deg, #2F3344 0%, #3D4253 45%, #4D5263 100%); }

/* ─── STORM ─── */
.sky-storm-day   { background: radial-gradient(ellipse 130% 70% at 50% 90%, #6C5C76 0%, #4C4156 30%, #2D2839 65%, #1A1828 100%); }
.sky-storm-night { background: radial-gradient(ellipse 130% 70% at 50% 90%, #2A1F40 0%, #19142C 35%, #0D0A1C 70%, #050310 100%); }

/* ─── SNOW ─── */
.sky-snow-day    { background: linear-gradient(180deg, #C8CFDB 0%, #DCE2E6 30%, #EDEAE2 65%, #F3E8D6 100%); }
.sky-snow-night  { background: linear-gradient(180deg, #2A314A 0%, #3F4660 40%, #58607A 80%, #717890 100%); }
.sky-sleet       { background: linear-gradient(180deg, #7F8B9D 0%, #98A0AE 40%, #B3B8BD 75%, #C8C9C5 100%); }

/* ─── HAZE / DUSTY ─── */
.sky-haze { background: radial-gradient(ellipse 140% 80% at 50% 100%, #F0B989 0%, #E89E7E 25%, #C68F90 55%, #A38AA8 85%, #8B82B0 100%); }

/* ─── EXTREMES ─── */
.sky-hot   { background: radial-gradient(ellipse 140% 75% at 50% 100%, #FFD085 0%, #FFA64E 22%, #F26C3D 45%, #C44A4F 72%, #7E3B70 100%); }
.sky-frost { background: linear-gradient(180deg, #C9DCE6 0%, #DEEAEE 30%, #ECEEEA 60%, #F6EAD9 100%); }

/* ─── Stars layer for night skies ─── */
.stars {
  position: absolute; inset: 0; pointer-events: none;
  background-image:
    radial-gradient(1px 1px at 20% 30%, rgba(255,255,255,0.7), transparent 60%),
    radial-gradient(1px 1px at 75% 20%, rgba(255,255,255,0.55), transparent 60%),
    radial-gradient(1.2px 1.2px at 40% 50%, rgba(255,255,255,0.8), transparent 60%),
    radial-gradient(1px 1px at 88% 65%, rgba(255,255,255,0.5), transparent 60%),
    radial-gradient(0.8px 0.8px at 10% 70%, rgba(255,255,255,0.6), transparent 60%),
    radial-gradient(1px 1px at 55% 15%, rgba(255,255,255,0.7), transparent 60%),
    radial-gradient(0.8px 0.8px at 30% 80%, rgba(255,255,255,0.4), transparent 60%),
    radial-gradient(1.2px 1.2px at 65% 75%, rgba(255,255,255,0.55), transparent 60%);
  opacity: 0.85;
}

/* ─── Rain streaks ─── */
.rain-streaks {
  position: absolute; inset: 0; pointer-events: none; overflow: hidden;
  background-image: repeating-linear-gradient(
    100deg,
    transparent 0px,
    transparent 6px,
    rgba(255,255,255,0.22) 6px,
    rgba(255,255,255,0.22) 7px
  );
  opacity: 0.5;
  mask-image: linear-gradient(180deg, transparent 0%, #000 30%, #000 100%);
}
.rain-streaks.heavy {
  background-image: repeating-linear-gradient(
    100deg, transparent 0px, transparent 4px,
    rgba(255,255,255,0.32) 4px, rgba(255,255,255,0.32) 5px
  );
  opacity: 0.7;
}

/* ─── Snow flakes (static positioned) ─── */
.snowflakes {
  position: absolute; inset: 0; pointer-events: none;
  background-image:
    radial-gradient(2px 2px at 10% 20%, #fff, transparent 60%),
    radial-gradient(1.5px 1.5px at 35% 40%, #fff, transparent 60%),
    radial-gradient(2px 2px at 60% 15%, #fff, transparent 60%),
    radial-gradient(1px 1px at 80% 55%, #fff, transparent 60%),
    radial-gradient(2px 2px at 25% 70%, #fff, transparent 60%),
    radial-gradient(1.5px 1.5px at 50% 85%, #fff, transparent 60%),
    radial-gradient(1px 1px at 90% 35%, #fff, transparent 60%),
    radial-gradient(1.5px 1.5px at 70% 65%, #fff, transparent 60%);
  opacity: 0.75;
}

/* ─── Fog band ─── */
.fog-band {
  position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(180deg, transparent 0%, rgba(255,255,255,0.18) 35%, rgba(255,255,255,0.32) 55%, rgba(255,255,255,0.12) 80%, transparent 100%);
}

/* ─── Heat haze shimmer (subtle) ─── */
.heat-haze {
  position: absolute; left: 0; right: 0; bottom: 0; height: 30%; pointer-events: none;
  background: linear-gradient(180deg, transparent 0%, rgba(255,200,140,0.25) 60%, rgba(255,170,100,0.35) 100%);
  filter: blur(8px);
}

/* ─── Buttons ─── */
.btn {
  border: 0; cursor: pointer; font-family: inherit;
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  transition: transform .15s ease, opacity .15s ease, background .2s ease;
}
.btn:active { transform: scale(0.97); }

.btn-primary {
  background: var(--ink); color: var(--cream-soft);
  border-radius: 999px; padding: 16px 28px;
  font-size: 15px; font-weight: 600; letter-spacing: -0.005em;
}
.btn-ghost {
  background: transparent; color: var(--ink);
  border-radius: 999px; padding: 16px 28px;
  font-size: 15px; font-weight: 600;
}
.btn-cream {
  background: var(--cream-deep); color: var(--ink);
  border-radius: 999px; padding: 14px 22px;
  font-size: 14px; font-weight: 600;
}

/* ─── Input ─── */
.input {
  width: 100%;
  background: var(--cream-soft); border: 1px solid var(--line);
  border-radius: 14px; padding: 14px 16px;
  font-family: inherit; font-size: 15px; color: var(--ink);
  outline: none;
  transition: border-color .15s ease, background .15s ease;
}
.input:focus { border-color: var(--ink); background: #fff; }
.input::placeholder { color: var(--ink-mute); }

/* ─── Dots palette ─── */
.dots { display: inline-flex; gap: 4px; align-items: center; }
.dot { width: 6px; height: 6px; border-radius: 999px; display: inline-block; }

/* ─── Mini gradient bar (sunset card style) ─── */
.minibar {
  width: 28px; height: 4px; border-radius: 999px;
  background: linear-gradient(90deg, #FF8847, #B8A4D9);
  position: relative; overflow: hidden;
}
.minibar::after {
  content: ''; position: absolute; top: -1px; bottom: -1px; width: 2px;
  background: #1a1a1a; border-radius: 4px;
}
.minibar.warm::after { left: 30%; }
.minibar.cool::after { left: 70%; background: #1a1a1a; }
.minibar.warm { background: linear-gradient(90deg, #F08A3E, #FFD68A); }
.minibar.cool { background: linear-gradient(90deg, #7AA9E0, #C9DAEF); }
.minibar.mix { background: linear-gradient(90deg, #F08A3E, #B8A4D9, #7AA9E0); }

/* ─── Card ─── */
.card {
  background: var(--cream-soft);
  border-radius: 22px; padding: 18px;
  border: 1px solid var(--line-soft);
}

/* ─── Bottom nav ─── */
.bottom-nav {
  display: grid; grid-template-columns: repeat(4, 1fr);
  padding: 10px 12px 22px;
  background: var(--cream-soft);
  border-top: 1px solid var(--line-soft);
}
.bottom-nav.nav-5 { grid-template-columns: repeat(5, 1fr); }
.bottom-nav.nav-5 .nav-item { padding: 6px 2px; }
.bottom-nav.nav-5 .nav-label { font-size: 9px; }
.nav-item {
  display: flex; flex-direction: column; align-items: center; gap: 4px;
  background: none; border: 0; cursor: pointer; color: var(--ink-mute);
  padding: 6px 4px; font-family: inherit;
}
.nav-item.active { color: var(--ink); }
.nav-item .nav-label { font-family: 'JetBrains Mono', monospace; font-size: 9.5px; letter-spacing: 0.1em; text-transform: uppercase; }

/* ─── Animation helpers ─── */
@keyframes fadeUp {
  from { opacity: 0; transform: translateY(8px); }
  to { opacity: 1; transform: translateY(0); }
}
.fade-up { animation: fadeUp .6s ease both; }
.fade-up-1 { animation: fadeUp .6s ease both; animation-delay: .1s; }
.fade-up-2 { animation: fadeUp .6s ease both; animation-delay: .2s; }
.fade-up-3 { animation: fadeUp .6s ease both; animation-delay: .3s; }
.fade-up-4 { animation: fadeUp .6s ease both; animation-delay: .4s; }

@keyframes shimmer {
  0%, 100% { transform: translate(0,0) scale(1); }
  50% { transform: translate(2%, -1%) scale(1.04); }
}
.shimmer { animation: shimmer 14s ease-in-out infinite; }

@keyframes breathe {
  0%, 100% { opacity: 0.5; }
  50% { opacity: 0.9; }
}
.breathe { animation: breathe 4s ease-in-out infinite; }

/* ─── Sun icon (drawn) ─── */
.sun-rays {
  display: inline-block;
}

/* ─── Scrollable city list ─── */
.row {
  display: flex; align-items: center; justify-content: space-between;
  padding: 14px 18px;
  border-bottom: 1px solid var(--line-soft);
}
.row:last-child { border-bottom: 0; }

.location-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 10px;
  padding: 4px 12px 0;
}

/* ─── Root container (fullscreen, mobile-first, scales up) ─── */
.cielo-root {
  position: fixed;
  inset: 0;
  width: 100vw;
  height: 100vh;
  height: 100dvh;
  background: var(--cream);
  overflow: hidden;
}

/* Tablet/desktop now use the full canvas instead of a phone mockup. */
@media (min-width: 720px) {
  html, body { height: 100%; }
  body { display: block; padding: 0; background: #ECE6DA; }
  .cielo-root {
    position: fixed;
    inset: 0;
    width: 100vw;
    height: 100dvh;
    margin: 0;
    border-radius: 0;
    box-shadow: none;
  }
  .location-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
    padding: 8px 20px 28px;
  }
}

@media (min-width: 1100px) {
  .location-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

/* Loading overlay for the hero sky: shows a neutral theme gradient until live
   weather arrives, then fades out smoothly to reveal the real sky gradient. */
.sky-loading-overlay {
  position: absolute;
  inset: 0;
  z-index: 3;
  pointer-events: none;
  opacity: 0;
  transition: opacity 700ms ease;
  background: linear-gradient(180deg,
    color-mix(in oklab, var(--cream) 92%, transparent) 0%,
    color-mix(in oklab, var(--cream-soft) 92%, transparent) 100%);
}
.sky-loading-overlay.is-loading {
  opacity: 1;
}
.sky { transition: background 700ms ease; }

/* Neutral base while loading — uses theme cream tones, no weather colors */
.sky-neutral {
  background: linear-gradient(180deg, var(--cream) 0%, var(--cream-soft) 100%);
}
.sky-real {
  position: absolute;
  inset: 0;
  transition: opacity 700ms ease;
}

/* ─── Animated gradient sheen for accent icons ───
   Subtle, high-end: a slow conic gradient pulse behind interactive icons */
@keyframes icon-grad-spin {
  to { transform: rotate(360deg); }
}
@keyframes icon-grad-pulse {
  0%, 100% { opacity: 0.55; }
  50%      { opacity: 0.95; }
}
.icon-grad {
  position: relative;
  display: inline-grid;
  place-items: center;
  isolation: isolate;
}
.icon-grad::before {
  content: '';
  position: absolute;
  inset: -4px;
  border-radius: 999px;
  background: conic-gradient(
    from 0deg,
    var(--orange),
    var(--rose),
    var(--lavender),
    var(--sky),
    var(--turquoise),
    var(--gold),
    var(--orange)
  );
  filter: blur(10px);
  opacity: 0.6;
  z-index: -1;
  animation: icon-grad-spin 14s linear infinite, icon-grad-pulse 4.5s ease-in-out infinite;
}
[data-theme="dark"] .icon-grad::before { opacity: 0.75; }

/* Active nav icon gets a soft animated glow */
.nav-item.active {
  position: relative;
}
.nav-item.active::before {
  content: '';
  position: absolute;
  top: 2px;
  width: 30px; height: 30px;
  border-radius: 999px;
  background: radial-gradient(circle,
    color-mix(in oklab, var(--orange) 38%, transparent) 0%,
    color-mix(in oklab, var(--lavender) 18%, transparent) 55%,
    transparent 75%);
  filter: blur(6px);
  animation: icon-grad-pulse 3.6s ease-in-out infinite;
  pointer-events: none;
}

/* Bottom nav lifts above the iOS Chrome/Safari dynamic toolbar */
.nav-shell {
  padding-bottom: max(20px, env(safe-area-inset-bottom)) !important;
}