/*
 * The Sadan mark, alive on hover — the one stylesheet for every place it
 * appears: the React SadanLogo (Components/UI/SadanLogo.jsx) and the Blade
 * <x-sadan-logo> (login, auth cards, boot splash, admin pages). Loaded by
 * layouts/inertia.blade.php and by the Blade component itself.
 */
.sadan-logo { display: block; overflow: visible; cursor: default; }
.sadan-logo * { transform-box: fill-box; transform-origin: center; }
.sadan-logo .sl-whole { transform-box: view-box; transform-origin: 137.5px 137.5px; }
.sadan-logo .sl-word { color: #223f5a; }
:root[data-theme="dark"] .sadan-logo .sl-word,
.sadan-logo--on-dark .sl-word { color: #ffffff !important; }
.sadan-logo--on-light .sl-word { color: #223f5a !important; }

/* The root's own animation only times the sequence (nothing visible changes). */
.sadan-logo--full.is-playing { animation: sl-timer 2.1s linear; }
.sadan-logo--icon.is-playing { animation: sl-timer 1.85s linear; }
@keyframes sl-timer { from { opacity: 1; } to { opacity: 1; } }

/* full lockup: the icon gathers, SADAN steps out, INVESTMENT settles */
.sadan-logo.is-playing .sl-icon { animation: sl-pop .7s cubic-bezier(.2,.9,.3,1.3) both; }
.sadan-logo.is-playing .sl-word { animation: sl-step 1s .55s cubic-bezier(.2,.8,.2,1) both; }
.sadan-logo.is-playing .sl-invest { animation: sl-settle .8s 1.25s ease-out both; }
@keyframes sl-pop { from { transform: scale(0); opacity: 0; } }
@keyframes sl-step { from { transform: translateX(-90px); opacity: 0; clip-path: inset(0 100% 0 0); } to { clip-path: inset(0 0 0 0); } }
@keyframes sl-settle { from { transform: translateY(14px); opacity: 0; letter-spacing: .4em; } }

/* icon alone: the closed square turns into the diamond and opens its doors */
.sadan-logo--icon.is-playing .sl-whole { animation: sl-turn 1.1s cubic-bezier(.3,1.3,.4,1) both; }
.sadan-logo--icon.is-playing .sl-door { animation: sl-door .55s 1s cubic-bezier(.3,1.4,.4,1) both; }
.sadan-logo--icon.is-playing .sl-d2 { animation-delay: 1.08s; }
.sadan-logo--icon.is-playing .sl-d3 { animation-delay: 1.16s; }
.sadan-logo--icon.is-playing .sl-d4 { animation-delay: 1.24s; }
@keyframes sl-turn { from { transform: rotate(45deg) scale(.55); opacity: 0; } 60% { opacity: 1; } }
@keyframes sl-door { from { transform: scale(0); } }

@media (prefers-reduced-motion: reduce) {
    .sadan-logo.is-playing, .sadan-logo.is-playing * { animation: none !important; }
}