/* NeonWave boot sequence (see js/boot.js). Timeline, in seconds:
 * 0.0  black, dust + neon ribbons grow in (canvas)
 * 0.2  logo emerges from a point of light, sonar rings expand
 * 0.7  "NeonWave" letters rise one by one with a light sweep
 * 1.4  tagline + equaliser
 * done circular reveal of the app, ribbons surge upward */
.nw-boot {
    position: fixed; inset: 0; z-index: 100000; overflow: hidden; color: #fff;
    background: radial-gradient(120vmax 80vmax at 50% 120%, #0b1437 0%, #000 55%);
    display: flex; align-items: center; justify-content: center;
    clip-path: circle(150% at 50% 50%);
    -webkit-font-smoothing: antialiased;
}
.nw-boot canvas { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.nw-boot-vignette { position: absolute; inset: 0; pointer-events: none; background: radial-gradient(80vmax 60vmax at 50% 50%, transparent 40%, rgba(0, 0, 0, 0.55) 100%); }

/* ── centre stack ───────────────────────────────────────────────────────── */
.nw-boot-center { position: relative; display: flex; flex-direction: column; align-items: center; gap: 22px; transform: translateY(-2vh); }

/* logo: point of light → full mark, with sonar rings */
.nw-boot-mark { position: relative; width: 112px; height: 112px; }
.nw-boot-logo {
    position: absolute; inset: 0; border-radius: 28px; overflow: hidden;
    box-shadow: 0 30px 80px rgba(0, 0, 0, 0.7), 0 0 0 1px rgba(255, 255, 255, 0.10), 0 0 60px rgba(91, 154, 255, 0.35);
    animation: nwLogoIn 1.1s cubic-bezier(.16, 1, .3, 1) 0.2s both;
}
.nw-boot-logo img { width: 100%; height: 100%; object-fit: cover; display: block; }
.nw-boot-logo::after {
    content: ""; position: absolute; inset: -60%; transform: translateX(-130%) rotate(25deg);
    background: linear-gradient(90deg, transparent 42%, rgba(255, 255, 255, 0.55) 50%, transparent 58%);
    animation: nwShine 1.4s cubic-bezier(.4, 0, .2, 1) 0.9s both;
}
.nw-boot-ring {
    position: absolute; inset: 0; border-radius: 50%; border: 1.5px solid rgba(140, 180, 255, 0.55);
    animation: nwRing 2.2s cubic-bezier(.2, .7, .2, 1) 0.45s infinite;
}
.nw-boot-ring:nth-child(2) { animation-delay: 1.05s; }
.nw-boot-ring:nth-child(3) { animation-delay: 1.65s; }
.nw-boot-spark {
    position: absolute; left: 50%; top: 50%; width: 10px; height: 10px; margin: -5px; border-radius: 50%; background: #fff;
    box-shadow: 0 0 30px 12px rgba(120, 170, 255, 0.9), 0 0 80px 30px rgba(91, 154, 255, 0.5);
    animation: nwSpark 1s cubic-bezier(.16, 1, .3, 1) both;
}
@keyframes nwSpark { 0% { opacity: 0; transform: scale(0); } 25% { opacity: 1; transform: scale(1.6); } 100% { opacity: 0; transform: scale(0.2); } }
@keyframes nwLogoIn { 0% { opacity: 0; transform: scale(0.15) rotate(-12deg); filter: blur(10px) brightness(3); } 60% { filter: blur(0) brightness(1.3); } 100% { opacity: 1; transform: none; filter: none; } }
@keyframes nwShine { to { transform: translateX(130%) rotate(25deg); } }
@keyframes nwRing { 0% { transform: scale(0.9); opacity: 0.9; } 100% { transform: scale(2.6); opacity: 0; } }

/* wordmark: letters rise + gradient shimmer */
.nw-boot-word { display: flex; font: 800 clamp(30px, 3.4vw, 44px)/1 Inter, "Segoe UI", system-ui, sans-serif; letter-spacing: -0.045em; }
.nw-boot-word .l {
    display: inline-block; opacity: 0; transform: translateY(26px) scale(0.9); filter: blur(6px);
    animation: nwLetter 0.8s cubic-bezier(.16, 1, .3, 1) calc(0.7s + var(--i) * 0.055s) both;
    background: linear-gradient(90deg, #fff 0%, #fff 45%, #8ab8ff 55%, #fff 65%, #fff 100%);
    background-size: 300% 100%; -webkit-background-clip: text !important; background-clip: text !important; color: transparent; -webkit-text-fill-color: transparent;
}
.nw-boot-word .l.b { background-image: linear-gradient(90deg, #5b9aff 0%, #5b9aff 45%, #d6e6ff 55%, #5b9aff 65%, #5b9aff 100%); }
.nw-boot-word.is-on .l { animation: nwLetter 0.8s cubic-bezier(.16, 1, .3, 1) calc(0.7s + var(--i) * 0.055s) both, nwSweep 2.6s linear 1.6s infinite; }
@keyframes nwLetter { to { opacity: 1; transform: none; filter: none; } }
@keyframes nwSweep { from { background-position: 100% 0; } to { background-position: -100% 0; } }

.nw-boot-tag { font: 500 14px/1 Inter, "Segoe UI", system-ui, sans-serif; letter-spacing: 0.22em; text-transform: uppercase; color: rgba(214, 226, 255, 0.72); animation: nwFade 0.9s ease 1.5s both; }

/* equaliser */
.nw-boot-eq { display: flex; align-items: flex-end; gap: 4px; height: 22px; margin-top: 4px; animation: nwFade 0.6s ease 1.7s both; }
.nw-boot-eq i { width: 4px; border-radius: 3px; background: linear-gradient(180deg, #8ab8ff, #5b9aff); height: 30%; box-shadow: 0 0 10px rgba(91, 154, 255, 0.7); animation: nwEq 0.9s ease-in-out infinite alternate; }
.nw-boot-eq i:nth-child(1) { animation-delay: 0s; } .nw-boot-eq i:nth-child(2) { animation-delay: 0.12s; } .nw-boot-eq i:nth-child(3) { animation-delay: 0.24s; }
.nw-boot-eq i:nth-child(4) { animation-delay: 0.06s; } .nw-boot-eq i:nth-child(5) { animation-delay: 0.3s; } .nw-boot-eq i:nth-child(6) { animation-delay: 0.18s; } .nw-boot-eq i:nth-child(7) { animation-delay: 0.36s; }
@keyframes nwEq { from { height: 18%; } to { height: 100%; } }
@keyframes nwFade { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }

/* ── exit: flash, then the circle closes on the logo and reveals the app ── */
.nw-boot::before { content: ""; position: absolute; inset: 0; opacity: 0; pointer-events: none; background: radial-gradient(circle at 50% 46%, #fff 0%, rgba(214, 230, 255, 0.75) 12%, rgba(91, 154, 255, 0.25) 30%, transparent 55%); }
.nw-boot.is-done { animation: nwIris 1.05s cubic-bezier(.7, 0, .3, 1) 0.15s both; }
.nw-boot.is-done::before { animation: nwFlash 0.5s ease-out both; }
.nw-boot.is-done .nw-boot-center { animation: nwCenterOut 0.9s cubic-bezier(.7, 0, .3, 1) both; }
@keyframes nwIris { from { clip-path: circle(150% at 50% 50%); } to { clip-path: circle(0% at 50% 48%); } }
@keyframes nwFlash { 0% { opacity: 0; transform: scale(0.4); } 35% { opacity: 0.9; } 100% { opacity: 0; transform: scale(1.6); } }
@keyframes nwCenterOut { to { opacity: 0; transform: translateY(-2vh) scale(1.25); filter: blur(8px); } }

/* app underneath eases in as the iris opens */
body:has(.nw-boot:not(.is-done)) .app-container { opacity: 0.001; }
html.nw-booted .app-container { animation: nwAppIn 0.9s ease 0.3s both; }
@keyframes nwAppIn { from { opacity: 0; transform: scale(1.015); } to { opacity: 1; transform: none; } }

@media (prefers-reduced-motion: reduce) {
    .nw-boot *, .nw-boot::before { animation-duration: 0.01ms !important; animation-delay: 0s !important; animation-iteration-count: 1 !important; }
    .nw-boot.is-done { opacity: 0; transition: opacity 0.3s; }
}