/* User-facing visual motion layer. This file is not loaded by admin pages. */
:root {
  --ui-brand-strong: #063fb4;
  --ui-brand: #168bff;
  --ui-brand-soft: #14bfea;
  --ui-focus-ring: rgba(22, 139, 255, 0.28);
  --ui-card-border: rgba(10, 99, 216, 0.12);
  --ui-card-shadow: 0 14px 34px rgba(14, 75, 145, 0.1);
}

body {
  background:
    radial-gradient(circle at 50% 0%, rgba(20, 191, 234, 0.15), transparent 30%),
    radial-gradient(circle at 94% 36%, rgba(22, 139, 255, 0.11), transparent 24%),
    linear-gradient(180deg, #f5fbff 0%, #e9f5ff 52%, #d9edff 100%) !important;
}

.page-shell {
  animation: frontend-page-in 0.32s ease-out both;
}

.page-shell :is(
  .glass-panel,
  .panel-card,
  .card,
  .record-chain,
  .record-version-item,
  .suite-main-panel,
  .suite-result-command,
  .suite-result-products,
  .replicate-sku-panel,
  .replicate-sku-results,
  .product-video-panel,
  .product-video-results,
  .marketing-write-panel,
  .marketing-write-result-panel,
  .agent-card,
  .agent-result-card,
  .home-news-tile,
  .home-template-card
) {
  border-color: var(--ui-card-border);
  box-shadow: var(--ui-card-shadow);
  animation: frontend-card-in 0.34s ease-out both;
}

.page-shell :is(
  button,
  .btn,
  .app-topbar-chip,
  .app-sidebar-link,
  .agent-tab-pill,
  .agent-tab,
  .home-case-tab,
  .news-case-tab,
  .news-platform-tab
) {
  transition:
    transform 0.24s ease-out,
    box-shadow 0.24s ease-out,
    border-color 0.24s ease-out,
    background-color 0.24s ease-out,
    background 0.24s ease-out,
    color 0.24s ease-out;
}

.page-shell :is(button, .btn):not(:disabled):active,
.app-topbar-chip:active,
.app-sidebar-link:active,
.agent-tab-pill:active,
.home-case-tab:active,
.news-case-tab:active,
.news-platform-tab:active {
  transform: scale(0.98);
}

.page-shell :is(
  button,
  .btn,
  .app-topbar-chip,
  .app-sidebar-link,
  .agent-tab-pill,
  .home-case-tab,
  .news-case-tab,
  .news-platform-tab
):not(:disabled):hover {
  transform: translateY(-2px);
}

.page-shell :is(button, .btn):disabled,
.page-shell :is(button, .btn).disabled {
  cursor: not-allowed;
  filter: grayscale(0.7);
  opacity: 0.55;
  transform: none;
  transition: none;
}

.page-shell :is(input, select, textarea, .form-control, .form-select):focus {
  border-color: rgba(22, 139, 255, 0.72) !important;
  box-shadow: 0 0 0 3px var(--ui-focus-ring) !important;
  outline: 0;
}

.page-shell :is(
  .glass-panel,
  .panel-card,
  .record-chain,
  .record-version-item,
  .agent-result-card,
  .suite-result-grid > *,
  .replicate-sku-result-grid > *,
  .product-video-result-grid > *,
  .home-news-tile,
  .home-template-card
):hover {
  border-color: rgba(22, 139, 255, 0.34);
  box-shadow: 0 20px 42px rgba(14, 75, 145, 0.15);
  transform: translateY(-3px);
}

.modal.show .modal-dialog,
.toast.show,
.alert {
  animation: frontend-overlay-in 0.28s ease-out both;
}

.toast-container,
#toast-container {
  z-index: 1200;
}

.toast.show,
#toast-container .toast.show {
  border: 1px solid rgba(22, 139, 255, 0.2);
  box-shadow: 0 16px 34px rgba(6, 63, 180, 0.16);
}

:is(
  .agent-draw-loader,
  .suite-main-loader,
  .replicate-sku-loader,
  .product-video-loader
) span {
  animation-duration: 0.4s !important;
  animation-timing-function: ease-out !important;
}

.suite-result-mark-stage:focus-within,
.replicate-sku-mark-stage:focus-within,
.product-video-mark-stage:focus-within,
.bbox-frame:focus-within {
  box-shadow: 0 0 0 3px var(--ui-focus-ring);
}

@keyframes frontend-page-in {
  from {
    opacity: 0;
    transform: translateY(8px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes frontend-card-in {
  from {
    opacity: 0;
    transform: translateY(10px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes frontend-overlay-in {
  from {
    opacity: 0;
    transform: translate3d(12px, -8px, 0);
  }
  to {
    opacity: 1;
    transform: translate3d(0, 0, 0);
  }
}

@media (max-width: 768px) {
  .page-shell {
    animation-duration: 0.22s;
  }

  .page-shell :is(
    .glass-panel,
    .panel-card,
    .card,
    .record-chain,
    .record-version-item,
    .agent-card,
    .agent-result-card,
    .home-news-tile,
    .home-template-card
  ) {
    animation-duration: 0.24s;
  }

  .page-shell :is(
    button,
    .btn,
    .app-topbar-chip,
    .app-sidebar-link,
    .agent-tab-pill,
    .home-case-tab,
    .news-case-tab,
    .news-platform-tab
  ):not(:disabled):hover {
    transform: none;
  }
}

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