/*
 * Motion and optical interaction layer for Video Topic Board.
 * Kept separate from the business UI so this visual experiment can be removed
 * without touching permissions, data, or workflow code.
 */

:root {
  --motion-spring: cubic-bezier(0.16, 1, 0.3, 1);
  --motion-soft: cubic-bezier(0.22, 1, 0.36, 1);
  --motion-fast: 160ms;
  --motion-base: 320ms;
  --motion-slow: 560ms;
  --liquid-cyan: rgba(112, 226, 255, 0.78);
  --liquid-blue: rgba(70, 109, 255, 0.82);
  --liquid-violet: rgba(150, 117, 255, 0.6);
}

/* A moving optical rim only appears while the pointer is on a major surface. */
:where(.topbar, .stats2 .stat, .board, .center-card, .modal) {
  --surface-x: 50%;
  --surface-y: 50%;
  isolation: isolate;
  overflow: hidden;
}

:where(.topbar, .stats2 .stat, .board, .center-card, .modal)::before {
  content: "";
  position: absolute;
  inset: -1px;
  z-index: 4;
  padding: 1px;
  border-radius: inherit;
  pointer-events: none;
  opacity: 0;
  background:
    radial-gradient(420px circle at var(--surface-x) var(--surface-y),
      rgba(255, 255, 255, 0.98) 0%,
      rgba(114, 219, 255, 0.56) 18%,
      rgba(147, 119, 255, 0.28) 35%,
      transparent 58%);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  transition: opacity var(--motion-base) var(--motion-soft);
}

:where(.topbar, .stats2 .stat, .board, .center-card, .modal):hover::before {
  opacity: 0.9;
}

/* Reusable control optics: pointer glow, moving sheen, press compression. */
:where(.primary, .ghost, .filters .chip, .status-tile, .team-row) {
  --pointer-x: 50%;
  --pointer-y: 50%;
  --magnetic-x: 0px;
  --magnetic-y: 0px;
  position: relative;
  isolation: isolate;
  overflow: hidden;
}

:where(.primary, .ghost, .filters .chip, .status-tile, .team-row)::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  border-radius: inherit;
  pointer-events: none;
  opacity: 0;
  background: radial-gradient(120px circle at var(--pointer-x) var(--pointer-y),
    rgba(255, 255, 255, 0.78),
    rgba(174, 225, 255, 0.2) 36%,
    transparent 70%);
  mix-blend-mode: soft-light;
  transition: opacity var(--motion-fast) ease;
}

:where(.primary, .ghost, .filters .chip, .status-tile, .team-row):hover::after {
  opacity: 0.92;
}

.primary {
  transform: translate3d(var(--magnetic-x), var(--magnetic-y), 0);
  transition:
    color var(--motion-fast) ease,
    border-color var(--motion-fast) ease,
    background var(--motion-base) var(--motion-soft),
    box-shadow var(--motion-base) var(--motion-soft),
    transform var(--motion-base) var(--motion-spring) !important;
}

.primary:hover:not(:disabled) {
  transform: translate3d(var(--magnetic-x), calc(var(--magnetic-y) - 1px), 0) scale(1.008);
  box-shadow:
    0 9px 24px rgba(49, 95, 221, 0.3),
    0 2px 9px rgba(90, 210, 255, 0.2),
    inset 0 1px 0 rgba(255, 255, 255, 0.4),
    inset 0 -1px 0 rgba(29, 57, 147, 0.24);
}

.primary:active:not(:disabled) {
  transform: translate3d(0, 0, 0) scale(0.975);
  transition-duration: 90ms !important;
}

.primary:not(:disabled) {
  background:
    linear-gradient(135deg, rgba(112, 226, 255, 0.26), transparent 34%),
    linear-gradient(180deg, #527ff1 0%, #315fdd 58%, #294fc2 100%);
}

.primary:not(:disabled)::before {
  content: "";
  position: absolute;
  top: -80%;
  bottom: -80%;
  left: -32%;
  z-index: 2;
  width: 24%;
  pointer-events: none;
  opacity: 0;
  transform: translateX(-220%) rotate(15deg);
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.58), transparent);
}

.primary:hover:not(:disabled)::before {
  opacity: 1;
  animation: liquid-sheen 780ms var(--motion-soft) both;
}

@keyframes liquid-sheen {
  from { transform: translateX(-220%) rotate(15deg); }
  to { transform: translateX(720%) rotate(15deg); }
}

