/* Phase themes: sky panel, logo-gold chrome (sampled from phase logo PNGs). */

:root {
  --ao-sky-dawn: url("/static/alyria/header-sky-dawn.jpg");
  --ao-sky-dawn-gradient:
    radial-gradient(ellipse 95% 55% at 50% 108%, rgba(255, 212, 152, 0.45) 0%, transparent 58%),
    linear-gradient(
      180deg,
      #4a6288 0%,
      #6880a8 14%,
      #98a0c8 30%,
      #c8a8b8 46%,
      #e8b898 62%,
      #f0dcc0 78%,
      #faf4ea 92%,
      #fffef9 100%
    );
  --ao-sky-dusk: url("/static/alyria/header-sky-dusk.jpg");
  --ao-sky-night: url("/static/alyria/header-sky-night.jpg");
  --ao-phase-gold: var(--ao-gold);
  --ao-phase-gold-light: var(--ao-gold-light);
  --ao-phase-gold-dark: var(--ao-gold-dark);
  --ao-phase-gold-glow: rgba(212, 173, 84, 0.55);
  --ao-phase-gold-soft: rgba(212, 173, 84, 0.22);
  --ao-phase-gold-muted: rgba(212, 173, 84, 0.45);
}

/* --- Per-phase logo gold (RGB sampled from logo exports) --- */

.ao-site-header.ao-time-phase-day,
.ao-header-ambient.ao-time-phase-day {
  --ao-phase-gold: #d4ad54;
  --ao-phase-gold-light: #d8ba76;
  --ao-phase-gold-dark: #d0a649;
  --ao-phase-gold-glow: rgba(212, 173, 84, 0.55);
  --ao-phase-gold-soft: rgba(212, 173, 84, 0.24);
  --ao-phase-gold-muted: rgba(208, 166, 73, 0.5);
}

.ao-site-header.ao-time-phase-dawn,
.ao-header-ambient.ao-time-phase-dawn {
  --ao-phase-gold: #d4ad54;
  --ao-phase-gold-light: #e0bc68;
  --ao-phase-gold-dark: #c09840;
  --ao-phase-gold-glow: rgba(212, 173, 84, 0.52);
  --ao-phase-gold-soft: rgba(224, 188, 104, 0.2);
  --ao-phase-gold-muted: rgba(192, 152, 64, 0.42);
}

.ao-site-header.ao-time-phase-dusk,
.ao-header-ambient.ao-time-phase-dusk {
  --ao-phase-gold: #c3a057;
  --ao-phase-gold-light: #dab25d;
  --ao-phase-gold-dark: #967d4d;
  --ao-phase-gold-glow: rgba(195, 160, 87, 0.55);
  --ao-phase-gold-soft: rgba(218, 178, 93, 0.24);
  --ao-phase-gold-muted: rgba(150, 125, 77, 0.45);
}

.ao-site-header.ao-time-phase-night,
.ao-header-ambient.ao-time-phase-night {
  --ao-phase-gold: #b89140;
  --ao-phase-gold-light: #cd9d3d;
  --ao-phase-gold-dark: #8c7648;
  --ao-phase-gold-glow: rgba(205, 157, 61, 0.48);
  --ao-phase-gold-soft: rgba(184, 145, 64, 0.28);
  --ao-phase-gold-muted: rgba(140, 118, 72, 0.55);
}

/* Phase tokens on preview frames + body (ticker sits outside .ao-site-header). */

.ao-body.ao-time-phase-day,
.ao-header-phase-frame[data-time-phase="day"] {
  --ao-phase-gold: #d4ad54;
  --ao-phase-gold-light: #d8ba76;
  --ao-phase-gold-dark: #d0a649;
  --ao-phase-gold-muted: rgba(208, 166, 73, 0.5);
}

.ao-body.ao-time-phase-dawn,
.ao-header-phase-frame[data-time-phase="dawn"] {
  --ao-phase-gold: #d4ad54;
  --ao-phase-gold-light: #e0bc68;
  --ao-phase-gold-dark: #c09840;
  --ao-phase-gold-muted: rgba(192, 152, 64, 0.42);
}

