/* Dusk background options — subtle warm washes; logo zone stays cream (readable). */

/* Warm cream base shared by most dusk-bg variants. */
.ao-dusk-bg--cream.ao-site-header .ao-header-identity,
.ao-dusk-bg--cream.ao-header-ambient .ao-site-header .ao-header-identity,
.ao-dusk-bg--break.ao-site-header .ao-header-identity,
.ao-dusk-bg--break.ao-header-ambient .ao-site-header .ao-header-identity,
.ao-dusk-bg--warm-edge.ao-site-header .ao-header-identity,
.ao-dusk-bg--warm-edge.ao-header-ambient .ao-site-header .ao-header-identity,
.ao-dusk-bg--last-light.ao-site-header .ao-header-identity,
.ao-dusk-bg--last-light.ao-header-ambient .ao-site-header .ao-header-identity,
.ao-dusk-bg--cream .ao-header-identity,
.ao-dusk-bg--break .ao-header-identity,
.ao-dusk-bg--warm-edge .ao-header-identity,
.ao-dusk-bg--last-light .ao-header-identity {
  background: linear-gradient(180deg, #fffef9 0%, #faf4ec 100%);
  background-color: #faf4ea;
}

/* Horizon ember: cream logo zone; warm ember in identity foot; blue + stars above gossip. */
.ao-dusk-bg--horizon-ember.ao-site-header .ao-header-identity,
.ao-dusk-bg--horizon-ember.ao-header-ambient .ao-site-header .ao-header-identity,
.ao-dusk-bg--horizon-ember .ao-header-identity {
  background: linear-gradient(180deg, #fffef9 0%, #faf4ec 78%, #f5ebe0 100%);
  background-color: #faf4ea;
}

.ao-dusk-bg--horizon-ember .ao-site-header {
  position: relative;
}

.ao-dusk-bg--horizon-ember .ao-site-header::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: clamp(3.25rem, 11vw, 4.75rem);
  pointer-events: none;
  z-index: 0;
  background:
    radial-gradient(circle 3px at 90% 32%, #dce8ff 0%, rgba(168, 196, 240, 0.62) 45%, transparent 100%),
    radial-gradient(circle 2.5px at 97% 48%, #c8daf8 0%, rgba(140, 175, 230, 0.52) 50%, transparent 100%),
    linear-gradient(
      0deg,
      rgba(50, 78, 130, 0.4) 0%,
      rgba(80, 110, 165, 0.22) 52%,
      transparent 100%
    );
  animation: ao-stars-twinkle 9s ease-in-out infinite;
}

.ao-dusk-bg--horizon-ember .ao-world-strip {
  position: relative;
  z-index: 1;
  background: transparent;
  border-bottom-color: rgba(100, 130, 180, 0.35);
}

.ao-dusk-bg--soft-sky.ao-site-header .ao-header-identity,
.ao-dusk-bg--soft-sky.ao-header-ambient .ao-site-header .ao-header-identity,
.ao-twilight-dusk--deep:not([class*="ao-dusk-bg--"]).ao-site-header .ao-header-identity,
.ao-twilight-dusk--deep:not([class*="ao-dusk-bg--"]).ao-header-ambient .ao-site-header .ao-header-identity,
.ao-twilight-dusk--deep.ao-dusk-bg--break.ao-site-header .ao-header-identity,
.ao-twilight-dusk--deep.ao-dusk-bg--break.ao-header-ambient .ao-site-header .ao-header-identity,
.ao-twilight-dusk--deep.ao-dusk-bg--cream.ao-site-header .ao-header-identity,
.ao-twilight-dusk--deep.ao-dusk-bg--cream.ao-header-ambient .ao-site-header .ao-header-identity,
.ao-twilight-dusk--deep.ao-dusk-bg--warm-edge.ao-site-header .ao-header-identity,
.ao-twilight-dusk--deep.ao-dusk-bg--warm-edge.ao-header-ambient .ao-site-header .ao-header-identity,
.ao-twilight-dusk--deep.ao-dusk-bg--last-light.ao-site-header .ao-header-identity,
.ao-twilight-dusk--deep.ao-dusk-bg--last-light.ao-header-ambient .ao-site-header .ao-header-identity {
  background: linear-gradient(180deg, #fffef9 0%, #faf4ec 100%);
  background-color: #faf4ea;
}

/* 1 — Cream only: no extra dusk wash (control). */
.ao-dusk-bg--cream.ao-site-header .ao-header-identity::after,
.ao-dusk-bg--cream.ao-header-ambient .ao-site-header .ao-header-identity::after {
  content: none;
}

/* 2 — Dusk set: thin amber horizon band along the bottom. */
.ao-dusk-bg--break.ao-site-header .ao-header-identity::after,
.ao-dusk-bg--break.ao-header-ambient .ao-site-header .ao-header-identity::after,
.ao-twilight-dusk--deep.ao-dusk-bg--break.ao-site-header .ao-header-identity::after,
.ao-twilight-dusk--deep.ao-dusk-bg--break.ao-header-ambient .ao-site-header .ao-header-identity::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 0;
  background: linear-gradient(
    180deg,
    transparent 0%,
    transparent 68%,
    rgba(255, 196, 120, 0.22) 84%,
    rgba(240, 160, 80, 0.32) 94%,
    rgba(200, 120, 60, 0.22) 100%
  );
}

/* Legacy deep-only fallback (no dusk-bg class). */
.ao-twilight-dusk--deep:not([class*="ao-dusk-bg--"]).ao-site-header .ao-header-identity::after,
.ao-twilight-dusk--deep:not([class*="ao-dusk-bg--"]).ao-header-ambient .ao-site-header .ao-header-identity::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 0;
  background: linear-gradient(
    180deg,
    transparent 0%,
    transparent 68%,
    rgba(255, 196, 120, 0.22) 84%,
    rgba(240, 160, 80, 0.32) 94%,
    rgba(200, 120, 60, 0.22) 100%
  );
}

/* 3 — Warm edge: faint amber only on the far right; logo stays on cream. */
.ao-dusk-bg--warm-edge.ao-site-header .ao-header-identity::after,
.ao-dusk-bg--warm-edge.ao-header-ambient .ao-site-header .ao-header-identity::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 0;
  background: linear-gradient(
    270deg,
    rgba(220, 160, 80, 0.2) 0%,
    rgba(200, 140, 70, 0.08) 14%,
    transparent 28%
  );
}

/* 4 — Last light: soft sun fade from lower-right corner. */
.ao-dusk-bg--last-light.ao-site-header .ao-header-identity::after,
.ao-dusk-bg--last-light.ao-header-ambient .ao-site-header .ao-header-identity::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 0;
  background:
    radial-gradient(
      ellipse 55% 45% at 92% 92%,
      rgba(255, 180, 100, 0.32) 0%,
      rgba(240, 150, 70, 0.12) 42%,
      transparent 68%
    ),
    radial-gradient(
      ellipse 40% 35% at 100% 100%,
      rgba(200, 120, 60, 0.14) 0%,
      transparent 70%
    );
}

