/* ==========================================================================
   Over-The-Top — Bell Capital Cup campaign
   Announcement bar, entry modal, and the homepage takeover section.
   Scoped so the whole campaign can be lifted out in one commit when the
   tournament is over: remove this file, promo.js, and the .bcc-* markup.
   ========================================================================== */

:root {
  --bcc-red: #E4032E;
  --bcc-red-dark: #B60225;
  --bcc-blue: #0079C1;
  --bcc-ink: #0B0B0D;
}

/* ---- Announcement bar ---------------------------------------------------
   Sits above the nav and pushes it down, so it is always visible without
   covering anything. --bcc-bar-h feeds the nav offset below.
   -------------------------------------------------------------------------- */

/* Declared on body, not on .bcc-bar — the nav is a sibling and has to read
   the same value. site.js overwrites it with the bar's measured height, since
   the text wraps to two or three lines on narrow screens. */
body.has-bcc-bar { --bcc-bar-h: 2.75rem; }

.bcc-bar {
  position: fixed;
  inset: 0 0 auto 0;
  z-index: calc(var(--z-nav) + 1);
  min-height: var(--bcc-bar-h);
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-3);
  padding: 0.5rem var(--gutter);
  background: linear-gradient(90deg, var(--bcc-red-dark), var(--bcc-red) 45%, #F4415F 55%, var(--bcc-red-dark));
  color: #fff;
  text-align: center;
  font-size: var(--fs-xs);
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  line-height: 1.25;
}

.bcc-bar__text { display: inline-flex; align-items: center; gap: 0.5em; flex-wrap: wrap; justify-content: center; }

.bcc-bar__cta {
  flex: none;
  display: inline-flex;
  align-items: center;
  gap: 0.4em;
  padding: 0.4em 1em;
  border-radius: var(--r-pill);
  background: #fff;
  color: var(--bcc-red-dark);
  font-weight: 800;
  white-space: nowrap;
  transition: transform var(--dur-fast) var(--ease-out), box-shadow var(--dur-fast) var(--ease-out);
}

.bcc-bar__cta:hover { transform: translateY(-1px); box-shadow: 0 6px 16px rgba(0,0,0,0.35); }
.bcc-bar__cta svg { width: 0.9rem; height: 0.9rem; stroke: currentColor; fill: none; }

/* The fixed nav has to clear the bar. */
body.has-bcc-bar .nav { top: var(--bcc-bar-h, 2.75rem); }
body.has-bcc-bar { --nav-offset: 7.5rem; }
body.has-bcc-bar .nav__drawer { top: calc(4.75rem + var(--bcc-bar-h, 2.75rem)); }

/* The hero sits under both the bar and the nav, so it needs both cleared. */
body.has-bcc-bar .hero { padding-top: calc(6.5rem + var(--bcc-bar-h, 2.75rem)); }

@media (max-width: 620px) {
  body.has-bcc-bar { --bcc-bar-h: 4rem; }
  .bcc-bar { font-size: 0.7rem; gap: var(--space-2); }
}

/* ---- Entry modal --------------------------------------------------------- */

.bcc-modal {
  position: fixed;
  inset: 0;
  z-index: var(--z-overlay);
  display: grid;
  place-items: center;
  padding: var(--gutter);
  background: rgba(3, 2, 8, 0.82);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  opacity: 0;
  visibility: hidden;
  transition: opacity var(--dur) var(--ease-out), visibility var(--dur);
  overflow-y: auto;
}

.bcc-modal.is-open { opacity: 1; visibility: visible; }

.bcc-modal__panel {
  position: relative;
  width: min(100%, 940px);
  max-height: calc(100dvh - 2 * var(--gutter));
  overflow-y: auto;
  border-radius: var(--r-xl);
  border: 1px solid var(--border-strong);
  background:
    radial-gradient(ellipse 80% 60% at 50% 0%, rgba(228, 3, 46, 0.22), transparent 70%),
    radial-gradient(ellipse 70% 50% at 50% 100%, rgba(139, 51, 240, 0.25), transparent 70%),
    var(--ink-800);
  box-shadow: var(--shadow-lg), 0 0 60px rgba(228, 3, 46, 0.25);
  transform: translateY(14px) scale(0.98);
  transition: transform var(--dur-slow) var(--ease-out);
}

