/* =========================================================
   CourtHub — Premium UI patch v1
   Load AFTER the existing site stylesheet.
   ========================================================= */

:root {
  --ch-bg: #080C0E;
  --ch-navy: #0F172A;
  --ch-card: rgba(15, 23, 42, .42);
  --ch-volt: #CCFF00;
  --ch-red: #FF3B30;
  --ch-white: #F8FAFC;
  --ch-muted: #94A3B8;
  --ch-glass-border: rgba(255, 255, 255, .11);
  --ch-glass-border-hover: rgba(204, 255, 0, .50);
  --ch-glow: rgba(204, 255, 0, .20);
}

/* 1. TYPOGRAPHY */
h1,
h2,
h3,
.hero-title,
.section-title {
  letter-spacing: -0.035em;
}

h1 {
  letter-spacing: -0.05em;
}

/* 2. THREE.JS / CANVAS SAFETY */
canvas,
#hero-canvas,
.hero-canvas,
[data-three-canvas] {
  pointer-events: none !important;
}

/* 3. PREMIUM GLASS */
.glass,
.glass-card,
.feature-card,
.benefit-card,
.tech-card,
.team-card,
.gamification-card,
.app-feature-card,
.academy-card,
[data-premium-card] {
  background:
    linear-gradient(
      135deg,
      rgba(15, 23, 42, .50),
      rgba(15, 23, 42, .30)
    ) !important;
  border: 1px solid var(--ch-glass-border) !important;
  backdrop-filter: blur(18px) saturate(1.08);
  -webkit-backdrop-filter: blur(18px) saturate(1.08);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, .05),
    0 18px 60px rgba(0, 0, 0, .24);
}

/* Apply subtle hover only to cards that are actually interactive/content cards. */
.feature-card,
.benefit-card,
.tech-card,
.team-card,
.gamification-card,
.app-feature-card,
.academy-card,
[data-premium-card] {
  transition:
    transform .30s cubic-bezier(.2,.8,.2,1),
    border-color .30s ease,
    box-shadow .30s ease,
    background-color .30s ease;
  will-change: transform;
}

.feature-card:hover,
.benefit-card:hover,
.tech-card:hover,
.team-card:hover,
.gamification-card:hover,
.app-feature-card:hover,
.academy-card:hover,
[data-premium-card]:hover {
  transform: translateY(-4px);
  border-color: var(--ch-glass-border-hover) !important;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.06),
    0 0 15px var(--ch-glow),
    0 22px 64px rgba(0,0,0,.28);
}

/* 4. ICON SYSTEM */
.ch-icon,
[data-lucide] {
  width: 24px;
  height: 24px;
  stroke-width: 1.75;
  color: var(--ch-white);
}

.ch-icon--functional {
  color: var(--ch-muted);
  filter: none;
}

.ch-icon--feature {
  color: #fff;
  filter: drop-shadow(0 0 6px rgba(204,255,0,.72));
}

.ch-icon--active {
  color: var(--ch-volt);
  filter: drop-shadow(0 0 6px rgba(204,255,0,.48));
}

.ch-icon-shell {
  width: 52px;
  height: 52px;
  border-radius: 15px;
  display: inline-grid;
  place-items: center;
  background:
    linear-gradient(
      145deg,
      rgba(204,255,0,.075),
      rgba(255,255,255,.018)
    );
  border: 1px solid rgba(204,255,0,.16);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.04),
    0 0 18px rgba(204,255,0,.045);
}

.feature-card:hover .ch-icon-shell,
[data-premium-card]:hover .ch-icon-shell {
  border-color: rgba(204,255,0,.34);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.05),
    0 0 22px rgba(204,255,0,.10);
}

/* 5. CTA REFINEMENT */
.ch-cta-primary {
  position: relative;
  overflow: hidden;
  background: linear-gradient(135deg, #D7FF2E 0%, #CCFF00 48%, #B9EB00 100%);
  color: #080C0E;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.42),
    0 8px 30px rgba(204,255,0,.16);
  transition: transform .25s ease, box-shadow .25s ease;
}

.ch-cta-primary::before {
  content: "";
  position: absolute;
  inset: -2px auto -2px -40%;
  width: 32%;
  transform: skewX(-18deg);
  background: linear-gradient(90deg, transparent, rgba(255,255,255,.42), transparent);
  opacity: 0;
}

.ch-cta-primary:hover {
  transform: translateY(-2px);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.48),
    0 10px 36px rgba(204,255,0,.24);
}

.ch-cta-primary:hover::before {
  opacity: .75;
  animation: ch-shine .65s ease;
}

@keyframes ch-shine {
  from { left: -40%; }
  to   { left: 120%; }
}

/* 6. SECTION EYEBROWS / ACCENTS */
.ch-eyebrow {
  color: var(--ch-volt);
  letter-spacing: .22em;
  text-transform: uppercase;
  font-size: .75rem;
  font-weight: 700;
}

.ch-section-rule {
  width: 64px;
  height: 2px;
  border-radius: 999px;
  background: var(--ch-volt);
  box-shadow: 0 0 14px rgba(204,255,0,.48);
}

/* 7. LIVE */
.ch-live-badge {
  color: #FF6A62;
  border: 1px solid rgba(255,59,48,.42);
  background: rgba(255,59,48,.09);
  box-shadow: 0 0 16px rgba(255,59,48,.07);
}

.ch-live-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  display: inline-block;
  background: var(--ch-red);
  box-shadow: 0 0 8px rgba(255,59,48,.72);
  animation: ch-live-pulse 1.7s ease-in-out infinite;
}

@keyframes ch-live-pulse {
  0%,100% { opacity: 1; transform: scale(1); }
  50% { opacity: .55; transform: scale(.80); }
}

/* 8. FOCUS / ACCESSIBILITY */
a:focus-visible,
button:focus-visible,
[role="button"]:focus-visible {
  outline: 2px solid var(--ch-volt);
  outline-offset: 4px;
  border-radius: 8px;
}

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

  .feature-card:hover,
  .benefit-card:hover,
  .tech-card:hover,
  .team-card:hover,
  [data-premium-card]:hover,
  .ch-cta-primary:hover {
    transform: none;
  }
}

/* 10. MOBILE: reduce visual load */
@media (max-width: 768px) {
  .glass,
  .glass-card,
  .feature-card,
  .benefit-card,
  .tech-card,
  .team-card,
  .gamification-card,
  .app-feature-card,
  [data-premium-card] {
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
  }

  .ch-icon-shell {
    width: 46px;
    height: 46px;
  }
}