/* About shine: a glint across the title, the lost fragment drifting through the hero vista, pale-fire storm at the edges
   of the founding chronicle, a listening glow while DOT reads aloud, buttons that catch the light, sections that
   light up as they arrive. Soft and dim, a screen and not a lamp, dimmer at night (US Central).
   Loaded after about-palette.css. Decoration only: nothing here takes the pointer. */

/* --- title glint --- */
.about-hero h1 .title-glint{position:absolute;inset:0;font-style:normal;color:transparent;-webkit-text-stroke:0;text-shadow:none;pointer-events:none;
  background:linear-gradient(100deg,transparent 42%,rgba(255,255,255,.55) 50%,transparent 58%) 130% 0/260% 100% no-repeat;
  -webkit-background-clip:text;background-clip:text;animation:about-glint 9s ease-in-out infinite}
@keyframes about-glint{0%,62%{background-position:130% 0}92%,100%{background-position:-30% 0}}

/* --- the vista: the core breathes and the fragment drifts around it --- */
.paradigm-vista .vista-glow{position:absolute;inset:0;pointer-events:none;mix-blend-mode:screen;
  background:radial-gradient(circle at 58% 46%,rgba(255,150,70,.26),transparent 34%);animation:vista-breathe 7s ease-in-out infinite}
