/* =========================================================================
   COURTSIDE II — Design Studio theme (id: court-report)
   Theme Pack 164
   Usage: <html data-theme="court-report">
   Every value in app.css / layout.css / components.css / pages.css resolves
   to a var(--tp-*) token below. No raw hex, px-radius, duration or shadow is
   written in component code.
   ========================================================================= */

@keyframes tp-pop {
  0%   { transform: scale(.88); opacity: 0; }
  62%  { transform: scale(1.05); }
  100% { transform: scale(1); opacity: 1; }
}
@keyframes tp-up {
  from { transform: translateY(var(--tp-reveal-dist, 16px)); opacity: 0; }
  to   { transform: translateY(0); opacity: 1; }
}
@keyframes tp-down {
  from { transform: translateY(-16px); opacity: 0; }
  to   { transform: translateY(0); opacity: 1; }
}
@keyframes tp-sheet {
  from { transform: translateY(102%); }
  to   { transform: translateY(0); }
}
@keyframes tp-fade { from { opacity: 0; } to { opacity: 1; } }
@keyframes tp-wipe {
  from { clip-path: inset(0 100% 0 0); }
  to   { clip-path: inset(0 0 0 0); }
}
@keyframes tp-curtain {
  from { clip-path: inset(100% 0 0 0); transform: translateY(var(--tp-reveal-dist, 16px)); }
  to   { clip-path: inset(0 0 0 0); transform: translateY(0); }
}
@keyframes tp-rise {
  from { clip-path: inset(0 0 100% 0); transform: translateY(var(--tp-reveal-dist, 16px)); }
  to   { clip-path: inset(0 0 0 0); transform: translateY(0); }
}
@keyframes tp-blur-in {
  from { opacity: 0; filter: blur(16px); transform: scale(1.05) translateY(var(--tp-reveal-dist, 16px)); }
  to   { opacity: 1; filter: blur(0); transform: scale(1) translateY(0); }
}
@keyframes tp-zoom { from { transform: scale(1.16); } to { transform: scale(1); } }
@keyframes tp-bar { from { transform: scaleX(0); } to { transform: scaleX(1); } }
@keyframes tp-shake {
  10%, 90% { transform: translateX(-2px); }
  30%, 70% { transform: translateX(3px); }
  50%      { transform: translateX(-4px); }
}
@keyframes tp-pulse   { 0%, 100% { opacity: 1; } 50% { opacity: .42; } }
@keyframes tp-breathe { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.045); } }
@keyframes tp-shimmer { from { background-position: -160% 0; } to { background-position: 260% 0; } }
@keyframes tp-float   { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-9px); } }
@keyframes tp-spin    { to { transform: rotate(360deg); } }
@keyframes tp-blink   { 50% { opacity: 0; } }
@keyframes tp-tilt    { 0%, 100% { transform: rotate(-2.5deg); } 50% { transform: rotate(2.5deg); } }
@keyframes tp-drift {
  0%   { transform: translate3d(0, 0, 0) scale(1); }
  50%  { transform: translate3d(4%, -3%, 0) scale(1.12); }
  100% { transform: translate3d(0, 0, 0) scale(1); }
}

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

/* --- Wild-collection FX layer (calm on this theme: --tp-fx:none) -------- */
.tp-web-stage {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  animation: var(--tp-3d-web, none);
  transform-origin: 50% 50%;
}
.tp-web-stage > .tp-fx { inset: -20%; }
.tp-fx {
  position: absolute;
  inset: -40%;
  z-index: -1;
  pointer-events: none;
  background: var(--tp-fx);
  background-size: var(--tp-fx-size);
  opacity: var(--tp-fx-op);
  mix-blend-mode: var(--tp-fx-blend);
  transform: var(--tp-fx-tf);
  animation: var(--tp-fx-anim);
}
.tp-screen {
  position: relative;
  isolation: isolate;
  overflow: hidden;
}
.tp-stage {
  transform: var(--tp-3d);
  animation: var(--tp-3d-anim);
  transform-style: preserve-3d;
}

/* --- Theme tokens ------------------------------------------------------ */
[data-theme="court-report"] {
  --tp-h: 260;

  --tp-fx: none;
  --tp-fx-size: auto;
  --tp-fx-anim: none;
  --tp-fx-op: 0;
  --tp-fx-blend: normal;
  --tp-fx-tf: none;
  --tp-3d: none;
  --tp-3d-anim: none;
  --tp-3d-web: none;

  --tp-dur-slow: 360ms;
  --tp-stagger: 40ms;
  --tp-reveal: tp-wipe;
  --tp-reveal-dist: 20px;

  --tp-img-r: 6px;
  --tp-img-frame: none;
  --tp-img-sh: none;
  --tp-img-filter: saturate(1.1) contrast(1.1);
  --tp-img-overlay-op: 0.1;
  --tp-img-blend: multiply;
  --tp-img-tilt: 0deg;
  --tp-img-ar: 16 / 9;

  --tp-bg: #0c1020;
  --tp-canvas: #0c1020;
  --tp-surf: #141a30;
  --tp-surf-2: #1d2542;
  --tp-ink: #f3f6ff;
  --tp-mute: #8f9abf;
  --tp-acc: oklch(0.84 0.18 calc(var(--tp-h) + -200));
  --tp-acc-2: oklch(0.64 0.2 calc(var(--tp-h) + 0));
  --tp-acc-ink: #0c1020;
  --tp-line: #28325a;
  --tp-grad: linear-gradient(135deg,
    oklch(0.84 0.18 calc(var(--tp-h) + -200)),
    oklch(0.64 0.2 calc(var(--tp-h) + 0)));

  --tp-r: 10px;
  --tp-r-sm: 7px;
  --tp-r-lg: 14px;
  --tp-r-btn: 8px;
  --tp-sh: 0 12px 28px rgba(0, 0, 0, .45);
  --tp-sh-sm: 0 4px 12px rgba(0, 0, 0, .35);
  --tp-bw: 1px;

  --tp-font-display: 'Barlow Condensed', system-ui;
  --tp-font-body: 'Figtree', system-ui;
  --tp-font-mono: 'JetBrains Mono', monospace;
  --tp-w-display: 800;
  --tp-track-display: 0.01em;
  --tp-case-display: uppercase;
  --tp-hero: 88px;

  --tp-dur: 120ms;
  --tp-ease: cubic-bezier(.2, 1.3, .4, 1);
  --tp-press: 0.95;
  --tp-tex: none;
  --tp-blur: none;

  /* Semantic states — derived from the two accent hues only, never new hexes.
     values are read as text/border colors and as low-alpha plate fills. */
  --tp-ok: oklch(0.78 0.16 155);
  --tp-warn: oklch(0.82 0.16 75);
  --tp-danger: oklch(0.66 0.22 25);
  --tp-ok-plate: color-mix(in oklab, var(--tp-ok) 16%, transparent);
  --tp-warn-plate: color-mix(in oklab, var(--tp-warn) 16%, transparent);
  --tp-danger-plate: color-mix(in oklab, var(--tp-danger) 18%, transparent);
  --tp-acc-plate: color-mix(in oklab, var(--tp-acc) 14%, transparent);
  --tp-acc-2-plate: color-mix(in oklab, var(--tp-acc-2) 20%, transparent);
}