/* ============================================================
   Aurora Glass — Sky (7 khung giờ) + celestial + theme toggle
   Lớp .au-hero__sky nằm trong hero (z-index 0), nội dung ở trên (z-index 1).
   Gradient + mặt trời/trăng theo [data-daypart]. Scrim theo [data-theme].
   ============================================================ */
.au-hero, .au-loc-hero { position: relative; }
.au-hero__sky {
  position: absolute; inset: 0; z-index: 0; border-radius: inherit; overflow: hidden;
  pointer-events: none;
  background: var(--sky, linear-gradient(180deg, #0a1024, #0b1225));
  transition: background .8s ease;
}
.au-hero > *:not(.au-hero__sky),
.au-loc-hero > *:not(.au-hero__sky) { position: relative; z-index: 1; }
.au-hero__sky canvas { position: absolute; inset: 0; width: 100%; height: 100%; }

/* Scrim: đảm bảo chữ đọc rõ trên nền trời (nhẹ, vẫn thấy trời). */
.au-hero__sky::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: var(--au-hero-scrim, linear-gradient(180deg, rgba(6,10,22,.32), rgba(6,10,22,.6)));
}
:root[data-theme="light"] { --au-hero-scrim: linear-gradient(180deg, rgba(255,255,255,.40), rgba(255,255,255,.66)); }
:root[data-theme="dark"]  { --au-hero-scrim: linear-gradient(180deg, rgba(6,10,22,.34), rgba(6,10,22,.66)); }

/* ---- 7 khung giờ: gradient trời + đĩa mặt trời/trăng ---- */
:root[data-daypart="dawn"]      .au-hero__sky { --sky: radial-gradient(120px 120px at 78% 74%, rgba(255,244,214,.95), rgba(255,201,150,.6) 45%, transparent 62%), linear-gradient(180deg, #24305e 0%, #6a5a8c 42%, #e59a86 76%, #f7c59a 100%); }
:root[data-daypart="morning"]   .au-hero__sky { --sky: radial-gradient(120px 120px at 22% 30%, rgba(255,251,233,.95), rgba(255,233,166,.55) 45%, transparent 62%), linear-gradient(180deg, #3f8fd0 0%, #78bce6 55%, #d3ecfa 100%); }
:root[data-daypart="noon"]      .au-hero__sky { --sky: radial-gradient(130px 130px at 50% 15%, rgba(255,254,242,1), rgba(255,233,143,.6) 42%, transparent 60%), linear-gradient(180deg, #1f7fd6 0%, #57a8e6 55%, #bce2fb 100%); }
:root[data-daypart="afternoon"] .au-hero__sky { --sky: radial-gradient(120px 120px at 76% 34%, rgba(255,246,223,.95), rgba(255,217,143,.55) 45%, transparent 60%), linear-gradient(180deg, #2d7fc4 0%, #7cb3dd 45%, #f2dcae 100%); }
:root[data-daypart="dusk"]      .au-hero__sky { --sky: radial-gradient(120px 120px at 74% 76%, rgba(255,240,207,.95), rgba(255,158,94,.6) 45%, transparent 60%), linear-gradient(180deg, #2a2a63 0%, #8b4a86 38%, #d85f56 68%, #f4a85f 100%); }
:root[data-daypart="evening"]   .au-hero__sky { --sky: radial-gradient(66px 66px at 80% 24%, rgba(242,246,255,.95), rgba(201,214,240,.5) 45%, transparent 58%), linear-gradient(180deg, #0a1230 0%, #142a56 55%, #2a4a7a 100%); }
:root[data-daypart="latenight"] .au-hero__sky { --sky: radial-gradient(56px 56px at 82% 22%, rgba(238,243,255,.95), rgba(185,200,230,.45) 42%, transparent 55%), linear-gradient(180deg, #050914 0%, #0a1430 60%, #111e40 100%); }

/* ---- Tia nắng dịu (clear/partly + ban ngày) ---- */
.au-hero[data-isday="1"] .au-hero__sky::before,
.au-loc-hero[data-isday="1"] .au-hero__sky::before {
  content: ""; position: absolute; inset: 0; pointer-events: none; opacity: .5;
  background: conic-gradient(from 210deg at 76% 30%, transparent 0deg, rgba(255,244,200,.16) 8deg, transparent 16deg, rgba(255,244,200,.12) 26deg, transparent 34deg, rgba(255,244,200,.14) 46deg, transparent 56deg);
  mix-blend-mode: screen; animation: au-rays 40s linear infinite; transform-origin: 76% 30%;
}
@keyframes au-rays { to { transform: rotate(360deg); } }
/* Ban đêm không có tia nắng */
:root[data-daypart="evening"] .au-hero__sky::before,
:root[data-daypart="latenight"] .au-hero__sky::before { display: none; }

/* ============================================================
   Nút chuyển Sáng / Tối
   ============================================================ */
.au-theme-toggle {
  flex: none; display: grid; place-items: center; width: 40px; height: 40px; border-radius: 12px;
  background: var(--au-glass-bg); border: 1px solid var(--au-glass-brd); color: var(--au-text-soft);
  cursor: pointer; transition: color .2s, border-color .2s, background .2s, transform .2s;
}
.au-theme-toggle:hover { color: var(--au-text); border-color: var(--au-glass-brd-2); transform: rotate(12deg); }
.au-theme-toggle svg { grid-area: 1 / 1; transition: opacity .25s, transform .35s; }
.au-theme-toggle__sun { color: #f5b944; }
/* Dark theme → hiện mặt trời (bấm để sang sáng); Light → hiện trăng. */
:root[data-theme="dark"]  .au-theme-toggle__moon { opacity: 0; transform: rotate(-90deg) scale(.5); }
:root[data-theme="dark"]  .au-theme-toggle__sun  { opacity: 1; transform: none; }
:root[data-theme="light"] .au-theme-toggle__sun  { opacity: 0; transform: rotate(90deg) scale(.5); }
:root[data-theme="light"] .au-theme-toggle__moon { opacity: 1; transform: none; color: #4a5578; }

@media (prefers-reduced-motion: reduce) {
  .au-hero__sky, .au-hero__sky::before { animation: none !important; transition: none; }
}