.liquid-ripple {
  position: absolute;
  z-index: 3;
  width: 14px;
  height: 14px;
  margin: -7px 0 0 -7px;
  border-radius: 50%;
  pointer-events: none;
  background: radial-gradient(circle,
    rgba(255, 255, 255, 0.84) 0%,
    rgba(122, 218, 255, 0.42) 38%,
    transparent 72%);
  box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.32);
  animation: liquid-ripple 620ms var(--motion-soft) forwards;
}

@keyframes liquid-ripple {
  0% { opacity: 0.92; transform: scale(0.25); }
  65% { opacity: 0.34; }
  100% { opacity: 0; transform: scale(16); }
}

/* Filter and stage selection travel as a single glass lens instead of flashing. */
.filters,
.status-tiles {
  position: relative;
  isolation: isolate;
}

.filters .chip,
.status-tiles .status-tile {
  z-index: 1;
}

.filter-lens,
.status-lens {
  position: absolute;
  left: 0;
  top: 0;
  z-index: 0;
  pointer-events: none;
  opacity: 0;
  transform: translate3d(0, 0, 0);
  transition:
    width 420ms var(--motion-spring),
    height 420ms var(--motion-spring),
    transform 420ms var(--motion-spring),
    opacity var(--motion-fast) ease;
}

.filter-lens {
  border: 1px solid rgba(40, 79, 190, 0.42);
  border-radius: 9px;
  background:
    radial-gradient(90px circle at 24% 0%, rgba(123, 229, 255, 0.48), transparent 54%),
    linear-gradient(145deg, rgba(83, 126, 245, 0.96), rgba(45, 86, 211, 0.96));
  box-shadow:
    0 8px 20px rgba(49, 95, 221, 0.25),
    0 2px 7px rgba(95, 216, 255, 0.18),
    inset 0 1px 0 rgba(255, 255, 255, 0.42),
    inset 0 -1px 0 rgba(25, 52, 136, 0.25);
}

.filters .chip.on,
.filters .chip.on:hover {
  color: #fff;
}

.filters .chip.on:focus-visible {
  outline-color: rgba(255, 255, 255, 0.94);
  outline-offset: -3px;
}

.status-lens {
  border: 1px solid rgba(66, 107, 221, 0.22);
  border-radius: 8px;
  background:
    radial-gradient(110px circle at 18% 0%, rgba(126, 224, 255, 0.3), transparent 58%),
    rgba(241, 246, 255, 0.88);
  box-shadow:
    0 7px 18px rgba(39, 59, 106, 0.09),
    inset 0 1px 0 rgba(255, 255, 255, 0.92),
    inset 0 -1px 0 rgba(69, 93, 150, 0.08);
  -webkit-backdrop-filter: blur(14px) saturate(145%);
  backdrop-filter: blur(14px) saturate(145%);
}

.filters .chip.on {
  border-color: transparent;
  background: transparent;
  box-shadow: none;
}

.status-tile.active {
  border-color: transparent;
  background: transparent;
  box-shadow: none;
}

/* Dense rows stay calm; the refraction follows the pointer only on hover. */
.row {
  --pointer-x: 50%;
  --pointer-y: 50%;
  position: relative;
  isolation: isolate;
  overflow: hidden;
}

.row::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  border-radius: inherit;
  pointer-events: none;
  opacity: 0;
  background:
    radial-gradient(260px circle at var(--pointer-x) var(--pointer-y),
      rgba(255, 255, 255, 0.7),
      rgba(127, 216, 255, 0.12) 42%,
      transparent 72%);
  transition: opacity var(--motion-base) ease;
}

.row:hover::after { opacity: 1; }
.row > * { position: relative; z-index: 1; }

.row:hover {
  transform: translateY(-2px) scale(1.0015);
  box-shadow:
    0 10px 26px rgba(39, 51, 79, 0.085),
    0 1px 5px rgba(88, 203, 255, 0.1),
    inset 0 1px 0 rgba(255, 255, 255, 0.86);
}

/* Busy controls morph into a compact progress state without layout shifts. */
:where(.primary, .ghost).is-busy {
  padding-left: 38px;
}

:where(.primary, .ghost).is-busy::before {
  content: "" !important;
  position: absolute;
  left: 15px;
  top: 50%;
  z-index: 3;
  width: 13px;
  height: 13px;
  margin-top: -7px;
  border: 2px solid currentColor;
  border-right-color: transparent;
  border-radius: 50%;
  opacity: 0.8;
  transform: none;
  animation: liquid-spin 720ms linear infinite !important;
}

@keyframes liquid-spin { to { transform: rotate(360deg); } }

.detail-toast:not(.hidden) {
  animation: toast-spring-in 460ms var(--motion-spring) both;
  -webkit-backdrop-filter: blur(18px) saturate(145%);
  backdrop-filter: blur(18px) saturate(145%);
}

