/* ============================================================
   Like That — shared premium layer (BOLD)
   One source of truth for the site-wide "pop": dramatic gradient
   heroes with glow, glass cards with accent wash, gradient buttons,
   a richer animated-feel background, refined chrome + motion.
   Linked site-wide; pages keep their own page-specific styles.
   Not linked on /lineup or /games (they carry team-colored bg).
   ============================================================ */

html { scroll-behavior: smooth; }
body {
  -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; text-rendering: optimizeLegibility;
  background:
    radial-gradient(60% 50% at 85% 0%, rgba(212,175,55,.10), transparent 60%),
    radial-gradient(130% 70% at 50% -8%, #2c0c12, #0a0a0b 58%) no-repeat #0a0a0b !important;
}

/* Glassy sticky nav */
nav {
  background: rgba(10,10,11,.66) !important;
  backdrop-filter: blur(14px) saturate(1.2); -webkit-backdrop-filter: blur(14px) saturate(1.2);
  border-bottom: 1px solid rgba(255,255,255,.08) !important;
}

/* Micro-polish */
::selection { background: rgba(200,16,46,.4); color: #fff; }
* { scrollbar-width: thin; scrollbar-color: #3a3a3a transparent; }
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-thumb { background: #2a2a2a; border-radius: 6px; }
::-webkit-scrollbar-thumb:hover { background: #3a3a3a; }
a, button { transition: color .18s ease, background .2s ease, border-color .2s ease, transform .12s ease, box-shadow .2s ease, opacity .2s ease; }

/* ---- Bold reusable premium primitives (opt-in) ---- */

/* Dramatic hero banner with a Zeta-style glowing aura + animated sheen */
.lt-hero { position: relative; overflow: hidden; border-radius: 22px; padding: 3rem 2.2rem;
           background: linear-gradient(125deg, #1a0810 0%, #120a12 45%, #0c0a10 100%);
           border: 1px solid rgba(255,255,255,.1);
           box-shadow: 0 24px 70px -30px rgba(126,91,239,.5), inset 0 1px 0 rgba(255,255,255,.06); }
/* the glowing colorful orb (the "Zeta" aura) */
.lt-hero::before { content: ""; position: absolute; width: min(560px, 96%); aspect-ratio: 1;
                   right: -10%; top: 50%; transform: translateY(-50%); border-radius: 50%;
                   background: conic-gradient(from 210deg, #C8102E, #E8731C, #F0D48A, #7E5BEF, #00A3E0, #C8102E);
                   filter: blur(48px); opacity: .42; animation: ltSpin 20s linear infinite; pointer-events: none; }
.lt-hero::after { content: ""; position: absolute; top: -60%; left: -30%; width: 60%; height: 220%;
                  background: linear-gradient(100deg, transparent, rgba(255,255,255,.06), transparent);
                  transform: rotate(8deg); animation: ltSheen 7s ease-in-out infinite; pointer-events: none; }
.lt-hero .lt-eyebrow { position: relative; font-size: .68rem; font-weight: 800; letter-spacing: .24em;
                       text-transform: uppercase; color: #E9C868; }
.lt-hero h1, .lt-hero .lt-title { position: relative; font-family: 'Playfair Display', serif; font-weight: 900;
                                  color: #F8F5F0; line-height: .96; font-size: clamp(2.4rem, 6.5vw, 4.2rem);
                                  letter-spacing: -.015em; margin: .2rem 0 .5rem; }
.lt-hero p, .lt-hero .lt-sub { position: relative; color: rgba(245,242,238,.84); }

/* a free-standing aura you can drop anywhere (e.g. behind a logo) */
.lt-aura { position: absolute; border-radius: 50%; pointer-events: none; z-index: 0;
           background: conic-gradient(from 210deg, #C8102E, #E8731C, #F0D48A, #7E5BEF, #00A3E0, #C8102E);
           filter: blur(46px); opacity: .5; animation: ltSpin 20s linear infinite; }
/* clean white pill button (Zeta-style) */
.lt-btn-ghost { display: inline-flex; align-items: center; justify-content: center; gap: .5rem;
                background: #F5F2EE; color: #111; border: none; border-radius: 999px;
                font: 800 .8rem 'Inter', sans-serif; letter-spacing: .04em; padding: .9rem 1.6rem;
                cursor: pointer; text-decoration: none; }
.lt-btn-ghost.outline { background: transparent; color: #F5F2EE; border: 1.5px solid rgba(255,255,255,.5); }
.lt-btn-ghost:hover { transform: translateY(-2px); }

/* Glass card with accent wash (set --ac) */
.lt-card { position: relative; overflow: hidden; border-radius: 16px;
           background: rgba(255,255,255,.055); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px);
           border: 1px solid rgba(255,255,255,.1);
           transition: transform .18s ease, border-color .2s ease, background .25s ease, box-shadow .25s ease; }
.lt-card:hover { transform: translateY(-5px);
                 border-color: color-mix(in srgb, var(--ac, #C8102E) 60%, transparent);
                 box-shadow: 0 22px 50px -26px color-mix(in srgb, var(--ac, #C8102E) 75%, transparent); }
.lt-accent::before { content: ""; position: absolute; left: 0; top: 0; right: 0; height: 3px;
                     background: linear-gradient(90deg, var(--ac, #C8102E), transparent 88%); }

/* Bold gradient button with glow */
.lt-btn { display: inline-flex; align-items: center; justify-content: center; gap: .5rem;
          background: linear-gradient(135deg, #E11E3C, #C8102E); color: #fff; border: none; border-radius: 12px;
          font: 800 .8rem 'Inter', sans-serif; letter-spacing: .06em; text-transform: uppercase;
          padding: .95rem 1.4rem; cursor: pointer; text-decoration: none;
          box-shadow: 0 14px 34px -16px rgba(200,16,46,.85); }
.lt-btn:hover { transform: translateY(-2px); box-shadow: 0 20px 44px -16px rgba(200,16,46,1); }
.lt-btn.gold { background: linear-gradient(135deg, #F0D48A, #D4AF37); color: #1a1206; box-shadow: 0 14px 34px -16px rgba(212,175,55,.7); }

/* Motion */
@keyframes ltRise { from { opacity: 0; transform: translateY(16px); } to { opacity: 1; transform: none; } }
@keyframes ltSheen { 0%, 100% { transform: translateX(0) rotate(8deg); } 50% { transform: translateX(60%) rotate(8deg); } }
@keyframes ltSpin { to { transform: translateY(-50%) rotate(360deg); } }
@keyframes ltSpinC { to { transform: rotate(360deg); } }
.lt-aura { animation-name: ltSpinC; }
.lt-rise { animation: ltRise .55s cubic-bezier(.2,.8,.2,1) both; }
.lt-rise.d1 { animation-delay: .06s; } .lt-rise.d2 { animation-delay: .12s; }
.lt-rise.d3 { animation-delay: .18s; } .lt-rise.d4 { animation-delay: .24s; } .lt-rise.d5 { animation-delay: .3s; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .lt-rise, .lt-card { animation: none !important; transition: none !important; }
  .lt-hero::after, .lt-hero::before, .lt-aura { animation: none !important; }
  .lt-card:hover, .lt-btn:hover, .lt-btn-ghost:hover { transform: none; }
}