/* ============================================================
   NOOR Season · the two skins
   ------------------------------------------------------------
   Nothing in this file does anything until noor-ramadan.js puts
   one of its classes on the html element, and it only does that
   inside one of the five waking phases of the year. Every rule
   below is scoped to `html.noor-season`, `html.noor-ramadan`,
   `html.noor-eid` or `html.noor-phase-...`, so on an ordinary
   day in August this stylesheet is inert and the page is the
   page it would be with this file deleted.

   Three levels, deliberately:

     html.noor-season        a bar is on the page, nothing else
                             changes. This is all that approach
                             and the ten days of Dhul Hijjah get.
     html.noor-ramadan       the Ramadan skin. A season, not a
                             costume: the night goes deeper, the
                             gold goes warmer, a crescent and a
                             row of lanterns appear at the edges.
     html.noor-eid           the Eid skin. Brighter and openly
                             celebratory: the night lifts into a
                             plum and mulberry dawn, the gold
                             turns to champagne, and a small
                             burst of rays takes the crescent's
                             place. The two are never mistaken
                             for one another.

   Body text is never touched, contrast is never lowered, and
   every motion sits behind prefers-reduced-motion.
   ============================================================ */

/* ============================================================
   the season bar, common to all five phases
   Slim, in the normal flow directly under the site header, so it
   can never cover a single line of anything.
   ============================================================ */
html.noor-season {
  --nrb-h: 2.35rem;
  --nrb-ink: #FFFEF7;
  --nrb-hi: #F7DB86;
  --nrb-edge: rgba(247, 219, 134, .3);
}

