/**
 * SEOptics fluid UI — shared motion, glow, loading, panel transitions.
 * Respects prefers-reduced-motion globally.
 */

:root {
  --ease-fluid: cubic-bezier(0.22, 1, 0.36, 1);
  --ease-out-soft: cubic-bezier(0.33, 1, 0.68, 1);
  --duration-fast: 0.14s;
  --duration-ui: 0.28s;
  --duration-panel: 0.38s;
  --glow-ultra: rgba(46, 59, 255, 0.45);
  --glow-accent: rgba(56, 189, 248, 0.4);
  --glow-ring: 0 0 0 1px color-mix(in srgb, var(--ultra, #2e3bff) 35%, transparent),
    0 0 20px color-mix(in srgb, var(--ultra, #2e3bff) 22%, transparent),
    0 0 40px color-mix(in srgb, var(--accent, #38bdf8) 12%, transparent);
}

/* ── Shell view crossfade ── */
html.fluid-ui .shell-views-host {
  flex: 1;
  min-height: 0;
  position: relative;
  overflow: hidden;
}

html.fluid-ui .shell-views-host > .shell-view {
  position: absolute;
  inset: 0;
  display: flex !important;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transform: translateY(10px) scale(0.992);
  filter: blur(6px);
  transition:
    opacity var(--duration-panel) var(--ease-fluid),
    transform var(--duration-panel) var(--ease-fluid),
    filter var(--duration-panel) var(--ease-fluid),
    visibility 0s linear var(--duration-panel);
  z-index: 0;
}

html.fluid-ui .shell-views-host > .shell-view.is-active {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transform: none;
  filter: none;
  z-index: 1;
  height: 100%;
  max-height: 100%;
  min-height: 0;
  transition:
    opacity var(--duration-panel) var(--ease-fluid),
    transform var(--duration-panel) var(--ease-fluid),
    filter calc(var(--duration-panel) * 0.85) var(--ease-fluid),
    visibility 0s;
}

html.fluid-ui .shell-views-host > .shell-view.is-active.shell-view--dashboard {
  overflow-x: hidden;
  overflow-y: auto;
  overscroll-behavior: contain;
}

html.fluid-ui .shell-views-host > .shell-view[hidden] {
  display: flex !important;
}

/* ── Nav tabs: active glow ── */
html.fluid-ui .shell-nav .nav-tab {
  position: relative;
  transition:
    border-color var(--duration-ui) var(--ease-fluid),
    background var(--duration-ui) var(--ease-fluid),
    color var(--duration-ui) var(--ease-fluid),
    box-shadow var(--duration-ui) var(--ease-fluid),
    transform var(--duration-fast) var(--ease-fluid);
}

html.fluid-ui .shell-nav .nav-tab.is-active {
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.05) !important;
  border-color: color-mix(in srgb, var(--ultra, #2e3bff) 42%, var(--border-hi, var(--border)));
}

html.fluid-ui .shell-nav .nav-tab:active {
  transform: scale(0.97);
}

/* ── Toggles & icon buttons ── */
html.fluid-ui [data-theme-toggle],
html.fluid-ui .btn-icon,
html.fluid-ui .btn-icon-sm,
html.fluid-ui .mkt-nav-toggle,
html.fluid-ui .shell-nav-toggle {
  position: relative;
  transition:
    border-color var(--duration-ui) var(--ease-fluid),
    background var(--duration-ui) var(--ease-fluid),
    box-shadow var(--duration-ui) var(--ease-fluid),
    transform var(--duration-fast) var(--ease-fluid),
    filter var(--duration-fast) ease;
}

html.fluid-ui [data-theme-toggle]:focus-visible,
html.fluid-ui .btn-icon:focus-visible,
html.fluid-ui .btn-icon-sm:focus-visible {
  outline: none;
  box-shadow: var(--glow-ring);
}

html.fluid-ui [data-theme-toggle].fluid-toggle-flash,
html.fluid-ui [data-theme-toggle]:active {
  box-shadow: var(--glow-ring);
  transform: scale(0.94);
}

html.fluid-ui .btn-primary,
html.fluid-ui .btn-secondary,
html.fluid-ui .btn-danger,
html.fluid-ui button.btn-secondary,
html.fluid-ui .feat-item,
html.fluid-ui .lx-nav-item,
html.fluid-ui .labs-tab {
  transition:
    transform var(--duration-fast) var(--ease-fluid),
    box-shadow var(--duration-ui) var(--ease-fluid),
    border-color var(--duration-ui) var(--ease-fluid),
    background var(--duration-ui) var(--ease-fluid),
    filter var(--duration-ui) ease;
}

html.fluid-ui .btn-primary:active,
html.fluid-ui .btn-secondary:active,
html.fluid-ui .feat-item:active {
  transform: scale(0.97);
}

html.fluid-ui .btn-primary.fluid-press,
html.fluid-ui .btn-secondary.fluid-press {
  transform: scale(0.96);
  filter: brightness(1.06);
}

/* ── Collapsible panels (kit, modals) ── */
.fluid-panel {
  overflow: hidden;
  transition:
    opacity var(--duration-panel) var(--ease-fluid),
    transform var(--duration-panel) var(--ease-fluid),
    max-height var(--duration-panel) var(--ease-fluid),
    margin var(--duration-panel) var(--ease-fluid);
  transform-origin: top center;
}

.fluid-panel.fluid-panel--hidden {
  opacity: 0;
  transform: translateY(-8px) scale(0.98);
  max-height: 0 !important;
  margin-top: 0 !important;
  margin-bottom: 0 !important;
  pointer-events: none;
  visibility: hidden;
}

.fluid-panel:not(.fluid-panel--hidden) {
  opacity: 1;
  transform: none;
  visibility: visible;
  max-height: 2400px;
}

/* Labs / report panels */
html.fluid-ui .lx-panel,
html.fluid-ui .drag-grid-item {
  transition:
    opacity var(--duration-panel) var(--ease-fluid),
    box-shadow var(--duration-ui) var(--ease-fluid);
}

html.fluid-ui .drag-grid-item.is-dragging,
html.fluid-ui .drag-grid-item.is-resizing {
  transition: none !important;
}

html.fluid-ui .lx-panel.is-closed,
html.fluid-ui .drag-grid-item.is-closed {
  opacity: 0;
  transform: scale(0.96);
  pointer-events: none;
}

html.fluid-ui .dashboard-panel[data-reveal],
html.fluid-ui .glass[data-reveal],
html.fluid-ui .tutorial-hub-card {
  transition:
    transform var(--duration-ui) var(--ease-fluid),
    box-shadow var(--duration-ui) var(--ease-fluid),
    border-color var(--duration-ui) var(--ease-fluid);
}

/* ── Loading / buffering edge glow ── */
@keyframes fluid-edge-glow {
  0%, 100% { opacity: 0.35; }
  50% { opacity: 1; }
}

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

.fluid-busy,
[aria-busy='true'].fluid-busy,
.chat-msg.loading,
.rc-loading,
.labs-loading,
.ai-explain-msg.is-loading {
  position: relative;
}

.fluid-busy::before,
[aria-busy='true'].fluid-busy::before,
.chat-msg.loading::before {
  content: '';
  position: absolute;
  inset: -1px;
  border-radius: inherit;
  pointer-events: none;
  z-index: 2;
  box-shadow:
    inset 0 0 0 1px color-mix(in srgb, var(--ultra, #2e3bff) 35%, transparent),
    0 0 24px color-mix(in srgb, var(--accent, #38bdf8) 25%, transparent);
  animation: fluid-edge-glow 1.4s var(--ease-fluid) infinite;
}

.fluid-shimmer-bar {
  height: 3px;
  border-radius: 999px;
  background: linear-gradient(
    90deg,
    transparent,
    color-mix(in srgb, var(--ultra, #2e3bff) 55%, transparent),
    transparent
  );
  background-size: 200% 100%;
  animation: fluid-shimmer 1.2s linear infinite;
}

/* ── Dialogs ── */
html.fluid-ui dialog.modal {
  opacity: 0;
  transform: translateY(12px) scale(0.98);
  transition:
    opacity var(--duration-panel) var(--ease-fluid),
    transform var(--duration-panel) var(--ease-fluid),
    overlay var(--duration-panel) allow-discrete,
    display var(--duration-panel) allow-discrete;
}

html.fluid-ui dialog.modal[open] {
  opacity: 1;
  transform: none;
}

html.fluid-ui dialog.modal::backdrop {
  background: rgba(0, 0, 0, 0.55);
  backdrop-filter: blur(4px);
  transition: opacity var(--duration-panel) var(--ease-fluid);
  opacity: 0;
}

html.fluid-ui dialog.modal[open]::backdrop {
  opacity: 1;
}

/* ── Marketing FAQ smooth open ── */
html.fluid-ui details.mkt-faq-item {
  transition: border-color var(--duration-ui) var(--ease-fluid), box-shadow var(--duration-ui) var(--ease-fluid);
}

html.fluid-ui details.mkt-faq-item[open] {
  box-shadow: 0 0 0 1px color-mix(in srgb, var(--ultra, #2e3bff) 18%, transparent),
    0 12px 32px rgba(46, 59, 255, 0.08);
}

html.fluid-ui details.mkt-faq-item > .mkt-faq-answer {
  animation: fluid-faq-in var(--duration-panel) var(--ease-fluid);
}

@keyframes fluid-faq-in {
  from {
    opacity: 0;
    transform: translateY(-6px);
  }
  to {
    opacity: 1;
    transform: none;
  }
}

html.fluid-ui .mkt-nav-dropdown-panel {
  transition:
    opacity var(--duration-ui) var(--ease-fluid),
    transform var(--duration-ui) var(--ease-fluid);
}

html.fluid-ui .mkt-nav.is-open {
  animation: fluid-nav-in var(--duration-panel) var(--ease-fluid);
}

@keyframes fluid-nav-in {
  from {
    opacity: 0;
    transform: translateY(-8px);
  }
  to {
    opacity: 1;
    transform: none;
  }
}

/* ── Click ripple (optional class from JS) ── */
.fluid-ripple-host {
  position: relative;
  overflow: hidden;
}

.fluid-ripple {
  position: absolute;
  border-radius: 50%;
  pointer-events: none;
  transform: scale(0);
  opacity: 0.45;
  background: radial-gradient(circle, var(--ultra, #2e3bff), transparent 70%);
  animation: fluid-ripple-out 0.55s var(--ease-out-soft) forwards;
}

@keyframes fluid-ripple-out {
  to {
    transform: scale(2.8);
    opacity: 0;
  }
}

@media (prefers-reduced-motion: reduce) {
  html.fluid-ui .shell-views-host > .shell-view,
  html.fluid-ui .shell-views-host > .shell-view.is-active,
  html.fluid-ui .fluid-panel,
  html.fluid-ui dialog.modal,
  html.fluid-ui .lx-panel,
  .fluid-busy::before {
    transition: none !important;
    animation: none !important;
    transform: none !important;
    filter: none !important;
  }
}