/* beam.css: the homepage beam and stars (index.html only; split from pages.css on 15 Oct so the shared sheet stays light). Tokens only. */
/* ---- the beam: the light rising from her pyramid flows (De'Andre, 15 Oct 2026; docs/MOTION.md §4b). The picture already holds a
   still beam from the apex to the top; this adds soft pulses of light travelling up it and a slow breath of glow at the apex.
   .beam-frame copies the picture's object-fit cover crop (container units, the image's own aspect ratio), so the beam sits on
   the apex at every size; home.js gives it the same parallax transform as the picture. Screen blend adds light to what is
   beneath, never paint over it. Transforms and opacity only, on the compositor; paused while the hero is off screen
   (.is-off, home.js); still under reduced motion. ---- */
.hero-beam{position:absolute;inset:0;z-index:-1;overflow:hidden;pointer-events:none;container-type:size;mix-blend-mode:screen}
.beam-frame{position:absolute;left:50%;top:50%;width:max(100cqw,calc(100cqh * 16 / 9));aspect-ratio:16/9;translate:-50% -50%;--apex:37.5%;--beam-w:5%}
@media (max-width:767.98px){ .beam-frame{width:max(100cqw,calc(100cqh * 720 / 1279));aspect-ratio:720/1279;--apex:36.2%;--beam-w:8%} }
.beam-shaft{position:absolute;left:50%;top:0;width:var(--beam-w);height:var(--apex);translate:-50% 0;overflow:hidden;
  -webkit-mask-image:linear-gradient(to bottom,transparent 0,var(--night) 40%,var(--night) 100%);mask-image:linear-gradient(to bottom,transparent 0,var(--night) 40%,var(--night) 100%)}
.beam-shaft::before{content:"";position:absolute;left:0;top:0;width:100%;height:500%;
  background:radial-gradient(ellipse 34% 9% at 50% 50%,color-mix(in srgb,var(--cream) 78%,transparent),color-mix(in srgb,var(--gold-2) 30%,transparent) 42%,transparent 70%) 0 0/100% 20% repeat-y;
  animation:beam-flow 5.6s linear infinite}
.beam-halo{position:absolute;left:50%;top:var(--apex);width:calc(var(--beam-w) * 5);aspect-ratio:1;translate:-50% -50%;border-radius:50%;
  background:radial-gradient(closest-side,color-mix(in srgb,var(--cream) 60%,transparent),color-mix(in srgb,var(--gold) 24%,transparent) 38%,transparent 70%);
  animation:beam-breathe 4.4s ease-in-out infinite alternate}
/* The stars: fourteen points in the sky above the pyramid, each on its own slow breath (positions per crop, no inline styles under the CSP). */
.beam-stars{position:absolute;inset:0}
.beam-stars i{position:absolute;width:4px;height:4px;margin:-2px 0 0 -2px;border-radius:50%;background:radial-gradient(closest-side,var(--star),color-mix(in srgb,var(--star) 45%,transparent) 40%,transparent);animation:star-twinkle 3s ease-in-out infinite alternate;opacity:.3}
.beam-stars i:nth-child(3n){width:5px;height:5px}
.beam-stars i:nth-child(4n+1){background:radial-gradient(closest-side,var(--star-3),color-mix(in srgb,var(--star-3) 45%,transparent) 40%,transparent)}
.beam-stars i:nth-child(7n+5){background:radial-gradient(closest-side,var(--star-2),color-mix(in srgb,var(--star-2) 45%,transparent) 40%,transparent)}
.beam-stars i:nth-child(1){left:8%;top:12%;animation-duration:3.1s;animation-delay:-1.15s}
.beam-stars i:nth-child(2){left:16%;top:30%;animation-duration:2.4s;animation-delay:-1.78s}
.beam-stars i:nth-child(3){left:24%;top:8%;animation-duration:4.2s;animation-delay:-0.46s}
.beam-stars i:nth-child(4){left:33%;top:22%;animation-duration:2.8s;animation-delay:-1.34s}
.beam-stars i:nth-child(5){left:40%;top:14%;animation-duration:3.6s;animation-delay:-3.06s}
.beam-stars i:nth-child(6){left:60%;top:10%;animation-duration:2.2s;animation-delay:-0.48s}
.beam-stars i:nth-child(7){left:68%;top:24%;animation-duration:4.6s;animation-delay:-2.71s}
.beam-stars i:nth-child(8){left:78%;top:8%;animation-duration:3.3s;animation-delay:-3.17s}
.beam-stars i:nth-child(9){left:86%;top:18%;animation-duration:2.6s;animation-delay:-0.86s}
.beam-stars i:nth-child(10){left:93%;top:32%;animation-duration:3.9s;animation-delay:-2.73s}
.beam-stars i:nth-child(11){left:12%;top:48%;animation-duration:4.4s;animation-delay:-0.31s}
.beam-stars i:nth-child(12){left:88%;top:46%;animation-duration:2.9s;animation-delay:-1.28s}
.beam-stars i:nth-child(13){left:28%;top:40%;animation-duration:3.4s;animation-delay:-2.75s}
.beam-stars i:nth-child(14){left:72%;top:42%;animation-duration:2.5s;animation-delay:-0.45s}
@media (max-width:767.98px){ .beam-stars i:nth-child(1){left:10%;top:8%} .beam-stars i:nth-child(2){left:22%;top:18%} .beam-stars i:nth-child(3){left:34%;top:6%} .beam-stars i:nth-child(4){left:16%;top:30%} .beam-stars i:nth-child(5){left:42%;top:26%} .beam-stars i:nth-child(6){left:60%;top:14%} .beam-stars i:nth-child(7){left:72%;top:6%} .beam-stars i:nth-child(8){left:84%;top:20%} .beam-stars i:nth-child(9){left:90%;top:32%} .beam-stars i:nth-child(10){left:66%;top:30%} .beam-stars i:nth-child(11){left:8%;top:44%} .beam-stars i:nth-child(12){left:92%;top:46%} .beam-stars i:nth-child(13){left:30%;top:34%} .beam-stars i:nth-child(14){left:78%;top:40%} }
@keyframes star-twinkle{from{opacity:.15;transform:scale(.8)}to{opacity:1;transform:scale(1.35)}}
.hero-beam.is-off .beam-stars i{animation-play-state:paused}
@media (prefers-reduced-motion:reduce){ .beam-stars i{animation:none;opacity:.6} }
@keyframes beam-flow{to{transform:translateY(-20%)}}
@keyframes beam-breathe{from{opacity:.5;transform:scale(.9)}to{opacity:1;transform:scale(1.12)}}
.hero-beam.is-off .beam-shaft::before,.hero-beam.is-off .beam-halo{animation-play-state:paused}
@media (prefers-reduced-motion:reduce){ .beam-shaft::before,.beam-halo{animation:none} .beam-halo{opacity:.8} }