/* ==========================================================================
   Black Bolt / White Flare: productspotlight (/black-bolt-white-flare)

   De 30th Celebration-pagina (css/celebration.css) is de richtlijn: dezelfde
   bewegende WebGL-achtergrond, glazen rondjes, koppen met een glansverloop,
   binnenkomst-animaties, het hoofdstukdok en de 3D-lightbox. Waar de 30th
   dag en nacht heeft, wisselt deze pagina tussen de twee sets:

     html[data-bw-set="blackbolt"]   zwart met Zekrom-blauw (standaard)
     html[data-bw-set="whiteflare"]  wit met Reshiram-rood

   De kleuren komen van de setlogo's op de packs: 黑雷奔流 in blauw chroom op
   zwart, 白焰迸涌 in rood chroom op wit.

   Witte tekst blijft in beide sets leesbaar doordat hij altijd op inkt
   staat. In White Flare krijgen de koppen een inktvlek onder zich (de
   inktspatten van het officiële beeld), en panelen, glazen knoppen en
   labels zijn donker in plaats van doorzichtig. In Black Bolt is diezelfde
   vlek zwakker en dempt hij alleen de bliksem achter de tekst.

   Alles hangt onder body.bw-page, zodat geen regel hiervan op een andere
   pagina terecht kan komen.
   ========================================================================== */

/* --------------------------------------------------------------- tokens */
body.bw-page{
  --bw-ease:cubic-bezier(.22,1,.36,1);
  --bw-accent:#2f86ff;
  --bw-accent-hi:#8fd0ff;
  --bw-accent-deep:#0b2a9c;
  --bw-glow:rgba(47,134,255,.62);
  --bw-dim:rgba(255,255,255,.66);
  --bw-panel-bg:rgba(255,255,255,.05);
  --bw-panel-line:rgba(255,255,255,.24);
  --bw-glass-bg:radial-gradient(circle at 50% 50%, rgba(255,255,255,.03) 50%, rgba(255,255,255,.2) 100%);
  --bw-glass-line:rgba(255,255,255,.55);
  --bw-pool:.62;
  --bw-pool-ink:3,5,12;
  --bw-label-bg:transparent;
  --bw-head:linear-gradient(143deg,#fff 0%,#fff 28%,#d3eaff 38%,#fff 50%,#fff 76%,#a9d6ff 87%,#fff 100%);
  --bw-tier0:#3d9bff; --bw-tier1:#6a7cff; --bw-tier2:#b25ad8; --bw-tier3:#ff3d63;
  background:transparent;
  color:#fff;
  overflow-x:hidden;
}
html[data-bw-set="whiteflare"] body.bw-page{
  --bw-accent:#ff4026;
  --bw-accent-hi:#ffa274;
  --bw-accent-deep:#a8110d;
  --bw-glow:rgba(255,64,38,.55);
  --bw-dim:rgba(255,255,255,.8);
  --bw-panel-bg:rgba(15,13,15,.84);
  --bw-panel-line:rgba(255,255,255,.14);
  --bw-glass-bg:radial-gradient(circle at 50% 50%, rgba(16,14,16,.78) 50%, rgba(44,38,40,.82) 100%);
  --bw-glass-line:rgba(255,255,255,.72);
  --bw-pool:1;
  --bw-pool-ink:9,8,10;
  --bw-label-bg:rgba(12,11,13,.88);
  --bw-head:linear-gradient(143deg,#fff 0%,#fff 28%,#ffe1d5 38%,#fff 50%,#fff 76%,#ffbaa2 87%,#fff 100%);
}
/* Elk element dat bij één set hoort. */
html[data-bw-set="whiteflare"] body.bw-page [data-bw-only="bb"],
html:not([data-bw-set="whiteflare"]) body.bw-page [data-bw-only="wf"]{ display:none !important; }

html:has(body.bw-page){ background:#04060b !important; }
html[data-bw-set="whiteflare"]:has(body.bw-page){ background:#ecebe8 !important; }
body.bw-page .site-footer{ position:relative; z-index:2; }

/* --------------------------------------------------------------- canvas
   Een CSS-verloop als terugval, daarboven het WebGL-canvas. Zolang dat nog
   niet draait, laat de hero de twee helften als vlakken zien. */
.bw-bg{
  position:fixed; inset:-4px; z-index:0;
  pointer-events:none; isolation:isolate;
  background:#04060b; overflow:hidden; transform:translateZ(0);
}
@supports (height:100lvh){
  .bw-bg{ height:calc(100lvh + 8px); bottom:auto; }
}
.bw-bg-fallback,.bw-bg-canvas{ position:absolute; inset:0; width:100%; height:100%; }
.bw-bg-fallback{
  background:
    radial-gradient(60% 70% at 10% 92%, rgba(40,110,255,.42), transparent 70%),
    radial-gradient(50% 60% at 92% 8%, rgba(24,56,170,.32), transparent 70%),
    #04060b;
}
html[data-bw-set="whiteflare"] .bw-bg-fallback{
  background:
    radial-gradient(60% 70% at 90% 92%, rgba(255,80,40,.3), transparent 70%),
    radial-gradient(50% 60% at 8% 8%, rgba(0,0,0,.1), transparent 70%),
    #eeedea;
}
.bw-bg-canvas{ z-index:1; display:block; opacity:0; transition:opacity .45s cubic-bezier(.4,0,.2,1); }
.bw-bg-canvas.is-ready{ opacity:1; }
.bw-bg:not(.is-ready) ~ main .bw-hero::before{
  content:""; position:absolute; inset:0; z-index:0;
  background:linear-gradient(100deg, #05070c 0 50%, #eeedea 50% 100%);
}
.bw-defs{ position:absolute; width:0; height:0; overflow:hidden; }

/* --------------------------------------------------------------- header
   Zwevend boven de hero, met een donkere schaduw erachter: de rechterhelft
   van de hero is wit, en de navigatie is wit. */
body.bw-page .site-header{
  position:fixed; left:0; right:0; top:0;
  background:transparent; backdrop-filter:none;
  border-bottom-color:transparent;
  transition:background .35s ease, backdrop-filter .35s ease, border-color .35s ease;
}
body.bw-page .site-header::before{
  content:""; position:absolute; inset:0 0 -34px; z-index:-1; pointer-events:none;
  background:linear-gradient(to bottom, rgba(0,0,0,.78), rgba(0,0,0,.5) 58%, rgba(0,0,0,0));
  transition:opacity .35s ease;
}
body.bw-page .site-header.is-solid{
  background:rgba(6,8,15,.74);
  backdrop-filter:blur(14px) saturate(1.2);
  border-bottom-color:rgba(255,255,255,.12);
}
html[data-bw-set="whiteflare"] body.bw-page .site-header.is-solid{ background:rgba(17,14,16,.86); }
body.bw-page .site-header.is-solid::before{ opacity:0; }
body.bw-page .main-nav a{ color:rgba(255,255,255,.8); }
body.bw-page .header-icon{ color:rgba(255,255,255,.85); }
body.bw-page .header-icon:hover{ color:#fff; }
body.bw-page .main-nav a:hover{ color:#fff; }
body.bw-page.nav-open .site-header{ background:var(--ink); backdrop-filter:none; border-bottom-color:transparent; }
body.bw-page.nav-open .site-header::before{ opacity:0; }
body.bw-page .to-top{
  background:var(--bw-glass-bg);
  border:1px solid var(--bw-glass-line);
  color:#fff;
  backdrop-filter:blur(6px);
  box-shadow:inset 0 0 8px rgba(255,255,255,.22);
}

/* --------------------------------------------------------------- layout */
.bw{
  position:relative; z-index:1;
  isolation:isolate;
  padding-bottom:50px;
  overflow:clip;
  color:#fff;
  font-family:var(--font-body);
  -webkit-font-smoothing:antialiased;
}
.bw button{ font:inherit; color:inherit; }
.bw-panel{
  position:relative; z-index:1;
  isolation:isolate;
  min-height:860px;
  padding-bottom:70px;
}

.bw-glass{
  display:grid; place-items:center;
  width:40px; height:40px; padding:0;
  border-radius:50%;
  border:1px solid var(--bw-glass-line);
  background:var(--bw-glass-bg);
  box-shadow:inset 0 0 9px rgba(255,255,255,.22), 0 0 6px rgba(255,255,255,.08);
  backdrop-filter:blur(6px);
  color:#fff;
  cursor:pointer;
}
.bw-glass svg{ width:100%; height:100%; display:block; }
.bw-glass svg path{ fill:none; stroke:currentColor; stroke-width:2; stroke-linecap:round; stroke-linejoin:round; }
.bw-back{ position:absolute; z-index:40; top:105px; left:56px; }
.bw-back svg{ width:22px; height:22px; }

.bw-ink-panel{
  border:.5px solid var(--bw-panel-line); border-radius:16px;
  background:var(--bw-panel-bg);
  backdrop-filter:blur(8px);
}

/* --------------------------------------------------------------- hero */
.bw-hero{
  position:relative; z-index:10;
  height:max(760px, 100svh);
  display:grid; grid-template-columns:1fr 1fr; align-items:center;
  padding:92px clamp(20px,5vw,96px) 128px;
  overflow:hidden;
  --px:0; --py:0;
}
.bw-hero-side{
  position:relative; z-index:2;
  display:flex; flex-direction:column; align-items:center;
  gap:clamp(12px,2.2vh,24px);
}
.bw-word{ margin:0; display:grid; justify-items:center; gap:10px; text-align:center; }
.bw-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);
}
/* Chroom zoals op de packs, met een donkere rand: op de witte kant moet het
   woord net zo goed staan als op de zwarte. */
.bw-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));
}
.bw-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));
}
.bw-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;
}
.bw-hero-pack{
  position:relative; display:block;
  height:min(52vh, 540px); aspect-ratio:560/994;
  padding:0; border:0; background:none; cursor:pointer;
  transition:transform .7s var(--bw-ease), filter .6s, scale .6s var(--bw-ease);
}
.bw-hero-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;
  transition:opacity .6s;
}
.bw-hero-side--wf .bw-hero-pack{ --glow:rgba(255,64,38,.42); }
.bw-hero-pack img{
  display:block; width:100%; height:100%; object-fit:contain;
  filter:drop-shadow(0 30px 34px rgba(0,0,0,.5));
  animation:bw-float 6.5s ease-in-out infinite;
}
.bw-hero-side--wf .bw-hero-pack img{ animation-delay:-3.2s; }
.bw-hero-side--bb .bw-hero-pack{ transform:translate(calc(var(--px) * -10px), calc(var(--py) * -8px)) rotate(-7deg); }
.bw-hero-side--wf .bw-hero-pack{ transform:translate(calc(var(--px) * -10px), calc(var(--py) * -8px)) rotate(7deg); }
.bw-hero-pack:hover,.bw-hero-pack:focus-visible{ filter:brightness(1.06); }
.bw-hero-side--bb .bw-hero-pack:hover{ transform:translate(calc(var(--px) * -10px), calc(var(--py) * -8px - 10px)) rotate(-4deg); }
.bw-hero-side--wf .bw-hero-pack:hover{ transform:translate(calc(var(--px) * -10px), calc(var(--py) * -8px - 10px)) rotate(4deg); }
/* De niet gekozen set staat iets terug. */
html:not([data-bw-set="whiteflare"]) .bw-hero-side--wf .bw-hero-pack,
html[data-bw-set="whiteflare"] .bw-hero-side--bb .bw-hero-pack{ scale:.88; filter:saturate(.7) brightness(.92); }
html:not([data-bw-set="whiteflare"]) .bw-hero-side--wf .bw-hero-pack::before,
html[data-bw-set="whiteflare"] .bw-hero-side--bb .bw-hero-pack::before{ opacity:.25; }
@keyframes bw-float{
  0%,100%{ transform:translateY(0); }
  50%{ transform:translateY(-12px); }
}

