/* Home shine: a glint across the title, the citadel breathing with sparks and a flicker along its frame,
   live status, the lost fragment passing through, route cards that catch the light, a pulsing Enter button.
   Everything is soft and dim, a screen and not a lamp, and dimmer at night (US Central).
   Loaded after home-palette.css. Decoration only: nothing here takes the pointer. */

/* --- title glint --- */
.title .title-glint{position:absolute;font-style:normal;inset:0;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:title-glint 9s ease-in-out infinite}
@keyframes title-glint{0%,62%{background-position:130% 0}92%,100%{background-position:-30% 0}}

/* --- the citadel breathes --- */
.citadel-glow,.citadel-sparks,.frame-flash{position:absolute;inset:6px;z-index:1;pointer-events:none;overflow:hidden}
.citadel-glow{mix-blend-mode:screen;
  background:radial-gradient(ellipse 22% 32% at 50% 58%,rgba(255,150,70,.32),transparent 70%),radial-gradient(ellipse 9% 40% at 50% 28%,rgba(255,220,200,.2),transparent 70%);
  animation:citadel-breathe 7s ease-in-out infinite}
@keyframes citadel-breathe{0%,100%{opacity:.35}50%{opacity:.85}}
.citadel-sparks i{position:absolute;bottom:18%;width:3px;height:3px;border-radius:50%;background:#ffd9b0;box-shadow:0 0 6px #ff7a18,0 0 12px rgba(255,122,24,.7);opacity:0;animation:spark-rise 8s linear infinite}
.citadel-sparks i:nth-child(1){left:38%;animation-delay:-1s}
.citadel-sparks i:nth-child(2){left:44%;animation-delay:-3.2s;animation-duration:9.5s}
.citadel-sparks i:nth-child(3){left:49%;animation-delay:-5.4s;background:#fff;box-shadow:0 0 6px #65faff}
.citadel-sparks i:nth-child(4){left:53%;animation-delay:-2.1s;animation-duration:7s}
.citadel-sparks i:nth-child(5){left:58%;animation-delay:-6.6s;animation-duration:10s}
.citadel-sparks i:nth-child(6){left:62%;animation-delay:-4.2s;background:#ffc2e2;box-shadow:0 0 6px #ff4fa8}
.citadel-sparks i:nth-child(7){left:41%;animation-delay:-7.3s;animation-duration:8.6s}
.citadel-sparks i:nth-child(8){left:55%;animation-delay:-.4s;animation-duration:9s;width:2px;height:2px}
@keyframes spark-rise{0%{transform:translate(0,0);opacity:0}10%{opacity:.9}70%{opacity:.5}100%{transform:translate(14px,-300px);opacity:0}}
.frame-flash{inset:0;border:1px solid rgba(234,255,255,.9);opacity:0;box-shadow:0 0 10px rgba(101,250,255,.7),inset 0 0 10px rgba(101,250,255,.4);animation:frame-flash 13s steps(1,end) infinite}
@keyframes frame-flash{0%,41%,45%,76%,79%,100%{opacity:0}42%{opacity:.8}43%{opacity:.15}44%{opacity:.7}77%{opacity:.5}78%{opacity:.1}}

/* --- live status lamp and decode on load --- */
.realm-status .status-lamp{display:inline-block;position:static;width:8px;height:8px;margin-left:9px;border-radius:50%;background:#8fa9b6;box-shadow:0 0 6px #8fa9b6;vertical-align:middle;animation:lamp-beat 3s ease-in-out infinite}
.realm-status .status-lamp[data-state="ok"]{background:#4dff9a;box-shadow:0 0 6px #4dff9a,0 0 12px rgba(77,255,154,.55)}
.realm-status .status-lamp[data-state="warning"]{background:#ffcf33;box-shadow:0 0 6px #ffcf33,0 0 12px rgba(255,207,51,.55)}
.realm-status .status-lamp[data-state="critical"]{background:#ff3b42;box-shadow:0 0 6px #ff3b42,0 0 12px rgba(255,59,66,.65);animation-duration:1s}
.realm-status .sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
@keyframes lamp-beat{0%,100%{opacity:1}50%{opacity:.55}}

/* --- hello line --- */
.hello-line{margin:10px 0 0;color:var(--orange,#ff7a18);font:700 11px "Courier New",monospace;letter-spacing:.3em;text-shadow:0 0 10px rgba(255,122,24,.45);opacity:.9}

/* --- the lost fragment passes through the hero now and then --- */
.home-frag{position:absolute;z-index:4;left:-8%;top:30%;width:70px;opacity:0;pointer-events:none;animation:home-frag-pass 70s linear infinite;animation-delay:-52s}
.home-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:frag-bob 5.5s ease-in-out infinite}
.home-frag .thread{fill:none;stroke:#eaffff;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}
.home-frag .scorch{fill:none;stroke:#ff7a18;stroke-width:1.8;stroke-linecap:round}
.home-frag .arc{fill:none;stroke:#fff;stroke-width:1.1;opacity:0;animation:frag-arc 4.4s steps(1,end) infinite}
@keyframes home-frag-pass{
  0%{left:-8%;top:34%;opacity:0}
  3%{opacity:.8}
  10%{left:22%;top:20%}
  18%{left:46%;top:44%}
  26%{left:72%;top:26%}
  32%{left:108%;top:38%;opacity:.7}
  33%,100%{left:108%;opacity:0}
}
@keyframes frag-bob{0%,100%{transform:translateY(0) rotate(-6deg)}50%{transform:translateY(-4px) rotate(7deg)}}
@keyframes frag-arc{0%,30%,34%,70%,74%,100%{opacity:0}31%{opacity:1}32%{opacity:.2}33%{opacity:.9}71%{opacity:.8}72%{opacity:.1}}

/* --- route cards catch the light --- */
@property --trace-angle{syntax:"<angle>";initial-value:0deg;inherits:false}
.realm-routes a{position:relative}
.realm-routes .card-glint{position:absolute;inset:0;overflow:hidden;pointer-events:none}
.realm-routes .card-glint::before{content:"";position:absolute;top:0;bottom:0;left:-40%;width:30%;transform:skewX(-20deg);
  background:linear-gradient(90deg,transparent,rgba(255,255,255,.14),transparent);opacity:0}
.realm-routes a:hover .card-glint::before,.realm-routes a:focus-visible .card-glint::before{opacity:1;animation:card-glint .9s ease-out}
@keyframes card-glint{from{left:-40%}to{left:120%}}
.realm-routes .card-trace{position:absolute;inset:-1px;padding:1px;pointer-events:none;opacity:.55;
  background:conic-gradient(from var(--trace-angle),transparent 0 72%,var(--trace,#ff7a18) 88%,transparent 100%);
  -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;
  mask:linear-gradient(#000 0 0) content-box exclude,linear-gradient(#000 0 0);
  animation:trace-spin 9s linear infinite}
.realm-routes a:nth-child(1) .card-trace{--trace:#ff7a18}
.realm-routes a:nth-child(2) .card-trace{--trace:#ff4fa8;animation-delay:-3s}
.realm-routes a:nth-child(3) .card-trace{--trace:#65faff;animation-delay:-6s}
.realm-routes a:hover .card-trace,.realm-routes a:focus-visible .card-trace{opacity:1;animation-duration:3.5s}
@keyframes trace-spin{to{--trace-angle:360deg}}

/* --- Enter button: slow pulse and a travelling shimmer --- */
.enter-realm{overflow:hidden;animation:enter-pulse 4.2s ease-in-out infinite}
.enter-realm::after{content:"";position:absolute;top:0;bottom:0;left:-40%;width:28%;transform:skewX(-20deg);
  background:linear-gradient(90deg,transparent,rgba(255,255,255,.5),transparent);animation:enter-shimmer 6s ease-in-out infinite}
@keyframes enter-pulse{0%,100%{box-shadow:0 0 14px rgba(255,122,24,.35)}50%{box-shadow:0 0 26px rgba(255,122,24,.62)}}
@keyframes enter-shimmer{0%,55%{left:-40%}85%,100%{left:130%}}
.hero.launching .citadel-glow{animation:launch-flash .45s ease-out;opacity:1}
@keyframes launch-flash{0%{opacity:.4}40%{opacity:1;filter:brightness(1.6)}100%{opacity:.9}}

/* --- a computer, not a lamp: dimmer at dusk and at night (data-time is set by js/home-shine.js) --- */
html[data-time="dusk"] .citadel-glow,html[data-time="dusk"] .citadel-sparks,html[data-time="dusk"] .home-frag{opacity:.8}
html[data-time="night"] .citadel-glow{opacity:.5}
html[data-time="night"] .citadel-sparks{opacity:.7}
html[data-time="night"] .frame-flash{animation-duration:20s}

@media(prefers-reduced-motion:reduce){
  .title .title-glint,.citadel-glow,.citadel-sparks i,.frame-flash,.home-frag,.home-frag svg,.home-frag .arc,.realm-routes .card-trace,.enter-realm,.enter-realm::after,.status-lamp{animation:none}
  .citadel-sparks,.home-frag,.title .title-glint{display:none}
}