.bcc-modal.is-open .bcc-modal__panel { transform: none; }

.bcc-modal__panel,
.bcc-modal__grid > *,
.bcc-hero__grid > *,
.bcc-steps > *,
.bcc-fan { min-width: 0; max-width: 100%; }

.bcc-modal__grid {
  display: grid;
  grid-template-columns: 1fr 0.8fr;
  gap: clamp(1.5rem, 0.8rem + 2.8vw, 3rem);
  align-items: center;
  padding: clamp(1.5rem, 1rem + 2vw, 2.75rem);
}

@media (max-width: 760px) {
  .bcc-modal__grid { grid-template-columns: 1fr; }
  .bcc-modal__art { order: -1; }
  .bcc-modal__art.bcc-fan img { width: clamp(78px, 21vw, 104px); }
  .bcc-modal__title { font-size: clamp(1.6rem, 1.1rem + 2.6vw, 2.2rem); }
  .bcc-lockup { justify-content: flex-start; }
}

.bcc-modal__close {
  position: absolute;
  top: 0.75rem;
  right: 0.75rem;
  z-index: 2;
  width: 2.5rem;
  height: 2.5rem;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid var(--border-strong);
  color: var(--chrome-100);
  cursor: pointer;
  transition: background var(--dur-fast) var(--ease-out), transform var(--dur-fast) var(--ease-out);
}

.bcc-modal__close:hover { background: rgba(255, 255, 255, 0.18); transform: rotate(90deg); }
.bcc-modal__close svg { width: 1.1rem; height: 1.1rem; stroke: currentColor; stroke-width: 2.4; fill: none; }

/* Partner lockup: two logos, separated by a hairline. */
.bcc-lockup {
  display: flex;
  align-items: center;
  gap: clamp(0.75rem, 0.4rem + 1.2vw, 1.25rem);
  margin-bottom: var(--space-4);
}

.bcc-lockup img { display: block; }
.bcc-lockup__ott { height: clamp(2.2rem, 1.6rem + 1.8vw, 3.1rem); width: auto; }
.bcc-lockup__bcc { height: clamp(3.6rem, 2.5rem + 3.4vw, 5.75rem); width: auto; }

.bcc-lockup__rule {
  width: 1px;
  align-self: stretch;
  min-height: 2.4rem;
  background: linear-gradient(180deg, transparent, rgba(255,255,255,0.45), transparent);
  flex: none;
}

.bcc-modal__title {
  font-family: var(--font-display);
  font-size: clamp(1.7rem, 1.15rem + 2.4vw, 2.9rem);
  line-height: 0.95;
  text-transform: uppercase;
  margin: 0 0 var(--space-3);
}

.bcc-modal__body { color: var(--text-dim); font-size: var(--fs-sm); margin-bottom: var(--space-4); }
.bcc-modal__body strong { color: var(--text); }

.bcc-points { display: grid; gap: 0.55rem; margin-bottom: var(--space-5); }

.bcc-points li {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 0.6rem;
  align-items: start;
  font-size: var(--fs-sm);
  color: var(--text-dim);
}

.bcc-points svg { width: 1.05rem; height: 1.05rem; fill: var(--bcc-red); flex: none; margin-top: 0.3em; }

