/* OTB Logo Motion — splash, header logo roll, button behaviour.
   White Rabbit for On The Ball Property Management. */

/* ============ Splash overlay ============ */
.otb-splash {
    position: fixed; inset: 0; z-index: 999999;
    display: none;
    align-items: center; justify-content: center;
    background: var(--otb-splash-bg, #fff);
    color: var(--otb-splash-fg, #000);
}
html.otb-splash-on .otb-splash { display: flex; }
html.otb-splash-done .otb-splash { display: none; }
.otb-splash.is-leaving { transition: opacity 0.45s ease; opacity: 0; }

.otb-splash-lockup { position: relative; width: min(320px, 62vw); aspect-ratio: 302.1473 / 101.5526; }
.otb-splash-ball { position: absolute; top: 0; left: 0; height: 100%; aspect-ratio: 1 / 1; will-change: transform; }
.otb-splash-ball svg { display: block; width: 100%; height: 100%; overflow: visible; }
.otb-splash-ball .otb-spin { transform-box: fill-box; transform-origin: 50% 50%; will-change: transform; }
/* wordmark bbox starts at x=116.4733 of the primary logo viewBox */
.otb-splash-word {
    position: absolute; top: 0; right: 0; height: 100%; width: 61.45%;
    clip-path: inset(-5% 100% -5% -2%);
    will-change: clip-path;
}
.otb-splash-word svg { display: block; width: 100%; height: 100%; overflow: visible; }
.otb-splash-word.is-revealed {
    clip-path: inset(-5% -2% -5% -2%);
    transition: clip-path 0.55s cubic-bezier(.4, 0, .2, 1);
}
/* hide the ball until JS positions it, so it never flashes at centre pre-roll */
html.otb-splash-roll .otb-splash-ball { visibility: hidden; }
html.otb-splash-roll .otb-splash-ball.is-ready { visibility: visible; }

/* ============ Header logo (inline swap) ============ */
.otb-logo-inline { display: block; color: #000; }
.otb-logo-inline svg { display: block; width: 100%; height: auto; overflow: visible; }
.otb-logo-inline .otb-ball { transform-box: fill-box; transform-origin: 50% 50%; will-change: transform; }

@media (prefers-reduced-motion: reduce) {
    .otb-splash-word.is-revealed { transition: none; }
}