/* SnapBrain motion layer — "liquid glass"
   Drifting pastel aurora behind the app, frosted surfaces, springy presses,
   ripples, page/stagger transitions and gentle pointer tilt on cards.
   Loaded after the host stylesheets; motion.js drives the pointer effects.
   Everything here is switched off under prefers-reduced-motion. */

:root {
    --sb-spring: cubic-bezier(0.34, 1.56, 0.64, 1);
    --sb-spring-soft: cubic-bezier(0.25, 1.35, 0.5, 1);
    --sb-glass-bg: rgba(255, 255, 255, 0.62);
    --sb-glass-border: rgba(255, 255, 255, 0.75);
    --sb-glass-highlight: inset 0 1px 0 rgba(255, 255, 255, 0.9);
    --sb-glass-blur: blur(18px) saturate(160%);
    --sb-aurora-1: rgba(45, 212, 191, 0.42);
    --sb-aurora-2: rgba(167, 139, 250, 0.34);
    --sb-aurora-3: rgba(251, 191, 176, 0.38);
    --sb-aurora-4: rgba(125, 211, 252, 0.34);
    --sb-ripple: rgba(255, 255, 255, 0.55);
    --sb-ripple-ink: rgba(15, 118, 110, 0.18);
}

html[data-theme="dark"] {
    --sb-glass-bg: rgba(17, 24, 39, 0.58);
    --sb-glass-border: rgba(148, 163, 184, 0.16);
    --sb-glass-highlight: inset 0 1px 0 rgba(255, 255, 255, 0.06);
    --sb-aurora-1: rgba(20, 184, 166, 0.26);
    --sb-aurora-2: rgba(139, 92, 246, 0.24);
    --sb-aurora-3: rgba(236, 72, 153, 0.14);
    --sb-aurora-4: rgba(56, 189, 248, 0.18);
    --sb-ripple: rgba(255, 255, 255, 0.18);
    --sb-ripple-ink: rgba(45, 212, 191, 0.22);
}

/* ---------- Aurora background ---------- */

/* html keeps the page colour; an opaque body would paint over the z-index:-1 aurora. */
html > body {
    background: transparent;
}

.sb-aurora {
    position: fixed;
    inset: 0;
    z-index: -1;
    overflow: hidden;
    pointer-events: none;
}

.sb-aurora-blob {
    position: absolute;
    width: 46vmax;
    height: 46vmax;
    border-radius: 50%;
    filter: blur(70px);
    opacity: 0.9;
    will-change: transform;
}

.sb-aurora-blob:nth-child(1) {
    top: -14vmax;
    left: -10vmax;
    background: radial-gradient(circle at 40% 40%, var(--sb-aurora-1), transparent 65%);
    animation: sb-aurora-a 26s ease-in-out infinite alternate;
}

.sb-aurora-blob:nth-child(2) {
    top: -8vmax;
    right: -16vmax;
    background: radial-gradient(circle at 50% 50%, var(--sb-aurora-2), transparent 65%);
    animation: sb-aurora-b 32s ease-in-out infinite alternate;
}

.sb-aurora-blob:nth-child(3) {
    bottom: -18vmax;
    left: 10vmax;
    background: radial-gradient(circle at 50% 50%, var(--sb-aurora-3), transparent 65%);
    animation: sb-aurora-c 38s ease-in-out infinite alternate;
}

.sb-aurora-blob:nth-child(4) {
    bottom: -12vmax;
    right: -8vmax;
    width: 34vmax;
    height: 34vmax;
    background: radial-gradient(circle at 50% 50%, var(--sb-aurora-4), transparent 65%);
    animation: sb-aurora-a 30s ease-in-out infinite alternate-reverse;
}

@keyframes sb-aurora-a {
    0% { transform: translate3d(0, 0, 0) scale(1); }
    50% { transform: translate3d(12vw, 8vh, 0) scale(1.15); }
    100% { transform: translate3d(4vw, 18vh, 0) scale(0.95); }
}

