@import "tailwindcss";
@import "./tokens/primitives.css";
@import "./tokens/semantic.css";

/* Studio keeps live surfaces mounted. Motion follows selection and
   disclosure state without interpolating pointer-driven geometry. */
.studio-tab-indicator {
    transition: transform 200ms var(--ease-silk), width 200ms var(--ease-silk);
}

.studio-workspace[data-switch="1"] .studio-zone-content {
    animation: studio-settle-a 160ms var(--ease-silk);
}
.studio-workspace[data-switch="2"] .studio-zone-content {
    animation: studio-settle-b 160ms var(--ease-silk);
}
@keyframes studio-settle-a { from { opacity: 0.65; } to { opacity: 1; } }
@keyframes studio-settle-b { from { opacity: 0.65; } to { opacity: 1; } }

.studio-workspace[data-dragging="true"] .studio-zone-content {
    animation: none;
}

.studio-disclosure {
    display: grid;
    grid-template-rows: 0fr;
    opacity: 0;
    transition: grid-template-rows 200ms var(--ease-silk), opacity 160ms var(--ease-silk);
}
.studio-disclosure[data-open="true"] {
    grid-template-rows: 1fr;
    opacity: 1;
}

.studio-composition-panel,
.studio-device-drawer {
    transition: translate 240ms var(--ease-silk);
}
.studio-composition-scrim {
    transition: opacity 200ms var(--ease-silk);
}

@media (prefers-reduced-motion: reduce) {
    .studio-workspace[data-switch] .studio-zone-content { animation: none; }
    .studio-tab-indicator,
    .studio-disclosure,
    .studio-composition-panel,
    .studio-composition-scrim,
    .studio-device-drawer,
    .studio-workspace [aria-expanded] svg { transition: none; }
}

/* ── Toasts ──────────────────────────────────────────────────────────────

   Toasts float at the bottom right of the content area, clear of the
   sidebar on the left. The transform makes the host the containing block
   for leptoaster's fixed containers, so on phones they sit above the
   mobile tab bar instead of covering it.

   The theme variables live on the host, not :root: leptoaster's Toaster
   renders its own <style> that re-declares every --leptoaster-* variable
   on :root after this sheet, so a :root theme here never applies. Each
   level is Prism glass tinted by its status token, which already flips
   with the theme, so one block serves both. */
.toast-host {
    --leptoaster-font-family: var(--font-sans);
    --leptoaster-font-size: 13px;
    --leptoaster-line-height: 1.4;
    --leptoaster-font-weight: 500;
    --leptoaster-progress-height: 2px;
    --leptoaster-z-index: 9990;

    --leptoaster-success-background-color: color-mix(in oklab, var(--status-success) 12%, var(--glass-bg-dense));
    --leptoaster-success-border-color: color-mix(in oklab, var(--status-success) 35%, transparent);
    --leptoaster-success-text-color: var(--status-success);

    --leptoaster-error-background-color: color-mix(in oklab, var(--status-error) 12%, var(--glass-bg-dense));
    --leptoaster-error-border-color: color-mix(in oklab, var(--status-error) 35%, transparent);
    --leptoaster-error-text-color: var(--status-error);

    --leptoaster-info-background-color: color-mix(in oklab, var(--status-info) 12%, var(--glass-bg-dense));
    --leptoaster-info-border-color: color-mix(in oklab, var(--status-info) 35%, transparent);
    --leptoaster-info-text-color: var(--status-info);

    --leptoaster-warn-background-color: color-mix(in oklab, var(--status-warning) 12%, var(--glass-bg-dense));
    --leptoaster-warn-border-color: color-mix(in oklab, var(--status-warning) 35%, transparent);
    --leptoaster-warn-text-color: var(--status-warning);

    position: fixed;
    inset: 0;
    z-index: var(--leptoaster-z-index);
    pointer-events: none;
    transform: translateZ(0);
}

.toast-host > div {
    pointer-events: auto;
}

/* Leptoaster styles each toast inline; the radius needs !important to
   match the rest of the floating chrome. */
.toast-host .toast {
    border-radius: var(--radius-xl) !important;
    backdrop-filter: blur(var(--glass-blur)) saturate(var(--glass-saturate));
    -webkit-backdrop-filter: blur(var(--glass-blur)) saturate(var(--glass-saturate));
    box-shadow: 0 8px 24px oklch(0 0 0 / 0.25);
}

@media (width < 48rem) {
    .toast-host {
        bottom: calc(var(--phone-nav-h) + var(--phone-strip-h) + var(--phone-strip-gap) +
                env(safe-area-inset-bottom));
    }
}

/* ── Phone shell ──────────────────────────────────────────────────────────

   Below md the bottom tab bar replaces the sidebar, and the now-playing
   strip docks just above it. `<main>` pads by both, plus the home
   indicator inset, so no content ever hides behind them. */
:root {
    --phone-nav-h: 3.5rem;
    --phone-strip-h: 3rem;
    --phone-strip-gap: 0.375rem;
}

@media (width < 48rem) {
    .shell-main {
        padding-bottom: calc(var(--phone-nav-h) + var(--phone-strip-h) +
                        var(--phone-strip-gap) + env(safe-area-inset-bottom));
    }
}

.phone-now-playing {
    bottom: calc(var(--phone-nav-h) + env(safe-area-inset-bottom));
    padding-bottom: var(--phone-strip-gap);
}

/* ── Base Resets ─────────────────────────────────────────────────────────── */