/* 5 — Horizon ember: warm identity foot; twilight blue + stars from just above gossip. */
.ao-dusk-bg--horizon-ember .ao-header-identity::before {
  content: none;
}

.ao-dusk-bg--horizon-ember .ao-header-identity::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 0;
  background: linear-gradient(
    180deg,
    transparent 0%,
    transparent 62%,
    rgba(255, 210, 160, 0.16) 84%,
    rgba(240, 160, 90, 0.22) 100%
  );
}

.ao-dusk-bg--horizon-ember .ao-header-identity .ao-logo-row,
.ao-dusk-bg--horizon-ember .ao-header-identity .ao-icon-nav {
  position: relative;
  z-index: 1;
}

/* 6 — Soft sky: lighter sunset tint at top (compare — may still compete with logo). */
.ao-dusk-bg--soft-sky.ao-site-header .ao-header-identity,
.ao-dusk-bg--soft-sky.ao-header-ambient .ao-site-header .ao-header-identity {
  background:
    linear-gradient(
      180deg,
      rgba(255, 180, 110, 0.2) 0%,
      rgba(240, 200, 170, 0.08) 28%,
      #faf4ea 52%,
      #faf4ec 100%
    );
  background-color: #f8ece0;
}

.ao-dusk-bg--soft-sky.ao-site-header .ao-header-identity::after,
.ao-dusk-bg--soft-sky.ao-header-ambient .ao-site-header .ao-header-identity::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 0;
  background: linear-gradient(
    270deg,
    rgba(220, 160, 80, 0.14) 0%,
    transparent 42%
  );
}

/* Ambient wrapper hints (very light — full stack, not the logo row). */
.ao-dusk-bg--break.ao-header-ambient::before,
.ao-twilight-dusk--deep:not(.ao-dusk-bg--horizon-ember).ao-header-ambient::before {
  inset: 0;
  background: linear-gradient(
    265deg,
    rgba(220, 160, 80, 0.08) 0%,
    transparent 35%
  ),
  linear-gradient(180deg, #faf4ea 0%, #f5e8d4 100%);
}

.ao-dusk-bg--warm-edge.ao-header-ambient::before {
  inset: 0;
  background: linear-gradient(
    270deg,
    rgba(220, 160, 80, 0.1) 0%,
    transparent 32%
  ),
  linear-gradient(180deg, #faf4ea 0%, #f5e8d4 100%);
}

.ao-dusk-bg--last-light.ao-header-ambient::before {
  inset: 0;
  background:
    radial-gradient(ellipse 70% 40% at 100% 100%, rgba(255, 180, 100, 0.1) 0%, transparent 55%),
    linear-gradient(180deg, #faf4ea 0%, #f5e8d4 100%);
}

.ao-dusk-bg--horizon-ember.ao-header-ambient::before {
  inset: 0;
  background: linear-gradient(180deg, #fffef9 0%, #f5e8d4 100%);
}

.ao-dusk-bg--horizon-ember .ao-gossip-highlights-root {
  position: relative;
  z-index: 1;
}

.ao-dusk-bg--horizon-ember.ao-header-ambient::after {
  content: none;
}

.ao-dusk-bg--cream.ao-header-ambient::before {
  inset: 0;
  background: linear-gradient(180deg, #fffef9 0%, #faf4ec 100%);
}

.ao-dusk-bg--soft-sky.ao-header-ambient::before {
  inset: 0;
  background:
    linear-gradient(180deg, rgba(255, 180, 110, 0.12) 0%, transparent 45%),
    linear-gradient(180deg, #f8ece0 0%, #f5e8d4 100%);
}

/* Right directional wash (production dusk — not horizon ember). */
.ao-header-ambient.ao-twilight-dusk--deep:not(.ao-dusk-bg--horizon-ember)::after,
.ao-header-dusk-bg-frame[data-phase="dusk"]:not([data-variant="horizon-ember"]) .ao-header-ambient::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 0;
  background: linear-gradient(
    270deg,
    rgba(204, 152, 72, 0.12) 0%,
    rgba(188, 136, 64, 0.05) 16%,
    transparent 40%
  );
}

.ao-header-ambient.ao-twilight-dusk--deep,
.ao-header-ambient[class*="ao-dusk-bg--"] {
  position: relative;
}