@keyframes sb-aurora-b {
    0% { transform: translate3d(0, 0, 0) scale(1); }
    50% { transform: translate3d(-14vw, 12vh, 0) scale(0.9); }
    100% { transform: translate3d(-6vw, 24vh, 0) scale(1.12); }
}

@keyframes sb-aurora-c {
    0% { transform: translate3d(0, 0, 0) scale(1.05); }
    50% { transform: translate3d(10vw, -10vh, 0) scale(0.92); }
    100% { transform: translate3d(22vw, -4vh, 0) scale(1.1); }
}

/* ---------- Frosted shell surfaces ---------- */

.app-shell .app-topbar-back,
.app-shell .app-topbar-dict,
.app-shell .app-topbar-diamond,
.app-theme-toggle-floating,
.app-shell .app-panel,
.app-shell .app-notification-card,
.app-shell .app-loading-card,
.app-shell .app-toast {
    background: var(--sb-glass-bg);
    border-color: var(--sb-glass-border);
    -webkit-backdrop-filter: var(--sb-glass-blur);
    backdrop-filter: var(--sb-glass-blur);
    box-shadow: var(--sb-glass-highlight), var(--sb-shadow);
}

.app-shell .app-overlay,
.app-shell .app-notification-overlay,
.app-shell .app-loading-overlay {
    -webkit-backdrop-filter: blur(10px) saturate(140%);
    backdrop-filter: blur(10px) saturate(140%);
    animation: sb-overlay-in 0.35s var(--sb-ease) both;
}

@keyframes sb-overlay-in {
    from { opacity: 0; -webkit-backdrop-filter: blur(0); backdrop-filter: blur(0); }
    to { opacity: 1; }
}

/* Panels & dialogs pop in on a spring */
.app-shell .app-panel,
.app-shell .app-notification-card,
.app-shell .app-loading-card {
    animation: sb-pop-in 0.55s var(--sb-spring-soft) both;
    transform-origin: 50% 60%;
}

@keyframes sb-pop-in {
    0% { opacity: 0; transform: translateY(24px) scale(0.9); filter: blur(6px); }
    60% { opacity: 1; filter: blur(0); }
    100% { opacity: 1; transform: translateY(0) scale(1); filter: blur(0); }
}

/* Panel children cascade in after the panel lands */
.app-shell .app-panel > * {
    animation: sb-rise 0.45s var(--sb-ease) both;
}

.app-shell .app-panel > *:nth-child(1) { animation-delay: 0.06s; }
.app-shell .app-panel > *:nth-child(2) { animation-delay: 0.1s; }
.app-shell .app-panel > *:nth-child(3) { animation-delay: 0.14s; }
.app-shell .app-panel > *:nth-child(4) { animation-delay: 0.18s; }
.app-shell .app-panel > *:nth-child(5) { animation-delay: 0.22s; }
.app-shell .app-panel > *:nth-child(6) { animation-delay: 0.26s; }
.app-shell .app-panel > *:nth-child(n + 7) { animation-delay: 0.3s; }

@keyframes sb-rise {
    from { opacity: 0; transform: translateY(12px); }
    to { opacity: 1; transform: translateY(0); }
}

/* Toast bounces up from the bottom edge */
.app-shell .app-toast {
    animation: sb-toast-in 0.6s var(--sb-spring) both;
}

@keyframes sb-toast-in {
    0% { opacity: 0; transform: translateY(40px) scale(0.85); }
    100% { opacity: 1; transform: translateY(0) scale(1); }
}

/* ---------- Topbar details ---------- */