html {
    font-size: 112.5%;
    font-feature-settings: 'cv02', 'cv03', 'cv04', 'cv11';
    text-rendering: optimizeLegibility;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

body {
    background: var(--surface-base);
    color: var(--text-primary);
    letter-spacing: -0.01em;
    line-height: 1.5;
}

/* Headlines — tighter tracking */
h1, h2, h3 {
    letter-spacing: -0.02em;
    line-height: 1.2;
}

/* Monospace elements — no ligatures */
kbd, code, .font-mono {
    font-feature-settings: 'liga' 0;
}

/* Tailwind v4 preflight leaves buttons with the default arrow cursor */
button:not(:disabled),
[role="button"]:not(:disabled) {
    cursor: pointer;
}

/* ── Scrollbars ─────────────────────────────────────────────────────────── */

@property --ambient-hue {
    syntax: "<number>";
    inherits: false;
    initial-value: 320;
}

* {
    scrollbar-width: thin;
    scrollbar-color: auto;
}

/* Only actual scroll owners receive the hue. Descendants keep the explicit
   auto value above, including controls with transition-all. Theme channels
   are static; no inherited custom property changes when the hue moves. */
.ambient-scroll {
    scrollbar-color: oklch(var(--scrollbar-l) var(--scrollbar-c) var(--ambient-hue) / var(--scrollbar-alpha)) transparent;
}

*::-webkit-scrollbar {
    width: 5px;
    height: 5px;
}

*::-webkit-scrollbar-track {
    background: transparent;
}

*::-webkit-scrollbar-thumb {
    background: var(--scrollbar-thumb);
    border-radius: 3px;
}

*::-webkit-scrollbar-thumb:hover {
    background: var(--scrollbar-hover);
}

.ambient-scroll::-webkit-scrollbar-thumb {
    --ambient-hue: inherit;
    background: oklch(var(--scrollbar-l) var(--scrollbar-c) var(--ambient-hue) / var(--scrollbar-alpha));
}

.ambient-scroll::-webkit-scrollbar-thumb:hover {
    background: oklch(var(--scrollbar-l) var(--scrollbar-hover-c) var(--ambient-hue) / var(--scrollbar-hover-alpha));
}

/* ── Slider Track Styling ────────────────────────────────────────────────── */

input[type="range"] {
    -webkit-appearance: none;
    background: transparent;
}

input[type="range"]::-webkit-slider-runnable-track {
    height: 5px;
    background: var(--border-subtle);
    border-radius: 3px;
}

input[type="range"]::-moz-range-track {
    height: 5px;
    background: var(--border-subtle);
    border-radius: 3px;
    border: none;
}

input[type="range"]::-webkit-slider-thumb {
    -webkit-appearance: none;
    width: 14px;
    height: 14px;
    border-radius: 50%;
    background: var(--accent);
    margin-top: -5.5px;
    cursor: pointer;
    box-shadow: 0 0 10px var(--glow-accent-50), 0 0 3px var(--glow-accent-80);
    transition: box-shadow 0.2s ease, transform 0.15s ease;
}

input[type="range"]::-moz-range-thumb {
    width: 14px;
    height: 14px;
    border-radius: 50%;
    background: var(--accent);
    cursor: pointer;
    border: none;
    box-shadow: 0 0 10px var(--glow-accent-50), 0 0 3px var(--glow-accent-80);
}

@media (hover: hover) {
    input[type="range"]:hover::-webkit-slider-thumb {
        box-shadow: 0 0 16px var(--glow-accent-70), 0 0 4px var(--glow-accent);
        transform: scale(1.15);
    }
}

@media (hover: hover) {
    input[type="range"]:hover::-moz-range-thumb {
        box-shadow: 0 0 16px var(--glow-accent-70), 0 0 4px var(--glow-accent);
    }
}

/* ── Color Channel Sliders ───────────────────────────────────────────────── */

input[type="range"].color-channel {
    height: 10px;
    border-radius: 5px;
}

input[type="range"].color-channel::-webkit-slider-runnable-track {
    height: 10px;
    background: transparent;
    border-radius: 5px;
}

input[type="range"].color-channel::-moz-range-track {
    height: 10px;
    background: transparent;
    border-radius: 5px;
    border: none;
}

input[type="range"].color-channel::-webkit-slider-thumb {
    margin-top: -2px;
    box-shadow: 0 0 8px rgba(255,255,255,0.3), 0 0 2px rgba(255,255,255,0.6);
    background: white;
}

input[type="range"].color-channel::-moz-range-thumb {
    box-shadow: 0 0 8px rgba(255,255,255,0.3), 0 0 2px rgba(255,255,255,0.6);
    background: white;
}

/* ── Color Picker (native fallback) ──────────────────────────────────────── */

input[type="color"] {
    -webkit-appearance: none;
    border: none;
    padding: 0;
}

input[type="color"]::-webkit-color-swatch-wrapper {
    padding: 2px;
}

input[type="color"]::-webkit-color-swatch {
    border: none;
    border-radius: 4px;
}

/* ── Selection ───────────────────────────────────────────────────────────── */

::selection {
    background: var(--selection-bg);
    /* text-primary is near-white in dark and near-black in light, so
       selected text stays readable over the translucent purple in both */
    color: var(--text-primary);
}

/* ── Focus rings — glow, never outline ──────────────────────────────────── */

:focus-visible {
    outline: none;
    box-shadow: 0 0 0 2px var(--glow-focus), 0 0 12px var(--glow-focus-soft);
}

/* ── Custom Select ─────────────────────────────────────────────────────── */

.select-silk {
    appearance: none;
    -webkit-appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='rgba(139,133,160,0.5)' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 8px center;
    background-size: 12px;
    padding-right: 26px;
    transition: border-color 0.25s var(--ease-silk),
                box-shadow 0.35s var(--ease-silk),
                background-color 0.2s ease;
}
@media (hover: hover) {
    .select-silk:hover:not(:disabled) {
        border-color: var(--accent-muted);
        background-color: rgba(255, 255, 255, 0.03);
        background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='rgba(225,53,255,0.6)' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
    }
}
.select-silk:focus {
    border-color: var(--accent-muted);
    box-shadow: 0 0 0 1px var(--accent-muted),
                0 0 16px rgba(225, 53, 255, 0.1);
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='rgba(225,53,255,0.7)' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
}
.select-silk:disabled {
    opacity: 0.4;
    cursor: not-allowed;
}

/* ── Custom Select Trigger ──────────────────────────────────────────── */

.select-silk-trigger {
    transition: border-color 0.25s var(--ease-silk),
                box-shadow 0.35s var(--ease-silk),
                background-color 0.2s ease;
}
@media (hover: hover) {
    .select-silk-trigger:hover {
        border-color: var(--accent-muted);
        background-color: rgba(255, 255, 255, 0.03);
    }
}
.select-silk-trigger:focus-visible {
    outline: none;
    border-color: var(--accent-muted);
    box-shadow: 0 0 0 1px var(--accent-muted),
                0 0 16px rgba(225, 53, 255, 0.1);
}

/* ── Dropdown Items ────────────────────────────────────────────────────── */

.dropdown-option {
    transition: background-color 0.18s var(--ease-silk),
                color 0.18s var(--ease-silk),
                padding-left 0.2s var(--ease-spring),
                box-shadow 0.25s ease;
    position: relative;
}
@media (hover: hover) {
    .dropdown-option:hover {
        background: linear-gradient(90deg, rgba(225, 53, 255, 0.06) 0%, transparent 80%);
        color: var(--text-primary);
        padding-left: 14px;
    }
}
.dropdown-option:active {
    background: linear-gradient(90deg, rgba(225, 53, 255, 0.1) 0%, transparent 60%);
}
.dropdown-option-active {
    color: var(--text-primary);
    background: linear-gradient(90deg, rgba(225, 53, 255, 0.08) 0%, transparent 70%);
}
/* Keyboard-highlighted option (SilkSelect arrows) — mirrors :hover so the
   two pointers feel identical. */
.dropdown-option-keyboard {
    background: linear-gradient(90deg, rgba(225, 53, 255, 0.06) 0%, transparent 80%);
    color: var(--text-primary);
    padding-left: 14px;
}
.dropdown-option + .dropdown-option {
    border-top: 1px solid rgba(255, 255, 255, 0.02);
}

/* Preset-specific dropdown items — each row is painted with its own color,
   sourced from the preset's control values (or a stable hash fallback) via
   the `--item-rgb` custom property set inline on the element. */

.preset-option {
    --item-rgb: 225, 53, 255;
    position: relative;
    background: linear-gradient(90deg,
        rgba(var(--item-rgb), 0.05) 0%,
        transparent 78%);
    transition: background 0.22s var(--ease-silk),
                padding-left 0.22s var(--ease-spring),
                color 0.18s var(--ease-silk);
}
.preset-option::before {
    content: "";
    position: absolute;
    left: 6px;
    top: 8px;
    bottom: 8px;
    width: 3px;
    border-radius: 999px;
    background: rgb(var(--item-rgb));
    box-shadow: 0 0 8px rgba(var(--item-rgb), 0.55);
    opacity: 0.72;
    transition: opacity 0.22s var(--ease-silk),
                width 0.22s var(--ease-spring),
                box-shadow 0.22s var(--ease-silk);
}
@media (hover: hover) {
    .preset-option:hover {
        background: linear-gradient(90deg,
            rgba(var(--item-rgb), 0.16) 0%,
            rgba(var(--item-rgb), 0.02) 80%);
        padding-left: 20px;
        color: var(--text-primary);
    }
}
@media (hover: hover) {
    .preset-option:hover::before {
        opacity: 1;
        width: 4px;
        box-shadow: 0 0 12px rgba(var(--item-rgb), 0.85),
                    0 0 2px rgba(var(--item-rgb), 1);
    }
}
.preset-option:active {
    background: linear-gradient(90deg,
        rgba(var(--item-rgb), 0.22) 0%,
        rgba(var(--item-rgb), 0.04) 75%);
}
.preset-option-active {
    color: var(--text-primary);
    background: linear-gradient(90deg,
        rgba(var(--item-rgb), 0.22) 0%,
        rgba(var(--item-rgb), 0.04) 85%);
    padding-left: 18px;
}
.preset-option-active::before {
    opacity: 1;
    width: 4px;
    box-shadow: 0 0 14px rgba(var(--item-rgb), 0.95),
                0 0 2px rgba(var(--item-rgb), 1);
}
.preset-option + .preset-option {
    border-top: 1px solid rgba(255, 255, 255, 0.02);
}

/* ── Dropdown Scrollbars ───────────────────────────────────────────────── */

.scrollbar-dropdown {
    scrollbar-width: thin;
    scrollbar-color: rgba(225, 53, 255, 0.35) rgba(10, 9, 16, 0.18);
}
.scrollbar-dropdown::-webkit-scrollbar {
    width: 7px;
}
.scrollbar-dropdown::-webkit-scrollbar-track {
    background: rgba(10, 9, 16, 0.18);
    border-radius: 999px;
}
.scrollbar-dropdown::-webkit-scrollbar-thumb {
    background: linear-gradient(
        180deg,
        rgba(225, 53, 255, 0.42) 0%,
        rgba(128, 255, 234, 0.3) 100%
    );
    border-radius: 999px;
    border: 1px solid rgba(255, 255, 255, 0.04);
}
.scrollbar-dropdown::-webkit-scrollbar-thumb:hover {
    background: linear-gradient(
        180deg,
        rgba(225, 53, 255, 0.56) 0%,
        rgba(128, 255, 234, 0.4) 100%
    );
}

/* ── Toolbar Action Buttons ────────────────────────────────────────────── */

.toolbar-action {
    transition: transform 0.2s var(--ease-spring),
                color 0.2s var(--ease-silk),
                background-color 0.2s var(--ease-silk),
                box-shadow 0.25s var(--ease-silk),
                opacity 0.2s ease;
}
@media (hover: hover) {
    .toolbar-action:hover:not(:disabled) {
        transform: scale(1.12);
        box-shadow: 0 0 12px currentColor;
    }
}
.toolbar-action:active:not(:disabled) {
    transform: scale(0.88);
    transition-duration: 0.08s;
}
.toolbar-action:disabled {
    opacity: 0.15;
    cursor: not-allowed;
    transform: none;
}

/* ── Range Slider ──────────────────────────────────────────────────────── */

input[type="range"].slider-silk {
    -webkit-appearance: none;
    appearance: none;
    height: 4px;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.06);
    outline: none;
    transition: background 0.2s ease;
}
@media (hover: hover) {
    input[type="range"].slider-silk:hover {
        background: rgba(255, 255, 255, 0.1);
    }
}
input[type="range"].slider-silk::-webkit-slider-thumb {
    -webkit-appearance: none;
    width: 14px;
    height: 14px;
    border-radius: 50%;
    background: white;
    border: none;
    box-shadow: 0 0 8px rgba(var(--glow-rgb, 225, 53, 255), 0.3),
                0 1px 4px rgba(0, 0, 0, 0.3);
    cursor: pointer;
    transition: transform 0.2s var(--ease-spring),
                box-shadow 0.25s ease;
}
@media (hover: hover) {
    input[type="range"].slider-silk::-webkit-slider-thumb:hover {
        transform: scale(1.2);
        box-shadow: 0 0 14px rgba(var(--glow-rgb, 225, 53, 255), 0.5),
                    0 1px 6px rgba(0, 0, 0, 0.3);
    }
}
input[type="range"].slider-silk::-webkit-slider-thumb:active {
    transform: scale(0.95);
    box-shadow: 0 0 18px rgba(var(--glow-rgb, 225, 53, 255), 0.6),
                0 0 4px rgba(0, 0, 0, 0.4);
    transition-duration: 0.08s;
}
input[type="range"].slider-silk::-moz-range-thumb {
    width: 14px;
    height: 14px;
    border-radius: 50%;
    background: white;
    border: none;
    box-shadow: 0 0 8px rgba(var(--glow-rgb, 225, 53, 255), 0.3),
                0 1px 4px rgba(0, 0, 0, 0.3);
    cursor: pointer;
    transition: transform 0.2s var(--ease-spring),
                box-shadow 0.25s ease;
}
@media (hover: hover) {
    input[type="range"].slider-silk::-moz-range-thumb:hover {
        transform: scale(1.2);
        box-shadow: 0 0 14px rgba(var(--glow-rgb, 225, 53, 255), 0.5),
                    0 1px 6px rgba(0, 0, 0, 0.3);
    }
}
input[type="range"].slider-silk::-moz-range-track {
    height: 4px;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.06);
}

