/* ============================================================
   Aurora Glass — FX layer (sinh động). Tất cả GPU-nhẹ (transform/opacity).
   Tôn trọng prefers-reduced-motion (tắt cuối file).
   ============================================================ */

/* ---------- 1. Aurora nền SỐNG (trôi nhẹ) ----------
   Lớp fixed lớn hơn viewport, chỉ dùng translate3d (compositor, không re-raster). */
.au-aurora-mid {
  display: block !important;
  position: fixed; inset: -18%; z-index: 0; pointer-events: none;
  background:
    radial-gradient(42vw 42vw at 18% 22%, rgba(45,212,191,.34), transparent 62%),
    radial-gradient(48vw 48vw at 82% 30%, rgba(168,85,247,.30), transparent 62%),
    radial-gradient(40vw 40vw at 60% 78%, rgba(99,102,241,.26), transparent 62%),
    radial-gradient(30vw 30vw at 32% 65%, rgba(34,211,238,.18), transparent 60%);
  will-change: transform; animation: au-aurora 22s ease-in-out infinite alternate;
}
@keyframes au-aurora {
  0%   { transform: translate3d(0, 0, 0) rotate(0deg); }
  50%  { transform: translate3d(4%, -3%, 0) rotate(0.001deg); }
  100% { transform: translate3d(-3%, 4%, 0) rotate(0deg); }
}
/* Lấp lánh sao rất mờ toàn nền (ban đêm rõ hơn) */
.au-aurora-mid::after {
  content: ""; position: absolute; inset: 0;
  background-image:
    radial-gradient(1.5px 1.5px at 20% 30%, rgba(255,255,255,.5), transparent),
    radial-gradient(1.5px 1.5px at 70% 20%, rgba(255,255,255,.4), transparent),
    radial-gradient(1px 1px at 45% 60%, rgba(255,255,255,.4), transparent),
    radial-gradient(1.5px 1.5px at 85% 70%, rgba(255,255,255,.35), transparent),
    radial-gradient(1px 1px at 30% 80%, rgba(255,255,255,.4), transparent),
    radial-gradient(1px 1px at 60% 45%, rgba(255,255,255,.3), transparent);
  animation: au-twinkle 4s ease-in-out infinite; opacity: .5;
}
:root[data-daypart="latenight"] .au-aurora-mid::after,
:root[data-daypart="evening"] .au-aurora-mid::after { opacity: .85; }
@keyframes au-twinkle { 0%,100% { opacity: .3; } 50% { opacity: .7; } }
/* Light theme: aurora dịu, tắt sao nền (chỉ hợp nền tối). */
:root[data-theme="light"] .au-aurora-mid { opacity: .55; }
:root[data-theme="light"] .au-aurora-mid::after { display: none; }

/* ---------- 2. Icon thời tiết ĐỘNG ---------- */
.kw-wicon { overflow: visible; filter: drop-shadow(0 1px 2px rgba(10,25,55,.16)); }
/* Light: bóng đậm hơn + viền mây rõ hơn (tránh chìm trên nền sáng) */
:root[data-theme="light"] .kw-wicon { filter: drop-shadow(0 2px 5px rgba(20,60,120,.22)); }
:root[data-theme="light"] .kw-wicon path[stroke] { stroke-opacity: .32; }
/* Mặt trời (clear-day) xoay chậm */
.kw-wicon--clear.kw-wicon--day > g { transform-box: fill-box; transform-origin: center; animation: au-spin 26s linear infinite; }
@keyframes au-spin { to { transform: rotate(360deg); } }
/* Sao quanh trăng (clear-night) lấp lánh */
.kw-wicon--clear.kw-wicon--night > g { animation: au-star 3.2s ease-in-out infinite; transform-origin: center; }
@keyframes au-star { 0%,100% { opacity: .55; } 50% { opacity: 1; } }
/* Mưa/phùn/rào rơi (nhóm giọt = g cuối) */
.kw-wicon--rain > g:last-of-type,
.kw-wicon--drizzle > g:last-of-type,
.kw-wicon--rain-showers > g:last-of-type,
.kw-wicon--freezing-rain > g:last-of-type {
  transform-box: fill-box; animation: au-rain 1.1s linear infinite;
}
@keyframes au-rain { 0% { transform: translateY(-2px); opacity: .35; } 40% { opacity: 1; } 100% { transform: translateY(4px); opacity: .2; } }
/* Tuyết rơi + đung đưa */
.kw-wicon--snow > g:last-of-type,
.kw-wicon--snow-showers > g:last-of-type {
  transform-box: fill-box; transform-origin: center; animation: au-snow 2.4s ease-in-out infinite;
}
@keyframes au-snow { 0% { transform: translateY(-2px); } 50% { transform: translateY(2px) rotate(12deg); } 100% { transform: translateY(-2px); } }
/* Giông: nháy sáng */
.kw-wicon--thunderstorm { animation: au-flash 3.5s steps(1) infinite; }
@keyframes au-flash { 0%,92%,100% { filter: none; } 94%,98% { filter: drop-shadow(0 0 8px rgba(251,191,36,.9)) brightness(1.3); } 96% { filter: none; } }
/* Icon hero: bồng bềnh + glow */
.au-hero__icon .kw-wicon, .au-loc-hero__icon .kw-wicon { animation: au-float 5s ease-in-out infinite; }
@keyframes au-float { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-7px); } }

/* Bầu trời hero: xem aurora-sky.css. Canvas hạt do fx.js chèn. */

/* ---------- 4. Card hover: quét ánh sáng + nâng ---------- */
.au-glass--hover { position: relative; overflow: hidden; }
.au-glass--hover::after {
  content: ""; position: absolute; top: 0; left: -60%; width: 45%; height: 100%;
  background: linear-gradient(100deg, transparent, var(--au-shine, rgba(255,255,255,.12)), transparent);
  transform: skewX(-18deg); transition: left .6s ease; pointer-events: none;
}
.au-glass--hover:hover::after { left: 130%; }

/* ---------- 5. Reveal khi cuộn ---------- */
.au-reveal { opacity: 0; transform: translateY(18px); }
.au-reveal.is-in { opacity: 1; transform: none; transition: opacity .6s ease, transform .6s cubic-bezier(.2,.8,.2,1); }

/* ---------- 7. Hero temp shimmer nhẹ ---------- */
.au-hero__temp, .au-loc-hero__temp { background-size: 200% auto; }

/* ---------- Reduced motion: tắt hết ---------- */
@media (prefers-reduced-motion: reduce) {
  .au-aurora-mid, .au-aurora-mid::after,
  .kw-wicon > g, .kw-wicon,
  .au-hero__icon .kw-wicon, .au-loc-hero__icon .kw-wicon,
  .au-search__gps::after, .kw-wicon--thunderstorm { animation: none !important; }
  .au-reveal { opacity: 1; transform: none; }
  .au-glass--hover::after { display: none; }
}