html.noor-season .nrb {
  position: relative;
  z-index: 29;
  background: linear-gradient(100deg, #0A0812 0%, #141C33 46%, #1C2647 100%);
  color: var(--nrb-ink);
  border-bottom: 1px solid var(--nrb-edge);
  font-family: Inter, system-ui, sans-serif;
  box-shadow: 0 1px 14px rgba(11, 9, 19, .16);
}
html.noor-season .nrb-in {
  max-width: 72rem;
  margin: 0 auto;
  padding: .4rem 1rem;
  min-height: var(--nrb-h);
  display: flex;
  align-items: center;
  gap: .7rem;
  box-sizing: border-box;
}
@media (min-width: 640px) { html.noor-season .nrb-in { padding-inline-start: 1.5rem; padding-inline-end: 1.5rem; } }

html.noor-season .nrb-moon { flex: 0 0 auto; display: flex; align-items: center; }
html.noor-season .nrb-moon svg { width: 1.05rem; height: 1.05rem; display: block; }
html.noor-season .nrb-moon path { fill: var(--nrb-hi); }

html.noor-season .nrb-date {
  flex: 0 1 auto;
  display: flex;
  align-items: baseline;
  gap: .5rem;
  min-width: 0;
  overflow: hidden;
}
html.noor-season .nrb-date b {
  font-size: .76rem;
  font-weight: 800;
  letter-spacing: .01em;
  color: var(--nrb-hi);
  white-space: nowrap;
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
}
html.noor-season .nrb-day {
  font-size: .68rem;
  font-weight: 600;
  color: rgba(255, 254, 247, .58);
  white-space: nowrap;
}

html.noor-season .nrb-c {
  flex: 1 1 auto;
  min-width: 0;
  font-size: .7rem;
  color: rgba(255, 254, 247, .72);
  text-align:end;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  padding-inline-end: .15rem;
}
html.noor-season .nrb-c b {
  font-weight: 800;
  color: #FFFEF7;
  font-variant-numeric: tabular-nums;
}
html.noor-season .nrb-c a { color: var(--nrb-hi); }
html.noor-season .nrb-set {
  font: inherit;
  font-size: .68rem;
  font-weight: 700;
  color: var(--nrb-hi);
  background: rgba(247, 219, 134, .1);
  border: 1px solid rgba(247, 219, 134, .3);
  border-radius: 999px;
  padding: .2rem .6rem;
  cursor: pointer;
  white-space: nowrap;
}
html.noor-season .nrb-set:hover { background: rgba(247, 219, 134, .22); }

html.noor-season .nrb-link {
  flex: 0 0 auto;
  font-size: .68rem;
  font-weight: 800;
  letter-spacing: .04em;
  color: #0F0C1A;
  background: linear-gradient(135deg, #D9AE3A, #F7DB86);
  border-radius: 999px;
  padding: .26rem .7rem;
  text-decoration: none;
  white-space: nowrap;
  transition: transform .15s;
}
html.noor-season .nrb-link:hover { transform: translateY(-1px); }

html.noor-season .nrb-x {
  flex: 0 0 auto;
  font: inherit;
  font-size: .95rem;
  line-height: 1;
  width: 1.4rem;
  height: 1.4rem;
  border-radius: 999px;
  border: 0;
  background: transparent;
  color: rgba(255, 254, 247, .45);
  cursor: pointer;
  transition: color .18s, background .18s;
}
html.noor-season .nrb-x:hover { color: #FFFEF7; background: rgba(255, 254, 247, .1); }

html.noor-season .nrb-pv {
  flex: 0 0 auto;
  font-size: .55rem;
  font-weight: 800;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: rgba(255, 254, 247, .5);
  border: 1px solid rgba(255, 254, 247, .22);
  border-radius: 999px;
  padding: .12rem .42rem;
  white-space: nowrap;
}

/* the lantern rail: a thin row of hanging lights along the bottom edge */
html.noor-season .nrb::after {
  content: "";
  position: absolute;
  inset-inline-start: 0; inset-inline-end: 0; bottom: 0;
  height: 3px;
  background-image: radial-gradient(circle 1.6px at 50% 55%, rgba(247, 219, 134, .8), rgba(247, 219, 134, 0) 100%);
  background-size: 21px 3px;
  background-repeat: repeat-x;
  opacity: .55;
  pointer-events: none;
}

@media (max-width: 640px) {
  html.noor-season .nrb-day,
  html.noor-season .nrb-yr,
  html.noor-season .nrb-at { display: none; }
  html.noor-season .nrb-link .nrb-long { display: none; }
  html.noor-season .nrb-in { gap: .5rem; }
}
@media (max-width: 400px) {
  html.noor-season .nrb-pv { display: none; }
}
@media print { html.noor-season .nrb { display: none; } }

/* ---- approach: the calmest of the five. A bar and nothing more. --- */
html.noor-phase-approach .nrb {
  background: linear-gradient(100deg, #0C0A14 0%, #16203A 52%, #1E2C4F 100%);
  border-bottom-color: rgba(247, 219, 134, .22);
}
html.noor-phase-approach .nrb::after { opacity: .3; }

/* ---- the ten days of Dhul Hijjah: quiet, and its own colour ------- */
html.noor-phase-dhul-hijjah {
  --nrb-hi: #D9E6C8;
  --nrb-edge: rgba(217, 230, 200, .26);
}
html.noor-phase-dhul-hijjah .nrb {
  background: linear-gradient(100deg, #0B120E 0%, #16281D 50%, #1F3A2A 100%);
}
html.noor-phase-dhul-hijjah .nrb::after {
  background-image: radial-gradient(circle 1.6px at 50% 55%, rgba(217, 230, 200, .7), rgba(217, 230, 200, 0) 100%);
  opacity: .3;
}
html.noor-phase-dhul-hijjah .nrb-link {
  color: #10190F;
  background: linear-gradient(135deg, #A9C48C, #D9E6C8);
}

/* ============================================================
   THE RAMADAN SKIN
   the night goes deeper and a crescent rises
   ============================================================ */
html.noor-ramadan {
  --gold: #C69A22;          /* the same weight of gold, a warmer hue */
  --gold-hi: #F7DB86;       /* the highlight, used on dark ground only */
  --night: #0B0913;
}
html.noor-ramadan body { background: #FFFDF4; }

html.noor-ramadan .rhero {
  background: linear-gradient(178deg, #08060F 0%, #121a33 52%, #1b2549 100%);
}
/* faint stars, well behind every word */
html.noor-ramadan .rhero::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background-image:
    radial-gradient(circle 1px at 12% 22%, rgba(255, 254, 247, .55), transparent 100%),
    radial-gradient(circle 1px at 27% 64%, rgba(255, 254, 247, .32), transparent 100%),
    radial-gradient(circle 1.4px at 46% 16%, rgba(247, 219, 134, .5), transparent 100%),
    radial-gradient(circle 1px at 68% 48%, rgba(255, 254, 247, .38), transparent 100%),
    radial-gradient(circle 1px at 82% 26%, rgba(255, 254, 247, .5), transparent 100%),
    radial-gradient(circle 1.2px at 91% 70%, rgba(247, 219, 134, .38), transparent 100%),
    radial-gradient(circle 1px at 57% 82%, rgba(255, 254, 247, .28), transparent 100%);
}
/* the crescent: a gold disc with a circle cut out of it */
html.noor-ramadan .rhero::after {
  content: "";
  position: absolute;
  top: 1.5rem;
  inset-inline-end: 1.6rem;
  width: 5.2rem;
  height: 5.2rem;
  z-index: 0;
  pointer-events: none;
  border-radius: 50%;
  background: radial-gradient(circle at 40% 40%, rgba(247, 219, 134, .95), rgba(214, 168, 58, .72));
  -webkit-mask-image: radial-gradient(circle 2.1rem at 70% 30%, transparent 98%, #000 99%);
  mask-image: radial-gradient(circle 2.1rem at 70% 30%, transparent 98%, #000 99%);
  opacity: .3;
  filter: drop-shadow(0 0 18px rgba(247, 219, 134, .35));
}
@media (max-width: 640px) {
  html.noor-ramadan .rhero::after {
    width: 3.6rem; height: 3.6rem; top: .9rem; inset-inline-end: .9rem; opacity: .24;
    -webkit-mask-image: radial-gradient(circle 1.45rem at 70% 30%, transparent 98%, #000 99%);
    mask-image: radial-gradient(circle 1.45rem at 70% 30%, transparent 98%, #000 99%);
  }
}
/* the front hero is a painted scene already: only the night deepens,
   and only through an inset shadow, which cannot cover a child. */
html.noor-ramadan #hero { box-shadow: inset 0 0 190px 54px rgba(6, 4, 14, .5); }

/* the header keeps a gold hairline */
html.noor-ramadan #site-header { border-bottom-color: rgba(198, 154, 34, .3); }

/* the footer gets one crescent and a warmer rule */
html.noor-ramadan .rfoot { border-top-color: rgba(198, 154, 34, .28); position: relative; }
html.noor-ramadan .rfoot::before {
  content: "";
  position: absolute;
  top: -.62rem;
  inset-inline-start: 50%;
  width: 1.15rem;
  height: 1.15rem;
  margin-inline-start:-.575rem;
  border-radius: 50%;
  background: #C69A22;
  -webkit-mask-image: radial-gradient(circle .46rem at 68% 30%, transparent 98%, #000 99%);
  mask-image: radial-gradient(circle .46rem at 68% 30%, transparent 98%, #000 99%);
  opacity: .55;
}

/* gold that carries the season, at the same darkness */
html.noor-ramadan .gpill { background: linear-gradient(135deg, #C08F1E, #EFCC6E); }
html.noor-ramadan .pill { background: rgba(198, 154, 34, .14); border-color: rgba(198, 154, 34, .34); }

/* ============================================================
   THE EID SKIN
   the night lifts. Brighter, celebratory, and unmistakably not
   the month it follows: plum and mulberry where Ramadan was
   navy, champagne where Ramadan was gold.
   ============================================================ */
html.noor-eid {
  --gold: #B8791F;          /* an amber gold, darker than it looks, for light ground */
  --gold-hi: #FFE7B0;       /* champagne, used on dark ground only */
  --night: #1A0E22;
  --eid-rose: #F0B7A8;      /* the second accent, ornament only, never text */
  --nrb-hi: #FFE7B0;
  --nrb-edge: rgba(255, 231, 176, .42);
}
html.noor-eid body { background: #FFFCF2; }

/* the bar puts on its best clothes */
html.noor-eid .nrb {
  background: linear-gradient(100deg, #2A1330 0%, #5A2450 46%, #8A3A52 100%);
  box-shadow: 0 1px 16px rgba(42, 19, 48, .2);
}
html.noor-eid .nrb-date b { color: #FFE7B0; }
html.noor-eid .nrb-c { color: rgba(255, 254, 247, .84); }
html.noor-eid .nrb-link {
  color: #2A1330;
  background: linear-gradient(135deg, #FFC978, #FFE7B0 55%, #F0B7A8);
}
html.noor-eid .nrb::after {
  background-image: radial-gradient(circle 1.7px at 50% 55%, rgba(255, 231, 176, .95), rgba(255, 231, 176, 0) 100%);
  opacity: .9;
}

/* the room heroes go from midnight to a warm dawn */
html.noor-eid .rhero {
  background: linear-gradient(178deg, #1A0E22 0%, #43204A 48%, #7A3357 100%);
}
/* a scatter of small lights, well behind every word */
html.noor-eid .rhero::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background-image:
    radial-gradient(circle 1.6px at 14% 26%, rgba(255, 231, 176, .75), transparent 100%),
    radial-gradient(circle 1.2px at 31% 68%, rgba(240, 183, 168, .6), transparent 100%),
    radial-gradient(circle 1.8px at 49% 14%, rgba(255, 231, 176, .6), transparent 100%),
    radial-gradient(circle 1.2px at 66% 52%, rgba(255, 254, 247, .5), transparent 100%),
    radial-gradient(circle 1.5px at 84% 22%, rgba(255, 231, 176, .7), transparent 100%),
    radial-gradient(circle 1.3px at 93% 66%, rgba(240, 183, 168, .5), transparent 100%),
    radial-gradient(circle 1.1px at 58% 86%, rgba(255, 254, 247, .38), transparent 100%);
}
/* where Ramadan had a crescent, Eid has a small burst of rays */
html.noor-eid .rhero::after {
  content: "";
  position: absolute;
  top: 1.4rem;
  inset-inline-end: 1.5rem;
  width: 5.6rem;
  height: 5.6rem;
  z-index: 0;
  pointer-events: none;
  background:
    conic-gradient(from 0deg,
      rgba(255, 231, 176, .55) 0deg 6deg, transparent 6deg 30deg,
      rgba(255, 231, 176, .55) 30deg 36deg, transparent 36deg 60deg,
      rgba(255, 231, 176, .55) 60deg 66deg, transparent 66deg 90deg,
      rgba(255, 231, 176, .55) 90deg 96deg, transparent 96deg 120deg,
      rgba(255, 231, 176, .55) 120deg 126deg, transparent 126deg 150deg,
      rgba(255, 231, 176, .55) 150deg 156deg, transparent 156deg 180deg,
      rgba(255, 231, 176, .55) 180deg 186deg, transparent 186deg 210deg,
      rgba(255, 231, 176, .55) 210deg 216deg, transparent 216deg 240deg,
      rgba(255, 231, 176, .55) 240deg 246deg, transparent 246deg 270deg,
      rgba(255, 231, 176, .55) 270deg 276deg, transparent 276deg 300deg,
      rgba(255, 231, 176, .55) 300deg 306deg, transparent 306deg 330deg,
      rgba(255, 231, 176, .55) 330deg 336deg, transparent 336deg 360deg);
  -webkit-mask-image: radial-gradient(circle closest-side, #000 22%, rgba(0, 0, 0, .55) 55%, transparent 100%);
  mask-image: radial-gradient(circle closest-side, #000 22%, rgba(0, 0, 0, .55) 55%, transparent 100%);
  opacity: .34;
  filter: drop-shadow(0 0 16px rgba(255, 231, 176, .3));
}
@media (max-width: 640px) {
  html.noor-eid .rhero::after { width: 3.9rem; height: 3.9rem; top: .85rem; inset-inline-end: .85rem; opacity: .26; }
}
/* the painted front hero only warms; an inset shadow cannot cover a child */
html.noor-eid #hero { box-shadow: inset 0 0 190px 54px rgba(58, 22, 52, .34); }

html.noor-eid #site-header { border-bottom-color: rgba(184, 121, 31, .32); }

/* the footer keeps one small lamp instead of a crescent */
html.noor-eid .rfoot { border-top-color: rgba(184, 121, 31, .3); position: relative; }
html.noor-eid .rfoot::before {
  content: "";
  position: absolute;
  top: -.6rem;
  inset-inline-start: 50%;
  width: 1.1rem;
  height: 1.1rem;
  margin-inline-start:-.55rem;
  background: linear-gradient(160deg, #C98A2E, #F0B7A8);
  -webkit-mask-image: conic-gradient(from 45deg, #000 0deg 90deg, transparent 90deg 180deg, #000 180deg 270deg, transparent 270deg 360deg);
  mask-image: conic-gradient(from 45deg, #000 0deg 90deg, transparent 90deg 180deg, #000 180deg 270deg, transparent 270deg 360deg);
  border-radius: 40%;
  opacity: .62;
}

html.noor-eid .gpill { background: linear-gradient(135deg, #C98A2E, #F2CE7E); }
html.noor-eid .pill { background: rgba(184, 121, 31, .14); border-color: rgba(184, 121, 31, .36); }

/* ============================================================
   motion, and the promise to switch it off
   ============================================================ */
@media (prefers-reduced-motion: no-preference) {
  html.noor-season .nrb-moon svg { animation: nrb-moon 6.5s ease-in-out infinite; }
  @keyframes nrb-moon {
    0%, 100% { opacity: .78; transform: translateY(0); }
    50%      { opacity: 1;   transform: translateY(-1px); }
  }
  html.noor-season .nrb::after { animation: nrb-lanterns 7.5s ease-in-out infinite; }
  @keyframes nrb-lanterns {
    0%, 100% { opacity: .45; }
    50%      { opacity: .85; }
  }
  html.noor-ramadan .rhero::after { animation: nrb-crescent 9s ease-in-out infinite; }
  @keyframes nrb-crescent {
    0%, 100% { opacity: .22; }
    50%      { opacity: .34; }
  }
  html.noor-eid .rhero::after { animation: nrb-rays 14s linear infinite; }
  @keyframes nrb-rays {
    0%   { transform: rotate(0deg);   opacity: .26; }
    50%  { transform: rotate(180deg); opacity: .38; }
    100% { transform: rotate(360deg); opacity: .26; }
  }
  html.noor-eid .nrb-link { animation: nrb-eid 3.6s ease-in-out infinite; }
  @keyframes nrb-eid {
    0%, 100% { box-shadow: 0 0 0 0 rgba(255, 231, 176, 0); }
    50%      { box-shadow: 0 0 0 4px rgba(255, 231, 176, .2); }
  }
}