/* ── Entrance Animations ─────────────────────────────────────────────────── */

@keyframes enter-up {
    from { opacity: 0; transform: translateY(10px); }
    to   { opacity: 1; transform: translateY(0); }
}

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

@keyframes enter-right {
    from { opacity: 0; transform: translateX(16px); }
    to   { opacity: 1; transform: translateX(0); }
}

@keyframes enter-left {
    from { opacity: 0; transform: translateX(-16px); }
    to   { opacity: 1; transform: translateX(0); }
}

@keyframes enter-scale {
    from { opacity: 0; transform: scale(0.94); }
    to   { opacity: 1; transform: scale(1); }
}

/* The color picker popover's inline `left` is already centered on its
   swatch and clamped to the viewport, so the entrance must not shift it. */
@keyframes pickerIn {
    from { opacity: 0; transform: scale(0.92) translateY(6px); }
    to   { opacity: 1; transform: scale(1) translateY(0); }
}

@keyframes enter-pop {
    0%   { opacity: 0; transform: scale(0.8); }
    70%  { transform: scale(1.04); }
    100% { opacity: 1; transform: scale(1); }
}

@keyframes enter-down {
    from { opacity: 0; transform: translateY(-8px); }
    to   { opacity: 1; transform: translateY(0); }
}

@keyframes swapIn {
    0%   { opacity: 0; transform: scale(0.96) translateY(2px); filter: blur(2px); }
    100% { opacity: 1; transform: scale(1) translateY(0); filter: blur(0); }
}

@keyframes slideUp {
    from { opacity: 0; transform: translateY(6px) scale(0.96); }
    to   { opacity: 1; transform: translateY(0) scale(1); }
}

/* Cinematic overlay-text swap — used by the preview cabinet when the
   active effect changes. Fades up from below so the new title settles
   into focus instead of hard-cutting. Uses opacity + transform only;
   `filter` would create a stacking context around each text block and
   trigger compositor reshuffling on canvas siblings. */
@keyframes effectSwap {
    0%   { opacity: 0; transform: translateY(8px); }
    100% { opacity: 1; transform: translateY(0); }
}

/* Canvas ignition — dark curtain that fades out over the canvas so the
   preview appears to bloom in from dim. Applied to a dedicated absolute
   overlay rather than the canvas wrapper, so `filter` never touches the
   canvas element or its absolute siblings (that caused stacking-context
   churn and layer reshuffling on effect swap). Mid-way the curtain tints
   to the new accent for a brief ignition flash. */
@keyframes canvasIgnite {
    0%   { opacity: 0.62; }
    35%  { opacity: 0.38; }
    100% { opacity: 0; }
}

