/* ============================================================================
   Exchanging Lore -- homepage hero day/night atmosphere system
   Loaded ONLY by index.html -- never sitewide. Supersedes the previous
   assets/css/hero-starfield.css (night-only, OS-dark-mode-gated); this file
   absorbs that content unchanged (same coordinates, same class names) and
   adds a companion daytime layer.

   DRIVEN BY THE VISITOR'S DEVICE (OS/browser) light-dark setting --
   `prefers-color-scheme` -- NOT a fixed clock schedule. This is a deliberate
   choice: the hero should match each visitor's own device preference, not
   apply one universal day/night schedule to everyone. `prefers-color-scheme`
   is a live media query -- if the visitor changes their OS theme while the
   tab is open, the hero updates immediately with zero JavaScript involved.
   assets/js/hero-atmosphere.js only ever sets the `[data-hero-theme]`
   attribute used below for two narrow, opt-in cases: a `?heroTheme=` dev
   query override for local testing, and a future manual toggle (none exists
   in the UI today). Absent either, no attribute is set and the media query
   below is the entire mechanism -- see "PRIMARY MECHANISM" further down.

   ARCHITECTURE NOTE -- why the hero has its OWN day/night color tokens below
   instead of reusing the sitewide --background/--foreground/--muted
   directly for the BACKGROUND layers specifically:
   .el-hero-atmosphere__day and .el-hero-atmosphere__night both exist in the
   DOM simultaneously and crossfade via opacity -- they are never swapped
   out. If both read the same live --background token, the currently-hidden
   layer's background would still change color as prefers-color-scheme
   changes, which is fine while it's fully transparent, but would show a
   momentary wrong-color flash on the layer that's mid-fade. So each layer
   gets its OWN fixed, always-correct background/star colors below (copied
   from the site's real light/dark tokens). Hero TEXT (headline, buttons,
   monogram) has no such constraint -- there's only ever one visible copy of
   it -- so it simply reads the sitewide --foreground/--muted/etc. directly,
   which already tracks the device setting correctly by default. Those
   sitewide tokens are only overridden locally (further down) for the
   `[data-hero-theme]` dev-override case, where they need to disagree with
   the real device setting for testing purposes.
   ============================================================================ */

#hero {
  isolation: isolate;

  /* ---- Night: identical values to the site's real dark-theme :root tokens
     (index.html), fixed here rather than following the live --background
     etc. tokens -- see the "why the hero has its own tokens" note above. */
  --el-hero-night-bg-start: #080808;
  --el-hero-night-bg-end: #11100f;
  --el-hero-night-bloom: rgb(169 121 62 / 0.12);
  --el-hero-night-star-small: rgb(240 235 227 / 0.55);
  --el-hero-night-star-medium: rgb(170 163 154 / 0.6);
  --el-hero-night-star-large: rgb(169 121 62 / 0.78);
  --el-hero-night-star-glow: rgb(169 121 62 / 0.55);

  /* ---- Day: identical values to the site's real light-theme :root tokens. */
  --el-hero-day-bg-start: #f7f1e6;
  --el-hero-day-bg-middle: #f7f1e6;
  --el-hero-day-bg-end: #efe4cf;
  --el-hero-day-bloom: rgb(169 121 62 / 0.05);
  --el-hero-day-bloom-soft: rgb(169 121 62 / 0.035);

  /* ---- Day pattern accent set -- a deliberate, restrained plum/lavender/
     periwinkle motif for this one decorative layer specifically (per the
     brand direction requested for this effect). Nothing in the sitewide
     palette is purple, so this stays scoped to the hero's day background
     only and is kept intentionally low-opacity (see .el-hero-atmosphere__day
     ::before below) so it reads as a faint watermark texture rather than a
     competing accent -- the warm gold --accent stays the site's one true
     brand color everywhere else, including the hero's text/buttons/monogram. */
  --el-hero-day-plum: rgb(88 61 100 / 0.55);
  --el-hero-day-purple: rgb(119 89 135 / 0.5);
  --el-hero-day-lavender: rgb(163 140 178 / 0.52);
  --el-hero-day-periwinkle: rgb(110 104 148 / 0.42);
  --el-hero-day-soft: rgb(196 178 206 / 0.55);
  --el-hero-day-dot: rgb(70 48 82 / 0.55);
  /* Barely-there second tone for the pattern's own repeating diagonal
     texture (a whisper of lavender against the warm-white base) -- see
     .el-hero-day-pattern below. */
  --el-hero-day-texture-alt: #f2ecf5;
}

