/* =========================================================
   LIQUID GLASS PRO — iOS 26 signature effects
   Loaded after liquid-glass.css. Adds:
   1. Animated aurora background (drifting color blobs)
   2. Specular highlight that follows the pointer
   3. Edge refraction rim (lensing illusion + SVG distortion)
   4. Springy "jelly" press micro-animations
   5. Shimmer sweep on primary buttons
   Works together with liquid-glass.js (pointer tracking).
   ========================================================= */

:root {
    /* global light source, updated by liquid-glass.js */
    --lg-light-x: 50%;
    --lg-light-y: 0%;
    --lg-spring: cubic-bezier(0.34, 1.56, 0.64, 1);
}

/* =========================================================
   1. ANIMATED AURORA — slow drifting blobs behind the glass
   ========================================================= */
.app-bg {
    overflow: hidden;
}
.app-bg::before,
.app-bg::after {
    content: "";
    position: absolute;
    width: 55vmax;
    height: 55vmax;
    border-radius: 50%;
    filter: blur(70px);
    opacity: 0.5;
    will-change: transform;
    pointer-events: none;
}
.app-bg::before {
    left: -12vmax;
    top: -14vmax;
    background: radial-gradient(circle at 35% 35%,
        color-mix(in oklab, var(--accent) 55%, transparent),
        transparent 65%);
    animation: lg-drift-a 26s ease-in-out infinite alternate;
}
.app-bg::after {
    right: -16vmax;
    bottom: -18vmax;
    background: radial-gradient(circle at 60% 60%,
        color-mix(in oklab, var(--accent) 30%, #1d4ed8 35%),
        transparent 65%);
    animation: lg-drift-b 34s ease-in-out infinite alternate;
}
@keyframes lg-drift-a {
    0%   { transform: translate(0, 0) scale(1); }
    50%  { transform: translate(9vmax, 6vmax) scale(1.12); }
    100% { transform: translate(3vmax, 12vmax) scale(0.94); }
}
@keyframes lg-drift-b {
    0%   { transform: translate(0, 0) scale(1); }
    50%  { transform: translate(-8vmax, -5vmax) scale(1.1); }
    100% { transform: translate(-14vmax, 2vmax) scale(1.05); }
}

/* =========================================================
   2. SPECULAR HIGHLIGHT — .lg-shine overlay injected by JS
      A soft light spot glides across the glass following
      the pointer, like real glass under a lamp.
   ========================================================= */
.lg-shine {
    position: absolute;
    inset: 0;
    border-radius: inherit;
    pointer-events: none;
    z-index: 0;
    overflow: hidden;
    /* moving light spot */
    background:
        radial-gradient(
            240px 160px at var(--lg-mx, var(--lg-light-x)) var(--lg-my, var(--lg-light-y)),
            rgba(255, 255, 255, 0.14),
            rgba(255, 255, 255, 0.05) 40%,
            transparent 70%
        );
    opacity: 0;
    transition: opacity 0.35s ease;
}
.lg-glass-host { position: relative; }
.lg-glass-host:hover > .lg-shine,
.lg-glass-host.lg-lit > .lg-shine { opacity: 1; }
/* keep the shine behind actual content */
.lg-glass-host > *:not(.lg-shine) { position: relative; z-index: 1; }

/* light themes: softer, warmer glare */
body:is([data-theme="white"], [data-theme="nord"]) .lg-shine {
    background:
        radial-gradient(
            240px 160px at var(--lg-mx, var(--lg-light-x)) var(--lg-my, var(--lg-light-y)),
            rgba(255, 255, 255, 0.65),
            rgba(255, 255, 255, 0.2) 40%,
            transparent 70%
        );
}

/* =========================================================
   3. EDGE REFRACTION — the "liquid" lens rim.
      Layered inset shadows fake light bending at the edges;
      the dock/header additionally get real SVG displacement
      where the browser supports backdrop-filter: url().
   ========================================================= */
.hdr,
.welcome-card,
.dock,
.modal-card,
.modal-content,
.settings-card,
.acc-modal,
.room-hero {
    box-shadow:
        /* top rim catches the light */
        inset 0 1px 0 var(--lg-hi),
        /* inner lens: bright band hugging the edges */
        inset 0 0 18px -6px rgba(255, 255, 255, 0.12),
        inset 1px 0 0 rgba(255, 255, 255, 0.06),
        inset -1px 0 0 rgba(255, 255, 255, 0.06),
        /* bottom shadow inside the glass */
        inset 0 -10px 24px -18px rgba(0, 0, 0, 0.5),
        var(--lg-shadow) !important;
}

/* real refraction where supported — separate rule so an
   unsupported url() simply drops without killing the blur */
@supports (backdrop-filter: blur(1px)) {
    .dock, .hdr {
        backdrop-filter: blur(var(--lg-blur)) saturate(var(--lg-sat));
        -webkit-backdrop-filter: blur(var(--lg-blur)) saturate(var(--lg-sat));
    }
}

/* =========================================================
   4. JELLY PRESS — springy squash on every tappable thing
   ========================================================= */
.btn,
.icon-btn,
.dock-btn,
.room-tab,
.rooms-grid .room-item,
.link-btn,
.tiny-btn,
.acc-btn,
.emoji-trigger,
.attach-trigger {
    transition:
        transform 0.35s var(--lg-spring),
        background 0.2s ease,
        box-shadow 0.25s ease,
        border-color 0.2s ease;
}
.btn:active,
.room-tab:active,
.rooms-grid .room-item:active { transform: scale(0.95); }
.icon-btn:active,
.link-btn:active,
.tiny-btn:active,
.emoji-trigger:active,
.attach-trigger:active { transform: scale(0.88); }
.dock-btn:active { transform: scale(0.82); }

/* hover lift for the primary action */
.btn-primary:hover {
    transform: translateY(-1px);
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.45),
        0 12px 32px -10px color-mix(in oklab, var(--accent) 80%, transparent) !important;
}