/* Cabinet ignition — ambient glow bloom layered behind the cabinet
   border when the effect changes. Uses `--glow-rgb` so the pulse takes
   the new effect's accent color, matching the border-top and palette. */
@keyframes cabinetIgnite {
    0%   { box-shadow: 0 0 0 rgba(var(--glow-rgb, 225, 53, 255), 0); }
    35%  { box-shadow: 0 0 42px rgba(var(--glow-rgb, 225, 53, 255), 0.32),
                       0 0 8px rgba(var(--glow-rgb, 225, 53, 255), 0.48); }
    100% { box-shadow: 0 0 0 rgba(var(--glow-rgb, 225, 53, 255), 0); }
}

/* ── Ambient / Continuous Animations ─────────────────────────────────────── */

@keyframes neonGlow {
    from { filter: drop-shadow(0 0 8px var(--glow-accent-50)); }
    to   { filter: drop-shadow(0 0 16px var(--glow-accent-70)); }
}

@keyframes electricPulse {
    0%, 100% { opacity: 1; transform: scale(1); }
    50%      { opacity: 0.85; transform: scale(1.02); }
}

@keyframes breathe {
    0%, 100% { opacity: 0.72; transform: scale(0.985); }
    50%      { opacity: 1; transform: scale(1.015); }
}

@keyframes glowPulse {
    0%, 100% { opacity: 0.5; }
    50%      { opacity: 1; }
}

@keyframes shimmer {
    0% { background-position: -200% 0; }
    100% { background-position: 200% 0; }
}

@keyframes subtlePulse {
    0%, 100% { opacity: 0.6; }
    50%      { opacity: 1; }
}

@keyframes borderGlow {
    0%, 100% { border-color: var(--accent-muted); }
    50%      { border-color: var(--accent-hover); }
}

@keyframes dotPulse {
    0%, 100% { transform: scale(1); opacity: 0.8; }
    50%      { transform: scale(1.3); opacity: 1; }
}

@keyframes glowRingIn {
    0%   { box-shadow: 0 0 0 2px transparent, 0 0 0 transparent; }
    40%  { box-shadow: 0 0 0 2px var(--accent-muted), 0 0 20px var(--glow-accent-50); }
    100% { box-shadow: 0 0 0 2px var(--accent-muted), 0 0 8px rgba(225, 53, 255, 0.12); }
}

@keyframes edgeShimmer {
    0%   { border-color: var(--border-subtle); }
    25%  { border-color: var(--accent-muted); }
    50%  { border-color: var(--accent-hover); }
    75%  { border-color: var(--accent-muted); }
    100% { border-color: var(--border-subtle); }
}

@keyframes glowReveal {
    0%   { opacity: 0; box-shadow: 0 0 0 rgba(225, 53, 255, 0); }
    50%  { opacity: 1; box-shadow: 0 0 24px rgba(225, 53, 255, 0.15); }
    100% { opacity: 1; box-shadow: 0 0 12px rgba(225, 53, 255, 0.08); }
}

/* Vertical equalizer bar — scales from a short resting height up to full. */
@keyframes eqBar {
    0%, 100% { transform: scaleY(0.28); }
    20%      { transform: scaleY(0.95); }
    45%      { transform: scaleY(0.45); }
    70%      { transform: scaleY(1);    }
    85%      { transform: scaleY(0.55); }
}

/* Spring-loaded tab hold: a ring that fills while a drag rests on a tab.
   The SVG circle uses pathLength="1", so the dash runs from 1 to 0. */
@keyframes spring-fill {
    from { stroke-dashoffset: 1; }
    to   { stroke-dashoffset: 0; }
}

/* ── Animation Utility Classes ───────────────────────────────────────────── */

/* Hold the entrance pose during stagger delays, then release its transform
   and opacity so settled content no longer retains compositor layers. */

.animate-enter-up       { animation: enter-up 0.35s var(--ease-silk) backwards; }
.animate-enter-fade     { animation: enter-fade 0.25s var(--ease-silk) backwards; }
.animate-enter-right    { animation: enter-right 0.35s var(--ease-silk) backwards; }
.animate-enter-left     { animation: enter-left 0.35s var(--ease-silk) backwards; }
.animate-enter-scale    { animation: enter-scale 0.25s var(--ease-spring) backwards; }
.animate-picker-in      { animation: pickerIn 0.2s var(--ease-spring) both; }
.animate-enter-pop      { animation: enter-pop 0.35s var(--ease-spring) backwards; }
.animate-enter-down     { animation: enter-down 0.3s var(--ease-silk) backwards; }
.animate-breathe        { animation: breathe 3s ease-in-out infinite; will-change: opacity, transform; }
.animate-border-glow    { animation: borderGlow 2s ease-in-out infinite; }
.animate-edge-shimmer   { animation: edgeShimmer 3s ease-in-out infinite; }
.animate-glow-reveal    { animation: glowReveal 0.5s var(--ease-silk) both; }
.animate-swap-in        { animation: swapIn 0.22s var(--ease-silk) backwards; }
.animate-spring-fill    { animation: spring-fill 0.5s linear both; }

/* Effect-swap stagger — three variants with cascading delays so the
   title lands first, then the description, then the category chip. */
.animate-effect-swap    { animation: effectSwap 0.5s var(--ease-silk) both; }
.animate-effect-swap-2  { animation: effectSwap 0.5s var(--ease-silk) 0.07s both; }
.animate-effect-swap-3  { animation: effectSwap 0.5s var(--ease-silk) 0.14s both; }

/* Preview ignition — canvas focus pull and cabinet glow bloom. No
   fill-mode so after the pulse the element reverts to its base styles
   (edge-glow, default filter). */
.animate-canvas-ignite {
    animation: canvasIgnite 0.55s var(--ease-silk);
    background: rgb(var(--glow-rgb, 225, 53, 255));
    will-change: opacity;
}
.animate-cabinet-ignite { animation: cabinetIgnite 0.7s var(--ease-silk); }

/* Crossfade the cabinet's accent-tinted top border when its effect changes. */
.cabinet-accent-transition {
    transition: border-top-color 0.45s var(--ease-silk);
}

.animate-eq-bar {
    animation: eqBar 1.1s ease-in-out infinite;
    transform-origin: bottom;
    will-change: transform;
}

.animate-shimmer {
    background: linear-gradient(
        90deg,
        transparent 0%,
        var(--accent-subtle) 50%,
        transparent 100%
    );
    background-size: 200% 100%;
    animation: shimmer 3s infinite;
}

/* ── Stagger Delays ──────────────────────────────────────────────────────── */

.stagger-1  { animation-delay: 0.03s; }
.stagger-2  { animation-delay: 0.06s; }
.stagger-3  { animation-delay: 0.09s; }
.stagger-4  { animation-delay: 0.12s; }
.stagger-5  { animation-delay: 0.15s; }
.stagger-6  { animation-delay: 0.18s; }
.stagger-7  { animation-delay: 0.21s; }
.stagger-8  { animation-delay: 0.24s; }
.stagger-9  { animation-delay: 0.27s; }
.stagger-10 { animation-delay: 0.30s; }
.stagger-11 { animation-delay: 0.33s; }
.stagger-12 { animation-delay: 0.36s; }

/* ── Interactive Micro-Interactions ───────────────────────────────────────── */