/* ---- Dev-override-only text/surface tokens ---------------------------------
   By DEFAULT the hero's text/buttons/monogram simply inherit the sitewide
   --foreground/--background/--muted/etc. from :root, which already tracks
   the visitor's device preference correctly (see the architecture note
   above) -- no override needed for normal browsing. These two blocks exist
   ONLY so that a `[data-hero-theme]` dev override (?heroTheme=day|night, or
   a future manual toggle) can force the hero's text to match its forced
   background even when that disagrees with the real device setting --
   without this, testing `?heroTheme=night` on a light-mode device would
   show the dark starfield behind light-mode (dark) text, unreadable. */
[data-hero-theme='day'] #hero {
  --background: #f7f1e6;
  --background-rgb: 247 241 230;
  --background-alt: #efe4cf;
  --background-alt-rgb: 239 228 207;
  --foreground: #17140f;
  --foreground-rgb: 23 20 15;
  --muted: #6b6357;
  --muted-rgb: 107 99 87;
  --border: rgba(169, 121, 62, 0.28);
  --border-strong: rgba(169, 121, 62, 0.45);
  --on-accent: #17140f;
}
[data-hero-theme='night'] #hero {
  --background: #080808;
  --background-rgb: 8 8 8;
  --background-alt: #11100f;
  --background-alt-rgb: 17 16 15;
  --foreground: #f0ebe3;
  --foreground-rgb: 240 235 227;
  --muted: #aaa39a;
  --muted-rgb: 170 163 154;
  --border: rgba(201, 154, 84, 0.32);
  --border-strong: rgba(201, 154, 84, 0.5);
  --on-accent: #17140f;
}

/* ============================================================================
   SHARED WRAPPER
   ============================================================================ */

.el-hero-atmosphere {
  position: absolute;
  inset: 0;
  z-index: 1; /* above .hero-marble (z:0), below #hero-light / .hero-grain (z:1, later in DOM = on top), below hero content (z:10) */
  width: 100%;
  height: 100%;
  overflow: hidden;
  pointer-events: none;
  contain: layout paint style;
}

.el-hero-atmosphere__day,
.el-hero-atmosphere__night {
  position: absolute;
  inset: 0;
  overflow: hidden;
  /* Crossfade only kicks in on a state CHANGE (visitor flips their OS/
     browser theme while the tab is open, or a dev override is applied) --
     the very first paint has no prior computed value to transition from, so
     there is nothing to flash even though the transition is always "on". */
  transition: opacity 900ms cubic-bezier(0.22, 1, 0.36, 1);
}

/* ============================================================================
   DAY LAYER
   .el-hero-day-pattern is adapted from the "Uiverse.io by 1k24bytes" radial
   geometric background -- same structural idea (paired radial slices on the
   left/right edges, a wave-like ellipse, scattered center marks, and a
   repeating diagonal texture, all drifting diagonally together) but fully
   recolored onto the --el-hero-day-* tokens above. The original's neon pink
   (#ff00cc), cyan (#00ffcc), electric blue (#3300ff), and near-black
   (#1a1a1a/#242424) do not appear anywhere in this file. Re-dosed to a much
   lower resting opacity (0.11-0.26 vs. the source's fully-opaque colors) and
   slowed from the original's 15s to 45-75s so it reads as a calm, ambient
   texture behind the hero copy rather than an obviously-animated wallpaper.
   Selectors and the keyframe are fully renamed -- no .container, no `shift`.
   ============================================================================ */

