/* ==========================================================================
   css/promo-deck.css: de productcarrousel op de homepage

   De drie productbanners (30th Celebration, Gem Pack Vol. 7 en Black Bolt /
   White Flare) stonden onder elkaar en maakten de homepage drie schermen
   langer. Nu zijn ze één paneel in de deck (.promo-deck in DECK_PANELS, js/
   main.js) met de banners naast elkaar in een horizontale baan
   (Kevin, 18 okt 2026). Elke banner houdt zijn eigen opmaak en script; dit
   bestand regelt alleen de baan, de tabs bovenin en de pijlen.

   Een banner die niet in beeld is, tekent niets: zijn IntersectionObserver
   ziet hem niet, omdat de baan hem afknipt. js/promo-deck.js laat ze wel
   alvast opstarten (event "promo:warm"), zodat het compileren van de shaders
   niet in de eerste veeg valt.
   ========================================================================== */
.promo-deck{
  --edge:#04060b;      /* de onderrand van het paneel (initEdgeColour in main.js) */
  --promo-top:64px;    /* ruimte onder de header voor de tabs (onder de 30th-sticker in de nav) */
  position:relative;
  height:100svh; min-height:560px;
  overflow:hidden; isolation:isolate;
  background:#04060b;
}
.promo-track{
  display:flex; height:100%;
  overflow-x:auto; overflow-y:hidden;
  scroll-snap-type:x mandatory;
  overscroll-behavior-x:contain;
  scrollbar-width:none;
  scroll-behavior:smooth;
}
.promo-track::-webkit-scrollbar{ display:none; }
.promo-track > section{
  flex:0 0 100%; width:100%;
  height:100% !important; min-height:0 !important;
  scroll-snap-align:start; scroll-snap-stop:always;
}

/* De inhoud van de banners schuift een tabhoogte omlaag, zodat niets onder
   de tabs valt. */
.promo-deck .gp7-copy{ top:calc(77px + var(--promo-top)); height:calc(var(--gp7-hor) - 77px - var(--promo-top)); }
.promo-deck .c30-banner .c30-sphere{ top:calc(77px + var(--promo-top)); }
/* Black Bolt / White Flare op desktop: woordmerken met packs, datum en knop
   als één kolom in de gewone flow, net als op de telefoon. Met de vaste
   posities van de losse banner kwamen de datum en de knop in een laag of
   smal venster over de packs (melding Kevin, 18 okt 2026). De zijmarge
   houdt de packs vrij van de pijlen. */
@media (min-width:761px){
  .promo-deck .bw-banner{
    display:flex; flex-direction:column; justify-content:center; align-items:center;
    gap:clamp(14px, 2.4vh, 28px);
    padding:calc(77px + var(--promo-top)) 0 clamp(40px, 7vh, 72px);
  }
  .promo-deck .bwb-stage{
    position:relative; inset:auto; width:100%;
    padding:0 clamp(84px, 9vw, 170px); transform:none;
  }
  .promo-deck .bwb-foot{ position:relative; left:auto; bottom:auto; transform:none; }
  .promo-deck .bwb-pack{ height:min(42svh, 460px, calc(100svh - 77px - var(--promo-top) - 390px)); min-height:150px; }
}

/* --- tabs ------------------------------------------------------------------
   Een dunne strook (Kevin wilde iets dat minder plek inneemt dan de pil):
   drie kleine labels met eronder een lijn van 2 px die volloopt zolang de
   carrousel vanzelf doordraait. Geen vlak erachter; een schaduw onder de
   letters houdt ze leesbaar op de lichte en de donkere banners. */
.promo-tabs{
  position:absolute; z-index:30; left:50%; top:calc(77px + 34px);
  display:flex; gap:14px;
  width:min(560px, calc(100% - 32px));
  transform:translateX(-50%);
}
/* Een vage donkere wolk achter de strook: geen vlak met een rand, en hij
   neemt geen plek in, maar de labels blijven leesbaar op de lucht van Gem
   Pack 7 en de witte kant van White Flare. */
