/* The public welcome page — the Morph-aperture splash, settled, with a Sign-in link.
   ADAPTED COPY of src/ABox.Client.Ui/wwwroot/css/splash.css: this page is pure static (no
   Blazor, no RCL _content), so it can't pull the shared stylesheet — and it diverges on
   purpose anyway: the intro here never EXITS (no melt/handoff — the page IS the destination),
   it ends settled and reveals the .splash__enter link. Keep the intro sequence/knobs in sync
   with the app's splash.css when that changes.

   The token block below is the minimal slice of the Morph theme (theme.css / theme.dark.css)
   the splash consumes — bg/surface/text/accent + the neumorphic shadow pair. */

:root {
    color-scheme: light dark;

    --bg: #e7ddcd;
    --surface: #ece3d5;
    --text: #4d4434;
    --accent: #6d5efc;
    --shadow-dark:  rgba(166, 143, 108, 0.72);
    --shadow-light: rgba(255, 255, 255, 0.95);
}

:root[data-theme="dark"] {
    color-scheme: dark;

    --bg:           #1b1e24;
    --surface:      #23272f;
    --text:         #e7eaf0;
    --accent:       #8b93ff;
    --shadow-dark:  rgba(0, 0, 0, 0.55);
    --shadow-light: rgba(255, 255, 255, 0.05);
}

html, body {
    margin: 0;
    height: 100%;
    background: var(--bg);
}

#splash {
    /* ---- knobs (see splash.css for the annotated originals) ---------------- */
    --lead-in: 0.25s;
    --spawn-y: -22vh;
    --speck: 20px;
    --pop: 0.5s;
    --pop-ease: cubic-bezier(0.45, 0.05, 0.35, 1);
    --pop-overshoot: 1.6;
    --hold: 0.5s;
    --travel: 1.7s;
    --travel-ease: cubic-bezier(0.4, 0, 0.2, 1);
    --grow-ease: cubic-bezier(0.75, 0, 0.95, 0.12);
    --grow-delay: 0.5s;
    --word-size: clamp(80px, 18vmin, 120px);
    --word-delay: 2.6s;
    --word-dur: 0.7s;
    --word-ease: cubic-bezier(0.33, 0, 0.3, 1);
    --dot-delay: 3.3s;
    --dot-dur: 0.95s;
    /* the welcome addition: when the Sign-in link rises in — just after the dot has opened
       (lead-in 0.25 + dot-delay 3.3 + dot-dur 0.95 ≈ 4.5s, then a small settle beat). */
    --enter-delay: 4.8s;
    --enter-dur: 0.6s;

    --board-size: min(86vw, 80vh, 720px);
    --board-w: var(--board-size);
    --board-h: var(--board-size);
    --board-r: clamp(26px, 5vmin, 44px);
    --speck-shadow:
        3px 3px 7px var(--shadow-dark),
        -3px -3px 7px var(--shadow-light),
        inset 1px 1px 1px rgba(255, 255, 255, 0.5),
        inset -1.5px -1.5px 2px rgba(166, 143, 108, 0.25);
    --board-shadow:
        18px 18px 42px var(--shadow-dark),
        -16px -16px 38px var(--shadow-light),
        inset 2px 2px 4px rgba(255, 255, 255, 0.5),
        inset -3px -3px 7px rgba(166, 143, 108, 0.18);
    /* ----------------------------------------------------------------------- */

    position: fixed;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--bg);
}

/* Off-DOM host for the engrave <filter>; never painted itself. */
.splash__defs {
    position: absolute;
    width: 0;
    height: 0;
    overflow: hidden;
}

/* The board. BASE (un-animated) state is the final, settled board — also what
   prefers-reduced-motion shows. Same intro as the app splash: pop, then glide + grow. */
.splash__board {
    width: var(--board-w);
    height: var(--board-h);
    border-radius: var(--board-r);
    background: var(--surface);
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    box-shadow: var(--board-shadow);
    animation:
        splash-pop var(--pop) linear var(--lead-in) both,
        splash-glide var(--travel) var(--travel-ease) calc(var(--lead-in) + var(--pop) + var(--hold)) forwards,
        splash-grow max(0ms, var(--travel) - var(--grow-delay)) var(--grow-ease) calc(var(--lead-in) + var(--pop) + var(--hold) + var(--grow-delay)) forwards;
}

@keyframes splash-pop {
    0% {
        width: var(--speck); height: var(--speck); border-radius: 50%;
        transform: translate(0, var(--spawn-y)) scale(0);
        opacity: 0;
        box-shadow: var(--speck-shadow);
        animation-timing-function: var(--pop-ease);
    }
    60% {
        width: var(--speck); height: var(--speck); border-radius: 50%;
        transform: translate(0, var(--spawn-y)) scale(var(--pop-overshoot));
        opacity: 1;
        box-shadow: var(--speck-shadow);
        animation-timing-function: cubic-bezier(0.34, 0, 0.4, 1);
    }
    100% {
        width: var(--speck); height: var(--speck); border-radius: 50%;
        transform: translate(0, var(--spawn-y)) scale(1);
        opacity: 1;
        box-shadow: var(--speck-shadow);
    }
}