.btn--bcc {
  --btn-bg: linear-gradient(180deg, #FF4B69, var(--bcc-red) 45%, var(--bcc-red-dark));
  --btn-fg: #fff;
  box-shadow: 0 6px 20px rgba(228, 3, 46, 0.45);
}

.btn--bcc:hover { box-shadow: 0 12px 30px rgba(228, 3, 46, 0.55), 0 0 26px rgba(228, 3, 46, 0.4); }

.bcc-modal__dismiss {
  display: block;
  margin-top: var(--space-4);
  font-size: var(--fs-xs);
  color: var(--text-faint);
  background: none;
  border: 0;
  padding: 0;
  cursor: pointer;
  text-decoration: underline;
  text-underline-offset: 3px;
}

.bcc-modal__dismiss:hover { color: var(--text-dim); }

/* ---- Card fan (shared by modal art and the takeover section) ------------- */

.bcc-fan {
  display: flex;
  justify-content: center;
  align-items: center;
  perspective: 1200px;
}

.bcc-fan img {
  width: clamp(96px, 6rem + 6vw, 190px);
  border-radius: 0;
  box-shadow: 0 20px 44px rgba(0, 0, 0, 0.8);
  border: 1px solid rgba(255, 255, 255, 0.16);
}

.bcc-fan img:nth-child(1) { transform: rotate(-10deg) translateY(10px); margin-inline-end: -7%; z-index: 1; }
.bcc-fan img:nth-child(2) { transform: scale(1.12); z-index: 3; box-shadow: 0 26px 56px rgba(0,0,0,.85), 0 0 40px rgba(228,3,46,.35); }
.bcc-fan img:nth-child(3) { transform: rotate(10deg) translateY(10px); margin-inline-start: -7%; z-index: 2; }

/* ---- Homepage takeover section ------------------------------------------ */

.bcc-hero {
  position: relative;
  isolation: isolate;
  padding-block: clamp(6.5rem, 4rem + 8vw, 9rem) clamp(3rem, 2rem + 3vw, 5rem);
  overflow: hidden;
  background-color: var(--ink-900);
}

.bcc-hero::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -2;
  background-image: url("../img/nebula.webp");
  background-size: cover;
  background-position: center;
  opacity: 0.4;
}

.bcc-hero::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background:
    radial-gradient(ellipse 70% 60% at 50% 10%, rgba(228, 3, 46, 0.3), transparent 70%),
    linear-gradient(180deg, rgba(3,2,8,0.86) 0%, rgba(3,2,8,0.35) 40%, rgba(3,2,8,0.95) 100%);
}

.bcc-hero__grid {
  display: grid;
  grid-template-columns: 1.05fr 0.95fr;
  gap: clamp(2rem, 1rem + 3vw, 4rem);
  align-items: center;
}

@media (max-width: 900px) {
  .bcc-hero__grid { grid-template-columns: 1fr; }
  .bcc-hero__art { order: -1; }
  .bcc-lockup { justify-content: center; }
  .bcc-hero__copy { text-align: center; }
  .bcc-points li { text-align: left; }
  .bcc-hero .btn-row { justify-content: center; }
}

.bcc-hero__title {
  font-size: clamp(2.1rem, 1.3rem + 3.4vw, 4rem);
  line-height: 0.94;
  margin: 0 0 var(--space-4);
}

.bcc-hero__lead {
  font-size: var(--fs-lead);
  color: var(--text-dim);
  margin-bottom: var(--space-5);
  max-width: 52ch;
}

@media (max-width: 900px) { .bcc-hero__lead { margin-inline: auto; } }

/* ---- Three-step strip: where / how / why -------------------------------- */

.bcc-steps {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(1rem, 0.5rem + 1.6vw, 2rem);
  margin-top: clamp(2.5rem, 1.5rem + 3vw, 4rem);
}

@media (max-width: 820px) { .bcc-steps { grid-template-columns: 1fr; } }

.bcc-step {
  padding: clamp(1.25rem, 1rem + 1vw, 1.75rem);
  border-radius: var(--r-lg);
  border: 1px solid var(--border);
  background: linear-gradient(180deg, rgba(228,3,46,0.09), rgba(255,255,255,0.015)), var(--ink-700);
  box-shadow: var(--shadow-card);
}

