/* Laadscherm (#app-boot): staat in de eerste HTML en dekt de lege pagina af tot de app zijn eerste
   element tekent (in WebAssembly enkele seconden, in servermodus tot de verbinding staat). Het
   woordmerk komt letter voor letter op; daaronder staat het canvas met de hartslaglijn. Alles wat
   hier beweegt animeert alleen transform en opacity, zodat het doorloopt terwijl .NET de main thread
   bezet houdt. */
#app-boot {
    position: fixed; inset: 0; z-index: 100000;
    display: flex; flex-direction: column; align-items: center; justify-content: center;
    background: #1A1A1A;
    transition: opacity 0.3s ease;
}
#app-boot.app-boot-done { opacity: 0; pointer-events: none; }

/* Flex, zodat witruimte tussen de letters in de opmaak geen spaties wordt. */
#app-boot .app-boot-mark {
    display: flex;
    font-family: 'Roboto', sans-serif; font-weight: 900; letter-spacing: 0.18rem; line-height: 1;
    font-size: clamp(2.2rem, 5.5vw, 3.4rem); color: #FF9D00; text-transform: uppercase; white-space: nowrap;
    text-shadow: 0 0 22px rgba(255, 140, 0, 0.35);
}
#app-boot .app-boot-mark span {
    display: inline-block;
    animation: app-boot-rise 0.9s cubic-bezier(0.2, 0.8, 0.2, 1) both;
}

/* De lijn verschijnt als de letters staan; de uiteinden vervagen zodat de slagen de lijn in- en
   uitlopen zonder afgesneden te worden. */
#app-boot .app-boot-ecg {
    width: 300px; height: 56px; margin-top: 8px;
    opacity: 0; animation: app-boot-in 0.4s ease 0.9s forwards;
    -webkit-mask-image: linear-gradient(90deg, transparent, #000 18%, #000 82%, transparent);
            mask-image: linear-gradient(90deg, transparent, #000 18%, #000 82%, transparent);
}
#app-boot .app-boot-ecg canvas { display: block; width: 100%; height: 100%; }

@keyframes app-boot-rise {
    from { opacity: 0; transform: translateY(26px) scale(0.96); }
    to { opacity: 1; transform: none; }
}
@keyframes app-boot-in { to { opacity: 1; } }

@media (prefers-reduced-motion: reduce) {
    #app-boot .app-boot-mark span { animation: none; }
    #app-boot .app-boot-ecg { animation: none; opacity: 1; }
}