/* ============================================================
   Panel langit dinamis — pengganti ilustrasi statis di hero
   ============================================================ */

.sky {
  position: relative;
  width: 100%;
  border-radius: 18px;
  overflow: hidden;
  box-shadow: 0 24px 60px rgba(10, 10, 10, 0.16);
  transition: box-shadow 0.6s ease;
}
.sky__svg { display: block; width: 100%; height: auto; }

/* Peredupan lembut agar perubahan fase tidak mengejutkan */
.sky__stop-top, .sky__stop-mid, .sky__stop-bot,
.sky__glow-in, .sky__glow-out, .sky__disc {
  transition: stop-color 2.5s ease, fill 2.5s ease;
}

/* --- Matahari / bulan --- */
.sky__body { transition: transform 3s cubic-bezier(0.4, 0, 0.2, 1); }
.sky__disc { filter: drop-shadow(0 0 14px rgba(255, 220, 150, 0.55)); }
.sky[data-daynight="night"] .sky__disc { filter: drop-shadow(0 0 12px rgba(200, 220, 255, 0.45)); }

.sky__glow { transition: opacity 2s ease, cx 3s cubic-bezier(0.4,0,0.2,1), cy 3s cubic-bezier(0.4,0,0.2,1); }

/* Kawah hanya tampak saat bulan */
.sky__crater { fill: rgba(120, 140, 175, 0.42); opacity: 0; transition: opacity 1.6s ease; }
.sky[data-daynight="night"] .sky__crater { opacity: 1; }

