/* ---------- HERO ---------- */
.hero-banner{
  background:linear-gradient(135deg, var(--c-neutral-900) 0%, var(--c-neutral-100) 100%);
  padding:var(--space-20) 0 var(--space-32);
  text-align:center;
}
.hero-banner h1{
  color:var(--c-primary);
  text-shadow:0 0 12px var(--c-primary);
}
.hero-banner p{
  font-size:var(--fs-xl);
  color:var(--c-neutral-700);
  margin:0 auto;
}

/* ---------- UPCOMING ---------- */
.upcoming-drops{
  padding-block:var(--space-16);
}
.scroll-row{
  display:flex;
  gap:var(--space-4);
  overflow-x:auto;
  scroll-snap-type:x mandatory;
  padding-block:var(--space-4);
}
.drop-card{
  flex:0 0 280px;
  background:var(--c-neutral-50);
  border:1px solid var(--c-neutral-200);
  border-radius:var(--radius-lg);
  padding:var(--space-5);
  scroll-snap-align:start;
  perspective:1000px;
  cursor:pointer;
}
.card-front, .card-back{
  backface-visibility:hidden;
  transition:transform var(--duration) var(--timing);
}
.card-back{
  position:absolute; inset:0;
  transform:rotateY(180deg);
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  background:var(--c-neutral-100);
  border-radius:var(--radius-lg);
  padding:var(--space-5);
  text-align:center;
}
.drop-card:hover .card-front{transform:rotateY(-180deg)}
.drop-card:hover .card-back{transform:rotateY(0)}
.date-badge{
  display:inline-block;
  background:var(--c-primary);
  color:#000;
  font-weight:700;
  padding:var(--space-1) var(--space-3);
  border-radius:var(--radius);
  margin-bottom:var(--space-3);
}
.drop-card img{
  border-radius:var(--radius);
  margin-bottom:var(--space-3);
}
.seats-left{font-size:var(--fs-sm); color:var(--c-warning)}
.carbon{font-size:var(--fs-xs); color:var(--c-neutral-600)}

/* ---------- VIP RSVP ---------- */
.vip-rsvp{
  background:var(--c-neutral-100);
  padding-block:var(--space-20);
}
.grid-split{
  display:grid;
  grid-template-columns:1fr;
  gap:var(--space-12);
}
@media(min-width:768px){
  .grid-split{grid-template-columns:3fr 2fr}
}
.vip-visual img{
  border-radius:var(--radius-lg);
  box-shadow:var(--shadow-lg);
}
.vip-form form{display:grid; gap:var(--space-4)}
.vip-form label span{display:block; font-size:var(--fs-sm); margin-bottom:var(--space-1)}

/* ---------- TOURNAMENT ---------- */
.tournament-teaser{padding-block:var(--space-16)}
.leaderboard-card{
  background:var(--c-neutral-50);
  border:1px solid var(--c-neutral-200);
  border-radius:var(--radius-lg);
  padding:var(--space-8);
  text-align:center;
  background-image:url('/assets/images/grid-texture.webp');
  background-size:cover;
}
.podium{display:flex; justify-content:center; gap:var(--space-8); margin-bottom:var(--space-6)}
.rank{display:flex; flex-direction:column; align-items:center; gap:var(--space-2)}
.rank .avatar{
  width:48px; height:48px;
  background:var(--c-neutral-300);
  border-radius:50%;
}
.rank .tag{font-family:var(--ff-mono); font-size:var(--fs-sm)}
.progress-bar{
  height:6px;
  background:var(--c-neutral-300);
  border-radius:3px;
  overflow:hidden;
  margin-bottom:var(--space-6);
}
.progress-bar .fill{
  height:100%;
  background:var(--c-primary);
  width:var(--progress);
  transition:width var(--duration) var(--timing);
}

/* ---------- GALLERY ---------- */
.pop-up-gallery{padding-block:var(--space-16)}
.masonry{
  display:grid;
  grid-template-columns:repeat(auto-fit, minmax(240px, 1fr));
  gap:var(--space-4);
}
.polaroid{
  background:#fff;
  padding:var(--space-3) var(--space-3) var(--space-6);
  box-shadow:var(--shadow-md);
  border-radius:var(--radius);
  position:relative;
  cursor:pointer;
  transition:transform var(--duration) var(--timing);
}
.polaroid:hover{transform:scale(1.03)}
.polaroid img{border-radius:var(--radius-sm)}
.polaroid figcaption{
  margin-top:var(--space-2);
  font-size:var(--fs-sm);
  color:#000;
  text-align:center;
}
.polaroid q{display:block; font-style:italic; margin-top:var(--space-1)}

/* ---------- TALKS ---------- */
.talks-schedule{padding-block:var(--space-16)}
.talks-table{
  width:100%;
  border-collapse:collapse;
  font-size:var(--fs-sm);
}
.talks-table th, .talks-table td{padding:var(--space-3) var(--space-2)}
.talks-table thead th{text-align:left; font-weight:600; color:var(--c-neutral-700)}
.talks-table tbody tr:nth-child(odd){background:var(--c-neutral-100)}
.talks-table tbody img{
  width:32px; height:32px; border-radius:50%; vertical-align:middle; margin-right:var(--space-2)
}
.btn-sm{font-size:var(--fs-xs); padding:var(--space-1) var(--space-3)}