.ao-body.ao-time-phase-dusk,
.ao-header-phase-frame[data-time-phase="dusk"] {
  --ao-phase-gold: #c3a057;
  --ao-phase-gold-light: #dab25d;
  --ao-phase-gold-dark: #967d4d;
  --ao-phase-gold-muted: rgba(150, 125, 77, 0.45);
}

.ao-body.ao-time-phase-night,
.ao-header-phase-frame[data-time-phase="night"] {
  --ao-phase-gold: #b89140;
  --ao-phase-gold-light: #cd9d3d;
  --ao-phase-gold-dark: #8c7648;
  --ao-phase-gold-muted: rgba(140, 118, 72, 0.55);
}

.ao-header-ambient .ao-logo-row,
.ao-site-header .ao-logo-row {
  position: relative;
  overflow: hidden;
}

.ao-header-ambient .ao-logo-row::before,
.ao-site-header .ao-logo-row::before,
.ao-header-ambient .ao-logo-row::after,
.ao-site-header .ao-logo-row::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background-repeat: no-repeat;
  opacity: 0;
}

.ao-header-ambient .ao-logo-row .ao-logo-stage,
.ao-site-header .ao-logo-row .ao-logo-stage,
.ao-header-ambient .ao-logo-row .ao-menu-btn,
.ao-site-header .ao-logo-row .ao-menu-btn {
  position: relative;
  z-index: 1;
}

/* --- Identity sky panel --- */

.ao-site-header.ao-time-phase-dawn .ao-header-identity,
.ao-header-ambient.ao-time-phase-dawn .ao-site-header .ao-header-identity {
  background:
    var(--ao-sky-dawn-gradient),
    var(--ao-sky-dawn) center top / cover no-repeat;
  background-color: #6880a8;
}

.ao-site-header.ao-time-phase-dawn .ao-header-identity::after,
.ao-header-ambient.ao-time-phase-dawn .ao-site-header .ao-header-identity::after {
  content: none;
}

.ao-site-header.ao-time-phase-dawn .ao-header-identity .ao-logo-row,
.ao-site-header.ao-time-phase-dawn .ao-header-identity .ao-icon-nav {
  position: relative;
  z-index: 1;
}

.ao-site-header.ao-time-phase-dusk:not(.ao-twilight-dusk--deep):not([class*="ao-dusk-bg--"]) .ao-header-identity,
.ao-header-ambient.ao-time-phase-dusk:not(.ao-twilight-dusk--deep):not([class*="ao-dusk-bg--"]) .ao-site-header .ao-header-identity {
  background: var(--ao-sky-dusk) center top / cover no-repeat;
}

.ao-site-header.ao-time-phase-night .ao-header-identity,
.ao-header-ambient.ao-time-phase-night .ao-site-header .ao-header-identity {
  background: var(--ao-sky-night) center top / cover no-repeat;
}

.ao-site-header[class*="ao-time-phase-"] .ao-header-identity {
  border-bottom-color: var(--ao-phase-gold-muted);
}

.ao-site-header.ao-time-phase-dawn .ao-header-identity .ao-logo-row,
.ao-site-header.ao-time-phase-dusk .ao-header-identity .ao-logo-row,
.ao-site-header.ao-time-phase-night .ao-header-identity .ao-logo-row,
.ao-site-header.ao-time-phase-dawn .ao-header-identity .ao-icon-nav,
.ao-site-header.ao-time-phase-dusk .ao-header-identity .ao-icon-nav,
.ao-site-header.ao-time-phase-night .ao-header-identity .ao-icon-nav {
  background: transparent;
  background-image: none;
}

/* --- Day logo-row: soft gold haze --- */

.ao-header-ambient.ao-time-phase-day .ao-logo-row::before,
.ao-site-header.ao-time-phase-day .ao-logo-row::before {
  opacity: 1;
  background:
    radial-gradient(ellipse 75% 110% at 50% 0%, var(--ao-phase-gold-soft) 0%, transparent 72%),
    radial-gradient(circle at 50% 8%, rgba(255, 255, 255, 0.35) 0%, transparent 42%);
}

.ao-header-ambient.ao-time-phase-day .ao-logo-row::after,
.ao-site-header.ao-time-phase-day .ao-logo-row::after {
  opacity: 1;
  background: linear-gradient(180deg, var(--ao-phase-gold-soft) 0%, transparent 45%);
}