@keyframes splash-glide {
    0%   { transform: translate(0, var(--spawn-y)); }
    100% { transform: translate(0, 0); }
}

@keyframes splash-grow {
    0% {
        width: var(--speck); height: var(--speck); border-radius: var(--board-r);
        box-shadow: var(--speck-shadow);
    }
    100% {
        width: var(--board-w); height: var(--board-h); border-radius: var(--board-r);
        box-shadow: var(--board-shadow);
    }
}

/* Wordmark — "A" + cutout dot + "Box", baseline-aligned, scales with font-size. */
.splash__word {
    display: inline-flex;
    align-items: baseline;
    gap: 0.06em;
    font: 800 var(--word-size)/1 'Segoe UI', system-ui, sans-serif;
    letter-spacing: 0.01em;
}

.splash__text {
    color: var(--surface);
    filter: url(#splash-engrave);
    animation: splash-fade-in var(--word-dur) var(--word-ease) calc(var(--lead-in) + var(--word-delay)) both;
}

@keyframes splash-fade-in {
    from { opacity: 0; }
    to   { opacity: 1; }
}

/* The dot: Morph's purple cutout, as a circle (see splash.css for the full annotations). */
.splash__dot {
    font-size: 0.75em;
    width: 0.5em;
    height: 0.5em;
    position: relative;
    border-radius: 50%;
    margin-bottom: 0.02em;
    animation: splash-dot-open var(--dot-dur) linear calc(var(--lead-in) + var(--dot-delay)) both;
}

.splash__dot-floor,
.splash__dot-ring {
    position: absolute;
    inset: 0;
    border-radius: 50%;
}

.splash__dot-floor {
    background:
        radial-gradient(120% 120% at 18% 12%, rgba(20, 10, 45, 0.32) 0%, rgba(20, 10, 45, 0) 45%),
        linear-gradient(150deg, rgb(102, 102, 225) 0%, rgb(166, 121, 251) 100%);
}

.splash__dot-ring {
    box-shadow:
        inset 0.11em 0.15em 0.20em rgba(18, 8, 38, 0.9),
        inset 0.05em 0.07em 0.09em rgba(18, 8, 38, 0.7),
        inset -0.11em -0.11em 0.18em rgba(18, 8, 38, 0.06),
        inset -0.03em -0.03em 0.03em rgba(255, 255, 255, 0.4);
}

.splash__dot-ring::before {
    content: "";
    position: absolute;
    inset: -0.04em;
    border-radius: 50%;
    pointer-events: none;
    box-shadow:
        inset 0.05em 0.05em 0 0 rgba(255, 255, 255, 0.5),
        inset -0.05em -0.05em 0 0 rgba(70, 60, 110, 0.3),
        0 0.04em 0.03em rgba(255, 255, 255, 0.4);
}

@keyframes splash-dot-open {
    0%   { transform: scale(0);    animation-timing-function: cubic-bezier(0.2, 0.85, 0.3, 1); }
    17%  { transform: scale(0.32); animation-timing-function: cubic-bezier(0.45, 0, 0.5, 1); }
    32%  { transform: scale(0.2);  animation-timing-function: linear; }
    52%  { transform: scale(0.2);  animation-timing-function: cubic-bezier(0.32, 0.7, 0.4, 1); }
    84%  { transform: scale(1.12); animation-timing-function: cubic-bezier(0.3, 0, 0.45, 1); }
    100% { transform: scale(1); }
}

/* The Sign-in link — a raised Morph control that rises in once the intro has settled. A plain
   <a> (top-level navigation, no JS): Cloudflare Access intercepts it with its login when there's
   no session, or passes straight through to the app when there is. */
.splash__enter {
    position: absolute;
    bottom: 11%;
    left: 50%;
    border-radius: 14px;
    padding: 14px 44px;
    font: 600 clamp(16px, 2.6vmin, 20px)/1 'Segoe UI', system-ui, sans-serif;
    text-decoration: none;
    color: var(--text);
    background: var(--surface);
    box-shadow: 4px 4px 10px var(--shadow-dark), -4px -4px 10px var(--shadow-light);
    animation: splash-enter-in var(--enter-dur) cubic-bezier(0.33, 0, 0.3, 1) var(--enter-delay) both;
}

.splash__enter:hover {
    color: var(--accent);
}

.splash__enter:active {
    box-shadow: inset 3px 3px 7px var(--shadow-dark), inset -3px -3px 7px var(--shadow-light);
}

.splash__enter:focus-visible {
    outline: 2px solid var(--accent);
    outline-offset: 3px;
}

@keyframes splash-enter-in {
    from { opacity: 0; transform: translate(-50%, 14px); }
    to   { opacity: 1; transform: translate(-50%, 0); }
}

/* Reduced motion: skip the whole intro — settled board, wordmark and Sign-in visible at once. */
@media (prefers-reduced-motion: reduce) {
    .splash__board,
    .splash__text,
    .splash__dot,
    .splash__enter {
        animation: none;
    }

    .splash__enter {
        transform: translate(-50%, 0);
    }
}

/* Dark mode: same trade as the app splash — the engrave filter bakes light-surface floods, so
   drop it and render the wordmark as plain light text. */
:root[data-theme="dark"] .splash__text {
    filter: none;
    color: var(--text);
}