/* Standalone version of the homepage's loading screen, for pages that don't
   have a hero mark to morph into — shows the same animated mark + wordmark,
   then just fades out and removes itself (see assets/js/loader-simple.js). */

@keyframes ldGlow{0%,100%{opacity:.25;transform:scale(1)}50%{opacity:.6;transform:scale(1.3)}}
@keyframes ldWord{from{transform:translateY(110%)}to{transform:translateY(0)}}
@keyframes ldTrack{from{letter-spacing:.05em;opacity:.2}to{letter-spacing:.42em;opacity:1}}
@keyframes ldLine{from{transform:scaleX(0)}to{transform:scaleX(1)}}
@keyframes ldDraw{to{stroke-dashoffset:0}}
@keyframes ldFailsafe{to{opacity:0;visibility:hidden;pointer-events:none}}

#seg-loader{position:fixed;inset:0;z-index:999;background:#03090c;display:flex;align-items:center;justify-content:center;animation:ldFailsafe .01s linear 5s forwards}
#seg-loader.morph{background:transparent;transition:background .7s ease;animation:none}
#seg-loader.morph #ld-word,#seg-loader.morph #ld-line,#seg-loader.morph .ldGlow,#seg-loader.morph #ld-mark{opacity:0;transition:opacity .45s ease}
#ld-group{gap:38px}
#ld-mark{width:170px;height:100px;transition:transform 1.05s cubic-bezier(.72,0,.24,1);transform-origin:center center}
.ldGlow{width:46vw;height:46vw}

@media(max-width:600px){
  #ld-group{gap:30px}
  #ld-mark{width:136px;height:80px}
}