/* --- Dawn logo-row: same soft gold haze as day (sky gradient carries dawn colour) --- */

.ao-header-ambient.ao-time-phase-dawn .ao-logo-row::before,
.ao-site-header.ao-time-phase-dawn .ao-logo-row::before {
  opacity: 1;
  background:
    radial-gradient(ellipse 75% 110% at 50% 0%, var(--ao-phase-gold-soft) 0%, transparent 72%),
    radial-gradient(circle at 50% 8%, rgba(255, 255, 255, 0.28) 0%, transparent 42%);
}

.ao-header-ambient.ao-time-phase-dawn .ao-logo-row::after,
.ao-site-header.ao-time-phase-dawn .ao-logo-row::after {
  opacity: 1;
  background: linear-gradient(180deg, var(--ao-phase-gold-soft) 0%, transparent 45%);
}

/* --- Day ambient: soft gold sky wash --- */

.ao-header-ambient.ao-time-phase-day::before {
  inset: 0 0 40%;
  background: radial-gradient(ellipse 90% 80% at 50% -20%, var(--ao-phase-gold-soft) 0%, transparent 70%);
}

/* --- Dawn: no extra ambient wash (sky panel carries the phase) --- */

.ao-header-ambient.ao-time-phase-dusk:not(.ao-twilight-dawn--cool):not(.ao-twilight-dusk--deep):not([class*="ao-dusk-bg--"])::before {
  inset: 0;
  background:
    radial-gradient(ellipse 55% 45% at 50% 0%, var(--ao-phase-gold-soft) 0%, transparent 68%),
    linear-gradient(180deg, transparent 0%, var(--ao-phase-gold-muted) 100%);
}

.ao-header-ambient.ao-time-phase-night::before {
  inset: 0;
  background:
    radial-gradient(ellipse 55% 40% at 50% 0%, rgba(20, 40, 72, 0.35) 0%, transparent 72%),
    radial-gradient(ellipse 120% 80% at 50% 120%, rgba(8, 16, 32, 0.55) 0%, transparent 55%);
}

.ao-header-ambient.ao-time-phase-night.ao-moon-full::before {
  inset: 0;
  background:
    radial-gradient(22px 22px at 88% 12%, var(--ao-phase-gold-glow) 0%, transparent 72%),
    radial-gradient(ellipse 55% 40% at 50% 0%, rgba(20, 40, 72, 0.35) 0%, transparent 72%),
    radial-gradient(ellipse 120% 80% at 50% 120%, rgba(8, 16, 32, 0.55) 0%, transparent 55%);
}

/* --- Icon nav: logo-gold borders and glow (all phases) --- */

.ao-site-header[class*="ao-time-phase-"] .ao-icon-board {
  border-color: var(--ao-phase-gold-dark);
  box-shadow: 0 1px 3px var(--ao-phase-gold-soft);
}

.ao-site-header[class*="ao-time-phase-"] .ao-icon-nav-link:hover .ao-icon-board,
.ao-site-header[class*="ao-time-phase-"] .ao-icon-nav-link:focus-visible .ao-icon-board,
.ao-site-header[class*="ao-time-phase-"] .ao-icon-nav-link.active .ao-icon-board {
  border-color: var(--ao-phase-gold);
}

.ao-site-header[class*="ao-time-phase-"] .ao-icon-nav-link:hover,
.ao-site-header[class*="ao-time-phase-"] .ao-icon-nav-link:focus-visible {
  border-color: var(--ao-phase-gold-muted);
}

.ao-site-header[class*="ao-time-phase-"] .ao-icon-nav-link.active {
  border-color: var(--ao-phase-gold);
  box-shadow: inset 0 0 0 1px var(--ao-phase-gold-soft);
}

.ao-site-header[class*="ao-time-phase-"] .ao-icon-nav-link:hover .ao-icon-nav-label,
.ao-site-header[class*="ao-time-phase-"] .ao-icon-nav-link.active .ao-icon-nav-label {
  color: var(--ao-phase-gold-dark);
}

.ao-site-header[class*="ao-time-phase-"] .ao-icon-nav-link::before {
  background: radial-gradient(
    circle,
    var(--ao-phase-gold-glow) 0%,
    var(--ao-phase-gold-soft) 42%,
    transparent 72%
  );
}

