/* ==========================================================================
   css/bbwf-banner.css: de Black Bolt / White Flare-banner op de homepage

   Een paneel in de deck (DECK_PANELS in js/main.js, en de paneellijsten in
   css/style.css), direct na de Gem Pack 7-banner: precies één scherm, net als
   die. Hetzelfde beeld als de hero van /black-bolt-white-flare: de twee packs
   tegenover elkaar, de woordmerken in blauw en rood chroom, en in de
   achtergrond de naad tussen de zwarte wereld van Black Bolt (bliksem) en de
   witte van White Flare (inkt en vlammen). De achtergrond is dezelfde shader
   als op de pagina (js/bbwf.js); zonder WebGL blijven de twee vlakken staan.

   Een pack aanklikken opent de pagina in die set; de knop eronder opent hem
   zoals hij is.
   ========================================================================== */
.bw-banner{
  --bwb-ease:cubic-bezier(.22,1,.36,1);
  --edge:#07090f;      /* de onderrand van het paneel (initEdgeColour in main.js) */
  --px:0; --py:0;
  position:relative;
  height:100svh; min-height:560px;
  overflow:hidden; isolation:isolate;
  color:#fff;
  background:linear-gradient(100deg, #05070c 0 50%, #eeedea 50% 100%);
}
.bwb-bg{ position:absolute; inset:0; z-index:0; pointer-events:none; }
.bwb-bg .bw-bg-canvas{
  position:absolute; inset:0; width:100%; height:100%; display:block;
  opacity:0; transition:opacity .6s cubic-bezier(.4,0,.2,1);
}
.bwb-bg .bw-bg-canvas.is-ready{ opacity:1; }
/* Een donkere band onder de vaste header: de rechterhelft is wit. */
.bw-banner::before{
  content:""; position:absolute; left:0; right:0; top:0; height:150px; z-index:1;
  background:linear-gradient(to bottom, rgba(0,0,0,.5), rgba(0,0,0,0));
  pointer-events:none;
}

/* --- de twee kanten ------------------------------------------------------ */
.bwb-stage{
  position:absolute; z-index:2;
  left:0; right:0; top:77px; bottom:150px;
  display:grid; grid-template-columns:1fr 1fr; align-items:center;
  padding:0 clamp(20px,5vw,96px);
}
.bwb-side{
  display:flex; flex-direction:column; align-items:center;
  gap:clamp(12px,2.2vh,24px);
  color:#fff; text-decoration:none;
}
.bwb-word{ display:grid; justify-items:center; gap:10px; text-align:center; }
.bwb-word b{
  display:block;
  padding:0 .1em .08em;
  font:700 clamp(40px,5.2vw,80px)/.95 var(--font-body);
  letter-spacing:-.035em;
  color:transparent;
  -webkit-background-clip:text; background-clip:text;
  transform:skewX(-9deg);
}
.bwb-word--bb b{
  background-image:linear-gradient(180deg,#f3fbff 0%,#a9dcff 34%,#3b8dff 52%,#0e3fd1 74%,#5fb6ff 100%);
  filter:drop-shadow(0 0 1px rgba(0,0,0,.95)) drop-shadow(0 3px 0 #01030b) drop-shadow(0 0 20px rgba(47,134,255,.55));
}
.bwb-word--wf b{
  background-image:linear-gradient(180deg,#fff6f0 0%,#ffb08a 34%,#ff4026 52%,#b5130f 74%,#ff7a4f 100%);
  filter:drop-shadow(0 0 1px rgba(0,0,0,.95)) drop-shadow(0 3px 0 #1a0605) drop-shadow(0 0 18px rgba(255,64,38,.4));
}
.bwb-word > span{
  padding:6px 14px; border-radius:999px;
  background:rgba(0,0,0,.62);
  font:600 13px/1.2 var(--font-body); letter-spacing:.12em; color:#fff;
  white-space:nowrap;
}
.bwb-pack{
  position:relative; display:block;
  height:min(48svh, 500px); aspect-ratio:560/994;
  transition:transform .7s var(--bwb-ease), filter .6s;
}
.bwb-pack::before{
  content:""; position:absolute; inset:8% -18%; z-index:-1; border-radius:50%;
  background:radial-gradient(closest-side, var(--glow, rgba(47,134,255,.5)), transparent 72%);
  filter:blur(18px); opacity:.85;
}
.bwb-side--wf .bwb-pack{ --glow:rgba(255,64,38,.42); }
.bwb-pack img{
  display:block; width:100%; height:100%; object-fit:contain;
  filter:drop-shadow(0 30px 34px rgba(0,0,0,.5));
  animation:bwb-float 6.5s ease-in-out infinite;
}
.bwb-side--wf .bwb-pack img{ animation-delay:-3.2s; }
.bwb-side--bb .bwb-pack{ transform:translate(calc(var(--px) * -10px), calc(var(--py) * -8px)) rotate(-7deg); }
.bwb-side--wf .bwb-pack{ transform:translate(calc(var(--px) * -10px), calc(var(--py) * -8px)) rotate(7deg); }
.bwb-side:hover .bwb-pack,.bwb-side:focus-visible .bwb-pack{ filter:brightness(1.06); }
.bwb-side--bb:hover .bwb-pack{ transform:translate(calc(var(--px) * -10px), calc(var(--py) * -8px - 10px)) rotate(-4deg); }
.bwb-side--wf:hover .bwb-pack{ transform:translate(calc(var(--px) * -10px), calc(var(--py) * -8px - 10px)) rotate(4deg); }
.bwb-side:focus-visible{ outline:none; }
.bwb-side:focus-visible .bwb-word > span{ box-shadow:0 0 0 2px #fff; }
@keyframes bwb-float{
  0%,100%{ transform:translateY(0); }
  50%{ transform:translateY(-12px); }
}

/* --- onderaan: de datum en de knop ---------------------------------------- */
.bwb-foot{
  position:absolute; z-index:3; left:50%; bottom:44px;
  display:grid; justify-items:center; gap:16px;
  transform:translateX(-50%);
}
.bwb-date{ margin:0; filter:drop-shadow(0 8px 18px rgba(0,0,0,.45)); }
.bwb-date span{
  display:inline-block;
  padding:11px 36px;
  font:700 clamp(15px,1.25vw,19px)/1 var(--font-body); letter-spacing:.01em;
  color:#0b0b0d; white-space:nowrap;
  background:linear-gradient(180deg,#fdfdfd 0%,#dfe0e3 46%,#a8aaaf 54%,#ececee 100%);
  clip-path:polygon(16px 0,100% 0,calc(100% - 16px) 100%,0 100%);
}
.bw-banner .bwb-cta{
  display:inline-flex; align-items:center; gap:12px;
  height:50px; padding:0 26px 0 28px;
  border:1px solid rgba(255,255,255,.7); border-radius:999px;
  background:linear-gradient(90deg, rgba(14,13,16,.86), rgba(14,13,16,.74));
  box-shadow:0 12px 30px rgba(0,0,0,.35), inset 0 0 10px rgba(255,255,255,.14);
  backdrop-filter:blur(8px);
  color:#fff; text-decoration:none; white-space:nowrap;
  font:700 16.5px/1 var(--font-body); letter-spacing:.01em;
  transition:transform .25s, filter .25s;
}
.bw-banner .bwb-cta:hover{ color:#fff; transform:translateY(-2px); filter:brightness(1.15); }
.bwb-cta svg{ width:20px; height:20px; flex:none; }
.bwb-cta svg path{ fill:none; stroke:currentColor; stroke-width:2; stroke-linecap:round; stroke-linejoin:round; }

/* Touch: hetzelfde als de andere banners. Het paneel is 100vh hoog en de
   inhoud schuift de helft van de browserbalk op (--deck-bar, js/main.js). */
@media (pointer:coarse){
  .bw-banner{ height:100vh; }
  .bwb-stage{ transform:translateY(calc(var(--deck-bar, 0px) / -2)); }
  .bwb-foot{ transform:translate(-50%, calc(var(--deck-bar, 0px) / -2)); }
}

/* Telefoon: twee smalle kolommen, kleinere woordmerken en packs. */
/* Telefoon: packs, datum en knop als één kolom, samen gecentreerd tussen de
   header en de onderrand van wat je ziet. Onderin blijft ruimte vrij voor de
   zwevende adresbalk van Safari (iOS 26), die over de pagina heen ligt en
   het scherm niet korter maakt: de knop stond daar eerst achter (melding van
   Kevin, 18 okt 2026). --deck-bar is de klassieke balk die het scherm wél
   korter maakt (js/main.js). */
@media (max-width:760px){
  .bw-banner{
    display:flex; flex-direction:column; justify-content:center; align-items:center;
    gap:22px;
    padding:calc(77px + 12px) 0 calc(var(--deck-bar, 0px) + 96px);
  }
  .bwb-stage{ position:relative; inset:auto; width:100%; padding:0 10px; gap:4px; transform:none; }
  .bwb-word{ gap:8px; }
  .bwb-word b{ font-size:clamp(23px,6.6vw,40px); }
  .bwb-word > span{ font-size:10.5px; padding:5px 10px; letter-spacing:.08em; }
  .bwb-pack{ height:min(33vh, 270px); }
  .bwb-foot{ position:relative; left:auto; bottom:auto; transform:none; gap:12px; }
  .bwb-date span{ padding:10px 26px; font-size:14px; }
  .bw-banner .bwb-cta{ height:46px; padding:0 20px 0 22px; font-size:14.5px; }
}
/* Een laag scherm: de packs kleiner, anders raken ze de datum. */
@media (max-height:640px){
  .bwb-pack{ height:min(40svh, 300px); }
}
@media (prefers-reduced-motion:reduce){
  .bwb-pack img{ animation:none; }
  .bwb-bg .bw-bg-canvas{ transition:none; }
}