.bcc-step__num {
  display: inline-grid;
  place-items: center;
  width: 2rem;
  height: 2rem;
  border-radius: 50%;
  background: var(--bcc-red);
  color: #fff;
  font-family: var(--font-display);
  font-size: 1.05rem;
  line-height: 1;
  margin-bottom: var(--space-3);
}

.bcc-step__title {
  font-family: var(--font-display);
  font-size: clamp(1.15rem, 1rem + 0.6vw, 1.45rem);
  text-transform: uppercase;
  margin-bottom: var(--space-2);
}

.bcc-step__body { color: var(--text-dim); font-size: var(--fs-sm); }
.bcc-step__body a { color: var(--ember-400); text-decoration: underline; text-underline-offset: 3px; }

/* ---- Scarcity note ------------------------------------------------------ */

.bcc-scarcity {
  margin-top: var(--space-6);
  padding: clamp(1rem, 0.8rem + 0.8vw, 1.35rem) clamp(1.1rem, 0.8rem + 1vw, 1.75rem);
  border-radius: var(--r-md);
  border: 1px solid rgba(228, 3, 46, 0.45);
  background: rgba(228, 3, 46, 0.1);
  text-align: center;
  font-weight: 600;
  color: var(--text);
}

.bcc-scarcity strong { color: #FF8CA3; }

@media (prefers-reduced-motion: reduce) {
  .bcc-modal__panel { transform: none !important; }
}

/* ---- Card showcase carousel --------------------------------------------- */

/* Three cards at a time, with the neighbouring card deliberately bleeding off
   both edges so the section reads as a set you can scroll rather than as five
   cards that happen to be cut off. rotator.js clones the tiles either side to
   keep that bleed present at every scroll position. */
.lineup--variants {
  --vgap: clamp(0.75rem, 0.3rem + 1.2vw, 1.5rem);
  --peek: clamp(2.5rem, 7vw, 7rem);
  display: flex;
  /* sections.css narrows .lineup to 520px under 900px wide; the track is a
     full-bleed scroller at every size, so that clamp has to be lifted. */
  max-width: none;
  gap: var(--vgap);
  overflow-x: auto;
  overscroll-behavior-x: contain;
  scroll-snap-type: x mandatory;
  /* No padding-inline: the cards have to run right up to the edge for the
     bleed to show. scroll-padding is what holds the snapped card --peek in
     from the edge, which is the gap the neighbour shows through. */
  scroll-padding-inline: var(--peek);
  /* overflow-x: auto makes overflow-y compute to auto, so anything leaving the
     tiles vertically becomes a stray vertical scroll range: :hover lifts -6px
     and the hover glow spills further. Pad the block axis to contain them,
     then cancel it with margin so the section keeps its original spacing. */
  padding-block: 2.25rem;
  margin-block: calc(var(--space-7) - 2.25rem) -2.25rem;
  margin-inline: calc(-1 * var(--gutter));
  scrollbar-width: none;
  -ms-overflow-style: none;
  /* Soften the outer edge of the bleeding cards. Without this they end on a
     hard vertical cut that looks like a layout bug rather than a peek. */
  -webkit-mask-image: linear-gradient(to right,
    transparent 0, #000 calc(var(--peek) * 0.6),
    #000 calc(100% - var(--peek) * 0.6), transparent 100%);
  mask-image: linear-gradient(to right,
    transparent 0, #000 calc(var(--peek) * 0.6),
    #000 calc(100% - var(--peek) * 0.6), transparent 100%);
}

.lineup--variants::-webkit-scrollbar { display: none; }

.lineup--variants > * {
  flex: 0 0 calc((100% - 2 * var(--peek) - 2 * var(--vgap)) / 3);
  scroll-snap-align: start;
}

/* The cloned tiles exist only to fill the bleed. */
.lineup--variants > [data-clone] { pointer-events: none; }

@media (max-width: 900px) {
  .lineup--variants > * {
    flex-basis: calc((100% - 2 * var(--peek) - var(--vgap)) / 2);
  }
}

@media (max-width: 600px) {
  /* One card at a time, so the peek has to work harder to stay legible. */
  .lineup--variants { --peek: clamp(2.75rem, 12vw, 4.5rem); }
  .lineup--variants > * { flex-basis: calc(100% - 2 * var(--peek)); }
}

/* Arrows sit over the peek gap at each edge. Under the track they read as
   page furniture and get missed; here they are unmistakably part of it.
   They live outside the track because its edge mask would fade them out. */
.lineup-carousel { position: relative; }

/* Nothing works until the clones are in place, so a no-JS visitor gets the
   plain scroller and no controls that do nothing. */
.lineup-carousel:not(.is-ready) .lineup-nav__btn { display: none; }

.lineup-nav__btn {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  z-index: 2;
  width: 3.25rem;
  height: 3.25rem;
  display: grid;
  place-items: center;
  border-radius: 50%;
  /* Opaque enough to stay legible over whatever artwork is behind it. */
  background: rgba(6, 3, 16, 0.78);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  border: 1px solid rgba(255, 255, 255, 0.26);
  box-shadow: 0 10px 26px rgba(0, 0, 0, 0.55);
  color: var(--chrome-100);
  cursor: pointer;
  transition: background var(--dur-fast) var(--ease-out),
              border-color var(--dur-fast) var(--ease-out),
              transform var(--dur-fast) var(--ease-out);
}

.lineup-nav__btn--prev { left: 0; }
.lineup-nav__btn--next { right: 0; }

.lineup-nav__btn:hover {
  background: var(--bcc-red);
  border-color: var(--bcc-red);
  color: #fff;
  transform: translateY(-50%) scale(1.08);
}

.lineup-nav__btn:focus-visible {
  outline: 2px solid var(--violet-300);
  outline-offset: 3px;
}

.lineup-nav__btn svg { width: 1.4rem; height: 1.4rem; stroke: currentColor; fill: none; }

@media (max-width: 600px) {
  .lineup-nav__btn { width: 2.75rem; height: 2.75rem; }
  .lineup-nav__btn svg { width: 1.2rem; height: 1.2rem; }
}

/* ---- Rotating card ------------------------------------------------------
   One tile that cycles through team variants to show the design adapts to
   whoever orders it. Images are stacked and cross-faded rather than swapped
   on a single src, so there is never a blank frame while one decodes.
   -------------------------------------------------------------------------- */

.bcc-rotator__stack {
  position: relative;
  aspect-ratio: 5 / 7;
  width: 100%;
  border-radius: 0;
  overflow: hidden;
  box-shadow: 0 16px 34px rgba(0, 0, 0, 0.6);
}

.bcc-rotator__stack img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0;
  transition: opacity 700ms var(--ease-in-out);
}

.bcc-rotator__stack img.is-active { opacity: 1; }

.bcc-card-label {
  margin-top: var(--space-3);
  font-size: var(--fs-xs);
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--violet-300);
  text-align: center;
}

/* Without motion, the tile is simply the first variant. */
@media (prefers-reduced-motion: reduce) {
  .bcc-rotator__stack img { transition: none; }
}

/* Labels sit tight under the card. The reserved two-line height is what keeps
   them level with each other, rather than pushing them to the tile bottom,
   which left a large gap under the shorter cards. */
.lineup--variants .lineup__card { gap: var(--space-2); align-content: start; }

.lineup--variants .bcc-card-label {
  margin-top: 0;
  min-height: 2.6em;
  display: grid;
  place-items: start center;
}


/* Cards are square-cornered. Real trading cards have sharp corners, and a
   radius on the image reads as a UI thumbnail rather than a card. This guard
   keeps that true no matter what a future rule adds. */
.bcc-fan img,
.bcc-rotator__stack,
.bcc-rotator__stack img,
.lineup__img,
.card-fan__item,
.card-fan__item img { border-radius: 0 !important; }