.el-hero-atmosphere__day {
  background:
    radial-gradient(700px 420px at 82% 20%, var(--el-hero-day-bloom), transparent 55%),
    radial-gradient(600px 380px at 14% 82%, var(--el-hero-day-bloom-soft), transparent 50%),
    linear-gradient(180deg, var(--el-hero-day-bg-start) 0%, var(--el-hero-day-bg-middle) 72%, var(--el-hero-day-bg-end) 100%);
}

.el-hero-day-pattern {
  position: absolute;
  inset: 0;
  opacity: 0.22;
  will-change: background-position;
  backface-visibility: hidden;
  animation: elHeroDayPatternShift 45s linear infinite;

  background-image:
    /* Right-side radial slices */
    radial-gradient(circle at 100% 50%, var(--el-hero-day-plum) 0% 2%, var(--el-hero-day-lavender) 3% 5%, transparent 6%),
    /* Left-side radial slices */
    radial-gradient(circle at 0% 50%, var(--el-hero-day-purple) 0% 2%, var(--el-hero-day-periwinkle) 3% 5%, transparent 6%),
    /* Upper elliptical wave */
    radial-gradient(ellipse at 50% 0%, var(--el-hero-day-dot) 0% 3%, transparent 4%),
    /* Scattered center marks */
    radial-gradient(circle at 50% 50%, var(--el-hero-day-lavender) 0% 1%, var(--el-hero-day-plum) 2% 3%, var(--el-hero-day-periwinkle) 4% 5%, transparent 6%),
    /* Soft repeating diagonal texture -- two near-identical warm/lavender-
       ivory tones; this layer's own opacity above (0.11-0.26) is what keeps
       it a whisper rather than a visible stripe pattern. */
    repeating-linear-gradient(45deg, var(--el-hero-day-bg-start), var(--el-hero-day-bg-start) 10px, var(--el-hero-day-texture-alt) 10px, var(--el-hero-day-texture-alt) 20px);

  background-size:
    70px 70px,
    70px 70px,
    58px 58px,
    85px 85px,
    100% 100%;
}

/* Each layer's end position is exactly one of its own background-size tiles
   (70,70 / -70,-70 / 58,58 / 85,85), so the loop point is mathematically
   seamless -- no visible jump or reset. The texture layer (100% size) never
   moves; only the radial marks drift. */
@keyframes elHeroDayPatternShift {
  0% {
    background-position: 0 0, 0 0, 0 0, 0 0, 0 0;
  }
  100% {
    background-position: 70px 70px, -70px -70px, 58px 58px, 85px 85px, 0 0;
  }
}
/* Larger-tile variant swapped in on mobile (see the max-width: 767px block
   below) to match that breakpoint's own, more spread-out background-size --
   a shared keyframe with the desktop tile sizes would drift out of sync
   with a differently-sized grid. */
@keyframes elHeroDayPatternShiftMobile {
  0% {
    background-position: 0 0, 0 0, 0 0, 0 0, 0 0;
  }
  100% {
    background-position: 80px 80px, -80px -80px, 65px 65px, 95px 95px, 0 0;
  }
}

/* ---- Readability overlay -- the real hero is fully centered (not the
   supplied example's left-text/right-visual layout), so this uses a
   centered radial mask: opaque cream directly behind the copy column,
   letting the pattern read more clearly toward the hero's outer edges. */
.el-hero-atmosphere__day::after {
  content: '';
  position: absolute;
  inset: 0;
  background:
    radial-gradient(
      780px 620px at 50% 38%,
      rgb(247 241 230 / 0.94) 0%,
      rgb(247 241 230 / 0.86) 45%,
      rgb(247 241 230 / 0.55) 72%,
      rgb(247 241 230 / 0.22) 100%
    ),
    linear-gradient(
      180deg,
      rgb(255 255 255 / 0.4) 0%,
      transparent 16%,
      transparent 74%,
      rgb(239 228 207 / 0.92) 100%
    );
}