.promo-tabs::before{
  content:""; position:absolute; z-index:-1; inset:-14px -40px -12px;
  border-radius:50%;
  background:radial-gradient(closest-side, rgba(6,10,24,.5), rgba(6,10,24,.28) 60%, rgba(6,10,24,0));
  filter:blur(6px); pointer-events:none;
}
.promo-tab{
  position:relative; flex:1 1 0; min-width:0;
  height:24px; padding:0 0 6px;
  border:0; background:none; cursor:pointer;
  font:600 12px/18px var(--font-body); letter-spacing:.02em;
  color:rgba(255,255,255,.82); text-align:center;
  text-shadow:0 1px 3px rgba(0,0,0,.55), 0 0 10px rgba(0,0,0,.35);
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
  transition:color .25s;
}
.promo-tab:hover,.promo-tab[aria-selected="true"]{ color:#fff; }
.promo-tab:focus-visible{ outline:2px solid #fff; outline-offset:2px; border-radius:2px; }
.promo-tab .promo-short{ display:none; }
.promo-tab::after,.promo-tab i{
  content:""; position:absolute; left:0; right:0; bottom:0; height:2px; border-radius:2px;
}
.promo-tab::after{ background:rgba(255,255,255,.38); box-shadow:0 0 4px rgba(0,0,0,.35); }
.promo-tab i{
  z-index:1; background:#fff;
  transform:scaleX(0); transform-origin:left center;
}
.promo-tab[aria-selected="true"] i{ transform:scaleX(1); }
.promo-deck.is-playing .promo-tab[aria-selected="true"] i{
  animation:promo-fill var(--promo-ms, 8000ms) linear both;
}
.promo-deck.is-paused .promo-tab[aria-selected="true"] i{ animation-play-state:paused; }
@keyframes promo-fill{ from{ transform:scaleX(0); } to{ transform:scaleX(1); } }

/* --- pijlen ---------------------------------------------------------------- */
.promo-arrow{
  position:absolute; z-index:30; top:50%;
  display:grid; place-items:center;
  width:48px; height:48px; padding:0;
  border:1px solid rgba(255,255,255,.55); border-radius:50%;
  background:rgba(8,9,14,.55);
  box-shadow:0 8px 22px rgba(0,0,0,.3);
  color:#fff; cursor:pointer;
  transform:translateY(-50%);
  transition:background .2s, transform .2s, opacity .2s;
}
.promo-arrow:hover{ background:rgba(8,9,14,.8); transform:translateY(-50%) scale(1.06); }
.promo-arrow:focus-visible{ outline:2px solid #fff; outline-offset:2px; }
.promo-arrow svg{ width:20px; height:20px; }
.promo-arrow svg path{ fill:none; stroke:currentColor; stroke-width:2.2; stroke-linecap:round; stroke-linejoin:round; }
.promo-arrow--prev{ left:20px; }
.promo-arrow--next{ right:20px; }

/* Touch: het paneel is 100vh, net als de andere deckpanelen (--deck-bar). */
@media (pointer:coarse){
  .promo-deck{ height:100vh; }
  .promo-arrow{ display:none; }
}
/* Telefoon: korte labels in de tabs. */
@media (max-width:760px){
  .promo-deck{ --promo-top:36px; }
  /* Links uitgelijnd, zodat de naar-boven-knop rechts vrij blijft. */
  .promo-tabs{ top:calc(77px + 12px); left:16px; width:calc(100% - 16px - 72px); transform:none; gap:10px; }
  .promo-tab{ font-size:11.5px; }
  .promo-tab .promo-long{ display:none; }
  .promo-tab .promo-short{ display:inline; }
  .promo-deck .gp7-copy{ top:calc(77px + var(--promo-top) + 20px); height:auto; }
  .promo-deck .bw-banner{ padding-top:calc(77px + var(--promo-top) + 8px); }
}
@media (prefers-reduced-motion:reduce){
  .promo-track{ scroll-behavior:auto; }
}