:root{--bg:#000;--text:#fff;--muted:#b7b7b7;--pink:#FF2E92;--yellow:#FFF132;--teal:#00C6CF;--line:#1b1b1b;--shadow:0 8px 24px rgba(0,0,0,.35)}
*{box-sizing:border-box} html,body{margin:0;background:#000;color:#fff;font-family:Outfit,system-ui,Arial,sans-serif;scroll-behavior:smooth}
.container{max-width:1200px;margin:0 auto;padding:24px}
header{position:sticky;top:0;z-index:50;background:rgba(0,0,0,.8);backdrop-filter: blur(8px) saturate(140%);border-bottom:1px solid var(--line)}
.nav{display:flex;align-items:center;justify-content:space-between;gap:16px;flex-wrap:wrap}
.brand{display:flex;align-items:center;gap:12px} .brand img{height:54px;border-radius:10px;background:#000}
a{color:var(--teal);text-decoration:none}
.btn{display:inline-flex;gap:8px;align-items:center;justify-content:center;padding:12px 18px;border-radius:12px;border:1px solid #222;background:linear-gradient(180deg,#141414,#0f0f0f);box-shadow:var(--shadow);color:#fff;font-weight:700;cursor:pointer}
.btn.primary{background:linear-gradient(180deg,var(--pink),#e8257f);color:#1a0010;border:none}
.hero{padding:64px 0 28px;border-bottom:1px solid var(--line)}
h1{font-size:clamp(30px,6vw,60px);line-height:1.06;margin:0 0 8px;font-weight:800}
.sub{color:var(--muted);font-size:clamp(15px,1.8vw,18px)}
.row{display:flex;gap:16px;flex-wrap:wrap;margin-top:16px}

.section{padding:44px 0;border-bottom:1px solid var(--line)}
.kicker{color:var(--teal);text-transform:uppercase;letter-spacing:1px;font-size:12px;font-weight:700;margin-bottom:10px}

.grid-4{display:grid;grid-template-columns:repeat(4,1fr);gap:18px}
@media(max-width:1000px){.grid-4{grid-template-columns:repeat(2,1fr)}}
@media(max-width:560px){.grid-4{grid-template-columns:1fr}}
.card{--hover:#fff;border:1px solid var(--line);border-radius:18px;padding:14px;display:block;position:relative;overflow:hidden;background:#0f0f0f;transition:transform .25s ease, box-shadow .25s ease, border-color .25s ease;cursor:pointer}
.card:hover{transform:translateY(-6px) scale(1.02);box-shadow:0 12px 28px rgba(0,0,0,.55), 0 0 0 3px color-mix(in srgb, var(--hover) 35%, transparent)}
.square{position:relative;width:100%;padding-bottom:100%;border-radius:12px;background:#000;border:1px solid #171717;box-shadow:var(--shadow);transition:border-color .25s ease, box-shadow .25s ease}
.square img{position:absolute;inset:0;margin:auto;width:92%;height:92%;object-fit:contain}
.card.factor:hover .square{border-color:var(--yellow);box-shadow:0 0 0 3px color-mix(in srgb, var(--yellow) 45%, transparent)}
.card.jersey:hover .square{border-color:var(--teal);box-shadow:0 0 0 3px color-mix(in srgb, var(--teal) 45%, transparent)}
.card.mom:hover .square{border-color:var(--pink);box-shadow:0 0 0 3px color-mix(in srgb, var(--pink) 45%, transparent)}
.card.racing:hover .square{border-color:var(--yellow);box-shadow:0 0 0 3px color-mix(in srgb, var(--yellow) 45%, transparent)}
.card.factor:hover{border-color:var(--yellow)}
.card.jersey:hover{border-color:var(--teal)}
.card.mom:hover{border-color:var(--pink)}
.card.racing:hover{border-color:var(--yellow)}

.grid-3{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
@media(max-width:900px){.grid-3{grid-template-columns:repeat(2,1fr)}}
@media(max-width:560px){.grid-3{grid-template-columns:1fr}}
.prod{background:#0f0f0f;border:1px solid var(--line);border-radius:16px;overflow:hidden;transition:transform .2s ease, border-color .2s ease, box-shadow .2s ease}
.prod:hover{transform:translateY(-6px);border-color:var(--teal);box-shadow:0 0 0 3px color-mix(in srgb, var(--teal) 45%, transparent)}
.prod .pic{position:relative;background:#000}
.prod img{width:100%;height:360px;object-fit:cover;display:block;border-bottom:1px solid #171717}
.badge{position:absolute;top:12px;left:12px;background:linear-gradient(180deg,var(--pink),#e8257f);color:#fff;font-weight:800;padding:6px 10px;border-radius:10px;font-size:12px}
.caption{padding:12px 14px;color:#ddd;font-weight:600}
footer{padding:34px 0;color:#a8a8a8} small{color:#8a8a8a}


/* ---- Jerseys page large squares ---- */
.grid-3.lg{grid-template-columns:repeat(3, minmax(320px, 1fr)); gap:22px}
@media(max-width:1100px){.grid-3.lg{grid-template-columns:repeat(2, minmax(320px, 1fr))}}
@media(max-width:560px){.grid-3.lg{grid-template-columns:1fr}}
.grid-3.lg .prod .pic{aspect-ratio:1/1; background:#000; border-bottom:1px solid #171717}
.grid-3.lg .prod img{width:100%; height:100%; object-fit:contain; image-rendering:auto}
.grid-3.lg .prod{border-width:1.5px}


/* ---- Home Top 3: smaller square cards ---- */
.grid-top3{display:grid;grid-template-columns:repeat(3, minmax(220px, 1fr));gap:18px}
@media(max-width:900px){.grid-top3{grid-template-columns:repeat(2, minmax(220px, 1fr))}}
@media(max-width:560px){.grid-top3{grid-template-columns:1fr}}
.grid-top3 .prod .pic{aspect-ratio:1/1;background:#000;border-bottom:1px solid #171717}
.grid-top3 .prod img{width:100%;height:100%;object-fit:contain;image-rendering:auto}
.grid-top3 .prod{border-width:1.2px}


/* ===== Aurora glow behind the hero (lightweight, pure CSS) ===== */
.hero{position:relative;overflow:hidden}
.aurora{position:absolute;inset:-20% -10% -10% -10%; pointer-events:none; filter: blur(40px); opacity:.55}
.aurora .blob{position:absolute; width:40vw; height:40vw; border-radius:50%; mix-blend-mode:screen; transform: translate3d(0,0,0)}
.aurora .b1{background: radial-gradient(closest-side, #FA2391, transparent 70%); top:-10%; left:10%; animation: drift1 18s ease-in-out infinite alternate}
.aurora .b2{background: radial-gradient(closest-side, #02ABD4, transparent 70%); top:20%; right:-10%; animation: drift2 22s ease-in-out infinite alternate}
.aurora .b3{background: radial-gradient(closest-side, #FFF132, transparent 70%); bottom:-20%; left:30%; animation: drift3 26s ease-in-out infinite alternate}
@keyframes drift1{from{transform:translate(-6%, 0) scale(1)} to{transform:translate(10%, 8%) scale(1.15)}}
@keyframes drift2{from{transform:translate(6%, -4%) scale(1)} to{transform:translate(-6%, 10%) scale(1.2)}}
@keyframes drift3{from{transform:translate(-8%, 4%) scale(1)} to{transform:translate(4%, -6%) scale(1.1)}}
@media (prefers-reduced-motion: reduce){
  .aurora{display:none}
}

/* ===== Horizontal reel (auto-scroll) ===== */
.reel{position:relative; overflow:hidden; border-bottom:1px solid var(--line)}
.reel:before, .reel:after{
  content:""; position:absolute; top:0; bottom:0; width:80px; z-index:2; pointer-events:none;
  background: linear-gradient(to right, rgba(0,0,0,1), rgba(0,0,0,0));
}
.reel:after{right:0; transform:scaleX(-1)}
.reel .track{display:flex; gap:12px; padding:12px 0; animation: scrollx 40s linear infinite}
.reel .item{flex:0 0 220px; height:140px; background:#000; border:1px solid #171717; border-radius:12px; display:flex; align-items:center; justify-content:center}
.reel img{width:100%; height:100%; object-fit:cover; border-radius:12px}
@keyframes scrollx{
  from{transform: translateX(0)}
  to{transform: translateX(-50%)}
}
@media (max-width:560px){ .reel .item{flex-basis:180px; height:120px} }
@media (prefers-reduced-motion: reduce){ .reel .track{animation:none} }


/* --- Adjust aurora intensity for better yellow readability --- */
.hero{position:relative;overflow:hidden}
.aurora{opacity:.28; filter: blur(60px);} /* was ~.55 and blur 40 */
.hero h1{ text-shadow: 0 2px 12px rgba(0,0,0,.7); }
.hero .sub{ text-shadow: 0 1px 10px rgba(0,0,0,.55); }

/* --- Ken Burns banner: zoom-in/out crossfade images behind hero content --- */
.kb{position:absolute; inset:0; z-index:0; overflow:hidden; opacity:.35}
.kb img{position:absolute; inset:0; margin:auto; width:120%; height:120%; object-fit:cover; filter: saturate(1.05) contrast(1.05); opacity:0; animation: kbZoom 16s ease-in-out infinite}
.kb img:nth-child(2){animation-delay: 4s}
.kb img:nth-child(3){animation-delay: 8s}
.kb img:nth-child(4){animation-delay: 12s}
@keyframes kbZoom{
  0%   {transform: scale(1) translate(0,0); opacity:0}
  8%   {opacity:1}
  50%  {transform: scale(1.12) translate(1.2%, -1.2%); opacity:1}
  92%  {opacity:1}
  100% {transform: scale(1.0) translate(0,0); opacity:0}
}

/* Respect reduced motion */
@media (prefers-reduced-motion: reduce) {
  .kb{display:none}
}

/* Ensure hero content is above */
.hero > .container{position:relative; z-index:2}

/* ===== Fast hero strip (1s cadence) ===== */
.kb-fast{position:relative; height:260px; overflow:hidden; border-radius:16px; border:1px solid var(--line); margin-top:16px; background:#000}
@media(max-width:700px){.kb-fast{height:200px}}
.kb-fast .slide{position:absolute; inset:0; opacity:0; transition:opacity .28s linear}
.kb-fast .slide.active{opacity:1}
.kb-fast img,.kb-fast video{width:100%; height:100%; object-fit:cover}
.kb-fast .zoomIn{animation:zoomIn 1.0s ease-in-out forwards}
.kb-fast .zoomOut{animation:zoomOut 1.0s ease-in-out forwards}
@keyframes zoomIn{from{transform:scale(1)} to{transform:scale(1.12)}}
@keyframes zoomOut{from{transform:scale(1.12)} to{transform:scale(1)}}
@media (prefers-reduced-motion: reduce){ .kb-fast .zoomIn,.kb-fast .zoomOut{animation:none} }