/* ============================================================================
   NIGHT LAYER
   Absorbed unchanged from assets/css/hero-starfield.css -- same three depth
   layers, same coordinate lists, same seamless translateY loop. Only the
   selector nesting (now inside .el-hero-atmosphere__night) and the keyframe
   name (elStarfieldScroll -> elHeroNightStarScroll, for naming symmetry with
   the day layer's own elHeroDayPatternShift) changed.
   ============================================================================ */

.el-hero-atmosphere__night {
  background:
    radial-gradient(900px 480px at 50% 0%, var(--el-hero-night-bloom), transparent 65%),
    linear-gradient(180deg, var(--el-hero-night-bg-start) 0%, var(--el-hero-night-bg-start) 82%, var(--el-hero-night-bg-end) 100%);
}

.el-hero-starfield__layer {
  position: absolute;
  top: 0;
  left: 0;
  background: transparent;
  will-change: transform;
  transform: translate3d(0, 0, 0);
  backface-visibility: hidden;
}

/* Seamless vertical loop: the pseudo-element repeats the SAME box-shadow
   list (via `inherit`, not a second copy of the coordinates) 2000px below
   the layer's own dots, so as the layer scrolls up by exactly 2000px the
   duplicate is already in position and the loop point is invisible. */
.el-hero-starfield__layer::after {
  content: '';
  position: absolute;
  top: 2000px;
  left: 0;
  width: inherit;
  height: inherit;
  background: transparent;
  box-shadow: inherit;
}

@keyframes elHeroNightStarScroll {
  from { transform: translate3d(0, 0, 0); }
  to { transform: translate3d(0, -2000px, 0); }
}

/* ---- Small layer (1px dots) ------------------------------------------------
   220 dots across a 1920x2000px field. Fastest layer = nearest depth plane. */