@keyframes toast-spring-in {
  0% { opacity: 0; transform: translate(-50%, -16px) scale(0.94); filter: blur(4px); }
  65% { opacity: 1; transform: translate(-50%, 2px) scale(1.01); filter: blur(0); }
  100% { opacity: 1; transform: translate(-50%, 0) scale(1); }
}

/* Add-topic modal grows from its trigger, then settles like a physical sheet. */
.modal.glass.lg-surface {
  background:
    radial-gradient(520px circle at var(--surface-x) var(--surface-y), rgba(255, 255, 255, 0.88), transparent 66%),
    linear-gradient(155deg, rgba(250, 252, 255, 0.94), rgba(236, 241, 249, 0.88));
  border-color: rgba(255, 255, 255, 0.9);
  box-shadow:
    0 26px 72px rgba(26, 36, 60, 0.25),
    0 2px 10px rgba(70, 157, 220, 0.12),
    inset 0 1px 0 rgba(255, 255, 255, 0.98),
    inset 0 -1px 0 rgba(78, 96, 135, 0.12) !important;
}

.modal .modal-head {
  background: rgba(248, 250, 254, 0.94);
}

.overlay.motion-opening {
  animation: overlay-in 260ms ease both;
}

.overlay.motion-opening .modal {
  transform-origin: var(--origin-x, 50%) var(--origin-y, 50%);
  animation: modal-morph-in 560ms var(--motion-spring) both;
}

.overlay.motion-closing {
  animation: overlay-out 220ms ease both;
}

.overlay.motion-closing .modal {
  animation: modal-morph-out 220ms cubic-bezier(0.4, 0, 1, 1) both;
}

@keyframes overlay-in {
  from { opacity: 0; backdrop-filter: blur(0) saturate(100%); }
  to { opacity: 1; }
}

@keyframes overlay-out {
  from { opacity: 1; }
  to { opacity: 0; backdrop-filter: blur(0) saturate(100%); }
}

@keyframes modal-morph-in {
  0% {
    opacity: 0;
    transform: translate3d(var(--morph-x, 0px), var(--morph-y, 24px), 0) scale(0.42, 0.18);
    filter: blur(7px) saturate(165%);
    border-radius: 12px;
  }
  58% {
    opacity: 1;
    transform: translate3d(0, -4px, 0) scale(1.012, 1.006);
    filter: blur(0) saturate(118%);
  }
  100% {
    opacity: 1;
    transform: translate3d(0, 0, 0) scale(1);
    filter: none;
  }
}

@keyframes modal-morph-out {
  from { opacity: 1; transform: translate3d(0, 0, 0) scale(1); filter: none; }
  to { opacity: 0; transform: translate3d(0, 12px, 0) scale(0.965); filter: blur(3px); }
}

/* Native view transitions for list <-> detail navigation. */
::view-transition-old(root),
::view-transition-new(root) {
  animation-duration: 430ms;
  animation-timing-function: var(--motion-spring);
}

html[data-motion-direction="forward"]::view-transition-old(root) {
  animation-name: view-old-forward;
}

html[data-motion-direction="forward"]::view-transition-new(root) {
  animation-name: view-new-forward;
}

html[data-motion-direction="back"]::view-transition-old(root) {
  animation-name: view-old-back;
}

html[data-motion-direction="back"]::view-transition-new(root) {
  animation-name: view-new-back;
}

@keyframes view-old-forward {
  to { opacity: 0; transform: translateY(-9px) scale(0.992); filter: blur(2px); }
}

@keyframes view-new-forward {
  from { opacity: 0; transform: translateY(18px) scale(0.985); filter: blur(5px); }
}

@keyframes view-old-back {
  to { opacity: 0; transform: translateY(12px) scale(0.988); filter: blur(3px); }
}

@keyframes view-new-back {
  from { opacity: 0; transform: translateY(-10px) scale(0.992); filter: blur(3px); }
}

@media (hover: none) {
  :where(.topbar, .stats2 .stat, .board, .center-card, .modal)::before,
  :where(.primary, .ghost, .filters .chip, .status-tile, .team-row)::after,
  .row::after {
    display: none;
  }
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
  }

  .filter-lens,
  .status-lens {
    transition: none !important;
  }
}

@media (forced-colors: active) {
  .filter-lens,
  .status-lens,
  .liquid-ripple,
  :where(.topbar, .stats2 .stat, .board, .center-card, .modal)::before {
    display: none;
  }

  .filters .chip.on,
  .status-tile.active {
    border-color: Highlight;
    background: Highlight;
    color: HighlightText;
  }
}