/* Cards: no lift — border brightens, ambient glow emanates, press squishes */
.card-hover {
    transition: transform 0.2s var(--ease-spring),
                border-color 0.25s var(--ease-silk),
                box-shadow 0.35s var(--ease-silk),
                filter 0.25s ease;
}
@media (hover: hover) {
    .card-hover:hover:not(:disabled) {
        border-color: var(--accent-muted);
        box-shadow: 0 0 8px rgba(var(--glow-rgb, 225, 53, 255), 0.18),
                    0 0 24px rgba(var(--glow-rgb, 225, 53, 255), 0.06),
                    inset 0 1px 0 rgba(255, 255, 255, 0.04);
        filter: brightness(1.06);
    }
}
.card-hover:active:not(:disabled) {
    transform: scale(0.97);
    box-shadow: 0 0 6px rgba(var(--glow-rgb, 225, 53, 255), 0.25),
                0 0 16px rgba(var(--glow-rgb, 225, 53, 255), 0.08),
                inset 0 0 12px rgba(var(--glow-rgb, 225, 53, 255), 0.06);
    filter: brightness(1.1);
    transition-duration: 0.08s;
}

/* Buttons: press down, glow brighter on hover */
.btn-press {
    transition: transform 0.15s var(--ease-spring),
                box-shadow 0.2s ease,
                background-color 0.15s ease,
                border-color 0.2s ease,
                color 0.15s ease,
                filter 0.15s ease,
                opacity 0.15s ease;
}
@media (hover: hover) {
    .btn-press:hover:not(:disabled) {
        filter: brightness(1.2);
        box-shadow: 0 0 12px rgba(var(--glow-rgb, 225, 53, 255), 0.08);
    }
}
.btn-press:active:not(:disabled) {
    transform: scale(0.92);
    filter: brightness(0.95);
    box-shadow: inset 0 0 8px rgba(0, 0, 0, 0.15);
}

/* Chips: scale + glow halo */
.chip-interactive {
    transition: transform 0.2s var(--ease-spring),
                box-shadow 0.2s ease,
                background-color 0.2s ease,
                color 0.2s ease,
                border-color 0.2s ease,
                filter 0.2s ease;
}
@media (hover: hover) {
    .chip-interactive:hover {
        transform: scale(1.06);
        filter: brightness(1.25);
        box-shadow: 0 0 12px rgba(var(--glow-rgb, 225, 53, 255), 0.15);
    }
}
.chip-interactive:active { transform: scale(0.96); transition-duration: 0.08s; }

/* Nav items: inner glow, no translate */
.nav-item-hover {
    transition: background-color 0.2s var(--ease-silk),
                color 0.2s ease,
                box-shadow 0.25s ease;
}
@media (hover: hover) {
    .nav-item-hover:hover {
        box-shadow: inset 0 0 24px rgba(var(--glow-rgb, 225, 53, 255), 0.05);
    }
}

/* Player controls: scale + glow halo */
.player-btn {
    transition: transform 0.2s var(--ease-spring),
                color 0.15s ease,
                background-color 0.15s ease,
                filter 0.2s ease;
}
@media (hover: hover) {
    .player-btn:hover {
        transform: scale(1.15);
        filter: drop-shadow(0 0 8px currentColor);
    }
}
.player-btn:active { transform: scale(0.9); transition-duration: 0.08s; }

/* Toggle: track glows when on, thumb gets halo */
.toggle-track {
    transition: background-color 0.3s var(--ease-silk),
                box-shadow 0.3s var(--ease-silk);
}
.toggle-track-on {
    box-shadow: 0 0 14px rgba(var(--glow-rgb, 225, 53, 255), 0.25),
                inset 0 0 8px rgba(var(--glow-rgb, 225, 53, 255), 0.10);
}
.toggle-thumb {
    transition: transform 0.3s var(--ease-spring),
                background-color 0.2s ease,
                box-shadow 0.25s ease;
}
.toggle-thumb-on {
    box-shadow: 0 0 8px rgba(255, 255, 255, 0.4);
}

/* Search input: animated border glow on focus */
.search-glow:focus {
    animation: borderGlow 2s ease-in-out infinite;
}

/* Status dot: alive pulse */
.dot-alive {
    animation: dotPulse 2s ease-in-out infinite;
    will-change: opacity, transform;
}

/* Focus glow ring — pulses once then holds steady */
.glow-ring:focus-visible {
    outline: none;
    animation: glowRingIn 0.4s var(--ease-silk) forwards;
}

/* ── Settings ──────────────────────────────────────────────────────────── */

.settings-card {
    border-radius: var(--radius-xl);
    padding-inline: var(--spacing-lg);
    background: var(--surface-overlay);
    border: 1px solid var(--border-subtle);
    transition: border-color 0.2s ease;
}
@media (hover: hover) {
    .settings-card:hover {
        border-color: var(--border-default);
    }
}

.setting-row + .setting-row {
    border-top: 1px solid oklch(1 0 0 / 0.04);
}

/* ── Ambient Glow Utilities ─────────────────────────────────────────────── */

/* Soft edge glow — replaces elevation shadows on panels */
.edge-glow {
    box-shadow: 0 0 1px var(--border-subtle),
                inset 0 1px 0 rgba(255, 255, 255, 0.03);
}

/* Soft downward elevation for the page header — reads as depth without
   the hard 1px hairline. Matched in light theme below. */
.page-header-elevation {
    box-shadow: 0 10px 22px -8px rgba(0, 0, 0, 0.55),
                0 3px 8px -3px rgba(0, 0, 0, 0.35);
}

[data-theme="light"] .page-header-elevation {
    box-shadow: 0 10px 22px -8px rgba(0, 0, 0, 0.14),
                0 3px 8px -3px rgba(0, 0, 0, 0.08);
}

/* ── Page Title Treatment ──────────────────────────────────────────────
   Accent-forward gradient titles for PageHeader. Each page's title leads
   with a bright tint of its accent, saturates through the full accent by
   mid-word, and lands on an adjacent-hue tail for depth, with a soft
   glyph-shaped glow. Light theme re-mixes the same accents toward ink so
   titles stay saturated and legible; the neon halo is dark-only. */
.page-title {
    font-family: 'Sora', 'Satoshi', system-ui, sans-serif;
    font-weight: 500;
    font-size: 21px;
    letter-spacing: 0.02em;
    line-height: 1;
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
}

/* Phone header ramp: the 21px title reads oversized against a 390px
   canvas, so it steps down with the tighter 48px title row. */
@media (width < 48rem) {
    .page-title {
        font-size: 17px;
    }
}

.page-title-purple {
    background-image: linear-gradient(100deg,
        color-mix(in oklch, var(--color-accent) 30%, white) 0%,
        color-mix(in oklch, var(--color-accent) 72%, white) 38%,
        var(--color-accent) 72%,
        color-mix(in oklch, var(--color-accent) 55%, var(--color-coral)) 100%);
    filter: drop-shadow(0 0 14px color-mix(in srgb, var(--color-accent) 32%, transparent));
}

.page-title-cyan {
    background-image: linear-gradient(100deg,
        color-mix(in oklch, var(--color-cyan) 34%, white) 0%,
        color-mix(in oklch, var(--color-cyan) 78%, white) 38%,
        var(--color-cyan) 70%,
        color-mix(in oklch, var(--color-cyan) 45%, var(--color-status-info)) 100%);
    filter: drop-shadow(0 0 14px color-mix(in srgb, var(--color-cyan) 30%, transparent));
}

.page-title-coral {
    background-image: linear-gradient(100deg,
        color-mix(in oklch, var(--color-coral) 30%, white) 0%,
        color-mix(in oklch, var(--color-coral) 72%, white) 38%,
        var(--color-coral) 70%,
        color-mix(in oklch, var(--color-coral) 50%, var(--color-accent)) 100%);
    filter: drop-shadow(0 0 14px color-mix(in srgb, var(--color-coral) 32%, transparent));
}

