/* ============================================================
   PRE-LAUNCH JERSEY UNVEILING — Auto-scrolling event gallery
   Matches the site's navy / metallic-gold marquee language.
============================================================ */

#prelaunch-jersey{ padding-top:16px; }

.pjl-wrap{
  position:relative;
  overflow:hidden;
  -webkit-mask-image:linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent);
  mask-image:linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent);
  padding:10px 0 30px;
}

.pjl-track{
  display:flex;
  gap:4px;
  width:max-content;
  animation:pjl-slide-right 280s linear infinite;
  will-change:transform;
}

/* Pause on hover, like the rest of the site's marquees */
.pjl-wrap:hover .pjl-track{ animation-play-state:paused; }

/* Pause-on-click (2s), toggled via JS */
.pjl-track.is-paused{ animation-play-state:paused; }

@keyframes pjl-slide-right{
  from{ transform:translateX(-50%); }
  to{ transform:translateX(0); }
}

.pjl-card{
  flex:0 0 auto;
  height:300px;
  width:auto;
  position:relative;
  margin:0;
  border-radius:14px;
  overflow:hidden;
  border:1px solid rgba(255,255,255,.12);
  box-shadow:0 14px 34px -20px rgba(10,31,68,.45);
  cursor:pointer;
  background:rgba(255,255,255,.03);
  transition:transform .5s var(--ease), border-color .5s var(--ease), box-shadow .5s var(--ease);
}

.pjl-card img{
  height:100%;
  width:auto;
  max-width:none;
  object-fit:contain;
  display:block;
  transition:transform .6s var(--ease);
  pointer-events:none;
}

.pjl-card::after{
  content:"";
  position:absolute; inset:0;
  background:linear-gradient(180deg, transparent 55%, rgba(4,18,46,.85) 100%);
  opacity:0;
  transition:opacity .4s var(--ease);
}

.pjl-cap{
  position:absolute;
  left:14px; right:14px; bottom:12px;
  font-size:12px;
  letter-spacing:.03em;
  color:var(--text);
  font-weight:600;
  opacity:0;
  transform:translateY(6px);
  transition:opacity .4s var(--ease), transform .4s var(--ease);
  z-index:1;
}

.pjl-zoom{
  position:absolute;
  top:12px; right:12px;
  width:34px; height:34px;
  border-radius:50%;
  display:flex; align-items:center; justify-content:center;
  background:rgba(4,18,46,.55);
  border:1px solid rgba(255,255,255,.25);
  color:var(--text);
  opacity:0;
  transform:scale(.85);
  transition:opacity .4s var(--ease), transform .4s var(--ease), border-color .3s var(--ease), background .3s var(--ease);
  z-index:1;
}
.pjl-zoom svg{ width:16px; height:16px; }

.pjl-card:hover{
  transform:translateY(-8px);
  border-color:rgba(223,161,32,.55);
  box-shadow:0 26px 55px -18px rgba(10,31,68,.5), 0 0 34px -10px rgba(223,161,32,.35);
}
.pjl-card:hover img{ transform:scale(1.07); }
.pjl-card:hover::after,
.pjl-card:hover .pjl-cap,
.pjl-card:hover .pjl-zoom{ opacity:1; transform:none; }
.pjl-card:hover .pjl-zoom{ background:rgba(223,161,32,.22); border-color:var(--gold); }

.pjl-card:focus-visible{ outline:2px solid var(--gold); outline-offset:4px; }

@media (max-width:640px){
  .pjl-card{ height:210px; }
  .pjl-track{ gap:4px; }
}

@media (max-width:400px){
  .pjl-card{ height:180px; }
  .pjl-track{ gap:3px; }
}

