/* pages/battle-royale.html — hero layers + motion (markup uses Tailwind) */

.br-hero__bg {
    position: absolute;
    inset: 0;
    z-index: -3;
    background-color: var(--color-bg-primary);
    background-image:
      linear-gradient(125deg, color-mix(in srgb, var(--color-bg-primary) 52%, transparent) 0%, transparent 48%),
      linear-gradient(305deg, color-mix(in srgb, #5eead4 14%, var(--color-bg-primary)) 0%, transparent 44%),
      url("https://images.unsplash.com/photo-1552820728-8b83bb6b773f?auto=format&fit=crop&w=1920&q=78");
    background-size: cover, cover, cover;
    background-position: center, center, center 32%;
    animation: br-hero-bg-drift 26s ease-in-out infinite alternate;
  }
  
  .br-hero__gradient {
    position: absolute;
    inset: 0;
    z-index: -2;
    background: linear-gradient(
      180deg,
      color-mix(in srgb, var(--color-bg-primary) 22%, transparent) 0%,
      color-mix(in srgb, var(--color-bg-primary) 58%, transparent) 42%,
      var(--color-bg-primary) 92%,
      var(--color-bg-primary) 100%
    );
  }
  
  .br-hero__mesh {
    position: absolute;
    inset: 0;
    z-index: -1;
    opacity: 0.42;
    background:
      radial-gradient(ellipse 88% 68% at 12% 8%, color-mix(in srgb, var(--color-brand) 22%, transparent), transparent 54%),
      radial-gradient(ellipse 72% 52% at 92% 18%, color-mix(in srgb, #5eead4 14%, transparent), transparent 50%),
      linear-gradient(color-mix(in srgb, var(--color-brand) 11%, transparent) 1px, transparent 1px),
      linear-gradient(90deg, color-mix(in srgb, var(--color-brand) 7%, transparent) 1px, transparent 1px);
    background-size: 100% 100%, 100% 100%, 44px 44px, 44px 44px;
    mask-image: radial-gradient(ellipse 86% 74% at 50% 32%, black 0%, transparent 74%);
    pointer-events: none;
  }
  
  .br-hero__glow {
    position: absolute;
    border-radius: 50%;
    filter: blur(76px);
    pointer-events: none;
    opacity: 0.4;
    z-index: -1;
  }
  
  .br-hero__glow--1 {
    width: min(50vw, 23rem);
    height: min(50vw, 23rem);
    top: -10%;
    right: -4%;
    background: radial-gradient(circle, color-mix(in srgb, #5eead4 85%, var(--color-brand-glow)), transparent 68%);
    animation: br-hero-glow-pulse 11s ease-in-out infinite;
  }
  
  .br-hero__glow--2 {
    width: min(38vw, 17rem);
    height: min(38vw, 17rem);
    bottom: 8%;
    left: -8%;
    background: radial-gradient(circle, var(--color-brand), transparent 72%);
    animation: br-hero-glow-pulse 13s ease-in-out infinite reverse;
  }
  
  .br-hero__crumb-shine {
    animation: br-hero-crumb-shine 5.5s ease-in-out infinite;
  }
  
  .br-hero__title-shimmer {
    animation: br-hero-title-shimmer 7.5s linear infinite;
  }
  
  .br-match-card {
    --br-card-accent: var(--color-brand-glow);
    --br-card-accent-soft: color-mix(in srgb, var(--color-brand-glow) 35%, transparent);
  }
  
  .br-match-card--teal {
    --br-card-accent: #7ff5e4;
    --br-card-accent-soft: color-mix(in srgb, #5eead4 38%, var(--color-brand) 40%);
  }
  
  .br-match-card__rail {
    background: linear-gradient(
      180deg,
      color-mix(in srgb, var(--br-card-accent) 92%, white),
      color-mix(in srgb, var(--color-brand) 70%, var(--br-card-accent))
    );
  }
  
  #br-matches .br-match-card {
    transition:
      transform 0.32s ease,
      border-color 0.32s ease,
      box-shadow 0.32s ease;
  }
  
  #br-matches .br-match-card:hover {
    transform: translateY(-5px);
    border-color: color-mix(in srgb, var(--color-brand-glow) 42%, transparent);
    box-shadow:
      0 22px 56px rgba(0, 0, 0, 0.42),
      0 0 36px color-mix(in srgb, var(--color-brand) 12%, transparent);
  }
  
  @keyframes br-hero-bg-drift {
    0% {
      transform: scale(1.04) translate3d(0, 0, 0);
    }
    100% {
      transform: scale(1.11) translate3d(-1.1%, 0.9%, 0);
    }
  }
  
  @keyframes br-hero-glow-pulse {
    0%,
    100% {
      opacity: 0.34;
      transform: scale(1);
    }
    50% {
      opacity: 0.5;
      transform: scale(1.07);
    }
  }
  
  @keyframes br-hero-title-shimmer {
    0% {
      background-position: 0% center;
    }
    100% {
      background-position: 200% center;
    }
  }
  
  @keyframes br-hero-crumb-shine {
    0%,
    100% {
      background-position: 0% 50%;
    }
    50% {
      background-position: 100% 50%;
    }
  }
  
  @media (prefers-reduced-motion: reduce) {
    .br-hero__bg,
    .br-hero__glow--1,
    .br-hero__glow--2,
    .br-hero__title-shimmer,
    .br-hero__crumb-shine {
      animation: none !important;
    }
  
    .br-hero__title-shimmer {
      background-position: center;
    }
  
    #br-matches .br-match-card:hover {
      transform: none;
    }
  }