/* Avatar: rotating iridescent ring */
.app-shell .app-topbar-avatar {
    position: relative;
    border-color: transparent;
    background:
        linear-gradient(var(--sb-surface-soft), var(--sb-surface-soft)) padding-box,
        conic-gradient(from var(--sb-ring-angle, 0deg), #2dd4bf, #a78bfa, #f9a8d4, #7dd3fc, #2dd4bf) border-box;
    animation: sb-ring-spin 6s linear infinite;
}

@property --sb-ring-angle {
    syntax: "<angle>";
    inherits: false;
    initial-value: 0deg;
}

@keyframes sb-ring-spin {
    to { --sb-ring-angle: 360deg; }
}

/* ---------- Buttons: spring press + ripple ---------- */

.app-shell button,
.app-theme-toggle-floating {
    transition:
        transform 0.45s var(--sb-spring),
        background-color var(--sb-duration) var(--sb-ease),
        border-color var(--sb-duration) var(--sb-ease),
        box-shadow var(--sb-duration) var(--sb-ease),
        color var(--sb-duration) var(--sb-ease);
}

.app-shell button:not(:disabled):hover,
.app-theme-toggle-floating:hover {
    transform: translateY(-2px);
}

.app-shell button:not(:disabled):active,
.app-theme-toggle-floating:active {
    transform: translateY(0) scale(0.95);
    transition-duration: 0.12s;
}

/* Fixed-position clip laid over the pressed element (see motion.js): it never
   depends on the host's classes, which Blazor rewrites on re-render, and a
   fixed box can't add scrollable overflow. */
.sb-ripple-clip {
    position: fixed;
    overflow: hidden;
    pointer-events: none;
    z-index: 3000;
}

.sb-ripple {
    position: absolute;
    border-radius: 50%;
    pointer-events: none;
    transform: translate(-50%, -50%) scale(0);
    background: radial-gradient(circle, var(--sb-ripple) 0%, var(--sb-ripple-ink) 55%, transparent 70%);
    animation: sb-ripple 0.65s var(--sb-ease) forwards;
    z-index: 0;
}

@keyframes sb-ripple {
    to { transform: translate(-50%, -50%) scale(1); opacity: 0; }
}

/* Primary actions get a slow liquid gradient */
.app-shell .app-panel-btn-primary,
.app-shell .sync-btn-primary,
.app-shell .grammar-editor-btn-primary,
.app-shell .practice-next,
.app-shell .result-next,
.app-shell .upsert-save {
    background-image: linear-gradient(120deg, var(--sb-accent) 0%, var(--sb-accent-hover) 40%, #6366f1 100%);
    background-size: 220% 100%;
    animation: sb-liquid 7s ease-in-out infinite alternate;
    box-shadow: 0 8px 22px -8px var(--sb-accent);
}

@keyframes sb-liquid {
    from { background-position: 0% 50%; }
    to { background-position: 100% 50%; }
}

/* Settings switch knob springs across */
.app-shell .app-settings-switch-knob {
    transition: transform 0.5s var(--sb-spring), width 0.2s ease;
}

.app-shell .app-settings-row:active .app-settings-switch-knob {
    width: 25px;
}

/* ---------- Cards: lift & tilt ---------- */

.sb-tilt {
    transform-style: preserve-3d;
    transition: transform 0.5s var(--sb-spring-soft), box-shadow 0.3s var(--sb-ease), border-color 0.2s ease !important;
    transform: perspective(900px) rotateX(var(--sb-rx, 0deg)) rotateY(var(--sb-ry, 0deg)) translateY(var(--sb-lift, 0px));
    will-change: transform;
}

.sb-tilt.sb-tilt-active {
    --sb-lift: -3px;
    transition: transform 0.12s linear, box-shadow 0.3s var(--sb-ease), border-color 0.2s ease !important;
    box-shadow: 0 18px 38px -18px rgba(15, 23, 42, 0.35);
}

.sb-tilt:active {
    --sb-lift: 0px;
    transform: perspective(900px) rotateX(var(--sb-rx, 0deg)) rotateY(var(--sb-ry, 0deg)) scale(0.985);
}

/* ---------- Practice feedback ---------- */

/* Feedback inside the scrolling body must not grow past its box, or a
   scrollbar flashes: correct answers glow instead of scaling up. */
.app-shell .app-body {
    overflow-x: hidden;
}

.app-shell .practice-option.is-correct {
    animation: sb-correct 0.9s var(--sb-ease) both;
    box-shadow: 0 0 0 4px color-mix(in srgb, var(--sb-success) 22%, transparent);
}

@keyframes sb-correct {
    0% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--sb-success) 45%, transparent); }
    100% { box-shadow: 0 0 0 4px color-mix(in srgb, var(--sb-success) 22%, transparent); }
}