/* De datumbalk, zilver zoals op het officiële beeld. */
.bw-date{
  position:absolute; z-index:5; left:50%; bottom:76px;
  margin:0; transform:translateX(-50%);
  filter:drop-shadow(0 8px 18px rgba(0,0,0,.45));
}
.bw-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-down{
  position:absolute; z-index:4; left:50%; bottom:24px;
  display:grid; place-items:center;
  width:40px; height:30px;
  transform:translateX(-50%);
  color:#fff;
  filter:drop-shadow(0 1px 4px rgba(0,0,0,.6));
}
.bw-down svg{ width:18px; height:11px; }
.bw-down svg path{ fill:none; stroke:currentColor; stroke-width:2; stroke-linecap:round; stroke-linejoin:round; }

/* --------------------------------------------------------------- koppen
   De inktvlek onder elke kop: een zachte ovaal met een ruwe rand
   (svg-filter #bw-ink in de HTML). */
.bw-heading{
  position:relative; z-index:2;
  width:min(980px,85vw);
  margin:0 auto;
  padding-top:108px;
  text-align:center;
  isolation:isolate;
}
.bw-heading::before,.bw-heading::after{
  content:""; position:absolute; z-index:-1;
  pointer-events:none;
  opacity:var(--bw-pool);
  transition:opacity .5s;
}
/* De vlek zelf: een volle, afgeronde rechthoek die het svg-filter gerafeld
   maakt. Een rechthoek en geen ovaal, zodat ook de uiteinden van de langste
   regel op inkt staan. */