.el-hero-starfield__layer--small {
  width: 1px;
  height: 1px;
  color: var(--el-hero-night-star-small);
  animation: elHeroNightStarScroll 70s linear infinite;
  box-shadow:
    271px 534px currentColor, 213px 665px currentColor, 1261px 1951px currentColor, 1148px 1706px currentColor,
    1300px 700px currentColor, 299px 190px currentColor, 1215px 1005px currentColor, 1626px 1358px currentColor,
    1079px 914px currentColor, 1501px 1945px currentColor, 1013px 1158px currentColor, 534px 1370px currentColor,
    984px 133px currentColor, 906px 1595px currentColor, 965px 1177px currentColor, 969px 1602px currentColor,
    1581px 856px currentColor, 1456px 140px currentColor, 969px 820px currentColor, 139px 500px currentColor,
    590px 1334px currentColor, 21px 1981px currentColor, 703px 1208px currentColor, 1823px 1263px currentColor,
    1841px 327px currentColor, 1011px 824px currentColor, 955px 779px currentColor, 1760px 461px currentColor,
    1703px 681px currentColor, 232px 454px currentColor, 754px 883px currentColor, 6px 991px currentColor,
    272px 535px currentColor, 246px 613px currentColor, 717px 1707px currentColor, 809px 1625px currentColor,
    203px 536px currentColor, 637px 430px currentColor, 1672px 1571px currentColor, 1730px 663px currentColor,
    1221px 1857px currentColor, 1326px 793px currentColor, 1600px 1512px currentColor, 1890px 1036px currentColor,
    1834px 101px currentColor, 1189px 1443px currentColor, 250px 1758px currentColor, 1443px 301px currentColor,
    1235px 1995px currentColor, 1012px 1877px currentColor, 418px 281px currentColor, 337px 123px currentColor,
    486px 808px currentColor, 1514px 208px currentColor, 354px 617px currentColor, 740px 572px currentColor,
    419px 1434px currentColor, 168px 1669px currentColor, 1079px 194px currentColor, 48px 1217px currentColor,
    1468px 819px currentColor, 1156px 1368px currentColor, 1893px 201px currentColor, 1392px 431px currentColor,
    844px 343px currentColor, 1014px 835px currentColor, 730px 299px currentColor, 728px 537px currentColor,
    746px 1407px currentColor, 1262px 378px currentColor, 163px 1581px currentColor, 126px 1550px currentColor,
    1713px 1071px currentColor, 1075px 1148px currentColor, 1606px 1542px currentColor, 592px 236px currentColor,
    1255px 276px currentColor, 1005px 847px currentColor, 780px 1077px currentColor, 1483px 1984px currentColor,
    789px 199px currentColor, 763px 493px currentColor, 891px 1595px currentColor, 280px 879px currentColor,
    1385px 1035px currentColor, 847px 1613px currentColor, 623px 1129px currentColor, 1045px 1416px currentColor,
    819px 1059px currentColor, 4px 1381px currentColor, 384px 521px currentColor, 630px 666px currentColor,
    1726px 1689px currentColor, 1517px 1336px currentColor, 1007px 1265px currentColor, 534px 1287px currentColor,
    120px 907px currentColor, 367px 329px currentColor, 257px 1301px currentColor, 1686px 610px currentColor,
    1724px 552px currentColor, 586px 825px currentColor, 1196px 1945px currentColor, 1723px 1176px currentColor,
    1123px 1768px currentColor, 105px 1954px currentColor, 1847px 708px currentColor, 1448px 298px currentColor,
    1721px 1239px currentColor, 603px 1062px currentColor, 211px 663px currentColor, 1679px 554px currentColor,
    1163px 1517px currentColor, 604px 925px currentColor, 1274px 765px currentColor, 129px 1871px currentColor,
    1912px 1747px currentColor, 1889px 424px currentColor, 1804px 266px currentColor, 723px 556px currentColor,
    1857px 528px currentColor, 208px 1837px currentColor, 526px 1956px currentColor, 793px 1436px currentColor,
    826px 1850px currentColor, 421px 1157px currentColor, 725px 1347px currentColor, 1451px 508px currentColor,
    1596px 1820px currentColor, 1485px 164px currentColor, 312px 997px currentColor, 1013px 999px currentColor,
    1012px 800px currentColor, 668px 1520px currentColor, 1680px 466px currentColor, 730px 188px currentColor,
    354px 1894px currentColor, 946px 1520px currentColor, 1003px 1667px currentColor, 1049px 971px currentColor,
    584px 1264px currentColor, 1745px 594px currentColor, 602px 1431px currentColor, 1239px 597px currentColor,
    1236px 1929px currentColor, 1415px 1564px currentColor, 923px 1131px currentColor, 27px 1561px currentColor,
    751px 1428px currentColor, 382px 775px currentColor, 1348px 736px currentColor, 953px 1591px currentColor,
    498px 628px currentColor, 562px 28px currentColor, 1019px 1872px currentColor, 1748px 517px currentColor,
    1702px 1347px currentColor, 676px 203px currentColor, 1152px 1827px currentColor, 578px 1578px currentColor,
    1019px 1471px currentColor, 927px 777px currentColor, 1712px 683px currentColor, 938px 1639px currentColor,
    1630px 1164px currentColor, 1352px 640px currentColor, 877px 1667px currentColor, 636px 444px currentColor,
    773px 832px currentColor, 1706px 1567px currentColor, 1338px 1629px currentColor, 640px 861px currentColor,
    431px 1273px currentColor, 610px 1282px currentColor, 1811px 791px currentColor, 178px 1682px currentColor,
    851px 282px currentColor, 411px 1534px currentColor, 90px 162px currentColor, 1261px 1964px currentColor,
    427px 1311px currentColor, 563px 1434px currentColor, 606px 1453px currentColor, 736px 61px currentColor,
    1100px 1670px currentColor, 304px 1296px currentColor, 1233px 980px currentColor, 568px 1479px currentColor,
    1562px 1021px currentColor, 950px 16px currentColor, 87px 1398px currentColor, 18px 1907px currentColor,
    1842px 1275px currentColor, 1648px 275px currentColor, 1349px 974px currentColor, 710px 1980px currentColor,
    790px 739px currentColor, 770px 144px currentColor, 484px 1831px currentColor, 524px 1862px currentColor,
    1555px 245px currentColor, 1349px 1617px currentColor, 1464px 39px currentColor, 45px 1876px currentColor,
    245px 1629px currentColor, 648px 1272px currentColor, 1011px 1555px currentColor, 421px 1738px currentColor,
    78px 1631px currentColor, 118px 776px currentColor, 1173px 1379px currentColor, 1396px 1908px currentColor,
    84px 621px currentColor, 758px 530px currentColor, 751px 71px currentColor, 565px 718px currentColor,
    1050px 1881px currentColor, 1158px 1489px currentColor, 1303px 493px currentColor, 420px 1252px currentColor;
}