/* ---------- ACCESSORY ---------- */
.accessory-bar{padding-block:var(--space-16)}
.accessory-row{
  display:flex; gap:var(--space-8); overflow-x:auto;
}
.accessory{
  flex:0 0 220px;
  text-align:center;
}
.sprite-360{
  height:140px;
  background:url('/assets/images/accessory-sprite.webp') no-repeat 0 0 / auto 100%;
  cursor:pointer;
}
.accessory h4{font-size:var(--fs-sm); margin-top:var(--space-2)}
.accessory .price{font-weight:600; color:var(--c-primary)}
.accessory label{display:flex; align-items:center; justify-content:center; gap:var(--space-2); font-size:var(--fs-xs)}

/* ---------- FAQ ---------- */
.faq{padding-block:var(--space-16)}
.accordion dt button{
  width:100%; text-align:left; background:none; border:none; font-size:var(--fs-base);
  display:flex; justify-content:space-between; align-items:center; padding:var(--space-4) 0;
  border-bottom:1px solid var(--c-neutral-200); cursor:pointer;
}
.accordion dt button::after{
  content:'+'; color:var(--c-primary); font-size:var(--fs-2xl); transition:transform var(--duration)
}
.accordion dt button[aria-expanded='true']::after{content:'–'; transform:rotate(180deg)}
.accordion dd{
  max-height:0; overflow:hidden; margin:0; padding:0 var(--space-2);
  border-left:2px solid var(--c-primary);
  transition:max-height var(--duration) var(--timing), padding var(--duration) var(--timing)
}
.accordion dt button[aria-expanded='true'] + dd{
  max-height:200px; padding:var(--space-4) var(--space-2)
}

/* ---------- PRESS ---------- */
.press{padding-block:var(--space-16)}
.press-grid{
  display:grid; gap:var(--space-12);
}
@media(min-width:768px){
  .press-grid{grid-template-columns:repeat(3,1fr)}
}
.press-item{
  display:flex; flex-direction:column; align-items:center; text-align:center; gap:var(--space-4)
}
.press-item .logo{height:24px; filter:invert(1) brightness(0.8)}
.press-item blockquote{
  font-family:var(--ff-mono); font-size:var(--fs-2xl); color:var(--c-neutral-700); margin:0
}
.press-item .photo{border-radius:var(--radius); margin-bottom:var(--space-3)}

/* ---------- PARTNER ---------- */
.partner-cta{padding-block:var(--space-20)}
.scanline{
  position:relative; overflow:hidden;
}
.scanline::before{
  content:''; position:absolute; inset:0;
  background:linear-gradient(to bottom, rgba(0,180,255,0.06) 50%, transparent 50%);
  background-size:100% 4px;
  animation:scan 2s linear infinite;
}
@keyframes scan{to{transform:translateY(4px)}}
.partner-cta ul{list-style:none; padding:0; margin:var(--space-6) 0; text-align:left; max-width:40ch; margin-inline:auto}
.partner-cta li+li{margin-top:var(--space-2)}

/* ---------- NEWSLETTER ---------- */
.newsletter-bar{
  background:var(--c-primary);
  color:#000;
  padding:var(--space-10) 0;
}
.newsletter-bar form{display:flex; flex-wrap:wrap; gap:var(--space-3); align-items:center; justify-content:center}
.newsletter-bar input[type=email]{
  background:#fff; color:#000; border:none; max-width:280px
}
.newsletter-bar .pixel{font-family:var(--ff-mono)}
.newsletter-bar small{width:100%; text-align:center; margin-top:var(--space-2); opacity:0.8}

/* ---------- MODAL ---------- */
.modal{
  border:none; border-radius:var(--radius-lg); padding:var(--space-8); max-width:480px; width:90%;
  background:var(--c-neutral-50); color:var(--c-text)
}
.modal::backdrop{background:rgba(0,0,0,.75)}
.modal h3{margin-bottom:var(--space-6)}
.modal label span{display:block; font-size:var(--fs-sm); margin-bottom:var(--space-1)}
.modal .actions{display:flex; gap:var(--space-3); justify-content:flex-end; margin-top:var(--space-6)}

/* ---------- LIGHTBOX ---------- */
#lightbox{
  position:fixed; inset:0; background:rgba(10,10,10,.95); z-index:100;
  display:flex; align-items:center; justify-content:center; padding:var(--space-4)
}
.lightbox-content{
  max-width:900px; width:100%;
  background:var(--c-neutral-100); border-radius:var(--radius-lg); padding:var(--space-6)
}
.lightbox-header{display:flex; justify-content:space-between; align-items:center; margin-bottom:var(--space-4)}
.lightbox-body{display:grid; gap:var(--space-4)}
.close-lightbox{background:none; border:none; font-size:var(--fs-3xl); color:var(--c-text); cursor:pointer}
.hidden{display:none}