.page-title-pink {
    background-image: linear-gradient(100deg,
        color-mix(in oklch, var(--color-accent-hover) 34%, white) 0%,
        color-mix(in oklch, var(--color-accent-hover) 76%, white) 38%,
        var(--color-accent-hover) 70%,
        color-mix(in oklch, var(--color-accent-hover) 45%, var(--color-coral)) 100%);
    filter: drop-shadow(0 0 14px color-mix(in srgb, var(--color-accent-hover) 30%, transparent));
}

.page-title-green {
    background-image: linear-gradient(100deg,
        color-mix(in oklch, var(--color-status-success) 32%, white) 0%,
        color-mix(in oklch, var(--color-status-success) 76%, white) 38%,
        var(--color-status-success) 70%,
        color-mix(in oklch, var(--color-status-success) 45%, var(--color-cyan)) 100%);
    filter: drop-shadow(0 0 14px color-mix(in srgb, var(--color-status-success) 30%, transparent));
}

.page-title-yellow {
    background-image: linear-gradient(100deg,
        color-mix(in oklch, var(--color-status-warning) 36%, white) 0%,
        color-mix(in oklch, var(--color-status-warning) 80%, white) 38%,
        var(--color-status-warning) 70%,
        color-mix(in oklch, var(--color-status-warning) 55%, var(--color-coral)) 100%);
    filter: drop-shadow(0 0 14px color-mix(in srgb, var(--color-status-warning) 28%, transparent));
}

/* The Dashboard sweep — the four brand hues in hue order, so every seam
   interpolates through a clean neighbor instead of gray mud. */
.page-title-spectrum {
    background-image: linear-gradient(100deg,
        var(--color-status-success) 0%,
        var(--color-cyan) 32%,
        var(--color-accent) 66%,
        var(--color-coral) 100%);
    filter: drop-shadow(0 0 14px color-mix(in srgb, var(--color-accent) 28%, transparent));
}

[data-theme="light"] .page-title-purple {
    background-image: linear-gradient(100deg,
        color-mix(in oklch, var(--color-accent) 72%, black) 0%,
        color-mix(in oklch, var(--color-coral) 55%, black) 100%);
    filter: none;
}

[data-theme="light"] .page-title-cyan {
    background-image: linear-gradient(100deg,
        color-mix(in oklch, var(--color-cyan) 52%, black) 0%,
        color-mix(in oklch, var(--color-status-info) 60%, black) 100%);
    filter: none;
}

[data-theme="light"] .page-title-coral {
    background-image: linear-gradient(100deg,
        color-mix(in oklch, var(--color-coral) 65%, black) 0%,
        color-mix(in oklch, var(--color-accent) 60%, black) 100%);
    filter: none;
}

[data-theme="light"] .page-title-pink {
    background-image: linear-gradient(100deg,
        color-mix(in oklch, var(--color-accent-hover) 55%, black) 0%,
        color-mix(in oklch, var(--color-coral) 55%, black) 100%);
    filter: none;
}

[data-theme="light"] .page-title-green {
    background-image: linear-gradient(100deg,
        color-mix(in oklch, var(--color-status-success) 50%, black) 0%,
        color-mix(in oklch, var(--color-cyan) 45%, black) 100%);
    filter: none;
}

[data-theme="light"] .page-title-yellow {
    background-image: linear-gradient(100deg,
        color-mix(in oklch, color-mix(in oklch, var(--color-status-warning) 60%, var(--color-status-error)) 65%, black) 0%,
        color-mix(in oklch, var(--color-status-error) 55%, black) 100%);
    filter: none;
}

[data-theme="light"] .page-title-spectrum {
    background-image: linear-gradient(100deg,
        color-mix(in oklch, var(--color-status-success) 50%, black) 0%,
        color-mix(in oklch, var(--color-cyan) 50%, black) 32%,
        color-mix(in oklch, var(--color-accent) 70%, black) 66%,
        color-mix(in oklch, var(--color-coral) 60%, black) 100%);
    filter: none;
}

.content-auto-card {
    content-visibility: auto;
    contain: layout paint style;
    contain-intrinsic-size: 300px 225px;
}

/* Accent edge glow — for active/important panels. Pairs with one of
   the `.accent-*` classes below, which set `--glow-rgb` to the right
   SilkCircuit palette value. Without an accent class the default is
   electric purple (brand). */
.edge-glow-accent {
    box-shadow: 0 0 8px rgba(var(--glow-rgb, 225, 53, 255), 0.18),
                0 0 24px rgba(var(--glow-rgb, 225, 53, 255), 0.06),
                inset 0 1px 0 rgba(255, 255, 255, 0.04);
}

/* Named accent tokens — set `--glow-rgb` for `.edge-glow-accent`,
   `.card-hover`, and `.btn-press` without spraying raw RGB triples
   across component source. RGB triples mirror the OKLCH `--color-*`
   tokens in `tokens/primitives.css` for classes that expect numeric
   components (CSS doesn't let us extract RGB from oklch() directly). */
.accent-purple { --glow-rgb: 225, 53, 255; }  /* brand / page headers */
.accent-cyan   { --glow-rgb: 128, 255, 234; } /* live state / widgets */
.accent-coral  { --glow-rgb: 255, 106, 193; } /* display-face chrome */
.accent-yellow { --glow-rgb: 241, 250, 140; } /* warnings / timestamps */
.accent-green  { --glow-rgb: 80, 250, 123; }  /* success states */
.accent-red    { --glow-rgb: 255, 99, 99; }   /* errors */
.accent-pink   { --glow-rgb: 255, 153, 255; } /* media library identity */

/* Filter chips — the pill filters on Effects/Devices/Media. Color rides
   `--glow-rgb` (set inline per chip) so the active/hover tints stay on the
   named-accent mechanism instead of per-callsite rgba() strings. */
.filter-chip-active {
    background: rgba(var(--glow-rgb), 0.15);
    color: rgb(var(--glow-rgb));
    border-color: rgba(var(--glow-rgb), 0.3);
    box-shadow: 0 0 8px rgba(var(--glow-rgb), 0.15);
}
.filter-chip-inactive {
    color: rgba(var(--glow-rgb), 0.5);
    border-color: rgba(var(--glow-rgb), 0.08);
    background: transparent;
}
@media (hover: hover) {
    .filter-chip-inactive:hover {
        color: rgba(var(--glow-rgb), 0.85);
        border-color: rgba(var(--glow-rgb), 0.2);
        background: rgba(var(--glow-rgb), 0.08);
    }
}

/* A childless decoration owns the cabinet's halo, hairline and ignition.
   Its border box matches the cabinet's, without clipping escaped menus or
   including the canvas in its animated shadow. Both hue properties stay
   local. OKLCH shadow interpolation still paints this decoration. */
@property --ambient-hue-drift {
    syntax: "<number>";
    inherits: false;
    initial-value: 320;
}

.preview-glow {
    position: absolute;
    inset: -1px;
    border: 1px solid transparent;
    border-radius: inherit;
    pointer-events: none;
    contain: layout style;
    --ambient-hue-drift: var(--ambient-hue);
    box-shadow: 0 0 40px oklch(var(--ambient-l) var(--ambient-c) var(--ambient-hue-drift) / var(--ambient-glow-alpha)),
                0 0 2px oklch(var(--ambient-l) var(--ambient-c) var(--ambient-hue-drift) / var(--ambient-border-alpha)),
                0 0 1px var(--border-subtle),
                inset 0 1px 0 rgba(255, 255, 255, 0.03);
    transition: --ambient-hue-drift 2s var(--ease-silk);
}

