/* Reveal only the first live frame; materials continue loading afterwards. */
.scene-loading { display: none; }
html.story-boot .scene-loading,
body.story-ready .scene-loading {
    position: fixed; z-index: 19; inset: 0;
    display: grid; grid-template-columns: minmax(0, 1fr) auto;
    align-content: center; gap: 12px 16px;
    padding: 110px max(26px, calc((100vw - 340px) / 2));
    background: #e9eceb; color: #526067;
    font: 500 12px/1.5 'Manrope', sans-serif;
    pointer-events: none; opacity: 1; visibility: visible;
    transition: opacity 260ms ease, visibility 260ms;
}
.scene-loading::before {
    content: ''; grid-column: 1 / -1; grid-row: 1;
    width: 86px; height: 86px; margin: 0 auto 42px;
    background: url('../img/javier-alvarez-mark-v12.svg') center / contain no-repeat;
    animation: scene-arrival 1700ms ease-in-out infinite alternate;
}
.scene-load-status { grid-column: 1; grid-row: 2; }
.scene-load-percent { grid-column: 2; grid-row: 2; font-variant-numeric: tabular-nums; }
.scene-load-bar { grid-column: 1 / -1; grid-row: 3; height: 2px; overflow: hidden; background: rgb(89 99 104 / 16%); }
.scene-load-bar::before {
    content: ''; display: block; height: 100%; width: 100%; background: #af613e;
    transform: scaleX(var(--scene-load-progress, 0)); transform-origin: left center;
    transition: transform 180ms ease-out;
}
html.story-boot .story-scene[data-renderer='pending'] .scene-fallback,
body.story-ready .story-scene[data-renderer='pending'] .scene-fallback { visibility: hidden; }
html.story-boot .scene-loading[data-state='complete'],
html.story-boot .scene-loading[data-state='ready'],
body.story-ready .scene-loading[data-state='complete'],
body.story-ready .scene-loading[data-state='ready'],
body.story-site .story-scene[data-renderer='webgl'] ~ .scene-loading,
body.story-ready.contact-is-open .scene-loading { opacity: 0; visibility: hidden; }
html.story-boot .scene-loading[data-state='fallback'],
body.story-ready .scene-loading[data-state='fallback'] {
    inset: 96px var(--story-edge, 4vw) auto;
    display: block; padding: 0; background: transparent; font-size: 11px;
}
.scene-loading[data-state='fallback']::before,
.scene-loading[data-state='fallback'] .scene-load-bar,
.scene-loading[data-state='fallback'] .scene-load-percent { display: none; }
@keyframes scene-arrival {
    from { opacity: .55; transform: translateY(4px); }
    to { opacity: 1; transform: translateY(-4px); }
}
@media (max-width: 700px) {
    html.story-boot .scene-loading, body.story-ready .scene-loading { font-size: 11px; }
    .scene-loading::before { width: 72px; height: 72px; margin-bottom: 36px; }
    html.story-boot .scene-loading[data-state='fallback'], body.story-ready .scene-loading[data-state='fallback'] { top: 70px; }
}
@media (prefers-reduced-motion: reduce) {
    .scene-loading::before { animation: none; }
    html.story-boot .scene-loading, body.story-ready .scene-loading, .scene-load-bar::before { transition: none; }
}