/* active dock button glow pulse */
.dock-btn.active, .dock-btn.on {
    animation: lg-glow-pulse 2.4s ease-in-out infinite;
}
@keyframes lg-glow-pulse {
    0%, 100% { box-shadow: inset 0 1px 0 rgba(255,255,255,0.4), 0 4px 14px -4px color-mix(in oklab, var(--accent) 60%, transparent); }
    50%      { box-shadow: inset 0 1px 0 rgba(255,255,255,0.4), 0 4px 22px -2px color-mix(in oklab, var(--accent) 85%, transparent); }
}

/* =========================================================
   5. SHIMMER SWEEP — light streak crosses primary buttons
   ========================================================= */
.btn-primary {
    position: relative;
    overflow: hidden;
}
.btn-primary::after {
    content: "";
    position: absolute;
    top: 0; bottom: 0;
    left: -80%;
    width: 60%;
    background: linear-gradient(
        105deg,
        transparent,
        rgba(255, 255, 255, 0.35) 50%,
        transparent
    );
    transform: skewX(-20deg);
    transition: left 0.6s ease;
    pointer-events: none;
}
.btn-primary:hover::after { left: 130%; }

/* =========================================================
   MODAL ENTRANCE — glass sheets spring up like iOS
   ========================================================= */
.modal-card, .modal-content, .settings-card, .acc-modal {
    animation: lg-sheet-in 0.45s var(--lg-spring);
}
@keyframes lg-sheet-in {
    from { transform: translateY(24px) scale(0.96); opacity: 0; }
    to   { transform: translateY(0) scale(1);       opacity: 1; }
}

/* toast pops in like a Dynamic Island bubble */
.toast { animation: lg-toast-in 0.5s var(--lg-spring); }
@keyframes lg-toast-in {
    from { transform: translateY(-14px) scale(0.9); opacity: 0; }
    to   { transform: translateY(0) scale(1);       opacity: 1; }
}

/* =========================================================
   ACCESSIBILITY — calm everything down when asked
   ========================================================= */
@media (prefers-reduced-motion: reduce) {
    .app-bg::before,
    .app-bg::after,
    .dock-btn.active,
    .dock-btn.on { animation: none; }
    .lg-shine { display: none; }
    .btn-primary::after { display: none; }
    .modal-card, .modal-content, .settings-card, .acc-modal, .toast { animation: none; }
}