/* ---- Medium layer (2px dots) ----------------------------------------------
   90 dots. Middle depth plane -- slower drift, softer warm-gray tone. */
.el-hero-starfield__layer--medium {
  width: 2px;
  height: 2px;
  color: var(--el-hero-night-star-medium);
  animation: elHeroNightStarScroll 140s linear infinite;
  box-shadow:
    539px 1917px currentColor, 1628px 570px currentColor, 1739px 1724px currentColor, 95px 1406px currentColor,
    1343px 265px currentColor, 1853px 1015px currentColor, 980px 1938px currentColor, 262px 722px currentColor,
    1393px 303px currentColor, 1473px 1381px currentColor, 1645px 401px currentColor, 578px 1009px currentColor,
    857px 229px currentColor, 96px 823px currentColor, 1467px 509px currentColor, 207px 1453px currentColor,
    557px 622px currentColor, 1235px 415px currentColor, 1603px 743px currentColor, 792px 840px currentColor,
    601px 1400px currentColor, 790px 1884px currentColor, 130px 360px currentColor, 392px 548px currentColor,
    43px 17px currentColor, 388px 1568px currentColor, 1078px 1961px currentColor, 798px 828px currentColor,
    1783px 673px currentColor, 1863px 1814px currentColor, 1016px 336px currentColor, 1751px 1995px currentColor,
    1574px 1527px currentColor, 410px 698px currentColor, 1276px 1878px currentColor, 479px 757px currentColor,
    551px 272px currentColor, 525px 1825px currentColor, 379px 631px currentColor, 433px 769px currentColor,
    185px 1451px currentColor, 1340px 1306px currentColor, 1271px 179px currentColor, 36px 990px currentColor,
    704px 1133px currentColor, 1500px 1917px currentColor, 1538px 869px currentColor, 712px 384px currentColor,
    179px 230px currentColor, 151px 737px currentColor, 951px 346px currentColor, 770px 475px currentColor,
    130px 812px currentColor, 883px 1730px currentColor, 663px 363px currentColor, 15px 1771px currentColor,
    1701px 1755px currentColor, 421px 1737px currentColor, 831px 1966px currentColor, 1085px 157px currentColor,
    254px 521px currentColor, 1314px 974px currentColor, 185px 422px currentColor, 500px 1805px currentColor,
    1341px 841px currentColor, 1874px 1461px currentColor, 1727px 939px currentColor, 76px 1285px currentColor,
    686px 1570px currentColor, 327px 428px currentColor, 1005px 1746px currentColor, 588px 763px currentColor,
    1292px 1450px currentColor, 676px 1995px currentColor, 75px 325px currentColor, 1052px 64px currentColor,
    964px 37px currentColor, 981px 1620px currentColor, 551px 608px currentColor, 1118px 1324px currentColor,
    1131px 1618px currentColor, 197px 1988px currentColor, 122px 431px currentColor, 1282px 690px currentColor,
    336px 356px currentColor, 901px 1913px currentColor, 725px 1923px currentColor, 580px 1754px currentColor,
    130px 380px currentColor, 1035px 91px currentColor;
}