/* ---- Touch devices: no :hover, so keep caption + zoom hint visible ---- */
@media (hover:none){
  .pjl-card::after,
  .pjl-card .pjl-cap,
  .pjl-card .pjl-zoom{ opacity:1; transform:none; }
  .pjl-card .pjl-zoom{ width:28px; height:28px; background:rgba(4,18,46,.65); }
  .pjl-card .pjl-zoom svg{ width:14px; height:14px; }
  .pjl-card .pjl-cap{ font-size:11px; left:10px; right:10px; bottom:9px; }
}
@media (max-width:640px){
  .pjl-wrap{
    -webkit-mask-image:linear-gradient(90deg, transparent, #000 3%, #000 97%, transparent);
    mask-image:linear-gradient(90deg, transparent, #000 3%, #000 97%, transparent);
  }
}

@media (prefers-reduced-motion: reduce){
  .pjl-track{ animation:none; }
}

/* ---------------- LIGHTBOX ---------------- */
.pjl-lightbox{
  position:fixed; inset:0;
  z-index:1200;
  display:flex; align-items:center; justify-content:center;
  padding:40px 20px;
  background:rgba(2,7,18,.92);
  backdrop-filter:blur(6px);
  opacity:0; visibility:hidden;
  transition:opacity .35s var(--ease), visibility .35s var(--ease);
}
.pjl-lightbox.open{ opacity:1; visibility:visible; }

.pjl-lightbox-stage{
  position:relative;
  max-width:min(86vw, 1100px);
  max-height:88vh;
  transform:scale(.96);
  transition:transform .35s var(--ease);
}
.pjl-lightbox.open .pjl-lightbox-stage{ transform:scale(1); }

.pjl-lightbox-img{
  display:block;
  max-width:min(86vw, 1100px);
  max-height:76vh;
  width:auto; height:auto;
  border-radius:14px;
  border:1px solid rgba(255,255,255,.14);
  box-shadow:0 30px 80px -20px rgba(0,0,0,.7);
  animation:jbox-pop .4s var(--ease);
}

.pjl-lightbox-cap{
  margin-top:16px;
  text-align:center;
  font-size:13px;
  letter-spacing:.08em;
  text-transform:uppercase;
  color:var(--text-dim);
}

.pjl-lightbox-close{
  position:fixed;
  top:24px; right:26px;
  width:42px; height:42px;
  border-radius:50%;
  display:flex; align-items:center; justify-content:center;
  background:rgba(255,255,255,.08);
  border:1px solid rgba(255,255,255,.22);
  color:var(--text);
  font-size:18px;
  cursor:pointer;
  z-index:2;
  transition:background .3s var(--ease), color .3s var(--ease), border-color .3s var(--ease), transform .3s var(--ease);
}
.pjl-lightbox-close:hover{ background:rgba(223,161,32,.18); color:var(--gold); border-color:var(--gold); transform:rotate(90deg); }
.pjl-lightbox-close:focus-visible{ outline:2px solid var(--gold); outline-offset:2px; }

.pjl-lightbox-nav{
  position:fixed;
  top:50%; transform:translateY(-50%);
  width:50px; height:50px;
  border-radius:50%;
  display:flex; align-items:center; justify-content:center;
  background:rgba(255,255,255,.08);
  border:1px solid rgba(255,255,255,.22);
  color:var(--text);
  cursor:pointer;
  z-index:2;
  transition:background .3s var(--ease), border-color .3s var(--ease);
}
.pjl-lightbox-nav:hover{ background:rgba(223,161,32,.18); border-color:var(--gold); }
.pjl-lightbox-nav:focus-visible{ outline:2px solid var(--gold); outline-offset:2px; }
.pjl-lightbox-prev{ left:26px; }
.pjl-lightbox-next{ right:26px; }
.pjl-lightbox-nav svg{ width:22px; height:22px; }

@media (max-width:720px){
  .pjl-lightbox{ padding:70px 16px 90px; }
  .pjl-lightbox-stage{ max-width:100%; }
  .pjl-lightbox-img{ max-width:100%; max-height:64vh; }
  .pjl-lightbox-close{ top:16px; right:16px; width:38px; height:38px; }
  .pjl-lightbox-nav{ top:auto; bottom:24px; transform:none; width:46px; height:46px; }
  .pjl-lightbox-prev{ left:16px; }
  .pjl-lightbox-next{ right:16px; }
  .pjl-lightbox-cap{ font-size:11.5px; padding:0 8px; }
}

@media (max-width:380px){
  .pjl-lightbox-nav{ width:42px; height:42px; }
  .pjl-lightbox-nav svg{ width:19px; height:19px; }
}