/* ============================================================================
   TOURNAMENT SLIDER — football-orb autoscroll + popup rope-pull browser
   ============================================================================ */

/* ===== VARIABLES ===== */
.ts-strip,
.ts-popup-overlay {
  --ts-orb-size: 82px;
  --ts-accent: var(--hi-accent, #e9c46a);
  --ts-accent-dim: rgba(233,196,106,0.12);
  --ts-surface: var(--hi-surface, #1a1f2e);
  --ts-surface-lit: var(--hi-surface-lit, #252b3d);
  --ts-border: var(--hi-border, rgba(255,255,255,0.06));
  --ts-text: var(--hi-text, #f0f0f0);
  --ts-text-dim: var(--hi-text-dim, rgba(255,255,255,0.3));
}

/* =====================================================================
   1. STRIP — inline autoscroll row
   ===================================================================== */
.ts-strip {
  position: relative;
  overflow: hidden;
  padding: 0.8rem 0 0.6rem;
  margin: 0.8rem 0 1.2rem;
  cursor: var(--cur-pointer, pointer);
}

/* Soft edge fades */
.ts-strip::before,
.ts-strip::after {
  content: '';
  position: absolute; top: 0; bottom: 0;
  width: 80px;
  pointer-events: none;
  z-index: 4;
}
.ts-strip::before {
  left: 0;
  background: linear-gradient(90deg, var(--hi-bg, #0f1119) 20%, transparent 100%);
}
.ts-strip::after {
  right: 0;
  background: linear-gradient(-90deg, var(--hi-bg, #0f1119) 20%, transparent 100%);
}

.ts-strip-track {
  display: flex;
  flex-wrap: nowrap;
  gap: 1.3rem;
  width: max-content;
  align-items: center;
  will-change: transform;
}

/* ===== ORB — the football sphere pill ===== */
.ts-orb {
  flex: 0 0 auto;
  width: var(--ts-orb-size);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.35rem;
  cursor: var(--cur-pointer, pointer);
  text-decoration: none;
  color: var(--ts-text);
  transition: transform 0.25s cubic-bezier(.2,.9,.2,1), opacity 0.25s ease;
  user-select: none;
}
/* Strip orbs: 3D tilt on hover (JS-driven), no CSS-only scale */
.ts-strip .ts-orb {
  perspective: 300px;
}
.ts-strip .ts-orb-sphere {
  transform-style: preserve-3d;
  will-change: transform;
}

/* Sphere container — the 3D ball */
.ts-orb-sphere {
  position: relative;
  width: var(--ts-orb-size);
  height: var(--ts-orb-size);
  border-radius: 50%;
  overflow: hidden;
  flex-shrink: 0;

  /* 3D shadow */
  box-shadow:
    0 6px 20px -4px rgba(0,0,0,0.7),
    0 2px 6px rgba(0,0,0,0.4),
    inset 0 -4px 12px rgba(0,0,0,0.35);

  /* Subtle border ring */
  border: 1.5px solid rgba(255,255,255,0.08);
  background: var(--ts-surface-lit);
  transition: box-shadow 0.35s ease, border-color 0.35s ease, transform 0.15s ease-out;
}
/* Hover glow on strip spheres */
.ts-strip .ts-orb:hover .ts-orb-sphere {
  box-shadow:
    0 8px 24px -4px rgba(0,0,0,0.8),
    0 2px 8px rgba(0,0,0,0.5),
    0 0 14px rgba(255,255,255,0.06),
    inset 0 -4px 12px rgba(0,0,0,0.35);
  border-color: rgba(255,255,255,0.15);
}

/* Cursor-following glass light overlay */
.ts-orb-glass {
  position: absolute; inset: 0;
  border-radius: 50%;
  z-index: 4;
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.25s ease;
  /* Default: static top-left highlight (overridden by JS on hover) */
  background:
    radial-gradient(ellipse 40% 20% at 25% 15%, rgba(255,255,255,0.2) 0%, transparent 100%),
    linear-gradient(155deg, rgba(255,255,255,0.08) 0%, transparent 50%);
}
.ts-strip .ts-orb:hover .ts-orb-glass {
  opacity: 1;
}

/* Logo image inside — fills the sphere, crops to circle */
.ts-orb-sphere img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: 1;
}

/* Fallback year text when no logo */
.ts-orb-sphere .ts-orb-fallback {
  position: absolute; inset: 0;
  display: flex; align-items: center; justify-content: center;
  font-size: 0.9rem; font-weight: 900;
  color: var(--ts-accent);
  z-index: 1;
  text-shadow: 0 1px 4px rgba(0,0,0,0.5);
}

/* Glass / plastic highlight layers */
.ts-orb-sphere::before {
  /* Top-left specular highlight — plastic dome effect */
  content: '';
  position: absolute; inset: 0;
  border-radius: 50%;
  background:
    radial-gradient(ellipse 60% 45% at 35% 25%,
      rgba(255,255,255,0.30) 0%,
      rgba(255,255,255,0.08) 40%,
      transparent 70%);
  z-index: 3;
  pointer-events: none;
}
.ts-orb-sphere::after {
  /* Bottom rim light + ring edge highlight */
  content: '';
  position: absolute; inset: 0;
  border-radius: 50%;
  background:
    radial-gradient(ellipse 80% 30% at 50% 92%,
      rgba(255,255,255,0.07) 0%,
      transparent 60%),
    radial-gradient(circle at 50% 50%,
      transparent 44%,
      rgba(255,255,255,0.04) 46%,
      transparent 48%);
  z-index: 3;
  pointer-events: none;
}

/* Caption below orb */
.ts-orb-caption {
  font-size: 0.52rem;
  font-weight: 700;
  text-align: center;
  color: var(--ts-text-dim);
  text-transform: uppercase;
  letter-spacing: 1px;
  transition: color 0.35s ease, text-shadow 0.35s ease, margin-top 0.35s ease, opacity 0.35s ease;
  margin-top: 0;
  /* Constrain to orb width, scroll if overflowing */
  max-width: var(--ts-orb-size);
  overflow: hidden;
  white-space: nowrap;
}
/* Auto-slide long captions back and forth */
.ts-orb-caption .ts-caption-inner {
  display: inline-block;
  white-space: nowrap;
}
.ts-orb-caption .ts-caption-inner.ts-marquee {
  animation: tsMarquee var(--ts-marquee-dur, 4s) linear infinite alternate;
}
@keyframes tsMarquee {
  0%, 15%   { transform: translateX(0); }
  85%, 100% { transform: translateX(var(--ts-marquee-shift, 0px)); }
}
.ts-strip .ts-orb:hover .ts-orb-caption { color: var(--ts-text); }

/* In popup, centered pill caption drops lower to clear the scaled sphere */
.ts-popup-track .ts-orb.ts-centered .ts-orb-caption {
  margin-top: 10px;
}

/* =====================================================================
   2. POPUP — modal tournament browser
   ===================================================================== */
.ts-popup-overlay {
  position: fixed; inset: 0;
  z-index: 300;
  display: flex;
  align-items: center; justify-content: center;
  background: rgba(6,8,16,0);
  backdrop-filter: blur(0px);
  -webkit-backdrop-filter: blur(0px);
  pointer-events: none;
  opacity: 0;
  transition: background 0.45s ease, backdrop-filter 0.45s ease, -webkit-backdrop-filter 0.45s ease, opacity 0.45s ease;
}
.ts-popup-overlay.open {
  background: rgba(6,8,16,0.88);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  pointer-events: auto;
  opacity: 1;
}

/* Ghost container — minimal, no chrome */
.ts-popup {
  position: relative;
  width: min(92vw, 900px);
  height: 220px;
  display: flex;
  align-items: center;
  justify-content: center;
  transform: translateY(30px) scale(0.95);
  opacity: 0;
  transition: transform 0.5s cubic-bezier(.22,.68,.35,1), opacity 0.4s ease;
}
.ts-popup-overlay.open .ts-popup {
  transform: translateY(0) scale(1);
  opacity: 1;
}

/* The horizontal scroll viewport */
.ts-popup-rail {
  position: relative;
  width: 100%;
  height: 100%;
  overflow: hidden;
  display: flex;
  align-items: center;
}

/* Very soft blurred edges — the "ghost container" feel.
   Uses a large mask-image gradient on the rail itself so orbs
   smoothly dissolve into the backdrop rather than hitting a wall. */
.ts-popup-rail {
  -webkit-mask-image: linear-gradient(90deg,
    transparent 0%,
    rgba(0,0,0,0.15) 8%,
    rgba(0,0,0,0.7) 18%,
    black 30%,
    black 70%,
    rgba(0,0,0,0.7) 82%,
    rgba(0,0,0,0.15) 92%,
    transparent 100%);
  mask-image: linear-gradient(90deg,
    transparent 0%,
    rgba(0,0,0,0.15) 8%,
    rgba(0,0,0,0.7) 18%,
    black 30%,
    black 70%,
    rgba(0,0,0,0.7) 82%,
    rgba(0,0,0,0.15) 92%,
    transparent 100%);
}

/* Pull glow bars removed — edge scroll has no visual indicator */

/* The track inside popup */
.ts-popup-track {
  display: flex;
  flex-wrap: nowrap;
  gap: 2rem;
  align-items: center;
  position: absolute;
  left: 0; top: 50%;
  transform: translateY(-50%);
  padding: 0 calc(50% - var(--ts-orb-size) / 2);
  will-change: transform;
}

/* ===== POPUP ORB STATES ===== */

/* All popup orbs get smooth transitions on everything that changes */
.ts-popup-track .ts-orb {
  /* No hover scale in popup — pinned effect handles it */
  transition: opacity 0.4s ease,
              filter 0.4s ease;
}
.ts-popup-track .ts-orb:hover { transform: none; }

/* The sphere itself transitions size smoothly for the pinned scale effect */
.ts-popup-track .ts-orb .ts-orb-sphere {
  transition: transform 0.35s cubic-bezier(.25,.1,.25,1),
              box-shadow 0.35s ease,
              border-color 0.35s ease;
}

/* Centered / pinned pill — scaled up, gold ring, full opacity, always on top */
.ts-popup-track .ts-orb.ts-centered {
  opacity: 1;
  filter: none;
  z-index: 5;
}
.ts-popup-track .ts-orb.ts-centered .ts-orb-sphere {
  transform: scale(1.22);
  border-color: rgba(233,196,106,0.4);
  box-shadow:
    0 8px 28px -4px rgba(0,0,0,0.8),
    0 0 0 1px rgba(233,196,106,0.2),
    0 0 24px rgba(233,196,106,0.12),
    inset 0 -4px 12px rgba(0,0,0,0.35);
}
.ts-popup-track .ts-orb.ts-centered .ts-orb-caption {
  color: var(--ts-accent);
  text-shadow: 0 0 14px rgba(233,196,106,0.5);
}

/* Near — slightly visible */
.ts-popup-track .ts-orb.ts-near {
  opacity: 0.38;
  filter: saturate(0.55) brightness(0.85);
}

/* Far — faint ghost */
.ts-popup-track .ts-orb.ts-far {
  opacity: 0.1;
  filter: saturate(0.3) brightness(0.6);
}

/* Hidden — gone */
.ts-popup-track .ts-orb.ts-hidden {
  opacity: 0;
  pointer-events: none;
}

/* =====================================================================
   3. COMPACT VARIANT — for edition detail pages (.ts-strip.ts-compact)
   ===================================================================== */
.ts-strip.ts-compact {
  --ts-orb-size: 52px;
  padding: 0.35rem 0 0.25rem;
  margin: 0 0 0.8rem;
  border-bottom: 1px solid var(--ts-border);
}
.ts-strip.ts-compact .ts-orb-sphere {
  box-shadow:
    0 3px 10px -3px rgba(0,0,0,0.6),
    0 1px 3px rgba(0,0,0,0.3),
    inset 0 -2px 6px rgba(0,0,0,0.25);
}
.ts-strip.ts-compact .ts-orb-caption {
  font-size: 0.42rem;
  letter-spacing: 0.6px;
}
.ts-strip.ts-compact .ts-strip-track {
  gap: 0.8rem;
}
/* Highlight the current edition in the compact strip */
.ts-strip.ts-compact .ts-orb.ts-current .ts-orb-sphere {
  border-color: var(--ts-accent);
  box-shadow:
    0 3px 10px -3px rgba(0,0,0,0.6),
    0 0 0 1px rgba(233,196,106,0.25),
    0 0 12px rgba(233,196,106,0.15),
    inset 0 -2px 6px rgba(0,0,0,0.25);
}
.ts-strip.ts-compact .ts-orb.ts-current .ts-orb-caption {
  color: var(--ts-accent);
}

/* ===== RESPONSIVE ===== */
@media (max-width: 768px) {
  .ts-strip { --ts-orb-size: 64px; }
  .ts-popup-overlay { --ts-orb-size: 68px; }
  .ts-popup { height: 190px; }
  .ts-popup-rail::before,
  .ts-popup-rail::after { width: 100px; }
  .ts-orb-caption { font-size: 0.46rem; }
}
@media (max-width: 480px) {
  .ts-strip { --ts-orb-size: 54px; }
  .ts-popup-overlay { --ts-orb-size: 58px; }
  .ts-popup { width: 98vw; }
}

/* Kill transitions during wrap-around repositioning so clone-swaps are invisible */
.ts-popup-track.ts-no-trans .ts-orb,
.ts-popup-track.ts-no-trans .ts-orb .ts-orb-sphere,
.ts-popup-track.ts-no-trans .ts-orb .ts-orb-caption {
  transition: none !important;
}

@media (prefers-reduced-motion: reduce) {
  .ts-orb, .ts-popup-track .ts-orb,
  .ts-popup-track .ts-orb .ts-orb-sphere { transition: none; }
  .ts-popup-overlay { transition: none; }
  .ts-popup { transition: none; }
}