/* ---- Large layer (3px dots) ------------------------------------------------
   36 dots, warm gold-accent tone (the site's real --accent), farthest/slowest
   plane. This is the ONLY layer with any filter applied -- a single, cheap
   drop-shadow bloom composited once per frame, never per-star. */
.el-hero-starfield__layer--large {
  width: 3px;
  height: 3px;
  color: var(--el-hero-night-star-large);
  filter: drop-shadow(0 0 1.5px var(--el-hero-night-star-glow));
  animation: elHeroNightStarScroll 210s linear infinite;
  box-shadow:
    849px 336px currentColor, 1845px 1208px currentColor, 228px 1382px currentColor, 1385px 72px currentColor,
    1778px 734px currentColor, 1916px 1258px currentColor, 137px 1595px currentColor, 1005px 190px currentColor,
    453px 66px currentColor, 1260px 326px currentColor, 942px 1493px currentColor, 1065px 1919px currentColor,
    1657px 206px currentColor, 678px 164px currentColor, 1409px 843px currentColor, 286px 93px currentColor,
    48px 1836px currentColor, 1087px 1613px currentColor, 434px 780px currentColor, 1089px 392px currentColor,
    1790px 1695px currentColor, 990px 350px currentColor, 1543px 118px currentColor, 744px 203px currentColor,
    626px 1323px currentColor, 201px 193px currentColor, 493px 1473px currentColor, 168px 1394px currentColor,
    943px 680px currentColor, 1846px 1757px currentColor, 73px 392px currentColor, 752px 1924px currentColor,
    1627px 228px currentColor, 789px 760px currentColor, 1155px 1471px currentColor, 1872px 1517px currentColor;
}

/* ---- Mobile: reduce, don't remove -----------------------------------------
   Below ~480px the hero is narrower and taller relative to its content, so
   the medium/large layers are turned down (not hidden) to keep the effect
   noticeable but out of the way of the headline; the large layer's glow
   filter is dropped since it's the least necessary detail at that size. */
@media (max-width: 480px) {
  .el-hero-starfield__layer--medium { opacity: 0.65; }
  .el-hero-starfield__layer--large { opacity: 0.7; filter: none; }
}

/* NOTE: .hero-marble and .hero-letters-flat/.hero-letters-textured (the
   monogram's light/dark fill swap) are defined in assets/css/motion-system.css
   and are gated there directly on [data-hero-theme='night'] instead of OS
   prefers-color-scheme, so they stay coherent with whichever atmosphere this
   file is actually showing. See that file's own comments. */

/* ============================================================================
   PRIMARY MECHANISM -- device/OS preference, pure CSS, no JavaScript
   required. Day is the default (the site is primarily a light, warm-white
   brand); `prefers-color-scheme: dark` switches to night. This is a live
   media query -- the browser re-evaluates it (and this opacity/animation
   state) automatically the instant the visitor's OS or browser theme
   changes, with no script involved. Works identically whether or not
   JavaScript is available. Only the [data-hero-theme] block further down
   (dev override / future manual toggle) ever takes precedence over this.
   ============================================================================ */

.el-hero-atmosphere__day { opacity: 1; }
.el-hero-atmosphere__night { opacity: 0; }
.el-hero-day-pattern { animation-play-state: running; }
.el-hero-starfield__layer { animation-play-state: paused; }

@media (prefers-color-scheme: dark) {
  .el-hero-atmosphere__day { opacity: 0; }
  .el-hero-atmosphere__night { opacity: 1; }
  .el-hero-day-pattern { animation-play-state: paused; }
  .el-hero-starfield__layer { animation-play-state: running; }
}