/* Dawn: same cream tiles as day */
.ao-site-header.ao-time-phase-dawn .ao-icon-board,
.ao-site-header.ao-time-phase-dusk .ao-icon-board {
  background-color: rgba(255, 253, 248, 0.96);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.65);
}

.ao-site-header.ao-time-phase-dawn .ao-icon-nav-link.active,
.ao-site-header.ao-time-phase-dusk .ao-icon-nav-link.active {
  background: linear-gradient(180deg, rgba(255, 252, 245, 0.98) 0%, var(--ao-phase-gold-soft) 100%);
}

/* Night: navy tiles, logo-gold rim */
.ao-site-header.ao-time-phase-night .ao-icon-board {
  background-color: rgba(12, 26, 48, 0.78);
  border-color: var(--ao-phase-gold);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.06);
}

.ao-site-header.ao-time-phase-night .ao-icon-nav-link:hover,
.ao-site-header.ao-time-phase-night .ao-icon-nav-link:focus-visible,
.ao-site-header.ao-time-phase-night .ao-icon-nav-link.active {
  border-color: var(--ao-phase-gold-light);
}

.ao-site-header.ao-time-phase-night .ao-icon-nav-link:hover .ao-icon-board,
.ao-site-header.ao-time-phase-night .ao-icon-nav-link:focus-visible .ao-icon-board,
.ao-site-header.ao-time-phase-night .ao-icon-nav-link.active .ao-icon-board {
  background-color: rgba(18, 36, 64, 0.92);
  border-color: var(--ao-phase-gold-light);
}

.ao-site-header.ao-time-phase-night .ao-icon-nav-link:hover .ao-icon-nav-label,
.ao-site-header.ao-time-phase-night .ao-icon-nav-link.active .ao-icon-nav-label {
  color: var(--ao-phase-gold-light);
}

.ao-site-header.ao-time-phase-night .ao-icon-nav-link.active .ao-icon-nav-label {
  color: var(--ao-phase-gold-light);
  font-weight: 800;
}

/* World strip + separators */
.ao-site-header[class*="ao-time-phase-"] .ao-world-strip {
  border-bottom-color: var(--ao-phase-gold-dark);
}

.ao-site-header[class*="ao-time-phase-"] .ao-world-strip-sep,
.ao-site-header[class*="ao-time-phase-"] .ao-moon-phases-sep {
  background: linear-gradient(
    180deg,
    transparent,
    var(--ao-phase-gold-muted) 20%,
    var(--ao-phase-gold-muted) 80%,
    transparent
  );
}

.ao-site-header.ao-time-phase-night .ao-world-strip {
  border-bottom-color: var(--ao-phase-gold-muted);
}

.ao-site-header.ao-time-phase-night .ao-moon-phase-link:hover .ao-moon-phase-icon,
.ao-site-header.ao-time-phase-night .ao-moon-phase-link:focus-visible .ao-moon-phase-icon {
  border-color: var(--ao-phase-gold-light);
}

.ao-site-header.ao-time-phase-night .ao-moon-phase-icon {
  border-color: var(--ao-phase-gold-dark);
}

.ao-header-ambient.ao-time-phase-night .ao-gossip-highlights-root {
  border-bottom-color: var(--ao-phase-gold-muted);
}

.ao-header-ambient[class*="ao-time-phase-"] .ao-gossip-highlights {
  border-top-color: var(--ao-phase-gold-light);
  border-bottom-color: var(--ao-phase-gold-dark);
}

.ao-header-ambient.ao-time-phase-night .ao-gossip-highlights-root {
  border-bottom-color: var(--ao-phase-gold-muted);
}

.ao-header-ambient.ao-time-phase-night .ao-gossip-highlights-sep {
  color: var(--ao-phase-gold-muted);
}

.ao-body.ao-time-phase-night .ao-ticker,
.ao-header-phase-frame[data-time-phase="night"] .ao-ticker {
  border-bottom-color: var(--ao-phase-gold-muted);
}

.ao-body.ao-time-phase-night .ao-ticker-toggle,
.ao-header-phase-frame[data-time-phase="night"] .ao-ticker-toggle {
  border-right-color: var(--ao-phase-gold-muted);
}

.ao-header-phase-frame[data-time-phase="night"] {
  border-color: var(--ao-phase-gold-muted);
}