/* Command palette / modal glow — cinematic ambient */
.modal-glow {
    box-shadow: 0 0 80px rgba(225, 53, 255, 0.08),
                0 0 2px rgba(225, 53, 255, 0.12),
                inset 0 1px 0 rgba(255, 255, 255, 0.04);
}

/* Dropdown glow */
.dropdown-glow {
    box-shadow: 0 0 32px rgba(0, 0, 0, 0.3),
                0 0 2px rgba(225, 53, 255, 0.08),
                inset 0 1px 0 rgba(255, 255, 255, 0.04);
}

/* Color swatch glow — emanates the swatch color */
.swatch-glow {
    box-shadow: 0 0 20px var(--swatch-color, rgba(225, 53, 255, 0.3)),
                inset 0 1px 0 rgba(255, 255, 255, 0.06);
    transition: box-shadow 0.2s ease, transform 0.15s var(--ease-spring);
}
@media (hover: hover) {
    .swatch-glow:hover {
        box-shadow: 0 0 28px var(--swatch-color, rgba(225, 53, 255, 0.4)),
                    inset 0 1px 0 rgba(255, 255, 255, 0.1);
        transform: scale(1.05);
    }
}
.swatch-glow:active {
    transform: scale(0.95);
    transition-duration: 0.08s;
}

/* Color picker popover — floating wheel container */
.color-picker-popover {
    box-shadow: 0 12px 48px rgba(0, 0, 0, 0.6),
                0 4px 16px rgba(0, 0, 0, 0.4),
                0 0 1px rgba(225, 53, 255, 0.12),
                inset 0 1px 0 rgba(255, 255, 255, 0.05);
}

/* ── Glass (Prism) ───────────────────────────────────────────────────────── */

.glass {
    background: var(--glass-bg);
    backdrop-filter: blur(var(--glass-blur)) saturate(var(--glass-saturate));
    -webkit-backdrop-filter: blur(var(--glass-blur)) saturate(var(--glass-saturate));
    border: 1px solid var(--glass-border);
}

.glass-dense {
    background: var(--surface-overlay);
}

.glass-subtle {
    background: var(--surface-raised);
}

/* ── Card hover brightness ───────────────────────────────────────────────── */

@media (hover: hover) {
    button:hover:not(:disabled) > .relative {
        filter: brightness(1.02);
    }
}

/* ── Noise texture overlay ───────────────────────────────────────────────── */

.noise-overlay::before {
    content: '';
    position: fixed;
    inset: 0;
    opacity: var(--noise-opacity, 0.025);
    pointer-events: none;
    z-index: 9999;
    background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
    background-repeat: repeat;
    background-size: 256px 256px;
}

@media (prefers-reduced-motion: reduce) {
    .noise-overlay::before {
        display: none;
    }

    .glass,
    .glass-dense,
    .glass-subtle,
    .toast-host .toast {
        backdrop-filter: none;
        -webkit-backdrop-filter: none;
    }

    .toolbar-action,
    .select-silk {
        transition-duration: 0.01ms !important;
    }

    input[type="range"].slider-silk::-webkit-slider-thumb,
    input[type="range"].slider-silk::-moz-range-thumb {
        transition: none;
    }
}

/* ── Hidden scrollbar utility ────────────────────────────────────────────── */

.scrollbar-none {
    scrollbar-width: none;
    -ms-overflow-style: none;
}
.scrollbar-none::-webkit-scrollbar {
    display: none;
}

/* ── Resize Handle ─────────────────────────────────────────────────────── */

.resize-handle-zone {
    width: 14px;
    margin: 0 -1px;
    cursor: col-resize;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    position: relative;
    z-index: 5;
    touch-action: none;
}

.resize-handle-line {
    width: 2px;
    height: 56px;
    border-radius: 999px;
    background: rgba(225, 53, 255, 0.22);
    box-shadow: 0 0 0 1px rgba(225, 53, 255, 0.04);
    transition: background-color 200ms ease, height 200ms ease, box-shadow 200ms ease;
}

@media (hover: hover) {
    .resize-handle-zone:hover .resize-handle-line {
        background: rgba(225, 53, 255, 0.55);
        height: 80px;
        box-shadow: 0 0 14px rgba(225, 53, 255, 0.35);
    }
}

.resize-handle-active .resize-handle-line {
    background: rgba(225, 53, 255, 0.65);
    height: 80px;
    box-shadow: 0 0 14px rgba(225, 53, 255, 0.35);
}

/* Drag handles sized for a cursor get a larger invisible grab area on
   coarse pointers (fingers), without moving any layout. The element must
   be positioned so the pseudo-element anchors to it. */
@media (pointer: coarse) {
    .touch-grab::before {
        content: "";
        position: absolute;
        inset: -10px;
    }

    /* A full-height splitter only needs to grow sideways. */
    .resize-handle-zone.touch-grab::before {
        inset: 0 -10px;
    }
}

/* Lock cursor & prevent selection during panel resize drag */
body.resizing {
    cursor: col-resize !important;
    user-select: none !important;
}
body.resizing * {
    cursor: col-resize !important;
}

/* ── Bottom sheet (phones) ─────────────────────────────────────────────────

   The panel rises on entry and slides back down on close. The entrance has
   no fill mode so the inline drag transform owns the panel once it lands;
   a held `both` fill would pin it at rest and swallow the drag. */
@keyframes enter-sheet {
    from { transform: translateY(100%); }
    to   { transform: translateY(0); }
}

.animate-enter-sheet {
    animation: enter-sheet 0.28s var(--ease-silk);
}

.sheet-panel {
    transition: transform 0.2s var(--ease-silk);
}

.sheet-panel.sheet-dragging {
    transition: none;
}

.sheet-grab,
.sheet-backdrop {
    touch-action: none;
}

.sheet-backdrop {
    transition: opacity 0.2s var(--ease-silk);
}

.bottom-sheet:has(> .sheet-panel[data-closing]) > .sheet-backdrop {
    opacity: 0;
}

/* ── Fullscreen Preview ───────────────────────────────────────────────────
   Drives the preview cabinet takeover. Paired with the browser Fullscreen
   API on supported user agents, but works standalone as a CSS-only overlay
   if the API is unavailable or refused. The element also picks up the
   :fullscreen pseudo-class when the browser API succeeds, which we use to
   tune the black backdrop and drop the rounded corners for edge-to-edge.
*/
.fullscreen-preview {
    position: fixed;
    inset: 0;
    width: 100vw !important;
    height: 100vh !important;
    z-index: 100;
    background: #000;
    padding: 2vmin;
    display: flex;
    animation: fullscreen-preview-in 240ms var(--ease-silk);
}

.fullscreen-preview > * {
    flex: 1 1 auto;
    min-height: 0;
}

/* When the browser Fullscreen API actually takes hold, drop the padding
   and any rounded corners so the canvas goes truly edge-to-edge. */
.fullscreen-preview:fullscreen {
    padding: 0;
}

@keyframes fullscreen-preview-in {
    from {
        opacity: 0;
        transform: scale(0.98);
    }
    to {
        opacity: 1;
        transform: scale(1);
    }
}

/* ── Logo Animations ────────────────────────────────────────────────────── */

/* Shared gradient text base */
.logo-gradient-text {
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
}

/* Click-to-cycle container — relative for absolute label positioning */
.logo-container {
    cursor: pointer;
    user-select: none;
    position: relative;
}
.logo-container:active { transform: scale(0.97); }