/* ============================================================================
   OVERRIDE MECHANISM -- only ever active when assets/js/hero-atmosphere.js
   has explicitly set [data-hero-theme] (a ?heroTheme= dev query override, or
   a future manual toggle -- see that file). Higher specificity than both the
   PRIMARY MECHANISM block above and its own media query, so it always wins
   when present, regardless of source order. In normal browsing with no
   override active, this attribute is never set and these rules never match
   -- the PRIMARY MECHANISM above is the entire experience. Opacity is
   applied to the day/night LAYERS only, never to #hero itself or to
   .el-hero-atmosphere, so hero content opacity is never touched.
   ============================================================================ */

[data-hero-theme='day'] .el-hero-atmosphere__day {
  opacity: 1;
  visibility: visible;
}
[data-hero-theme='day'] .el-hero-atmosphere__night {
  opacity: 0;
  visibility: hidden;
}
[data-hero-theme='day'] .el-hero-day-pattern {
  animation-play-state: running;
}
[data-hero-theme='day'] .el-hero-starfield__layer {
  animation-play-state: paused;
}

[data-hero-theme='night'] .el-hero-atmosphere__day {
  opacity: 0;
  visibility: hidden;
}
[data-hero-theme='night'] .el-hero-atmosphere__night {
  opacity: 1;
  visibility: visible;
}
[data-hero-theme='night'] .el-hero-day-pattern {
  animation-play-state: paused;
}
[data-hero-theme='night'] .el-hero-starfield__layer {
  animation-play-state: running;
}

/* ============================================================================
   RESPONSIVE -- day layer intensity. Night layer's own mobile reduction is
   above (unchanged from the previous starfield-only file).
   ============================================================================ */

@media (min-width: 1600px) {
  .el-hero-day-pattern { opacity: 0.26; }
}

@media (max-width: 1024px) {
  .el-hero-day-pattern {
    opacity: 0.18;
    animation-duration: 60s;
  }
  .el-hero-atmosphere__day::after {
    background:
      radial-gradient(
        620px 520px at 50% 34%,
        rgb(247 241 230 / 0.92) 0%,
        rgb(247 241 230 / 0.8) 48%,
        rgb(247 241 230 / 0.4) 78%,
        rgb(247 241 230 / 0.16) 100%
      ),
      linear-gradient(
        180deg,
        rgb(255 255 255 / 0.42) 0%,
        transparent 18%,
        transparent 70%,
        rgb(239 228 207 / 0.94) 100%
      );
  }
}

@media (max-width: 767px) {
  .el-hero-day-pattern {
    opacity: 0.14;
    animation-name: elHeroDayPatternShiftMobile;
    animation-duration: 75s;
    background-size:
      80px 80px,
      80px 80px,
      65px 65px,
      95px 95px,
      100% 100%;
  }
  .el-hero-atmosphere__day::after {
    background:
      radial-gradient(
        420px 460px at 50% 30%,
        rgb(247 241 230 / 0.8) 0%,
        rgb(247 241 230 / 0.62) 46%,
        rgb(247 241 230 / 0.3) 74%,
        transparent 100%
      ),
      linear-gradient(
        180deg,
        rgb(255 255 255 / 0.4) 0%,
        transparent 20%,
        transparent 68%,
        rgb(239 228 207 / 0.92) 100%
      );
  }
}

@media (max-width: 430px) {
  .el-hero-day-pattern { opacity: 0.11; }
}

/* ============================================================================
   REDUCED MOTION -- both layers stay visible as static backgrounds; only the
   continuous drift stops. The automatic day/night switch itself may still
   occur (it's a decorative-layer swap, not motion), but its crossfade
   shortens to avoid a lingering animated transition.
   ============================================================================ */

@media (prefers-reduced-motion: reduce) {
  .el-hero-day-pattern {
    animation: none;
    will-change: auto;
  }
  .el-hero-starfield__layer {
    animation: none;
    transform: none;
  }
  .el-hero-atmosphere__day,
  .el-hero-atmosphere__night {
    transition-duration: 150ms;
  }
}