.app-shell .practice-option.is-wrong {
    animation: sb-shake 0.5s cubic-bezier(0.36, 0.07, 0.19, 0.97) both;
}

@keyframes sb-shake {
    10%, 90% { transform: translateX(-2px); }
    20%, 80% { transform: translateX(4px); }
    30%, 50%, 70% { transform: translateX(-5px); }
    40%, 60% { transform: translateX(5px); }
}

.app-shell .practice-result {
    animation: sb-fade-scale 0.45s var(--sb-ease) both;
}

@keyframes sb-fade-scale {
    from { opacity: 0; transform: scale(0.97); filter: blur(4px); }
    to { opacity: 1; transform: none; filter: blur(0); }
}

/* Progress bar: liquid fill with a moving sheen */
.app-shell .practice-progress-bar {
    position: relative;
    overflow: hidden;
    background-image: linear-gradient(90deg, var(--sb-accent), var(--sb-accent-hover), #818cf8);
    transition: width 0.7s var(--sb-spring-soft) !important;
}

.app-shell .practice-progress-bar::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.55), transparent);
    transform: translateX(-100%);
    animation: sb-sheen 2.4s ease-in-out infinite;
}

@keyframes sb-sheen {
    to { transform: translateX(100%); }
}

/* ---------- Loading: iridescent morphing bubble ---------- */

.app-shell .app-loading-icon-wrap {
    background: transparent;
    border: 0;
}

.app-shell .app-loading-spinner {
    width: 48px;
    height: 48px;
    border: 0;
    background:
        radial-gradient(circle at 32% 28%, rgba(255, 255, 255, 0.95) 0 8%, transparent 22%),
        conic-gradient(from 0deg, #5eead4, #a78bfa, #f9a8d4, #7dd3fc, #5eead4);
    box-shadow: inset -6px -8px 16px rgba(15, 23, 42, 0.18), inset 4px 6px 12px rgba(255, 255, 255, 0.6), 0 10px 24px -10px #a78bfa;
    animation: sb-blob 3.2s ease-in-out infinite, sb-spin 6s linear infinite;
}

@keyframes sb-blob {
    0%, 100% { border-radius: 50% 50% 50% 50% / 50% 50% 50% 50%; }
    25% { border-radius: 58% 42% 55% 45% / 45% 58% 42% 55%; }
    50% { border-radius: 42% 58% 45% 55% / 58% 42% 55% 45%; }
    75% { border-radius: 55% 45% 42% 58% / 42% 55% 58% 45%; }
}

.app-shell .app-loading-helper-dots span {
    animation: sb-dot-pulse 1.2s ease-in-out infinite;
}

.app-shell .app-loading-helper-dots span:nth-child(2) { animation-delay: 0.15s; }
.app-shell .app-loading-helper-dots span:nth-child(3) { animation-delay: 0.3s; }

/* ---------- Reduced motion ---------- */

@media (prefers-reduced-motion: reduce) {
    .sb-aurora-blob,
    .app-shell .app-topbar-avatar,
    .app-shell .practice-progress-bar::after {
        animation: none !important;
    }

    .sb-tilt {
        transform: none !important;
    }

    .sb-ripple {
        display: none;
    }
}