@keyframes vista-breathe{0%,100%{opacity:.4}50%{opacity:.9}}
.paradigm-vista .vista-frag{position:absolute;width:15%;left:10%;top:70%;pointer-events:none;opacity:0;animation:vista-frag 48s linear infinite}
.vista-frag svg{display:block;width:100%;height:auto;overflow:visible;filter:drop-shadow(0 0 3px #65faff) drop-shadow(0 0 9px rgba(101,250,255,.7));animation:vfrag-bob 5.5s ease-in-out infinite}
.vista-frag .thread{fill:none;stroke:#eaffff;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}
.vista-frag .scorch{fill:none;stroke:#ff7a18;stroke-width:1.8;stroke-linecap:round}
.vista-frag .arc{fill:none;stroke:#fff;stroke-width:1.1;opacity:0;animation:vfrag-arc 4.4s steps(1,end) infinite}
@keyframes vista-frag{
  0%{left:4%;top:72%;opacity:0}
  5%{opacity:.8}
  18%{left:30%;top:30%}
  34%{left:62%;top:58%}
  50%{left:78%;top:22%}
  64%{left:46%;top:40%}
  78%{left:18%;top:62%;opacity:.8}
  86%,100%{left:4%;top:72%;opacity:0}
}
@keyframes vfrag-bob{0%,100%{transform:translateY(0) rotate(-6deg)}50%{transform:translateY(-4px) rotate(7deg)}}
@keyframes vfrag-arc{0%,30%,34%,70%,74%,100%{opacity:0}31%{opacity:1}32%{opacity:.2}33%{opacity:.9}71%{opacity:.8}72%{opacity:.1}}

/* --- pale fire at the edges of the founding chronicle, and scattered marks --- */
.story-intro{position:relative}
.chronicle-fire{position:absolute;inset:0;overflow:hidden;pointer-events:none}
.chronicle-fire::before,.chronicle-fire::after{content:"";position:absolute;top:0;bottom:0;width:9%;mix-blend-mode:screen;opacity:.45;
  background:repeating-linear-gradient(0deg,transparent 0 13px,rgba(255,255,255,.07) 13px 15px),linear-gradient(90deg,rgba(214,232,255,.26),rgba(198,160,255,.12) 45%,transparent);
  animation:fire-shimmer 9s ease-in-out infinite}
.chronicle-fire::before{left:0}
.chronicle-fire::after{right:0;transform:scaleX(-1);animation-delay:-4s}
.chronicle-fire i{position:absolute;color:#dfe9ff;font:700 11px "Courier New",monospace;font-style:normal;opacity:0;text-shadow:0 0 8px rgba(198,160,255,.9),0 0 3px #fff;animation:fire-mark 6s steps(1,end) infinite}
.chronicle-fire i:nth-child(1){left:1.5%;top:22%}
.chronicle-fire i:nth-child(2){left:4%;top:64%;animation-delay:-2.4s;animation-duration:8s}
.chronicle-fire i:nth-child(3){right:2%;top:34%;animation-delay:-1.1s;animation-duration:7s}
.chronicle-fire i:nth-child(4){right:4.5%;top:72%;animation-delay:-4.3s}
@keyframes fire-shimmer{0%,100%{opacity:.3}45%{opacity:.55}50%{opacity:.28}55%{opacity:.6}}
@keyframes fire-mark{0%,14%,19%,55%,58%,100%{opacity:0}15%{opacity:1}16%{opacity:.2}17%{opacity:.9}56%{opacity:.8}57%{opacity:.1}}

/* --- DOT is reading aloud: a soft glow and listening bars (class set by js/about-shine.js) --- */
.chronicle-listen{position:relative;overflow:hidden}
.chronicle-listen .listen-bars{display:none;align-items:flex-end;gap:3px;height:18px;margin:10px 0 0}
.chronicle-listen.is-playing .listen-bars{display:flex}
.listen-bars i{width:3px;height:100%;background:linear-gradient(0deg,#ff7a18,#fff);border-radius:1px;transform-origin:bottom;opacity:.85;animation:listen-bar 1.1s ease-in-out infinite}
.listen-bars i:nth-child(3n){animation-duration:.8s;background:linear-gradient(0deg,#65faff,#fff)}
.listen-bars i:nth-child(4n+1){animation-duration:1.4s}
.listen-bars i:nth-child(2n){animation-delay:-.4s}
.listen-bars i:nth-child(5n){animation-delay:-.7s}
.chronicle-listen.is-playing{border-color:rgba(255,122,24,.55);box-shadow:0 0 20px rgba(255,122,24,.16),inset 0 0 24px rgba(101,250,255,.05);animation:listen-glow 3s ease-in-out infinite}
@keyframes listen-bar{0%,100%{transform:scaleY(.18)}50%{transform:scaleY(1)}}
@keyframes listen-glow{0%,100%{box-shadow:0 0 14px rgba(255,122,24,.12),inset 0 0 20px rgba(101,250,255,.04)}50%{box-shadow:0 0 26px rgba(255,122,24,.26),inset 0 0 28px rgba(101,250,255,.08)}}

/* --- buttons catch the light --- */
.primary-action,.secondary-action{position:relative;overflow:hidden}
.primary-action::after,.secondary-action::after{content:"";position:absolute;top:0;bottom:0;left:-40%;width:26%;transform:skewX(-20deg);pointer-events:none;
  background:linear-gradient(90deg,transparent,rgba(255,255,255,.3),transparent);opacity:0}
.primary-action:hover::after,.secondary-action:hover::after,.primary-action:focus-visible::after,.secondary-action:focus-visible::after{opacity:1;animation:btn-glint .9s ease-out}
.hero-actions .primary-action::after{opacity:1;animation:btn-shimmer 7s ease-in-out infinite}
@keyframes btn-glint{from{left:-40%}to{left:130%}}
@keyframes btn-shimmer{0%,60%{left:-40%}90%,100%{left:130%}}
.about-shortcuts a{position:relative;overflow:hidden}
.about-shortcuts a:hover,.about-shortcuts a:focus-visible{box-shadow:0 0 14px rgba(255,122,24,.28)}

/* --- sections light up as they arrive --- */
.story-intro.reveal,.archive-invitation.reveal{opacity:0;transform:translateY(14px)}
.story-intro.reveal.in,.archive-invitation.reveal.in{opacity:1;transform:none;transition:opacity .8s ease,transform .8s ease}
.story-intro.reveal.in.lit,.archive-invitation.reveal.in.lit{animation:section-arrive 1.6s ease-out}
@keyframes section-arrive{0%{box-shadow:0 0 0 rgba(255,122,24,0)}35%{box-shadow:0 0 28px rgba(255,122,24,.3)}100%{box-shadow:0 0 0 rgba(255,122,24,0)}}

/* --- fragment passing behind the page now and then --- */
.about-frag{position:fixed;z-index:1;left:-8%;top:40%;width:70px;opacity:0;pointer-events:none;animation:about-frag-pass 85s linear infinite;animation-delay:-60s}
.about-frag svg{display:block;width:100%;height:auto;overflow:visible;filter:drop-shadow(0 0 3px #65faff) drop-shadow(0 0 9px rgba(101,250,255,.6));animation:vfrag-bob 5.5s ease-in-out infinite}
.about-frag .thread{fill:none;stroke:#eaffff;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}
.about-frag .scorch{fill:none;stroke:#ff7a18;stroke-width:1.8;stroke-linecap:round}
@keyframes about-frag-pass{0%{left:-8%;top:62%;opacity:0}3%{opacity:.5}12%{left:24%;top:30%}22%{left:52%;top:68%}30%{left:80%;top:26%}35%{left:108%;top:44%;opacity:.4}36%,100%{left:108%;opacity:0}}

/* --- dimmer at dusk and at night (data-time is set by js/about-shine.js) --- */
html[data-time="dusk"] .vista-glow,html[data-time="dusk"] .chronicle-fire,html[data-time="dusk"] .about-frag{opacity:.8}
html[data-time="night"] .vista-glow{opacity:.55}
html[data-time="night"] .chronicle-fire{opacity:.6}

@media(prefers-reduced-motion:reduce){
  .title-glint,.vista-glow,.vista-frag,.vista-frag svg,.vista-frag .arc,.chronicle-fire::before,.chronicle-fire::after,.chronicle-fire i,.listen-bars i,.chronicle-listen.is-playing,
  .primary-action::after,.hero-actions .primary-action::after,.about-frag,.about-frag svg{animation:none}
  .about-frag,.vista-frag,.chronicle-fire i,.title-glint{display:none}
  .story-intro.reveal,.archive-invitation.reveal{opacity:1;transform:none}
}