.bw-heading::before{
  left:-6%; right:-6%; top:72px; bottom:-38px;
  border-radius:46% / 42%;
  background:rgba(var(--bw-pool-ink),.95);
  filter:url(#bw-ink);
}
/* Een paar losse spetters, buiten de tekst. */
.bw-heading::after{
  left:-12%; right:-12%; top:60px; bottom:-50px;
  background:
    radial-gradient(circle 9px at 3% 56%, rgba(var(--bw-pool-ink),.95) 90%, transparent),
    radial-gradient(circle 5px at .8% 44%, rgba(var(--bw-pool-ink),.95) 90%, transparent),
    radial-gradient(circle 12px at 97% 38%, rgba(var(--bw-pool-ink),.95) 90%, transparent),
    radial-gradient(circle 6px at 99.2% 52%, rgba(var(--bw-pool-ink),.95) 90%, transparent),
    radial-gradient(circle 7px at 86% 99%, rgba(var(--bw-pool-ink),.95) 90%, transparent);
  filter:url(#bw-ink);
}
html:not([data-bw-set="whiteflare"]) .bw-heading::after{ opacity:0; }
.bw-heading h1,.bw-heading h2{
  margin:0;
  font:700 36px/1.18 var(--font-body);
  letter-spacing:-.5px;
  color:transparent;
  background-image:var(--bw-head);
  -webkit-background-clip:text; background-clip:text;
  text-wrap:balance;
}
.bw-heading p{
  margin:15px 0 0;
  color:var(--bw-dim);
  font-size:16px; line-height:1.55;
  text-wrap:balance;
}

.bw-reveal{ opacity:0; transform:translateY(28px); transition:opacity .75s cubic-bezier(.215,.61,.355,1), transform .75s cubic-bezier(.215,.61,.355,1); }
.bw-reveal.is-in{ opacity:1; transform:none; }

/* --------------------------------------------------------------- features */
.bw-feature-grid{
  display:grid; grid-template-columns:repeat(4,1fr); gap:18px;
  width:min(1240px,90vw);
  margin:96px auto 0;
}
.bw-feature{ --tilt:0deg; min-width:0; text-align:center; }
.bw-feature:nth-child(1){ --tilt:-6deg; }
.bw-feature:nth-child(2){ --tilt:2deg; }
.bw-feature:nth-child(3){ --tilt:-3.5deg; }
.bw-feature:nth-child(4){ --tilt:5deg; }
.bw-card-btn{
  position:relative; display:block;
  width:min(244px,100%); aspect-ratio:252/344;
  margin:0 auto; padding:20px;
  border:0; border-radius:20px;
  background:rgba(255,255,255,.025);
  box-shadow:inset 0 0 14px var(--bw-accent), 0 0 20px color-mix(in srgb, var(--bw-accent) 45%, transparent);
  transform:rotate(var(--tilt));
  overflow:hidden; cursor:pointer;
  transition:transform .3s, filter .3s, box-shadow .5s;
}
html[data-bw-set="whiteflare"] .bw-card-btn{ background:rgba(16,14,16,.86); }
.bw-card-btn:hover{ transform:rotate(var(--tilt)) translateY(-8px) scale(1.025); filter:brightness(1.12); }
.bw-card-btn img{ display:block; width:100%; height:100%; object-fit:contain; }
.bw-card-btn--pair{ padding:14px; }
.bw-card-btn--pack{ padding:16px 30px; }
.bw-feature h3{
  display:inline-block;
  max-width:220px; margin:20px auto 0; padding:6px 14px;
  border-radius:12px;
  background:var(--bw-label-bg);
  font:700 19px/1.25 var(--font-body); letter-spacing:-.2px; color:#fff;
  text-wrap:balance;
}

/* --------------------------------------------------------------- BWR */
.bw-bwr .bw-heading p{
  max-height:120px; overflow:hidden;
  transition:max-height .6s var(--bw-ease), margin .6s var(--bw-ease), opacity .3s;
}
.bw-bwr.is-info .bw-heading p{ max-height:0; margin-top:0; opacity:0; }
.bw-bwr-stage{
  position:relative;
  width:min(1120px,90vw); height:540px;
  margin:44px auto 0;
}
.bw-bwr-show{
  position:absolute; inset:0;
  display:grid; place-items:center;
  transition:transform .8s var(--bw-ease);
}
.bw-bwr-pair{
  --rx:0deg; --ry:0deg;
  width:min(470px,80vw); aspect-ratio:900/1020;
  transform:perspective(1100px) rotateX(var(--rx)) rotateY(var(--ry));
  transition:transform .25s ease-out;
}
.bw-bwr-pair img{
  display:block; width:100%; height:100%; object-fit:contain;
  filter:drop-shadow(0 0 22px var(--bw-glow)) drop-shadow(0 24px 30px rgba(0,0,0,.35));
  transition:filter .5s;
}
.bw-bwr.is-info .bw-bwr-show{ transform:translateX(-26%); }
.bw-bwr-info{
  position:absolute; right:0; top:50%;
  width:min(470px,46%);
  padding:38px 40px;
  opacity:0; visibility:hidden;
  transform:translate(36px,-50%);
  transition:opacity .4s, transform .75s var(--bw-ease), visibility 0s linear .75s;
}
.bw-bwr.is-info .bw-bwr-info{
  opacity:1; visibility:visible; transform:translate(0,-50%);
  transition-delay:.08s, 0s, 0s;
}
.bw-bwr-info h3{ margin:0 0 18px; font:700 26px/1.25 var(--font-body); letter-spacing:-.3px; }
.bw-bwr-info p{ margin:0 0 14px; color:var(--bw-dim); font-size:15.5px; line-height:1.6; }
.bw-note{ font-size:13.5px !important; color:var(--bw-dim); opacity:.9; }

.bw-tab{
  position:absolute; z-index:5; right:0; bottom:24px;
  display:flex; align-items:center; gap:12px;
  height:56px; padding:0 30px 0 22px;
  border:1px solid var(--bw-glass-line); border-right:0;
  border-radius:999px 0 0 999px;
  background:linear-gradient(90deg, rgba(255,255,255,.2), rgba(255,255,255,.07));
  box-shadow:inset 0 0 10px rgba(255,255,255,.18);
  backdrop-filter:blur(8px);
  color:#fff; font-size:19px; font-weight:700; letter-spacing:.02em;
  cursor:pointer;
  transition:filter .15s, transform .15s;
}
html[data-bw-set="whiteflare"] .bw-tab{ background:linear-gradient(90deg, rgba(20,17,19,.9), rgba(20,17,19,.78)); }
.bw-tab:hover,.bw-tab:focus-visible{ filter:brightness(1.12) drop-shadow(0 0 10px var(--bw-glow)); transform:translateX(-2px); }
.bw-tab svg{ width:24px; height:24px; flex:none; transition:transform .35s var(--bw-ease); }
.bw-tab svg path{ fill:none; stroke:currentColor; stroke-width:2.4; stroke-linecap:round; stroke-linejoin:round; }
.bw-tab .bw-tab-close{ display:none; }
.bw-bwr.is-info .bw-tab svg{ transform:rotate(180deg); }
.bw-bwr.is-info .bw-tab .bw-tab-open{ display:none; }
.bw-bwr.is-info .bw-tab .bw-tab-close{ display:inline; }

/* --------------------------------------------------------------- trainers
   Zoals op pokemon.cn: de gewone kaart, een pijl, de nieuwe SAR, en
   daarnaast de promo uit de energy sets. */
.bw-trainer-stage{ width:min(1180px,92vw); margin:58px auto 0; }
.bw-trainer{
  display:grid;
  grid-template-columns:auto auto auto auto;
  grid-template-areas:"u arrow sar promo" "note note note note";
  justify-content:center; align-items:end;
  gap:22px 34px;
}
.bw-tslot{ display:grid; justify-items:center; }
.bw-tslot--u{ grid-area:u; }
.bw-tslot--sar{ grid-area:sar; }
.bw-tslot--promo{ grid-area:promo; }
.bw-arrow{ grid-area:arrow; align-self:center; width:48px; color:#fff; opacity:.8; margin-bottom:60px; }
.bw-arrow svg{ display:block; width:100%; }
.bw-arrow svg path{ fill:none; stroke:currentColor; stroke-width:2.2; stroke-linecap:round; stroke-linejoin:round; }
html[data-bw-set="whiteflare"] .bw-arrow{ color:#15131a; opacity:.85; }
.bw-tcard{
  display:block; padding:0; border:0; background:none;
  border-radius:12px; overflow:hidden; cursor:zoom-in;
  transition:transform .3s var(--bw-ease), filter .3s;
}
.bw-tcard img{ display:block; width:100%; height:auto; }
.bw-tcard:hover{ transform:translateY(-6px) scale(1.02); filter:brightness(1.06); }
.bw-tslot--u .bw-tcard{ width:168px; filter:drop-shadow(0 10px 18px rgba(0,0,0,.35)); }
.bw-tslot--sar .bw-tcard{ width:280px; box-shadow:0 0 28px var(--bw-glow); border-radius:14px; }
.bw-tslot--promo .bw-tcard{ width:216px; box-shadow:0 0 18px color-mix(in srgb, var(--bw-accent) 35%, transparent); }
.bw-cap{
  display:grid; justify-items:center; gap:1px;
  margin:14px 0 0; padding:7px 14px; border-radius:12px;
  background:var(--bw-label-bg);
  text-align:center;
}
.bw-cap em{ font:600 11.5px/1.3 var(--font-body); font-style:normal; letter-spacing:.08em; text-transform:uppercase; color:var(--bw-accent-hi); }
.bw-cap b{ font:700 16px/1.3 var(--font-body); color:#fff; }
.bw-cap small{ font:400 13px/1.3 var(--font-body); font-variant-numeric:tabular-nums; color:var(--bw-dim); }
.bw-trainer-note{
  grid-area:note; justify-self:center;
  max-width:760px; margin:8px 0 0; padding:18px 26px;
  text-align:center; color:var(--bw-dim); font-size:15px; line-height:1.6;
}

/* --------------------------------------------------------------- hits
   De focusrail van de 30th: één kaart groot in het midden, de rest waaiert
   uit. */
.bw-frame{ position:relative; width:100%; height:505px; margin:44px auto 0; }
.bw-rail-layout{
  display:grid; grid-template-rows:377px 30px 48px; gap:26px; align-items:center;
  width:100%; height:100%;
}
.bw-rail{
  position:relative; width:100%; height:100%;
  overflow:visible;
  cursor:grab; touch-action:pan-y;
  user-select:none; -webkit-user-select:none;
}
.bw-rail:active{ cursor:grabbing; }
.bw-focus{
  --focus-offset:0px;
  position:absolute; top:50%; left:50%; z-index:1;
  width:156px; height:218px; padding:0;
  border:0; border-radius:7px; background:none;
  opacity:.22; overflow:hidden; cursor:pointer;
  transform:translate(calc(-50% + var(--focus-offset)),-50%);
  filter:drop-shadow(0 6px 10px rgba(0,0,0,.28));
  transition:width .45s cubic-bezier(.2,.8,.2,1), height .45s cubic-bezier(.2,.8,.2,1), opacity .4s, transform .5s cubic-bezier(.2,.8,.2,1), filter .3s;
}
.bw-focus[data-distance="1"]{ z-index:3; opacity:.72; }
.bw-focus[data-distance="2"]{ z-index:2; opacity:.42; }
.bw-focus.is-active{
  z-index:5; opacity:1;
  width:270px; height:377px;
  filter:drop-shadow(0 0 22px var(--bw-glow));
}
.bw-focus:hover{ filter:brightness(1.08) drop-shadow(0 0 18px var(--bw-glow)); }
.bw-focus img{ display:block; width:100%; height:100%; object-fit:contain; pointer-events:none; -webkit-user-drag:none; }
.bw-rail-name{
  justify-self:center; align-self:start;
  display:inline-flex; align-items:baseline; gap:8px;
  padding:7px 16px; border-radius:999px;
  background:var(--bw-label-bg);
  font-size:16px; font-weight:700; color:#fff;
}
.bw-rail-name small{ font:400 13px var(--font-body); font-variant-numeric:tabular-nums; color:var(--bw-dim); }

.bw-slider{
  --progress:0%;
  -webkit-appearance:none; appearance:none;
  display:block; width:207px; height:30px; margin:0 auto;
  background:none; border:0; outline:0;
  cursor:ew-resize;
}
.bw-slider::-webkit-slider-runnable-track{
  height:4px; border-radius:10px;
  background:linear-gradient(90deg, var(--bw-accent-hi) 0, var(--bw-accent) var(--progress), rgba(217,217,217,.22) var(--progress) 100%);
  box-shadow:inset 0 0 1.5px #fff, 0 0 8px color-mix(in srgb, var(--bw-accent) 40%, transparent);
}
html[data-bw-set="whiteflare"] .bw-slider::-webkit-slider-runnable-track{ background:linear-gradient(90deg, var(--bw-accent-hi) 0, var(--bw-accent) var(--progress), rgba(20,18,20,.32) var(--progress) 100%); }
.bw-slider::-webkit-slider-thumb{
  -webkit-appearance:none; appearance:none;
  width:30px; height:30px; margin-top:-13px;
  border:0; border-radius:50%;
  background:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3E%3Ccircle cx='15' cy='15' r='6.2' fill='none' stroke='white' stroke-width='1.6'/%3E%3Cpath d='M8.8 15h4.2M17 15h4.2' stroke='white' stroke-width='1.6'/%3E%3Ccircle cx='15' cy='15' r='1.9' fill='white'/%3E%3C/svg%3E") center/100% no-repeat,
    radial-gradient(circle at 50% 40%, var(--bw-accent-hi) 0%, var(--bw-accent) 55%, var(--bw-accent-deep) 100%);
  box-shadow:0 0 0 1.5px rgba(255,255,255,.8), 0 0 12px var(--bw-glow);
  cursor:grab;
}
.bw-slider::-moz-range-track{ height:4px; border-radius:10px; background:rgba(217,217,217,.18); box-shadow:inset 0 0 1.5px #fff; }
.bw-slider::-moz-range-progress{ height:4px; border-radius:10px; background:linear-gradient(90deg, var(--bw-accent-hi), var(--bw-accent)); }
.bw-slider::-moz-range-thumb{
  width:30px; height:30px; border:0; border-radius:50%;
  background:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3E%3Ccircle cx='15' cy='15' r='6.2' fill='none' stroke='white' stroke-width='1.6'/%3E%3Cpath d='M8.8 15h4.2M17 15h4.2' stroke='white' stroke-width='1.6'/%3E%3Ccircle cx='15' cy='15' r='1.9' fill='white'/%3E%3C/svg%3E") center/100% no-repeat,
    radial-gradient(circle at 50% 40%, var(--bw-accent-hi) 0%, var(--bw-accent) 55%, var(--bw-accent-deep) 100%);
  box-shadow:0 0 0 1.5px rgba(255,255,255,.8), 0 0 12px var(--bw-glow);
  cursor:grab;
}

/* --------------------------------------------------------------- packs */
.bw-packs-grid{
  display:grid;
  grid-template-columns:minmax(0,220px) minmax(0,640px) minmax(0,220px);
  grid-template-areas:"p5 odds p20";
  justify-content:center; align-items:center;
  gap:clamp(20px,3vw,48px);
  width:min(1200px,92vw);
  margin:50px auto 0;
}
.bw-packfig{ grid-area:p5; margin:0; display:grid; justify-items:center; gap:16px; text-align:center; }
.bw-packfig--20{ grid-area:p20; }
.bw-packfig img{ display:block; width:auto; height:330px; filter:drop-shadow(0 22px 28px rgba(0,0,0,.42)); }
.bw-packfig:first-child img{ transform:rotate(-4deg); }
.bw-packfig--20 img{ transform:rotate(4deg); }
.bw-packfig figcaption{
  display:grid; gap:2px; padding:8px 14px; border-radius:12px;
  background:var(--bw-label-bg);
}
.bw-packfig figcaption b{ font-size:16px; font-weight:700; }
.bw-packfig figcaption span{ font-size:13.5px; color:var(--bw-dim); }
.bw-odds{ grid-area:odds; padding:22px 26px 14px; }
.bw-odds table{ width:100%; border-collapse:collapse; font-size:14.5px; }
.bw-odds caption{ caption-side:top; text-align:left; padding:0 0 12px; font-weight:700; font-size:16px; color:#fff; }
.bw-odds th,.bw-odds td{ padding:7px 10px; text-align:left; border-bottom:.5px solid rgba(255,255,255,.14); vertical-align:middle; }
.bw-odds thead th{ font:400 12.5px/1.3 var(--font-body); letter-spacing:.06em; text-transform:uppercase; color:var(--bw-dim); border-bottom-color:rgba(255,255,255,.28); }
.bw-odds tbody th{ font-weight:600; color:#fff; white-space:nowrap; }
.bw-odds tbody th::before{
  content:""; display:inline-block; width:4px; height:14px; margin-right:10px; border-radius:2px;
  vertical-align:-2px; background:var(--tier, var(--bw-tier0));
}
.bw-odds td{ font-variant-numeric:tabular-nums; color:rgba(255,255,255,.88); }
.bw-odds td[rowspan]{ border-left:.5px solid rgba(255,255,255,.14); }
.bw-odds td[rowspan] b{ display:block; font-size:17px; color:#fff; }
.bw-odds td[rowspan] small{ display:block; font-size:12.5px; color:var(--bw-dim); }
.bw-odds .bw-t0{ --tier:var(--bw-tier0); }
.bw-odds .bw-t1{ --tier:var(--bw-tier1); }
.bw-odds .bw-t2{ --tier:var(--bw-tier2); }
.bw-odds .bw-t3{ --tier:var(--bw-tier3); }
.bw-odds .bw-t3 td[rowspan] b{ color:#ff9db0; }
.bw-odds .bw-note{ margin:12px 0 0; line-height:1.5; }

/* --------------------------------------------------------------- producten */
.bw-prod-grid{
  display:grid; grid-template-columns:1fr 1fr; gap:24px;
  width:min(1200px,92vw);
  margin:50px auto 0;
}
.bw-prod{
  display:grid; grid-template-columns:minmax(0,190px) minmax(0,1fr);
  gap:28px; align-items:center;
  padding:28px 30px;
}
.bw-prod-media{ position:relative; display:grid; place-items:center; }
.bw-prod-media > img{ display:block; width:100%; height:auto; max-height:340px; object-fit:contain; filter:drop-shadow(0 18px 26px rgba(0,0,0,.4)); }
.bw-energy-fan{ height:300px; }
.bw-energy-fan img{
  position:absolute; top:50%; left:50%;
  width:132px; height:auto;
  filter:drop-shadow(0 12px 18px rgba(0,0,0,.45));
  transition:transform .5s var(--bw-ease);
}
.bw-energy-fan img:nth-child(4n+1){ z-index:4; transform:translate(-50%,-50%) translate(-8px,10px) rotate(-3deg); }
.bw-energy-fan img:nth-child(4n+2){ z-index:3; transform:translate(-50%,-50%) translate(-44px,-18px) rotate(-11deg); }
.bw-energy-fan img:nth-child(4n+3){ z-index:2; transform:translate(-50%,-50%) translate(30px,-26px) rotate(8deg); }
.bw-energy-fan img:nth-child(4n+4){ z-index:1; transform:translate(-50%,-50%) translate(58px,-4px) rotate(15deg); }
.bw-prod:hover .bw-energy-fan img:nth-child(4n+2){ transform:translate(-50%,-50%) translate(-60px,-24px) rotate(-15deg); }
.bw-prod:hover .bw-energy-fan img:nth-child(4n+3){ transform:translate(-50%,-50%) translate(40px,-34px) rotate(10deg); }
.bw-prod:hover .bw-energy-fan img:nth-child(4n+4){ transform:translate(-50%,-50%) translate(76px,-2px) rotate(19deg); }
.bw-eyebrow{ margin:0 0 8px; font:600 12.5px/1.3 var(--font-body); letter-spacing:.08em; text-transform:uppercase; color:var(--bw-accent-hi); }
.bw-prod h3{ margin:0 0 14px; font:700 24px/1.2 var(--font-body); letter-spacing:-.3px; color:#fff; }
.bw-list{ list-style:none; margin:0 0 16px; padding:0; display:grid; gap:9px; }
.bw-list li{ position:relative; padding-left:20px; color:rgba(255,255,255,.84); font-size:14.5px; line-height:1.55; }
.bw-list li::before{ content:""; position:absolute; left:2px; top:.6em; width:7px; height:7px; border-radius:50%; background:var(--bw-accent); box-shadow:0 0 8px var(--bw-glow); }
.bw-list li b{ color:#fff; }
.bw-promos{ display:flex; gap:12px; margin:4px 0 12px; }
.bw-promo{
  display:grid; justify-items:center; gap:6px;
  width:86px; padding:0; border:0; background:none; cursor:zoom-in;
  font-size:12.5px; font-weight:600; color:#fff;
}
.bw-promo img{ display:block; width:100%; height:auto; border-radius:6px; box-shadow:0 0 12px color-mix(in srgb, var(--bw-accent) 40%, transparent); transition:transform .3s var(--bw-ease); }
.bw-promo:hover img{ transform:translateY(-4px) rotate(-2deg); }
.bw-prod .bw-note{ margin:0; }

/* --------------------------------------------------------------- pills */
.bw-pill{
  display:inline-flex; align-items:center; gap:14px;
  height:52px; padding:0 30px 0 22px;
  border:1px solid var(--bw-glass-line); border-radius:999px;
  background:linear-gradient(90deg, rgba(255,255,255,.2), rgba(255,255,255,.07));
  box-shadow:inset 0 0 10px rgba(255,255,255,.18);
  backdrop-filter:blur(8px);
  color:#fff; text-decoration:none;
  font-size:18px; font-weight:700; letter-spacing:.01em;
  transition:transform .25s, filter .25s, box-shadow .25s;
}
html[data-bw-set="whiteflare"] .bw-pill{ background:linear-gradient(90deg, rgba(22,19,21,.92), rgba(22,19,21,.8)); }
.bw-pill:hover{ color:#fff; transform:translateY(-2px); filter:brightness(1.12); }
.bw-pill svg{ width:22px; height:22px; flex:none; }
.bw-pill svg path,.bw-pill svg circle{ fill:none; stroke:currentColor; stroke-width:2; stroke-linecap:round; stroke-linejoin:round; }
.bw-pill--primary,
html[data-bw-set="whiteflare"] .bw-pill--primary{
  border-color:rgba(255,255,255,.72);
  background:linear-gradient(105deg, var(--bw-accent-deep), var(--bw-accent) 58%, var(--bw-accent-hi));
  box-shadow:0 10px 30px color-mix(in srgb, var(--bw-accent) 40%, transparent), inset 0 0 10px rgba(255,255,255,.25);
}
.bw-pill--sm{ height:42px; padding:0 20px 0 16px; font-size:15px; gap:10px; }
.bw-pill--sm svg{ width:18px; height:18px; }

/* --------------------------------------------------------------- CTA */
.bw-cta{ min-height:880px; }
.bw-cta-stage{
  position:relative;
  display:grid; place-items:center;
  height:420px; margin:28px auto 0;
}
.bw-cta-stage::before{
  content:""; position:absolute;
  width:420px; height:420px; border-radius:50%;
  background:radial-gradient(circle, var(--bw-glow), color-mix(in srgb, var(--bw-accent) 18%, transparent) 45%, transparent 70%);
  filter:blur(20px);
}
.bw-cta-pack{
  position:relative;
  width:auto; height:400px;
  filter:drop-shadow(0 24px 40px rgba(0,0,0,.5));
  animation:bw-cta-float 6s ease-in-out infinite;
}
@keyframes bw-cta-float{
  0%,100%{ transform:translateY(0) rotate(-4deg); }
  50%{ transform:translateY(-14px) rotate(-2deg); }
}
.bw-cta-row{
  display:flex; justify-content:center; flex-wrap:wrap; gap:18px;
  margin:38px auto 0;
}

/* --------------------------------------------------------------- info */
.bw-info{ position:relative; z-index:1; padding:56px 0 60px; }
.bw-info-inner{ width:min(1180px, calc(100% - 40px)); margin:0 auto; display:grid; gap:22px; }
.bw-info-intro,.bw-info-block{ padding:clamp(22px,3vw,40px); }
.bw-info-intro-body{ display:grid; grid-template-columns:minmax(0,1.35fr) minmax(0,1fr); gap:clamp(22px,4vw,56px); align-items:start; padding-top:10px; }
.bw-info-intro h2{ margin-bottom:6px; }
.bw-more > summary,.bw-fold > summary{ list-style:none; cursor:pointer; }
.bw-more > summary::-webkit-details-marker,.bw-fold > summary::-webkit-details-marker{ display:none; }
.bw-more > summary{
  display:inline-flex; align-items:center; gap:10px;
  margin-top:8px; padding:6px 0;
  font-size:15px; font-weight:600; color:rgba(255,255,255,.85);
}
.bw-more > summary::after{ content:"+"; font-size:20px; font-weight:400; line-height:1; transition:transform .25s; }
.bw-more[open] > summary::after{ transform:rotate(45deg); }
.bw-more .bw-more-close{ display:none; }
.bw-more[open] .bw-more-open{ display:none; }
.bw-more[open] .bw-more-close{ display:inline; }
.bw-more > summary:hover{ color:#fff; }
.bw-fold > summary{ display:flex; justify-content:space-between; align-items:center; gap:16px; }
.bw-fold > summary h3{ margin:0 !important; }
.bw-fold > summary::after{ content:"+"; font-size:24px; font-weight:400; line-height:1; color:rgba(255,255,255,.75); transition:transform .25s; }
.bw-fold[open] > summary::after{ transform:rotate(45deg); }
.bw-fold[open] > summary{ margin-bottom:16px; }
.bw-info h2{
  margin:0 0 16px;
  font:700 clamp(24px,2.4vw,32px)/1.2 var(--font-body); letter-spacing:-.4px;
  color:transparent;
  background-image:var(--bw-head);
  -webkit-background-clip:text; background-clip:text;
  text-wrap:balance;
}
.bw-info p{ margin:0 0 14px; color:var(--bw-dim); font-size:15.5px; line-height:1.65; }
.bw-info h3{ margin:0 0 14px; font:700 20px/1.25 var(--font-body); color:#fff; }
.bw-info-note{ font-size:14px !important; margin:14px 0 0 !important; }
.bw-facts{ margin:0; display:grid; border-top:.5px solid rgba(255,255,255,.2); }
.bw-facts > div{ display:grid; grid-template-columns:130px 1fr; gap:12px; padding:12px 0; border-bottom:.5px solid rgba(255,255,255,.2); }
.bw-facts dt{ font:400 13px/1.5 var(--font-body); color:var(--bw-dim); }
.bw-facts dd{ margin:0; font-size:14.5px; line-height:1.5; color:#fff; }
.bw-chips{ list-style:none; margin:0; padding:0; display:flex; flex-wrap:wrap; gap:8px; }
.bw-chips a,.bw-chips span{
  display:inline-flex; align-items:center; height:34px; padding:0 14px;
  border:1px solid rgba(255,255,255,.35); border-radius:999px;
  background:rgba(255,255,255,.07);
  color:#fff; text-decoration:none; font-size:13.5px;
}
.bw-chips span{ border-style:dashed; color:rgba(255,255,255,.75); }
.bw-chips a{ transition:background .2s, border-color .2s; }
.bw-chips a:hover{ background:rgba(255,255,255,.18); border-color:rgba(255,255,255,.7); }
.bw-cardlist{ columns:3 240px; column-gap:32px; }
.bw-cardgroup{ break-inside:avoid; margin:0 0 22px; }
.bw-cardgroup h4{ margin:0 0 8px; font:600 14px/1.4 var(--font-body); color:var(--bw-accent-hi); }
.bw-cardgroup h4 > span:last-child{ color:rgba(255,255,255,.5); margin-left:4px; }
.bw-cardgroup ul{ list-style:none; margin:0; padding:0; }
.bw-cardgroup li{ padding:3px 0; color:rgba(255,255,255,.84); font-size:14px; }
.bw-cardgroup small{ font:400 13px var(--font-body); font-variant-numeric:tabular-nums; color:rgba(255,255,255,.48); margin-left:4px; }
.bw-faq details{ border-bottom:.5px solid rgba(255,255,255,.2); }
.bw-faq details:first-of-type{ border-top:.5px solid rgba(255,255,255,.2); }
.bw-faq summary{
  list-style:none; cursor:pointer;
  display:flex; justify-content:space-between; align-items:center; gap:16px;
  padding:16px 0; font-size:16px; font-weight:600; color:#fff;
}
.bw-faq summary::-webkit-details-marker{ display:none; }
.bw-faq summary::after{ content:"+"; font-size:22px; font-weight:400; line-height:1; color:rgba(255,255,255,.7); transition:transform .25s; }
.bw-faq details[open] summary::after{ transform:rotate(45deg); }
.bw-faq details p{ margin:0 0 16px; max-width:80ch; }

/* --------------------------------------------------------------- dock */
.bw-dock{
  position:fixed; z-index:60; left:50%; bottom:0;
  display:flex; justify-content:center; align-items:flex-end; gap:18px;
  height:64px; padding:0 18px 8px;
  border-radius:10px 10px 0 0;
  opacity:0; isolation:isolate;
  transform:translate(-50%,140%);
  transition:transform .38s cubic-bezier(.2,.8,.2,1), opacity .28s;
}
.bw-dock::before{
  content:""; position:absolute; inset:0; z-index:0;
  border-radius:inherit; pointer-events:none;
  border:.5px solid rgba(255,255,255,.8); border-bottom:0;
  background:rgba(255,255,255,.05);
  backdrop-filter:blur(7.5px);
}
html[data-bw-set="whiteflare"] .bw-dock::before{ background:rgba(16,14,16,.8); border-color:rgba(255,255,255,.5); }
.bw-dock.is-visible{ opacity:1; transform:translate(-50%,0); }
.bw-dock button{
  position:relative; z-index:2;
  flex:0 0 78px; width:78px; height:108px; padding:7px 6px;
  border:.5px solid rgba(255,255,255,.75); border-radius:6px;
  background:rgba(255,255,255,.14);
  overflow:hidden; cursor:pointer;
  transform:translateY(-1px);
  transition:opacity .25s, transform .28s, box-shadow .28s;
}
.bw-dock button.is-active{ transform:translateY(-1px) scale(1.04); box-shadow:inset 0 0 5px var(--bw-accent), 0 0 12px var(--bw-glow); }
.bw-dock img{
  width:100%; height:100%; object-fit:contain;
  opacity:.9; filter:saturate(.9) brightness(.55);
  transition:opacity .25s, filter .25s;
}
.bw-dock button.is-active img{ opacity:1; filter:brightness(1.08) saturate(1.08); }

/* --------------------------------------------------------------- setkeuze
   Twee bollen: de gekozen set groot, de andere klein ernaast. */
.bw-switch{
  position:fixed; z-index:80; left:56px; bottom:55px;
  display:flex; align-items:center;
  height:44px; padding:0;
  border:0; background:none; color:#fff; cursor:pointer;
  transition:opacity .25s, transform .25s;
}
.bw-switch.is-tucked{ opacity:0; pointer-events:none; transform:translateY(12px); }
.bw-orb{
  position:relative;
  display:grid; place-items:center;
  width:24px; height:24px; border-radius:50%;
  transition:width .35s var(--bw-ease), height .35s var(--bw-ease), box-shadow .35s, filter .2s;
}
.bw-orb svg{ width:56%; height:56%; }
.bw-orb--bb{
  z-index:2;
  background:radial-gradient(circle at 50% 40%, #1d2d63 0%, #070b1d 72%);
  box-shadow:inset 0 0 0 1.5px rgba(120,190,255,.85), 0 0 12px rgba(47,134,255,.6);
}
.bw-orb--bb svg path{ fill:#5cb8ff; }
.bw-orb--wf{
  z-index:1; margin-left:-5px;
  background:radial-gradient(circle at 50% 40%, #ffffff 0%, #e2e2e4 74%);
  box-shadow:inset 0 0 0 1.5px rgba(255,120,90,.9), 0 0 12px rgba(255,64,38,.5);
}
.bw-orb--wf svg path{ fill:#ff4026; }
html:not([data-bw-set="whiteflare"]) .bw-orb--bb,
html[data-bw-set="whiteflare"] .bw-orb--wf{ width:42px; height:42px; z-index:2; }
html[data-bw-set="whiteflare"] .bw-orb--bb{ z-index:1; }
.bw-switch:hover .bw-orb{ filter:brightness(1.12); }
.bw-switch-label{
  margin-left:10px; padding:6px 12px; border-radius:999px;
  background:rgba(0,0,0,.62);
  font-size:13px; font-weight:700; letter-spacing:.02em; white-space:nowrap;
}

/* --------------------------------------------------------------- lightbox
   De 3D-lightbox van de 30th, met de gloed in de kleur van de set. */
.bw-lightbox{
  position:fixed; inset:0; z-index:120000;
  display:grid; place-items:center;
  background:rgba(2,3,6,.76);
  backdrop-filter:blur(16px);
  touch-action:none;
  animation:bw-lb-in .42s cubic-bezier(.22,.7,.2,1) both;
}
.bw-lightbox.is-closing{ animation:bw-lb-out .26s ease both; }
@keyframes bw-lb-in{ from{ opacity:0; } to{ opacity:1; } }
@keyframes bw-lb-out{ to{ opacity:0; } }
.bw-lb-close{
  position:absolute; z-index:4;
  top:max(22px, env(safe-area-inset-top)); right:28px;
  width:42px; height:42px;
}
.bw-lb-close svg{ width:20px; height:20px; }
.bw-lb-stage{
  --pointer-x:50%; --pointer-y:50%;
  --glow-shift-x:0px; --glow-shift-y:0px; --glow-scale:1;
  position:relative; isolation:isolate;
  width:360px; height:500px;
  perspective:780px; perspective-origin:50% 48%;
}
.bw-lb-backglow{
  position:absolute; top:50%; left:50%; z-index:0;
  width:100%; height:100%; object-fit:contain;
  pointer-events:none;
  opacity:.4;
  filter:blur(36px) saturate(1.3) brightness(1.25);
  mix-blend-mode:screen;
  transform:translate(-50%,-50%) translate3d(var(--glow-shift-x),var(--glow-shift-y),0) scale(calc(1.115 * var(--glow-scale)));
  will-change:transform, opacity;
  transition:opacity .22s, filter .22s;
}
.bw-lb-stage.is-active .bw-lb-backglow{ opacity:.46; filter:blur(44px) saturate(1.36) brightness(1.3); }
.bw-lb-wrap{ position:absolute; inset:0; z-index:2; transform-style:preserve-3d; touch-action:none; user-select:none; -webkit-user-select:none; }
.bw-lb-shell{
  position:absolute; inset:0; z-index:1;
  transform-style:preserve-3d; will-change:transform;
  isolation:isolate; touch-action:none; cursor:grab;
}
.bw-lb-wrap:active .bw-lb-shell{ cursor:grabbing; }
.bw-lb-media{ position:absolute; inset:0; z-index:1; isolation:isolate; backface-visibility:hidden; -webkit-backface-visibility:hidden; transform:translateZ(.25px); }
.bw-lb-img{
  display:block; width:100%; height:100%;
  object-fit:contain; pointer-events:none; -webkit-user-drag:none;
  filter:drop-shadow(0 18px 30px rgba(0,0,0,.3));
}
.bw-lb-shine,.bw-lb-glare{
  position:absolute; inset:-1px;
  pointer-events:none; opacity:0;
  border-radius:20px; overflow:hidden;
  -webkit-mask-position:50%; mask-position:50%;
  -webkit-mask-size:contain; mask-size:contain;
  -webkit-mask-repeat:no-repeat; mask-repeat:no-repeat;
  will-change:opacity;
  transition:opacity .28s;
}
.bw-lb-shine{
  z-index:2;
  background:
    radial-gradient(circle at var(--pointer-x) var(--pointer-y), rgba(255,255,255,.18) 0%, rgba(255,236,150,.12) 16%, rgba(105,200,255,.14) 32%, rgba(176,120,255,.1) 48%, rgba(255,115,120,.08) 62%, transparent 82%),
    repeating-linear-gradient(118deg, rgba(255,90,70,.4) 0%, rgba(80,170,255,.46) 13%, rgba(255,240,200,.42) 25%, rgba(120,140,255,.44) 38%, rgba(255,90,70,.4) 50%);
  background-size:100% 100%, 260% 260%;
  background-position:center, var(--pointer-x) var(--pointer-y);
  background-blend-mode:screen;
  mix-blend-mode:color-dodge;
  filter:brightness(1.08) contrast(1.18) saturate(1.3);
}
.bw-lb-glare{
  z-index:3;
  background:radial-gradient(circle at var(--pointer-x) var(--pointer-y), rgba(255,255,255,.78) 0%, rgba(255,255,255,.26) 20.25%, rgba(255,255,255,.07) 40.5%, transparent 69.75%);
  mix-blend-mode:screen;
}
.bw-lb-stage.is-active .bw-lb-shine{ opacity:.45; }
.bw-lb-stage.is-active .bw-lb-glare{ opacity:.7; }
.bw-lb-meta{
  position:absolute; z-index:4; left:50%; bottom:max(26px, env(safe-area-inset-bottom));
  display:flex; align-items:baseline; gap:10px;
  padding:8px 18px; border-radius:999px;
  background:rgba(0,0,0,.5);
  transform:translateX(-50%);
  white-space:nowrap;
}
.bw-lb-name{ font-size:15px; font-weight:600; color:rgba(255,255,255,.9); }
.bw-lb-meta small{ font:400 13px var(--font-body); font-variant-numeric:tabular-nums; color:rgba(255,255,255,.6); }

/* --------------------------------------------------------------- tablet */
@media (max-width:1100px){
  .bw-prod-grid{ grid-template-columns:1fr; max-width:720px; }
  .bw-trainer{ gap:20px 22px; }
  .bw-tslot--sar .bw-tcard{ width:240px; }
  .bw-tslot--promo .bw-tcard{ width:180px; }
  .bw-tslot--u .bw-tcard{ width:140px; }
  .bw-packs-grid{
    grid-template-columns:1fr 1fr;
    grid-template-areas:"p5 p20" "odds odds";
    max-width:720px;
  }
}

/* --------------------------------------------------------------- telefoon */
@media (max-width:720px){
  .bw-panel{ min-height:0; padding-bottom:64px; }
  .bw-back{ top:86px; left:20px; width:32px; height:32px; }
  .bw-back svg{ width:18px; height:18px; }

  .bw-hero{ height:max(700px, 100svh); padding:118px 10px 120px; gap:6px; }
  .bw-word{ gap:8px; }
  .bw-word b{ font-size:clamp(23px,6.6vw,40px); }
  .bw-word > span{ font-size:10.5px; padding:5px 10px; letter-spacing:.08em; }
  .bw-hero-pack{ height:min(38vh, 300px); }
  .bw-date{ bottom:70px; }
  .bw-date span{ padding:10px 26px; font-size:14px; }

  .bw-heading{ width:calc(100% - 40px); padding-top:84px; }
  .bw-heading::before{ left:-16px; right:-16px; top:62px; bottom:-30px; border-radius:38% / 30%; }
  .bw-heading::after{ display:none; }
  .bw-heading h1,.bw-heading h2{ font-size:28px; line-height:1.26; }
  .bw-heading p{ font-size:13.5px; line-height:1.6; }
  .bw-heading p br{ display:none; }

  .bw-feature-grid{ grid-template-columns:repeat(2,minmax(0,1fr)); gap:16px 12px; width:calc(100% - 32px); max-width:380px; margin-top:34px; }
  .bw-feature:nth-child(n){ --tilt:0deg; }
  .bw-card-btn{ width:100%; padding:10px; border-radius:12px; }
  .bw-card-btn--pack{ padding:10px 24px; }
  .bw-feature h3{ margin-top:10px; font-size:14px; padding:5px 10px; }

  .bw-bwr-stage{ height:auto; margin-top:30px; display:grid; gap:20px; }
  .bw-bwr-show{ position:relative; inset:auto; }
  .bw-bwr-pair{ width:min(320px,82vw); }
  .bw-bwr.is-info .bw-bwr-show{ transform:none; }
  .bw-bwr-info{
    position:relative; right:auto; top:auto;
    width:auto; margin:0 16px; padding:24px 22px;
    transform:none; display:none;
  }
  .bw-bwr.is-info .bw-bwr-info{ display:block; transform:none; }
  .bw-bwr.is-info .bw-heading p{ max-height:none; margin-top:15px; opacity:1; }
  .bw-bwr-info h3{ font-size:21px; }
  .bw-bwr-info p{ font-size:14px; }
  .bw-tab{ position:relative; right:auto; bottom:auto; margin:22px auto 0; border-right:1px solid var(--bw-glass-line); border-radius:999px; height:46px; font-size:15px; padding:0 22px 0 16px; }
  .bw-bwr{ display:flex; flex-direction:column; }

  .bw-trainer-stage{ margin-top:34px; }
  .bw-trainer{
    grid-template-columns:1fr 1fr;
    grid-template-areas:"sar sar" "u promo" "note note";
    gap:18px 12px; align-items:start;
  }
  .bw-arrow{ display:none; }
  .bw-tslot--sar .bw-tcard{ width:min(230px,62vw); }
  .bw-tslot--u .bw-tcard{ width:min(124px,34vw); }
  .bw-tslot--promo .bw-tcard{ width:min(124px,34vw); }
  .bw-cap{ padding:6px 10px; }
  .bw-cap b{ font-size:14px; }
  .bw-cap em{ font-size:10.5px; }
  .bw-trainer-note{ margin:0 4px; padding:16px 18px; font-size:13.5px; }

  .bw-frame{ height:470px; margin-top:34px; }
  .bw-rail-layout{ grid-template-rows:377px 30px 40px; gap:16px; }

  .bw-packs-grid{ width:calc(100% - 24px); gap:18px 10px; margin-top:34px; }
  .bw-packfig img{ height:210px; }
  .bw-packfig figcaption b{ font-size:14px; }
  .bw-packfig figcaption span{ font-size:12px; }
  .bw-odds{ padding:16px 14px 10px; }
  .bw-odds table{ font-size:13px; }
  .bw-odds th,.bw-odds td{ padding:6px 6px; }
  .bw-odds thead th{ font-size:10.5px; letter-spacing:.03em; }
  .bw-odds td[rowspan] b{ font-size:15px; }
  .bw-odds td[rowspan] small{ font-size:11px; }
  .bw-odds tbody th::before{ margin-right:6px; }

  .bw-prod-grid{ width:calc(100% - 24px); margin-top:34px; gap:16px; }
  .bw-prod{ grid-template-columns:110px minmax(0,1fr); gap:16px; padding:20px 16px; align-items:start; }
  .bw-energy-fan{ height:190px; }
  .bw-energy-fan img{ width:84px; }
  .bw-prod h3{ font-size:19px; }
  .bw-list li{ font-size:13.5px; }
  .bw-promos{ gap:8px; }
  .bw-promo{ width:64px; font-size:11px; }

  .bw-cta{ min-height:0; }
  .bw-cta-stage{ height:300px; }
  .bw-cta-stage::before{ width:300px; height:300px; }
  .bw-cta-pack{ height:280px; }
  .bw-cta-row{ flex-wrap:nowrap; gap:10px; width:calc(100% - 24px); max-width:420px; }
  .bw-cta-row .bw-pill{ flex:1 1 0; justify-content:center; min-width:0; height:46px; padding:0 12px; gap:8px; font-size:14px; white-space:nowrap; }
  .bw-cta-row .bw-pill svg{ width:17px; height:17px; }

  .bw-info{ padding:44px 0 40px; }
  .bw-info-inner{ width:calc(100% - 24px); gap:14px; }
  .bw-info-intro-body{ grid-template-columns:1fr; gap:14px; }
  .bw-info p{ font-size:14px; }
  .bw-facts > div{ grid-template-columns:110px 1fr; }
  .bw-faq summary{ font-size:15px; }

  .bw-dock{ display:none; }
  .bw-switch{ left:16px; bottom:18px; }
  .bw-lb-stage{ max-width:84vw; max-height:72vh; }
  .bw-lb-meta{ bottom:max(22px, env(safe-area-inset-bottom)); }
}

@media (prefers-reduced-motion:reduce){
  .bw-reveal{ opacity:1 !important; transform:none !important; }
  .bw-hero-pack img,.bw-cta-pack{ animation:none; }
  .bw-bwr-show,.bw-bwr-info,.bw-bwr .bw-heading p{ transition-duration:.01ms !important; }
  .bw-lb-backglow,.bw-lb-shine,.bw-lb-glare{ transition:none; }
}

/* `hidden` moet winnen van de display-regels hierboven. */
.bw [hidden]{ display:none !important; }