/* Per-mode ambient background glow — sits behind the text */
.logo-bg {
    position: absolute;
    inset: 0;
    pointer-events: none;
    opacity: 1;
    overflow: hidden;
    transition: opacity 0.6s ease;
}

/* ── Mark — canonical Hypercolor trinity, static, chill hue aura ──────── */
.logo-bg-mark {
    background: radial-gradient(ellipse at 50% 50%,
        rgba(225, 53, 255, 0.18) 0%,
        transparent 65%);
    filter: blur(6px);
    animation: markChillAura 24s linear infinite;
    will-change: filter;
}

.logo-mark-image {
    filter: drop-shadow(0 0 14px rgba(225, 53, 255, 0.32));
}

@keyframes markChillAura {
    0%   { filter: blur(6px) hue-rotate(0deg); }
    100% { filter: blur(6px) hue-rotate(360deg); }
}

/* A horizontal scroll strip fades at its trailing edge, so an item cut
   off there reads as "more this way" rather than as a clipping bug. */
@utility edge-fade-x {
    -webkit-mask-image: linear-gradient(to right, black calc(100% - 28px), transparent);
    mask-image: linear-gradient(to right, black calc(100% - 28px), transparent);
}

/* ── Touch polish (spec 75 wave 3) ────────────────────────────────────────

   A tap never flashes the browser's grey highlight; every control shows
   its press through its own :active state (btn-press, card-hover, and
   friends) instead. Custom :hover rules above sit behind (hover: hover)
   so a tap cannot leave a control stuck in its hover look. */
html {
    -webkit-tap-highlight-color: transparent;
}

@media (width < 48rem) {
    /* The shell is fixed and the document never scrolls, so rubber-band
       and pull-to-refresh on it could only reload the app mid-gesture. */
    html,
    body {
        overscroll-behavior: none;
    }

    /* Overscroll is contained in two places only. The page's own scroll
       owner (`page-scroll`) contains it so an edge never pulls to refresh
       or bounces the fixed document. Overlays (dropdown panels, sheets,
       dialogs, drawers, and menus) contain it so scrolling inside one
       never bleeds to the page behind. Every scroller nested inside the
       page keeps the default and chains: at the end of a panel list, a
       swipe moves the page, as it should. */
    .page-scroll,
    .scrollbar-dropdown,
    .sheet-body,
    [role="dialog"] [class*="overflow-y-auto"],
    .fixed[class*="overflow-y-auto"],
    .absolute[class*="overflow-y-auto"] {
        overscroll-behavior: contain;
    }

    /* Nothing in the page scrolls sideways, so containing a horizontal
       strip's sideways overscroll blocks only the browser's back gesture,
       never a page scroll. */
    [class*="overflow-x-auto"],
    [class*="overflow-x-scroll"] {
        overscroll-behavior-x: contain;
    }

    /* iOS Safari zooms the page into any text field under 16px on focus
       and leaves it zoomed. */
    input[type="text"],
    input[type="search"],
    input[type="number"],
    input[type="email"],
    input[type="password"],
    input[type="url"],
    input:not([type]),
    textarea,
    select {
        font-size: 16px;
    }
}

/* Hover-revealed controls cannot be revealed on a touch screen, and at
   opacity 0 they stay tappable: a blind tap could unfavorite an effect
   or delete a row. Row actions (`touch-reveal`) show outright there; the
   dashboard panels' bar (`panel-hover-controls`) goes away, since its
   layout menu covers showing, hiding, and resetting panels. The query
   names a coarse pointer too, so an environment that merely reports no
   hover (a headless browser, say) keeps the desktop look. */
@media (hover: none) and (pointer: coarse) {
    .touch-reveal:not(:disabled) {
        opacity: 1;
    }

    .panel-hover-controls {
        display: none;
    }
}

/* Controls drawn at cursor size get an invisible finger margin on coarse
   pointers, reaching about 44px without moving any layout. Each one is
   positioned (`relative` or `absolute`) so the margin anchors to it.
   `touch-hit` grows every side; `touch-hit-y` grows only up and down, for
   chips and tabs packed side by side. Hover-revealed row actions use
   `touch-reveal` together with `touch-hit`. */
@media (pointer: coarse) {
    .touch-hit::before,
    .touch-hit-y::before {
        content: "";
        position: absolute;
    }

    .touch-hit::before {
        inset: -14px -12px;
    }

    .touch-hit-y::before {
        inset: -14px 0;
    }

    /* Menu rows in every dropdown (SilkSelect, control menus, presets). */
    .dropdown-option,
    .preset-option {
        min-height: 44px;
    }
}

/* Range inputs on fingers: a taller hit box and a 22px thumb over the
   same visible track. Padding grows the box, and the background is
   clipped to the content box so a track drawn on the input itself stays
   its own thickness. The clip must win over an inline `background`
   shorthand (the settings and sidebar brightness sliders set their track
   color inline) and over `.slider-silk`'s shorthand, both of which reset
   the clip to the border box and paint the whole 44px box; only
   !important beats an inline style. Padding also eats rounded ends, since
   the content box's corner radius is the outer radius minus the padding:
   a vertical radius of half the box (50%) leaves the content box half its
   own height, and a 3px horizontal radius closes the cap. */
@media (pointer: coarse) {
    input[type="range"],
    input[type="range"].slider-silk {
        box-sizing: content-box;
        padding-block: 20px;
        background-clip: content-box !important;
        border-radius: 3px / 50%;
    }

    input[type="range"]::-webkit-slider-thumb,
    input[type="range"].slider-silk::-webkit-slider-thumb {
        width: 22px;
        height: 22px;
        margin-top: -8.5px;
    }

    input[type="range"]::-moz-range-thumb,
    input[type="range"].slider-silk::-moz-range-thumb {
        width: 22px;
        height: 22px;
    }
}

/* ── Reduced motion ──────────────────────────────────────────────────────── */

@media (prefers-reduced-motion: reduce) {
    .animate-enter-up,
    .animate-enter-fade,
    .animate-enter-right,
    .animate-enter-left,
    .animate-enter-scale,
    .animate-enter-pop,
    .animate-enter-down,
    .animate-enter-sheet,
    .animate-breathe,
    .animate-border-glow,
    .animate-edge-shimmer,
    .animate-glow-reveal,
    .animate-shimmer,
    .animate-effect-swap,
    .animate-effect-swap-2,
    .animate-effect-swap-3,
    .animate-canvas-ignite,
    .animate-cabinet-ignite,
    .animate-eq-bar,
    .animate-swap-in,
    .animate-spring-fill,
    .animate-picker-in,
    .logo-bg-mark,
    .search-glow,
    .fullscreen-preview,
    .dot-alive,
    .card-glow,
    .logo-gradient-text {
        animation: none !important;
    }

    .card-hover,
    .btn-press,
    .chip-interactive,
    .nav-item-hover,
    .player-btn,
    .toggle-track,
    .toggle-thumb,
    .swatch-glow,
    .sheet-panel,
    .sheet-backdrop,
    /* Ambient hue crossfade snaps instead of drifting (§8.5). */
    .preview-glow {
        transition: none !important;
    }
}

/* Phones stack the dashboard hero at full width, so its height follows the
   preview source's aspect (H / W, set inline) plus the cabinet chrome. The
   picture then fills the cabinet with no bars. Unlayered, so it outranks the
   `h-full` utility it replaces below `md`; fullscreen's `!important` wins. */
@media (width < 48rem) {
    .dashboard-hero-preview {
        height: calc(
            (100vw - 2rem - var(--hero-chrome-x, 2px)) * (var(--hero-source-ratio, 3 / 4)) +
                var(--hero-chrome, 49px)
        );
    }
}