/* --- Bintang --- */
.sky__stars circle { fill: #fff; opacity: 0; transition: opacity 2s ease; }
.sky[data-daynight="night"] .sky__stars circle { opacity: 0.85; animation: sky-twinkle 3.4s ease-in-out infinite; }
.sky__stars circle:nth-child(2n) { animation-delay: 0.7s; }
.sky__stars circle:nth-child(3n) { animation-delay: 1.5s; }
.sky__stars circle:nth-child(5n) { animation-delay: 2.2s; }
@keyframes sky-twinkle {
  0%, 100% { opacity: 0.85; }
  50% { opacity: 0.28; }
}

/* --- Busur lintasan --- */
.sky__arc {
  stroke: rgba(255, 255, 255, 0.22);
  stroke-width: 1;
  stroke-dasharray: 3 8;
}
.sky[data-daynight="night"] .sky__arc { stroke: rgba(255, 255, 255, 0.12); }

/* --- Awan --- */
.sky__cloud ellipse { fill: rgba(255, 255, 255, 0.72); }
.sky__cloud { opacity: 0.9; transition: opacity 2s ease; }
.sky[data-daynight="night"] .sky__cloud { opacity: 0.22; }
.sky[data-phase="dusk"] .sky__cloud ellipse,
.sky[data-phase="dawn"] .sky__cloud ellipse { fill: rgba(255, 225, 200, 0.68); }

.sky__cloud--1 { animation: sky-drift-1 48s linear infinite; }
.sky__cloud--2 { animation: sky-drift-2 68s linear infinite; }
.sky__cloud--3 { animation: sky-drift-3 88s linear infinite; }

@keyframes sky-drift-1 {
  from { transform: translate(-90px, 96px); }
  to   { transform: translate(700px, 96px); }
}
@keyframes sky-drift-2 {
  from { transform: translate(-70px, 178px); }
  to   { transform: translate(690px, 178px); }
}
@keyframes sky-drift-3 {
  from { transform: translate(-120px, 250px); }
  to   { transform: translate(720px, 250px); }
}

/* --- Lanskap --- */
.sky__land { transition: fill 2.5s ease; }
.sky__land--far  { fill: rgba(10, 10, 10, 0.34); }
.sky__land--near { fill: rgba(10, 10, 10, 0.62); }
.sky[data-daynight="night"] .sky__land--far  { fill: rgba(4, 6, 14, 0.62); }
.sky[data-daynight="night"] .sky__land--near { fill: rgba(2, 4, 10, 0.86); }

/* --- Grid teknis --- */
.sky__grid line { stroke: rgba(76, 175, 62, 0.32); stroke-width: 1; stroke-dasharray: 2 6; }

/* --- Label waktu --- */
.sky__meta {
  position: absolute;
  left: 18px; bottom: 16px;
  display: flex; align-items: baseline; gap: 10px;
  font-family: var(--font-pub-mono);
  color: #fff;
  text-shadow: 0 1px 6px rgba(0, 0, 0, 0.45);
}
.sky__time { font-size: 22px; font-weight: 500; letter-spacing: -0.02em; }
.sky__phase {
  font-size: 10px; letter-spacing: 0.2em; text-transform: uppercase;
  opacity: 0.82;
}

@media (prefers-reduced-motion: reduce) {
  .sky__cloud, .sky__stars circle { animation: none !important; }
  .sky__body, .sky__glow { transition: none !important; }
}

/* ============================================================
   Lapisan cuaca
   ============================================================ */

/* --- Hujan --- */
.sky__rain line {
  stroke: rgba(200, 225, 255, 0.62);
  stroke-width: 1.4;
  stroke-linecap: round;
  animation: sky-fall linear infinite;
}
.sky[data-weather="drizzle"] .sky__rain line { stroke-width: 1; opacity: 0.55; }
@keyframes sky-fall {
  from { transform: translate(0, -60px); opacity: 0; }
  12%  { opacity: 1; }
  88%  { opacity: 1; }
  to   { transform: translate(-26px, 480px); opacity: 0; }
}

/* --- Kilat --- */
.sky__flash { opacity: 0; pointer-events: none; }
.sky__bolt { fill: #fff8d6; opacity: 0; filter: drop-shadow(0 0 10px rgba(255,255,180,0.9)); }
.sky[data-weather="thunder"] .sky__flash { animation: sky-flash 7s ease-out infinite; }
.sky[data-weather="thunder"] .sky__bolt  { animation: sky-bolt 7s ease-out infinite; }
@keyframes sky-flash {
  0%, 88%, 100% { opacity: 0; }
  90% { opacity: 0.62; }
  92% { opacity: 0.12; }
  94% { opacity: 0.48; }
  96% { opacity: 0; }
}
@keyframes sky-bolt {
  0%, 89%, 100% { opacity: 0; }
  90.5% { opacity: 1; }
  93%   { opacity: 0.25; }
  94.5% { opacity: 0.9; }
  96%   { opacity: 0; }
}

/* --- Kabut --- */
.sky__fog ellipse { fill: rgba(232, 236, 240, 0.34); }
.sky__fog { opacity: 0; transition: opacity 1.6s ease; }
.sky[data-weather="fog"] .sky__fog { opacity: 1; }
.sky[data-weather="fog"] .sky__fog ellipse { animation: sky-fog 22s ease-in-out infinite alternate; }
.sky[data-weather="fog"] .sky__fog ellipse:nth-child(2) { animation-delay: -7s; }
.sky[data-weather="fog"] .sky__fog ellipse:nth-child(3) { animation-delay: -14s; }
@keyframes sky-fog {
  from { transform: translateX(-24px); }
  to   { transform: translateX(24px); }
}

/* --- Awan menebal saat mendung/hujan --- */
.sky[data-weather="cloudy"] .sky__cloud ellipse,
.sky[data-weather="rain"] .sky__cloud ellipse,
.sky[data-weather="drizzle"] .sky__cloud ellipse,
.sky[data-weather="thunder"] .sky__cloud ellipse {
  fill: rgba(158, 166, 178, 0.86);
}
.sky[data-weather="rain"] .sky__cloud,
.sky[data-weather="thunder"] .sky__cloud { opacity: 1; }

/* Matahari meredup saat tertutup awan tebal */
.sky[data-weather="rain"] .sky__glow,
.sky[data-weather="thunder"] .sky__glow,
.sky[data-weather="cloudy"] .sky__glow { opacity: 0.35; }
.sky[data-weather="rain"] .sky__disc,
.sky[data-weather="thunder"] .sky__disc { opacity: 0.5; }

/* --- Label lokasi & cuaca --- */
.sky__meta { flex-direction: column; align-items: flex-start; gap: 3px; }
.sky__meta-row { display: flex; align-items: baseline; gap: 10px; }
.sky__meta-row--sub { gap: 8px; opacity: 0.9; }
.sky__place, .sky__cond {
  font-size: 10.5px; letter-spacing: 0.1em; text-transform: uppercase;
}
.sky__cond { color: #d8f0d0; }
.sky__place:empty, .sky__cond:empty { display: none; }

/* --- Tombol lokasi --- */
.sky__locate {
  position: absolute; right: 14px; bottom: 14px;
  display: inline-flex; align-items: center; gap: 6px;
  padding: 7px 12px;
  border: 1px solid rgba(255,255,255,0.35);
  background: rgba(0,0,0,0.28);
  backdrop-filter: blur(6px);
  color: #fff;
  border-radius: 999px;
  font-family: var(--font-pub-mono);
  font-size: 10px; letter-spacing: 0.08em;
  cursor: pointer;
  transition: background 0.3s ease, border-color 0.3s ease, opacity 0.3s ease;
}
.sky__locate:hover { background: rgba(76,175,62,0.85); border-color: var(--pub-signal); }
.sky__locate[hidden] { display: none; }
.sky__locate.is-busy { opacity: 0.6; pointer-events: none; }

@media (prefers-reduced-motion: reduce) {
  .sky__rain line, .sky__flash, .sky__bolt, .sky__fog ellipse { animation: none !important; }
  .sky__flash, .sky__bolt { opacity: 0 !important; }
}