/* ==========================================================================
   30th Celebration: productspotlight (/30th-celebration)

   Nagebouwd op campaign-30th.pokemon.cn/products/30th-celebration: dezelfde
   bewegende WebGL-achtergrond met dag en nacht, de kaartenbol, de
   kaartrails en -muren en de 3D-lightbox. Alle maten hieronder komen uit die
   pagina; waar dit bestand afwijkt staat erbij waarom.

   Alles hangt onder body.c30-page of .c30, zodat geen regel hiervan op een
   andere pagina terecht kan komen. De site-stylesheet laadt eerst; dit bestand
   overschrijft alleen de header, de body-achtergrond en de to-top-knop.
   ========================================================================== */

/* --------------------------------------------------------------- canvas */
html:has(body.c30-page){ background:#071443 !important; }
html[data-theme="light"]:has(body.c30-page){ background:#81d1ff !important; }

body.c30-page{
  background:transparent;
  color:#fff;
  overflow-x:hidden;
}
body.c30-page .site-footer{ position:relative; z-index:2; }

/* De achtergrond: een fallback-verloop, het WebGL-canvas en (in dagmodus)
   een statisch dagverloop dat alleen te zien is zolang het canvas nog niet
   draait. Vast achter de hele pagina. */
.c30-bg{
  position:fixed; inset:-4px; z-index:0;
  pointer-events:none; isolation:isolate;
  background:#000; overflow:hidden; transform:translateZ(0);
}
@supports (height:100lvh){
  .c30-bg{ height:calc(100lvh + 8px); bottom:auto; }
}
.c30-bg-fallback,.c30-bg-canvas,.c30-bg-day{ position:absolute; inset:0; width:100%; height:100%; }
.c30-bg-fallback{
  background:
    radial-gradient(70% 80% at 5% 95%, rgba(0,106,255,.95), transparent 70%),
    radial-gradient(58% 79% at 69% -21%, #80224d 11%, transparent 77%),
    radial-gradient(50% 60% at 94% 75%, rgba(0,255,42,.5), transparent 70%),
    #000;
}
.c30-bg-canvas{ z-index:1; display:block; opacity:0; transition:opacity .45s cubic-bezier(.4,0,.2,1); }
.c30-bg-canvas.is-ready{ opacity:1; }
.c30-bg-day{
  z-index:2; opacity:0;
  background:linear-gradient(216.245deg,#4ea7ff 7.73%,#81d1ff 46.436%,#b9ccff 66.845%,#ddbeff 80.92%);
  transition:opacity .45s cubic-bezier(.4,0,.2,1);
}
html[data-theme="light"] .c30-bg-day{ opacity:1; }
html[data-theme="light"] .c30-bg.is-ready .c30-bg-day{ opacity:0; }

/* --------------------------------------------------------------- header
   De header zweeft op deze pagina, net als op de homepage, en wordt pas
   glas zodra je voorbij de bol bent. */
body.c30-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.c30-page .site-header::before{
  content:""; position:absolute; inset:0; z-index:-1;
  background:linear-gradient(to bottom, rgba(2,3,20,.45), rgba(2,3,20,0));
  transition:opacity .35s ease;
}
body.c30-page .site-header.is-solid{
  background:rgba(7,10,40,.42);
  backdrop-filter:blur(14px) saturate(1.3);
  border-bottom-color:rgba(255,255,255,.12);
}
body.c30-page .site-header.is-solid::before{ opacity:0; }
html[data-theme="light"] body.c30-page .site-header::before{
  background:linear-gradient(to bottom, rgba(20,60,140,.28), rgba(20,60,140,0));
}
html[data-theme="light"] body.c30-page .site-header.is-solid{
  background:rgba(40,110,210,.28);
}
body.c30-page .main-nav a{ color:rgba(255,255,255,.72); }
body.c30-page .main-nav a:hover{ color:#fff; }
body.c30-page.nav-open .site-header{ background:var(--ink); backdrop-filter:none; border-bottom-color:transparent; }
body.c30-page.nav-open .site-header::before{ opacity:0; }

/* De ronde naar-boven-knop van de site doet hier dienst als die van het
   origineel: rechtsonder, glas. */
body.c30-page .to-top{
  background:radial-gradient(circle, rgba(255,255,255,.04) 52%, rgba(255,255,255,.2) 100%);
  border:1px solid rgba(255,255,255,.55);
  color:#fff;
  backdrop-filter:blur(6px);
  box-shadow:inset 0 0 8px rgba(255,255,255,.22);
}

/* --------------------------------------------------------------- layout */
.c30{
  --c30-ease:cubic-bezier(.22,1,.36,1);
  position:relative; z-index:1;
  isolation:isolate;
  padding-bottom:50px;
  overflow:clip;
  color:#fff;
  font-family:var(--font-body);
  -webkit-font-smoothing:antialiased;
}
.c30 button{ font:inherit; color:inherit; }
.c30-panel{
  position:relative; z-index:1;
  isolation:isolate;
  min-height:900px;
  overflow:hidden;
}

/* Het glazen rondje dat het origineel overal gebruikt: terug, weergave,
   wisselen, sluiten. */
.c30-glass{
  display:grid; place-items:center;
  width:40px; height:40px; padding:0;
  border-radius:50%;
  border:1px solid rgba(255,255,255,.55);
  background:radial-gradient(circle at 50% 50%, rgba(255,255,255,.03) 50%, rgba(255,255,255,.2) 100%);
  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;
}
.c30-glass svg{ width:100%; height:100%; display:block; }
.c30-glass svg path{ fill:none; stroke:currentColor; stroke-width:2; stroke-linecap:round; stroke-linejoin:round; }
.c30-glass svg .fill{ fill:rgba(255,255,255,.82); stroke:none; }

.c30-back{
  position:absolute; z-index:40;
  top:105px; left:56px;
  color:rgba(255,255,255,.9);
}
.c30-back svg{ width:22px; height:22px; }

/* --------------------------------------------------------------- hero */
.c30-hero{ z-index:10; height:max(900px, 100svh); min-height:0; }
.c30-logo{
  position:absolute; z-index:12; left:50%;
  top:calc(50% - 39px);
  width:308px; height:auto; margin:0;
  transform:translateX(-50%);
  pointer-events:none;
  filter:drop-shadow(0 0 12px rgba(255,196,0,.65));
  transition:top .45s, width .45s, opacity .5s, filter .5s;
}
.c30-hero.is-faded .c30-logo{ opacity:0; filter:drop-shadow(0 0 0 transparent); }
.c30-hero.is-grid .c30-logo{ top:91px; opacity:1; filter:drop-shadow(0 0 12px rgba(255,196,0,.65)); }

/* De bol */
.c30-sphere{ position:absolute; inset:0; z-index:2; overflow:hidden; }
.c30-hero.is-grid .c30-sphere{ display:none; }
.c30-scene{
  position:absolute; inset:0; z-index:1;
  cursor:grab; touch-action:pan-y;
  user-select:none; -webkit-user-select:none;
  perspective-origin:50%;
  overflow:hidden;
}
.c30-scene.is-dragging{ cursor:grabbing; }
.c30-world{
  position:absolute; top:50%; left:50%;
  width:0; height:0;
  transform-style:preserve-3d; will-change:transform;
}
.c30-anchor{
  position:absolute; top:0; left:0; width:0; height:0;
  transform-style:preserve-3d;
  transition:transform .28s cubic-bezier(.2,.8,.2,1);
}
.c30-scard{
  --hover-lift:0; --hover-z:0px;
  --hover-tilt-x:0deg; --hover-tilt-y:0deg;
  --card-opacity:1;
  --small-pointer-x:50%; --small-pointer-y:50%;
  position:absolute; top:0; left:0;
  display:grid; place-items:center;
  padding:0; border:0; background:none;
  transform:translate(-50%,-50%) translateZ(var(--hover-z)) scale(calc(1 + var(--hover-lift)))
            rotateX(var(--hover-tilt-x)) rotateY(var(--hover-tilt-y));
  transform-origin:50%;
  backface-visibility:hidden; -webkit-backface-visibility:hidden;
  isolation:isolate; overflow:visible; cursor:pointer;
  transition:transform .24s cubic-bezier(.2,.8,.2,1), opacity .24s;
}
.c30-scard img{
  width:100%; height:100%; display:block;
  object-fit:contain; pointer-events:none; -webkit-user-drag:none;
}
.c30-scard .c30-scard-img{ position:relative; z-index:1; opacity:var(--card-opacity); transition:opacity .24s; }
.c30-scard .c30-scard-glow{
  position:absolute; inset:0; z-index:0; opacity:0;
  transform:scale(1.02);
  transition:opacity .22s, transform .22s;
}
.c30-scard::after{
  content:""; position:absolute; inset:0; z-index:2;
  border-radius:4px;
  background:radial-gradient(circle at var(--small-pointer-x) var(--small-pointer-y), rgba(255,255,255,.42), rgba(150,205,255,.12) 22%, transparent 48%);
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.24);
  mix-blend-mode:screen; opacity:0; pointer-events:none;
  transition:opacity .2s;
}
.c30-scard.is-hovered{ z-index:4; --hover-lift:.045; --hover-z:18px; }
.c30-scard.is-hovered .c30-scard-img{ opacity:1; }
.c30-scard.is-hovered::after{ opacity:.7; }
.c30-scard.is-hovered .c30-scard-glow{
  opacity:.9; transform:scale(1.04);
  filter:blur(4px) saturate(1.55) brightness(1.35);
}
.c30-vignette{ position:absolute; inset:0; z-index:2; pointer-events:none; }

/* Het raster */
.c30-deck{
  --gap-x:min(25.68px,1.783vw);
  --gap-y:min(22.7px,1.576vw);
  --col:calc((min(1321.4px,91.764vw) - 6 * var(--gap-x)) / 7);
  position:absolute; top:204px; left:50%; z-index:3;
  width:min(1321.4px,91.764vw);
  height:min(485px,33.681vw);
  transform:translateX(-50%);
  overflow-x:auto; overflow-y:hidden;
  scrollbar-width:none;
  cursor:grab; touch-action:pan-y;
  user-select:none; -webkit-user-select:none;
}
.c30-deck::-webkit-scrollbar{ display:none; }
.c30-deck.is-dragging{ cursor:grabbing; }
.c30-deck-track{
  display:grid;
  grid-template-rows:repeat(2,minmax(0,1fr));
  grid-auto-flow:column;
  grid-auto-columns:var(--col);
  gap:var(--gap-y) var(--gap-x);
  width:max-content; min-width:100%; height:100%;
}
.c30-deck-card{
  position:relative;
  padding:0; border:0; background:none;
  border-radius:max(4px,min(.486vw,7px));
  overflow:hidden; cursor:pointer;
  aspect-ratio:300/419; height:100%; width:auto;
  animation:c30-grid-in .38s var(--c30-ease) both;
  animation-delay:calc(min(var(--i), 18) * 18ms);
  transition:filter .15s, transform .15s;
}
.c30-deck-card img{ width:100%; height:100%; display:block; object-fit:contain; pointer-events:none; -webkit-user-drag:none; }
.c30-deck-card:hover{
  z-index:2;
  filter:brightness(1.06) drop-shadow(0 0 12px rgba(94,194,255,.72));
  transform:translateY(-2px);
}
/* De laatste tegel: het origineel opent hier een WeChat-QR, wij sturen door
   naar alle losse kaarten uit de set in de catalogus. */
.c30-deck-more{
  display:flex; flex-direction:column; align-items:center; justify-content:center; gap:10px;
  padding:14px; text-align:center; text-decoration:none; color:#fff;
  border:1px solid rgba(255,255,255,.5);
  background:
    radial-gradient(120% 80% at 50% 0%, rgba(120,190,255,.35), transparent 60%),
    linear-gradient(160deg, rgba(40,80,220,.55), rgba(110,40,200,.55));
  box-shadow:inset 0 0 18px rgba(255,255,255,.2);
}
.c30-deck-more b{ font-size:clamp(22px,2.4vw,34px); line-height:1; font-weight:700; }
.c30-deck-more span{ font-size:clamp(10px,.9vw,13px); line-height:1.3; opacity:.85; }
.c30-deck-more i{
  display:grid; place-items:center; width:28px; height:28px; border-radius:50%;
  border:1px solid rgba(255,255,255,.6); font-style:normal; font-size:14px;
}
@keyframes c30-grid-in{
  from{ opacity:0; transform:translateY(10px) scale(.975); }
  to{ opacity:1; transform:none; }
}
.c30-deck-nav{
  position:absolute; z-index:15; left:50%; bottom:128px;
  transform:translateX(-50%);
  display:grid; justify-items:center;
}
.c30-deck-nav .c30-slider{ width:220px; }

.c30-view-controls{
  position:absolute; z-index:14; left:50%; bottom:73px;
  display:flex; gap:16px;
  transform:translateX(-50%);
}
.c30-view-controls button{ opacity:.68; transition:opacity .2s, filter .2s; }
.c30-view-controls button.is-active{ opacity:1; filter:drop-shadow(0 0 8px #66baff); }
.c30-down{
  position:absolute; z-index:4; left:50%; bottom:26px;
  display:grid; place-items:center;
  width:40px; height:30px;
  transform:translateX(-50%);
  color:#fff;
}
.c30-down svg{ width:18px; height:11px; }
.c30-down svg path{ fill:none; stroke:currentColor; stroke-width:2; stroke-linecap:round; stroke-linejoin:round; }

/* De toestemmingsknop voor de kanteling (alleen iPhone/iPad). */
.c30-gyro{
  position:absolute; z-index:14; left:50%; bottom:92px;
  display:inline-flex; align-items:center; gap:8px;
  height:38px; padding:0 16px 0 12px;
  transform:translateX(-50%);
  border:1px solid rgba(255,255,255,.55); 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; font-size:13.5px; font-weight:600; white-space:nowrap;
  animation:c30-gyro-nudge 2.8s ease-in-out infinite;
}
.c30-gyro svg{ width:20px; height:20px; }
.c30-gyro svg rect,.c30-gyro svg path{ fill:none; stroke:currentColor; stroke-width:1.7; stroke-linecap:round; }
@keyframes c30-gyro-nudge{
  0%,100%{ transform:translateX(-50%) rotate(0); }
  20%{ transform:translateX(-50%) rotate(-3deg); }
  40%{ transform:translateX(-50%) rotate(3deg); }
  55%{ transform:translateX(-50%) rotate(0); }
}
@media (prefers-reduced-motion:reduce){ .c30-gyro{ animation:none; } }

/* --------------------------------------------------------------- koppen */
.c30-heading{
  position:relative; z-index:2;
  width:min(980px,85vw);
  margin:0 auto;
  padding-top:108px;
  text-align:center;
}
.c30-heading h1,.c30-heading h2{
  margin:0;
  font:700 36px/1.18 var(--font-body);
  letter-spacing:-.5px;
  color:transparent;
  background-image:linear-gradient(143deg,#fff 2.8%,#fff 23.9%,#cbfff5 30.9%,#ffe3f7 36.8%,#fff 45.9%,#fff 78%,#e9ffe3 83.7%,#fff2c5 86.5%,#fff 96.7%);
  -webkit-background-clip:text; background-clip:text;
  text-shadow:1.26px 1.26px 1.26px rgba(0,0,0,.01);
}
/* Gebalanceerd, zodat een regel nooit eindigt met één los woord eronder
   (zoals "Nederland." in de slotband). */
.c30-heading h1,.c30-heading h2,.c30-heading p{ text-wrap:balance; }
.c30-heading p{
  margin:15px 0 0;
  color:rgba(255,255,255,.58);
  font-size:16px; line-height:1.55;
}
html[data-theme="light"] .c30-heading p{ color:rgba(255,255,255,.88); text-shadow:0 1px 10px rgba(30,70,160,.25); }
html[data-theme="light"] .c30-heading h1,
html[data-theme="light"] .c30-heading h2{ filter:drop-shadow(0 1px 8px rgba(30,70,160,.22)); }

/* Binnenkomen, zoals de GSAP-reveal van het origineel: 28px en 0,75s. */
.c30-reveal{ opacity:0; transform:translateY(28px); transition:opacity .75s cubic-bezier(.215,.61,.355,1), transform .75s cubic-bezier(.215,.61,.355,1); }
.c30-reveal.is-in{ opacity:1; transform:none; }

/* --------------------------------------------------------------- features */
.c30-feature-grid{
  display:grid; grid-template-columns:repeat(4,1fr); gap:18px;
  width:min(1302px,90.4vw);
  margin:106px auto 0;
}
.c30-feature{ --tilt:0deg; min-width:0; text-align:center; }
.c30-feature:nth-child(1){ --tilt:-7.69deg; }
.c30-feature:nth-child(2){ --tilt:2deg; }
.c30-feature:nth-child(3){ --tilt:-4deg; }
.c30-feature:nth-child(4){ --tilt:4deg; }
.c30-feature[data-glow="violet"]{ --glow:#ff38e4; }
.c30-feature[data-glow="cyan"]{ --glow:#00e5ff; }
.c30-feature[data-glow="yellow"]{ --glow:#e8ff39; }
.c30-feature[data-glow="orange"]{ --glow:#ff6444; }
.c30-feature h3{
  width:200px; margin:20px auto 0;
  font-family:var(--font-body); letter-spacing:-.2px; color:#fff;
  font-size:20px; line-height:1.2; font-weight:700;
}
.c30-card-btn{
  position:relative; display:block;
  width:min(252px,100%); aspect-ratio:252/344;
  margin:0 auto; padding:20px;
  border:0; border-radius:20px;
  background:rgba(255,255,255,.02);
  box-shadow:inset 0 0 14px var(--glow,#57c8ff), 0 0 18px color-mix(in srgb, var(--glow,#57c8ff) 45%, transparent);
  transform:rotate(var(--tilt,0deg));
  overflow:hidden; cursor:pointer;
  transition:transform .3s, filter .3s;
}
.c30-card-btn:hover{ transform:rotate(var(--tilt,0deg)) translateY(-8px) scale(1.025); filter:brightness(1.15); }
.c30-card-btn img{ display:block; width:100%; height:100%; object-fit:contain; }

/* --------------------------------------------------------------- FUR */
.c30-artist .c30-heading p{
  max-height:96px; opacity:1; overflow:hidden;
  transition:max-height .62s var(--c30-ease), margin .62s var(--c30-ease), opacity .32s, transform .5s var(--c30-ease);
}
.c30-artist.is-info .c30-heading p{ max-height:0; margin-top:0; opacity:0; transform:translateY(-10px); pointer-events:none; }
.c30-artist-stage{
  --edge-inset:clamp(32px,5vw,72px);
  --card-offset:min(22vw,316px);
  position:absolute; top:154px; left:0;
  width:100%; height:510px;
}
.c30-pane{
  position:absolute; top:0; left:0;
  opacity:0; visibility:hidden; pointer-events:none;
  will-change:opacity, transform;
  transition:opacity .36s, transform .78s var(--c30-ease), visibility 0s linear .78s;
}
.c30-pane.is-active{
  opacity:1; visibility:visible; pointer-events:auto;
  transform:none;
  transition-delay:80ms, 20ms, 0s;
}
.c30-artist-showcase{
  z-index:2; width:100%; height:510px; margin-top:4px;
  display:grid; place-items:center;
}
.c30-stack{
  position:relative; left:0;
  width:427px; height:434px;
  transform:translateY(3.5vw);
  transition:left .82s var(--c30-ease), transform .82s var(--c30-ease);
}
.c30-artist.is-info .c30-artist-showcase{ pointer-events:none; }
/* Het origineel schuift de stapel naar calc(-48% + inset); dat klopt alleen
   op 1440 px breed en zet de kaart op een smaller scherm half buiten beeld.
   Dit zet de voorste kaart altijd precies op de marge. */
.c30-artist.is-info .c30-stack{ left:calc(var(--edge-inset) - (100% - 427px) / 2); transform:translateY(3.5vh); }
.c30-stack-card{
  position:absolute;
  width:270px; height:377px; padding:0;
  border:0; border-radius:13px; background:none;
  overflow:hidden; cursor:zoom-in;
  filter:drop-shadow(0 0 22px rgba(255,255,255,.4));
  transition:opacity .32s, transform .55s var(--c30-ease), filter .35s, box-shadow .35s;
}
.c30-stack-card img{ display:block; width:100%; height:100%; object-fit:cover; }
/* Nacht: Mewtwo voor, Mew schuin erachter. */
.c30-stack-back{ z-index:1; right:10px; bottom:10px; transform:rotate(15deg); }
.c30-stack-front{ z-index:2; left:0; bottom:0; box-shadow:0 0 20px #ff1aca; }
.c30-stack:hover .c30-stack-back{ transform:translate(10px,-7px) rotate(18deg); }
.c30-stack:hover .c30-stack-front{ filter:brightness(1.12) drop-shadow(0 0 28px rgba(255,26,202,.65)); transform:translate(-7px,4px) rotate(-2deg); }
.c30-artist.is-info .c30-stack-back{ opacity:0; transform:translate(36px) rotate(15deg); }
/* Dag: Mew voor, Mewtwo erachter. */
html[data-theme="light"] .c30-stack-back{ z-index:2; left:0; bottom:0; right:auto; transform:none; box-shadow:0 0 20px #48dfff; }
html[data-theme="light"] .c30-stack-front{ z-index:1; left:auto; right:0; bottom:10px; transform:rotate(15deg); box-shadow:none; }
html[data-theme="light"] .c30-stack:hover .c30-stack-back{ filter:brightness(1.12) drop-shadow(0 0 28px rgba(72,223,255,.7)); transform:translate(-7px,4px) rotate(-2deg); }
html[data-theme="light"] .c30-stack:hover .c30-stack-front{ filter:drop-shadow(0 0 22px rgba(0,0,0,.35)); transform:translate(10px,-7px) rotate(18deg); }
html[data-theme="light"] .c30-artist.is-info .c30-stack-back{ opacity:1; transform:none; }
html[data-theme="light"] .c30-artist.is-info .c30-stack-front{ opacity:0; transform:translate(36px) rotate(15deg); }

/* Het infopaneel. Het origineel zet hier een portretfoto van de kunstenaar;
   wij zetten de andere FUR-kaart in dat vak, zodat links en rechts samen het
   paar laten zien. */
.c30-artist-card{
  z-index:1;
  display:grid; grid-template-columns:270px minmax(0,579px); align-items:start; gap:59px;
  width:min(1124px,78vw); height:561px;
  margin:29px 0 0 var(--card-offset);
  padding:85px 99px;
  border:.5px solid rgba(255,255,255,.72); border-radius:16px;
  background:rgba(255,255,255,.043);
  backdrop-filter:blur(7.5px);
  transform:translateX(10vw);
}
.c30-artist-art{ position:relative; width:270px; height:377px; }
.c30-artist-art img{
  position:absolute; inset:0; width:100%; height:100%;
  object-fit:cover; border-radius:13px;
  box-shadow:0 0 20px #48dfff;
  transition:opacity .4s;
}
.c30-artist-art .c30-art-day{ opacity:0; box-shadow:0 0 20px #ff1aca; }
html[data-theme="light"] .c30-artist-art .c30-art-day{ opacity:1; }
html[data-theme="light"] .c30-artist-art .c30-art-night{ opacity:0; }
.c30-artist-copy{ height:405px; overflow-x:hidden; overflow-y:auto; }
.c30-artist-copy h3{ margin:0 0 54px; font:700 36px/1.45 var(--font-body); letter-spacing:-.3px; }
.c30-artist-copy p{ margin:0 0 23px; color:rgba(255,255,255,.62); font-size:16px; line-height:1.5; }
html[data-theme="light"] .c30-artist-copy p{ color:rgba(255,255,255,.9); }

/* De lip rechtsonder: "‹ Over de kunstenaar". */
.c30-tab{
  position:absolute; z-index:5; right:0; bottom:20px;
  display:flex; align-items:center; gap:12px;
  height:56px; padding:0 30px 0 22px;
  border:1px solid rgba(255,255,255,.55); 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;
}
.c30-tab:hover,.c30-tab:focus-visible{ filter:brightness(1.12) drop-shadow(0 0 10px rgba(117,151,255,.42)); transform:translateX(-2px); }
.c30-tab svg{ width:24px; height:24px; flex:none; transition:transform .35s var(--c30-ease); }
.c30-tab svg path{ fill:none; stroke:currentColor; stroke-width:2.4; stroke-linecap:round; stroke-linejoin:round; }
.c30-tab .c30-tab-close{ display:none; }
.c30-artist.is-info .c30-tab svg{ transform:rotate(180deg); }
.c30-artist.is-info .c30-tab .c30-tab-open{ display:none; }
.c30-artist.is-info .c30-tab .c30-tab-close{ display:inline; }

/* --------------------------------------------------------------- galerijen */
.c30-gallery{ min-height:901px; }
.c30-gallery .c30-heading{ padding-top:105px; }
.c30-pikachu .c30-heading h2 span{ display:inline; }
.c30-gallery.is-wall .c30-heading p{ display:none; }

.c30-frame{
  position:relative;
  width:100%; height:505px;
  margin:43px auto 0;
}
.c30-pikachu .c30-frame{ height:421px; margin-top:90px; }

/* Focusrail: één kaart groot in het midden, de rest waaiert uit. */
.c30-rail-layout{
  display:grid; grid-template-rows:377px 30px; gap:47px; align-items:center;
  width:100%; height:454px;
}
.c30-rail{
  position:relative; width:100%; height:100%;
  overflow:visible;
  cursor:grab; touch-action:pan-y;
  user-select:none; -webkit-user-select:none;
}
.c30-rail:active{ cursor:grabbing; }
.c30-focus{
  --focus-offset:0px;
  position:absolute; top:50%; left:50%; z-index:1;
  width:156px; height:217px; padding:0;
  border:0; border-radius:7px; background:none;
  opacity:.2; 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;
}
.c30-focus[data-distance="1"]{ z-index:3; opacity:.7; }
.c30-focus[data-distance="2"]{ z-index:2; opacity:.4; }
.c30-focus.is-active{
  z-index:5; opacity:1;
  width:270px; height:377px;
  filter:drop-shadow(0 0 20px rgba(164,165,165,.9));
}
.c30-focus:hover{ filter:brightness(1.08) drop-shadow(0 0 18px rgba(98,210,255,.8)); }
.c30-focus img{ display:block; width:100%; height:100%; object-fit:contain; pointer-events:none; -webkit-user-drag:none; }

/* Kaartmuur: vijf kolommen in een glazen, scrollend kader. */
.c30-gallery.is-wall .c30-frame{
  width:min(1331px,92.43vw); height:561px;
  margin-top:35px; padding:51px 0;
  border:.5px solid rgba(255,255,255,.25); border-radius:16px;
  background:rgba(255,255,255,.05);
  backdrop-filter:blur(7.5px);
  overflow-x:hidden; overflow-y:auto;
  scrollbar-width:thin; scrollbar-color:#8dd6ff transparent;
}
.c30-gallery.is-wall .c30-frame::-webkit-scrollbar{ width:4px; }
.c30-gallery.is-wall .c30-frame::-webkit-scrollbar-track{ background:rgba(255,255,255,.05); }
.c30-gallery.is-wall .c30-frame::-webkit-scrollbar-thumb{ background:linear-gradient(#5cb6ff,#4d00ff); border-radius:99px; box-shadow:0 0 8px #69c8ff; }
.c30-wall{
  display:grid; grid-template-columns:repeat(5,156px); grid-auto-rows:217px;
  gap:25px 24px; justify-content:center;
  width:876px; max-width:100%; margin:0 auto; padding:0 0 51px;
}
.c30-wall-card{
  width:156px; height:217px; padding:0;
  border:0; border-radius:7px; background:none;
  overflow:hidden; cursor:zoom-in;
  transition:transform .3s, filter .3s;
}
.c30-wall-card:hover{ filter:drop-shadow(0 0 14px rgba(96,208,255,.85)); transform:translateY(-6px) scale(1.03); }
.c30-wall-card img{ display:block; width:100%; height:100%; object-fit:contain; }

.c30-view-toggle{
  position:absolute; z-index:5; right:42px; bottom:31px;
  opacity:.82;
  transition:opacity .2s, filter .2s, transform .2s;
}
.c30-view-toggle:hover,.c30-view-toggle.is-active{ opacity:1; filter:drop-shadow(0 0 9px #6bc8ff); transform:scale(1.04); }

/* --------------------------------------------------------------- slider
   Het spoor loopt van blauw naar violet tot de duim; de duim is een paarse
   bol met een pokéball erin. */
.c30-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;
}
.c30-slider::-webkit-slider-runnable-track{
  height:4px; border-radius:10px;
  background:linear-gradient(90deg, rgba(92,182,255,.9) 0, rgba(77,0,255,.9) var(--progress), rgba(217,217,217,.18) var(--progress) 100%);
  box-shadow:inset 0 0 1.5px #fff, 0 0 8px rgba(92,182,255,.34);
}
.c30-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%, #8e7bff 0%, #5a3df0 55%, #3b1fb8 100%);
  box-shadow:0 0 0 1.5px rgba(255,255,255,.75), 0 0 12px rgba(120,150,255,.8);
  cursor:grab;
}
.c30-slider:active::-webkit-slider-thumb{ cursor:grabbing; transform:scale(1.06); }
.c30-slider::-moz-range-track{ height:4px; border-radius:10px; background:rgba(217,217,217,.12); box-shadow:inset 0 0 1.5px #fff; }
.c30-slider::-moz-range-progress{ height:4px; border-radius:10px; background:linear-gradient(90deg,#5cb6ff,#4d00ff); }
.c30-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%, #8e7bff 0%, #5a3df0 55%, #3b1fb8 100%);
  box-shadow:0 0 0 1.5px rgba(255,255,255,.75), 0 0 12px rgba(120,150,255,.8);
  cursor:grab;
}

/* --------------------------------------------------------------- info
   De tekstkant van de pagina: feiten, productlinks, kaartlijst en FAQ, in
   dezelfde glazen kaders als de kaartmuren. */
.c30-info{ position:relative; z-index:1; padding:20px 0 60px; }
.c30-info-inner{ width:min(1180px, calc(100% - 40px)); margin:0 auto; display:grid; gap:22px; }
.c30-info-intro,.c30-info-block{
  border:.5px solid rgba(255,255,255,.25); border-radius:16px;
  background:rgba(255,255,255,.05);
  backdrop-filter:blur(7.5px);
  padding:clamp(22px,3vw,40px);
}
.c30-info-intro{ display:grid; grid-template-columns:minmax(0,1.35fr) minmax(0,1fr); gap:clamp(22px,4vw,56px); align-items:start; }
.c30-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:linear-gradient(143deg,#fff 2.8%,#fff 23.9%,#cbfff5 30.9%,#ffe3f7 36.8%,#fff 45.9%,#fff 78%,#e9ffe3 83.7%,#fff2c5 86.5%,#fff 96.7%);
  -webkit-background-clip:text; background-clip:text;
  text-wrap:balance;
}
.c30-info p{ margin:0 0 14px; color:rgba(255,255,255,.72); font-size:15.5px; line-height:1.65; }
html[data-theme="light"] .c30-info p{ color:rgba(255,255,255,.92); }
.c30-info h3{ margin:0 0 14px; font:700 20px/1.25 var(--font-body); color:#fff; }
.c30-info-note{ font-size:14px !important; }
.c30-facts{ margin:0; display:grid; gap:0; border-top:.5px solid rgba(255,255,255,.2); }
.c30-facts > div{ display:grid; grid-template-columns:130px 1fr; gap:12px; padding:12px 0; border-bottom:.5px solid rgba(255,255,255,.2); }
.c30-facts dt{ font:400 12px/1.5 var(--font-mono); letter-spacing:.06em; text-transform:uppercase; color:rgba(255,255,255,.55); }
.c30-facts dd{ margin:0; font-size:14.5px; line-height:1.5; color:#fff; }
.c30-chips{ list-style:none; margin:0; padding:0; display:flex; flex-wrap:wrap; gap:8px; }
.c30-chips a{
  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;
  transition:background .2s, border-color .2s;
}
.c30-chips a:hover{ background:rgba(255,255,255,.18); border-color:rgba(255,255,255,.7); }
.c30-cardlist{ columns:3 260px; column-gap:32px; }
.c30-cardgroup{ break-inside:avoid; margin:0 0 22px; }
.c30-cardgroup h4{ margin:0 0 8px; font:600 13px/1.4 var(--font-mono); letter-spacing:.05em; text-transform:uppercase; color:#ffd76a; }
.c30-cardgroup h4 span{ color:rgba(255,255,255,.5); margin-left:4px; }
.c30-cardgroup ul{ list-style:none; margin:0; padding:0; }
.c30-cardgroup li a{ display:block; padding:3px 0; color:rgba(255,255,255,.82); text-decoration:none; font-size:14px; }
.c30-cardgroup li a:hover{ color:#fff; text-decoration:underline; text-underline-offset:3px; }
.c30-cardgroup small{ font:400 12px var(--font-mono); color:rgba(255,255,255,.45); margin-left:4px; }
.c30-faq details{ border-bottom:.5px solid rgba(255,255,255,.2); }
.c30-faq details:first-of-type{ border-top:.5px solid rgba(255,255,255,.2); }
.c30-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;
}
.c30-faq summary::-webkit-details-marker{ display:none; }
.c30-faq summary::after{ content:"+"; font-size:22px; font-weight:400; line-height:1; color:rgba(255,255,255,.7); transition:transform .25s; }
.c30-faq details[open] summary::after{ transform:rotate(45deg); }
.c30-faq details p{ margin:0 0 16px; max-width:80ch; }
@media (max-width:720px){
  .c30-info{ padding:10px 0 40px; }
  .c30-info-inner{ width:calc(100% - 24px); gap:14px; }
  .c30-info-intro{ grid-template-columns:1fr; }
  .c30-info p{ font-size:14px; }
  .c30-facts > div{ grid-template-columns:110px 1fr; }
  .c30-faq summary{ font-size:15px; }
}

/* --------------------------------------------------------------- CTA
   Waar het origineel twee promovideo's heeft. */
.c30-cta{ min-height:880px; }
.c30-cta .c30-heading{ padding-top:105px; }
.c30-cta-stage{
  position:relative;
  display:grid; place-items:center;
  height:420px; margin:28px auto 0;
}
.c30-cta-stage::before{
  content:""; position:absolute;
  width:420px; height:420px; border-radius:50%;
  background:radial-gradient(circle, rgba(120,180,255,.45), rgba(150,90,255,.22) 45%, transparent 70%);
  filter:blur(20px);
}
html[data-theme="light"] .c30-cta-stage::before{ background:radial-gradient(circle, rgba(255,255,255,.75), rgba(200,180,255,.3) 45%, transparent 70%); }
.c30-cta-pack{
  position:relative;
  width:auto; height:400px;
  filter:drop-shadow(0 24px 40px rgba(10,10,60,.45));
  animation:c30-float 6s ease-in-out infinite;
}
@keyframes c30-float{
  0%,100%{ transform:translateY(0) rotate(-4deg); }
  50%{ transform:translateY(-14px) rotate(-2deg); }
}
.c30-cta-row{
  display:flex; justify-content:center; flex-wrap:wrap; gap:18px;
  margin:38px auto 0;
}
.c30-pill{
  display:inline-flex; align-items:center; gap:14px;
  height:52px; padding:0 30px 0 22px;
  border:1px solid rgba(255,255,255,.55); 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;
}
.c30-pill:hover{ color:#fff; transform:translateY(-2px); filter:brightness(1.12); }
.c30-pill svg{ width:22px; height:22px; flex:none; }
.c30-pill svg path,.c30-pill svg circle{ fill:none; stroke:currentColor; stroke-width:2; stroke-linecap:round; stroke-linejoin:round; }
.c30-pill--primary{
  border-color:rgba(255,255,255,.7);
  background:linear-gradient(105deg,#287fff,#7758ff 56%,#b84cff);
  box-shadow:0 10px 30px rgba(66,82,255,.35), inset 0 0 10px rgba(255,255,255,.25);
}
.c30-pill--primary:hover{ box-shadow:0 14px 36px rgba(66,82,255,.5), inset 0 0 10px rgba(255,255,255,.3); }

/* --------------------------------------------------------------- dock */
.c30-dock{
  position:fixed; z-index:60; left:50%; bottom:0;
  display:flex; justify-content:center; align-items:flex-end; gap:20px;
  width:423px; 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;
}
.c30-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);
}
.c30-dock.is-visible{ opacity:1; transform:translate(-50%,0); }
.c30-dock button{
  position:relative; z-index:2;
  flex:0 0 82px; width:82px; height:112px; padding:8px 7px;
  border:.5px solid rgba(255,255,255,.75); border-radius:6px;
  background:rgba(255,255,255,.15);
  overflow:hidden; cursor:pointer;
  transform:translateY(-1px);
  transition:opacity .25s, transform .28s, box-shadow .28s;
}
.c30-dock button.is-active{ transform:translateY(-1px) scale(1.04); }
.c30-dock button:nth-child(1).is-active{ box-shadow:inset 0 0 5px #ff27fb, 0 0 12px rgba(255,39,251,.45); }
.c30-dock button:nth-child(2).is-active{ box-shadow:inset 0 0 4.7px #00ceff; }
.c30-dock button:nth-child(3).is-active{ box-shadow:inset 0 0 4.7px #f5e128; }
.c30-dock button:nth-child(4).is-active{ box-shadow:inset 0 0 4.7px #db3828; }
.c30-dock img{
  width:100%; height:100%; object-fit:cover;
  opacity:.9; filter:saturate(.9) brightness(.5);
  transition:opacity .25s, filter .25s;
}
.c30-dock button.is-active img{ opacity:1; filter:brightness(1.08) saturate(1.08); }

/* --------------------------------------------------------------- dag/nacht
   Twee bollen: de actieve groot, de andere klein ernaast. */
.c30-theme{
  position:fixed; z-index:80; left:56px; bottom:55px;
  width:61px; height:40px; padding:0;
  border:0; background:none; cursor:pointer;
  transition:opacity .25s, transform .25s;
}
.c30-theme.is-tucked{ opacity:0; pointer-events:none; transform:translateY(12px); }
.c30-orb{
  position:absolute; top:50%;
  display:grid; place-items:center;
  border-radius:50%;
  transform:translateY(-50%);
  transition:width .35s var(--c30-ease,ease), height .35s var(--c30-ease,ease), left .35s var(--c30-ease,ease), box-shadow .35s;
}
.c30-orb svg{ width:52%; height:52%; }
.c30-orb--moon{
  background:radial-gradient(circle at 50% 45%, #1d2fb0 0%, #0b1258 62%, #070a3a 100%);
  box-shadow:inset 0 0 0 1.5px rgba(80,255,170,.75), inset 2px -2px 6px rgba(70,160,255,.7), 0 0 10px rgba(60,120,255,.55);
}
.c30-orb--moon svg path{ fill:#3a72ff; stroke:#9dc0ff; stroke-width:.6; }
.c30-orb--sun{
  background:radial-gradient(circle at 50% 45%, #e9fbff 0%, #b5ecff 55%, #7fd3ff 100%);
  box-shadow:inset 0 0 0 1.5px rgba(255,255,255,.9), 0 0 10px rgba(140,230,255,.7);
}
.c30-orb--sun svg circle,.c30-orb--sun svg path{ fill:none; stroke:#fff; stroke-width:2; stroke-linecap:round; }
.c30-orb--sun svg circle{ fill:#fff; }
/* nacht: maan groot links, zon klein rechts */
.c30-orb--moon{ left:0; width:40px; height:40px; z-index:2; }
.c30-orb--sun{ left:37px; width:24px; height:24px; z-index:1; }
html[data-theme="light"] .c30-orb--moon{ left:0; width:24px; height:24px; z-index:1; }
html[data-theme="light"] .c30-orb--sun{ left:17px; width:40px; height:40px; z-index:2; }
.c30-theme:hover .c30-orb{ filter:brightness(1.12); }

/* --------------------------------------------------------------- lightbox */
.c30-lightbox{
  position:fixed; inset:0; z-index:120000;
  display:grid; place-items:center;
  background:rgba(2,3,6,.72);
  backdrop-filter:blur(16px);
  touch-action:none;
  animation:c30-lb-in .42s cubic-bezier(.22,.7,.2,1) both;
}
.c30-lightbox.is-closing{ animation:c30-lb-out .26s ease both; }
@keyframes c30-lb-in{ from{ opacity:0; backdrop-filter:blur(0); } to{ opacity:1; } }
@keyframes c30-lb-out{ to{ opacity:0; } }
.c30-lb-close{
  position:absolute; z-index:4;
  top:max(22px, env(safe-area-inset-top)); right:28px;
  width:42px; height:42px;
}
.c30-lb-close svg{ width:20px; height:20px; }
.c30-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%;
}
.c30-lb-backglow{
  position:absolute; top:50%; left:50%; z-index:0;
  width:100%; height:100%; object-fit:contain;
  pointer-events:none;
  opacity:.38;
  filter:blur(34px) saturate(1.3) brightness(1.26);
  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;
}
.c30-lb-stage.is-active .c30-lb-backglow{
  opacity:.43;
  filter:blur(44px) saturate(1.36) brightness(1.32);
  transform:translate(-50%,-50%) translate3d(var(--glow-shift-x),var(--glow-shift-y),0) scale(calc(1.13 * var(--glow-scale)));
}
.c30-lb-wrap{ position:absolute; inset:0; z-index:2; transform-style:preserve-3d; touch-action:none; user-select:none; -webkit-user-select:none; }
.c30-lb-shell{
  position:absolute; inset:0; z-index:1;
  transform-style:preserve-3d; will-change:transform;
  isolation:isolate; touch-action:none; cursor:grab;
}
.c30-lb-wrap:active .c30-lb-shell{ cursor:grabbing; }
.c30-lb-media{ position:absolute; inset:0; z-index:1; isolation:isolate; backface-visibility:hidden; -webkit-backface-visibility:hidden; transform:translateZ(.25px); }
.c30-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));
}
.c30-lb-shine,.c30-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;
}
.c30-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,.14) 16%, rgba(105,230,255,.14) 32%, rgba(176,120,255,.12) 48%, rgba(255,115,190,.08) 62%, transparent 82%),
    repeating-linear-gradient(118deg, rgba(255,80,180,.42) 0%, rgba(80,220,255,.48) 13%, rgba(255,238,110,.44) 25%, rgba(150,95,255,.46) 38%, rgba(255,80,180,.42) 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.35);
}
.c30-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;
  filter:brightness(1.03);
}
.c30-lb-stage.is-active .c30-lb-shine{ opacity:.48; }
.c30-lb-stage.is-active .c30-lb-glare{ opacity:.72; }
/* Wat het origineel niet heeft: naam, nummer en een weg naar de catalogus. */
.c30-lb-meta{
  position:absolute; z-index:4; left:50%; bottom:max(26px, env(safe-area-inset-bottom));
  display:flex; align-items:center; gap:14px;
  transform:translateX(-50%);
  white-space:nowrap;
}
.c30-lb-name{ font-size:15px; font-weight:600; color:rgba(255,255,255,.86); }
.c30-lb-name small{ margin-left:6px; font:400 13px var(--font-mono); color:rgba(255,255,255,.55); }
.c30-lb-meta .c30-pill{ height:42px; padding:0 20px 0 16px; font-size:15px; gap:10px; }
.c30-lb-meta .c30-pill svg{ width:18px; height:18px; }

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

  .c30-hero{ height:max(760px, 100svh); }
  .c30-logo{ width:200px; top:calc(50% - 26px); }
  .c30-hero.is-grid .c30-logo{ top:100px; }
  .c30-deck{
    --gap-x:11px; --gap-y:11px; --col:102px;
    top:170px; width:330px; height:448px;
    scroll-snap-type:x mandatory;
    touch-action:pan-x pan-y;
  }
  .c30-deck-track{ grid-template-rows:repeat(3,142px); }
  .c30-deck-card{ height:142px; width:102px; scroll-snap-align:start; }
  .c30-deck-nav{ bottom:96px; }
  .c30-deck-nav .c30-slider{ width:180px; }
  .c30-view-controls{ left:auto; right:18px; bottom:41px; transform:none; gap:10px; }
  .c30-view-controls button{ width:34px; height:34px; }

  .c30-heading{ width:calc(100% - 40px); padding-top:112px; }
  .c30-heading h1,.c30-heading h2{ font-size:28px; line-height:1.26; }
  .c30-heading p{ font-size:13px; line-height:1.6; }
  .c30-heading p br{ display:none; }
  .c30-artist .c30-heading p{ max-height:220px; }

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

  .c30-artist-stage{ top:auto; position:relative; height:auto; margin-top:28px; }
  .c30-pane{ position:relative; }
  .c30-artist-showcase{ height:380px; }
  .c30-stack{ width:300px; height:330px; transform:none; }
  .c30-stack-card{ width:205px; height:286px; }
  .c30-artist.is-info .c30-stack{ left:0; transform:none; }
  .c30-artist.is-info .c30-artist-showcase{ display:none; }
  .c30-artist-card{
    display:none;
    grid-template-columns:1fr; gap:18px; justify-items:center;
    width:calc(100% - 32px); height:auto;
    margin:0 auto; padding:26px 20px 30px;
    transform:none;
  }
  .c30-artist.is-info .c30-artist-card{ display:grid; }
  .c30-artist-art{ width:160px; height:223px; }
  .c30-artist-copy{ height:auto; overflow:visible; text-align:center; }
  .c30-artist-copy h3{ margin:0 0 14px; font-size:26px; }
  .c30-artist-copy p{ font-size:13px; }
  .c30-tab{ position:relative; right:auto; bottom:auto; margin:22px auto 40px; border-right:1px solid rgba(255,255,255,.55); border-radius:999px; height:46px; font-size:15px; padding:0 22px 0 16px; }
  .c30-artist{ display:flex; flex-direction:column; }

  .c30-frame,.c30-pikachu .c30-frame{ height:460px; margin-top:44px; }
  .c30-rail-layout{ grid-template-rows:377px 30px; gap:24px; height:431px; }
  .c30-gallery.is-wall .c30-frame{ width:calc(100% - 24px); height:520px; padding:20px 0; }
  .c30-wall{ grid-template-columns:repeat(3,100px); grid-auto-rows:140px; gap:10px; width:auto; padding-bottom:20px; }
  .c30-wall-card{ width:100px; height:140px; }
  .c30-view-toggle{ right:18px; bottom:28px; width:34px; height:34px; }

  .c30-cta{ min-height:760px; }
  .c30-cta-stage{ height:300px; }
  .c30-cta-stage::before{ width:300px; height:300px; }
  .c30-cta-pack{ height:280px; }
  .c30-cta-row{ flex-direction:column; align-items:center; gap:12px; }
  .c30-pill{ font-size:16px; height:48px; }

  .c30-dock{ display:none; }
  .c30-theme{ left:16px; bottom:18px; }
  .c30-lb-stage{ max-width:84vw; max-height:72vh; }
  .c30-lb-meta{ flex-direction:column; gap:10px; }
}

@media (prefers-reduced-motion:reduce){
  .c30-reveal{ opacity:1 !important; transform:none !important; }
  .c30-cta-pack{ animation:none; }
  .c30-pane,.c30-stack,.c30-artist .c30-heading p{ transition-duration:.01ms !important; }
  .c30-lb-backglow,.c30-lb-shine,.c30-lb-glare{ transition:none; }
}

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

/* ==========================================================================
   De banner op de homepage (index.html, tussen de hero en "5 redenen")

   Een paneel in de deck van de homepage: precies één scherm, de vaste
   header van 77px telt mee. Achtergrond en bol zitten bínnen het paneel in
   plaats van vast achter de pagina, de rest is dezelfde bol als op
   /30th-celebration.
   ========================================================================== */
.c30-banner{
  --edge:#071443;
  position:relative;
  height:100svh; min-height:560px;
  overflow:hidden; isolation:isolate;
  background:#071443;
  color:#fff;
}
html[data-theme="light"] .c30-banner{ --edge:#81d1ff; background:#81d1ff; }
.c30-banner .c30-bg{ position:absolute; inset:0; height:auto; z-index:0; }
.c30-banner .c30-sphere{ z-index:1; top:77px; }
/* Een zachte donkere kern achter logo en tekst, zodat die op elke stand van
   de bol leesbaar blijven. */
.c30-banner .c30-vignette{
  background:radial-gradient(ellipse 40% 34% at 50% 54%, rgba(3,6,30,.82) 0%, rgba(3,6,30,.55) 45%, rgba(3,6,30,0) 100%);
}
html[data-theme="light"] .c30-banner .c30-vignette{
  background:radial-gradient(ellipse 40% 34% at 50% 54%, rgba(20,60,150,.62) 0%, rgba(20,60,150,.35) 45%, rgba(20,60,150,0) 100%);
}
.c30-banner-copy{
  position:absolute; z-index:3; left:50%; top:calc(50% + 38px);
  width:min(560px, calc(100% - 40px));
  display:flex; flex-direction:column; align-items:center; gap:18px;
  text-align:center;
  transform:translate(-50%,-50%);
  pointer-events:none;
}
.c30-banner-copy > *{ pointer-events:auto; }
.c30-banner-title{ margin:0; line-height:0; }
.c30-banner-title img{
  width:clamp(220px, 26vw, 340px); height:auto;
  filter:drop-shadow(0 0 12px rgba(255,196,0,.65));
}
.c30-banner-copy p{
  margin:0;
  font-size:clamp(14px, 1.15vw, 17px); line-height:1.55;
  color:rgba(255,255,255,.92);
  text-shadow:0 1px 12px rgba(0,0,20,.6);
  padding:10px 18px;
  border-radius:14px;
  border:.5px solid rgba(255,255,255,.18);
  background:rgba(5,10,40,.42);
  backdrop-filter:blur(10px);
}
html[data-theme="light"] .c30-banner-copy p{ background:rgba(25,70,160,.36); }
.c30-banner .c30-pill{ margin-top:6px; }
.c30-banner .c30-pill svg{ order:2; }
.c30-theme--banner{ position:absolute; left:56px; bottom:40px; }
/* Op een smal scherm zou de bol met het hele paneel onder je duim draaien
   en de pagina niet meer laten scrollen; daar blijft hij decor. */
@media (pointer:coarse){
  .c30-banner{ height:100vh; }
  .c30-banner .c30-scene{ pointer-events:none; }
  .c30-banner-copy{ transform:translate(-50%, calc(-50% + var(--deck-bar, 0px) / -2)); }
  .c30-theme--banner{ bottom:calc(28px + var(--deck-bar, 0px)); }
}
@media (max-width:720px){
  .c30-theme--banner{ left:16px; }
  .c30-banner-copy{ gap:14px; }
}

/* ==========================================================================
   De 30th-band op /shop: een mini-versie van /30th-celebration

   De bestaande .shop-spotlight (style.css) levert het raster van producten
   links en tekst rechts; hier komen de bewegende achtergrond en de bol
   eronder, en de tekst krijgt de koppen en knoppen van de 30th-pagina.
   ========================================================================== */
.c30-shopband{
  position:relative; isolation:isolate; overflow:hidden;
  background:#071443;
  border:0;
  min-height:clamp(380px, 32vw, 440px);
  display:flex; align-items:center;
  color:#fff;
}
html[data-theme="light"] .c30-shopband{ background:#81d1ff; }
.c30-shopband .c30-bg{ position:absolute; inset:0; height:auto; z-index:0; }
.c30-shopband .c30-sphere{ z-index:1; }
/* De bol is hier decor achter de tekst: links en rechts gedimd zodat de
   producten en de kop vooraan staan, in het midden vrij. */
.c30-shopband .c30-vignette{
  background:
    linear-gradient(90deg, rgba(3,6,30,.5) 0%, rgba(3,6,30,.12) 24%, rgba(3,6,30,.12) 34%, rgba(3,6,30,.68) 48%, rgba(3,6,30,.76) 100%),
    rgba(2,4,20,.32);
}
html[data-theme="light"] .c30-shopband .c30-vignette{
  background:
    linear-gradient(90deg, rgba(25,70,160,.32) 0%, rgba(25,70,160,.06) 24%, rgba(25,70,160,.06) 34%, rgba(25,70,160,.48) 48%, rgba(25,70,160,.56) 100%),
    rgba(15,45,120,.22);
}
.c30-shopband .shop-spotlight-inner{ position:relative; z-index:2; width:100%; pointer-events:none; }
.c30-shopband .shop-spotlight-inner > *{ pointer-events:auto; }
.c30-shopband .ss-art{ position:relative; }
.c30-shopband .ss-art::before{
  content:""; position:absolute; left:50%; bottom:-6%; z-index:-1;
  width:80%; height:42%;
  transform:translateX(-50%);
  border-radius:50%;
  background:radial-gradient(closest-side, rgba(255,214,90,.55), rgba(170,110,255,.25) 60%, transparent);
  filter:blur(14px);
}
.c30-shopband .ss-art img{ filter:drop-shadow(0 22px 34px rgba(0,0,20,.6)); }
.c30-shopband .ss-logo{
  display:block; width:clamp(170px, 18vw, 240px); height:auto; margin:0 0 14px -4px;
  filter:drop-shadow(0 0 12px rgba(255,196,0,.6));
}
.c30-shopband .ss-copy h2{
  white-space:normal;
  font:700 clamp(24px, 2.6vw, 34px)/1.15 var(--font-body);
  letter-spacing:-.5px;
  margin:0 0 12px;
  color:transparent;
  background-image:linear-gradient(143deg,#fff 2.8%,#fff 23.9%,#cbfff5 30.9%,#ffe3f7 36.8%,#fff 45.9%,#fff 78%,#e9ffe3 83.7%,#fff2c5 86.5%,#fff 96.7%);
  -webkit-background-clip:text; background-clip:text;
}
.c30-shopband .ss-copy p{ color:rgba(255,255,255,.78); font-size:15.5px; line-height:1.6; max-width:56ch; }
html[data-theme="light"] .c30-shopband .ss-copy p{ color:#fff; text-shadow:0 1px 10px rgba(20,60,150,.35); }
.ss-actions{ display:flex; flex-wrap:wrap; gap:12px; margin-top:22px; }
.c30-shopband .c30-pill{ height:46px; font-size:15.5px; padding:0 22px; }
.c30-shopband .c30-pill svg{ width:20px; height:20px; }
.c30-shopband .c30-pill--primary svg{ order:2; }
@media (max-width:860px){
  .c30-shopband{ min-height:0; padding:20px 0 24px; }
  .c30-shopband .shop-spotlight-inner{ gap:10px; }
  .c30-shopband .c30-vignette{ background:linear-gradient(180deg, rgba(3,6,30,.25), rgba(3,6,30,.68) 55%, rgba(3,6,30,.75)), rgba(2,4,20,.32); }
  html[data-theme="light"] .c30-shopband .c30-vignette{ background:linear-gradient(180deg, rgba(25,70,160,.15), rgba(25,70,160,.45) 55%, rgba(25,70,160,.5)); }
  .c30-shopband .ss-art{ max-width:190px; }
  .c30-shopband .ss-copy{ text-align:center; }
  .c30-shopband .ss-logo{ width:140px; margin:0 auto 8px; }
  .c30-shopband .ss-copy p{ margin-inline:auto; font-size:13px; line-height:1.5; }
  .ss-actions{ justify-content:center; gap:8px; margin-top:14px; }
  .c30-shopband .c30-pill{ height:38px; font-size:13.5px; padding:0 14px; gap:8px; }
  .c30-shopband .c30-pill svg{ width:16px; height:16px; }
}