/*
  qball.nl in de stijl van de nieuwe outlawz.nl (outlawz-v2, resources/css/app.css): zwart met grain,
  geel accent, zware kapitalen, Kode Mono voor labels en knoppen, Sedgwick Ave als handschrift,
  hoekkaders en markerstrepen.

  Lettertypes in assets/fonts, plaatjes in assets/img. Kode Mono en Sedgwick Ave komen uit outlawz-v2 (Google Fonts, OFL).
  Transducer, de koppenletter van outlawz-v2, staat niet in die repo: Archivo (OFL) vervangt hem.
  Zijn er webfonts van Transducer met licentie, zet ze in assets/fonts met een @font-face
  "Transducer VF"; de stack hieronder pakt ze dan vanzelf.
*/
@font-face { font-family: "Archivo"; font-weight: 100 900; font-stretch: 62% 125%; font-display: swap; src: url(assets/fonts/archivo.woff2) format("woff2"); }
@font-face { font-family: "Kode Mono"; font-weight: 400 700; font-display: swap; src: url(assets/fonts/kode-mono.woff2) format("woff2"); }
@font-face { font-family: "Sedgwick Ave"; font-weight: 400; font-display: swap; src: url(assets/fonts/sedgwick-ave.woff2) format("woff2"); }

@property --tear {
  syntax: "<length-percentage>";
  inherits: false;
  initial-value: 0%;
}

@property --onder {
  syntax: "<length-percentage>";
  inherits: false;
  initial-value: 110%;
}

@property --pct {
  syntax: "<integer>";
  inherits: false;
  initial-value: 0;
}

:root {
  --zwart: #1d1d1d;
  --zwart-puur: #000;
  --wit: #fff;
  --geel: #ffb800;
  --qball-rood: #e62929;
  --grijs-200: #e3e3e3;
  --grijs-250: #d3d3d3;
  --grijs-300: #b3b3b3;
  --grijs-400: #a8a8a8;
  --grijs-600: #595959;
  --grijs-700: #404040;
  --grijs-740: #4a4a4a;
  --grijs-750: #3c3c3c;
  --grijs-790: #333;

  --font: "Transducer VF", "Transducer", "Archivo", system-ui, sans-serif;
  --mono: "Kode Mono", ui-monospace, monospace;
  --hand: "Sedgwick Ave", cursive;

  --breed: 1368px;
  --rand: 24px;

  --grain: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .5 0 0 0 0 .5 0 0 0 0 .5 0 0 0 .08 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  color-scheme: dark;
}

* {
  box-sizing: border-box;
}

html {
  overflow-x: hidden;
  background: var(--zwart);
}

body {
  margin: 0;
  overflow-x: hidden;
  background: var(--zwart) var(--grain);
  color: var(--wit);
  font: 400 16px/1.5 var(--font);
  -webkit-font-smoothing: antialiased;
}

::selection {
  background: var(--geel);
  color: var(--zwart-puur);
}

a {
  color: inherit;
}

h1,
h2 {
  margin: 0;
  font-weight: 900;
  font-stretch: 112%;
  line-height: 0.85;
  text-transform: uppercase;
  text-wrap: balance;
}

h2 {
  font-size: clamp(28px, 5vw, 58px);
}

.label {
  margin: 0;
  font: 600 12px/1 var(--mono);
  text-transform: uppercase;
  color: var(--geel);
}

.hand {
  font-family: var(--hand);
  color: var(--geel);
}

/* Knop met markerstreep, zoals x-button in outlawz-v2 */
.knop {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 14px 24px;
  background: url(assets/img/marker.svg) 0 0 / 100% 100% no-repeat;
  color: var(--zwart-puur);
  font: 600 16px/1 var(--mono);
  text-transform: uppercase;
  text-decoration: none;
  transition: rotate 0.2s;
}

.knop::after {
  content: "";
  width: 16px;
  height: 16px;
  background: currentColor;
  mask: url(assets/img/arrow-right.svg) 0 0 / 100% 100% no-repeat;
}

.knop:hover,
.knop:focus-visible {
  rotate: -1deg;
}

/* Hoekkader, zoals x-corner-frame in outlawz-v2 */
.hoeken {
  position: relative;
}

.hoeken::before {
  --s: 23px;
  content: "";
  position: absolute;
  inset: -8px;
  border: 1px solid rgb(255 255 255 / 0.36);
  pointer-events: none;
  mask:
    linear-gradient(#000 0 0) 0 0 / var(--s) var(--s),
    linear-gradient(#000 0 0) 100% 0 / var(--s) var(--s),
    linear-gradient(#000 0 0) 0 100% / var(--s) var(--s),
    linear-gradient(#000 0 0) 100% 100% / var(--s) var(--s);
  mask-repeat: no-repeat;
}

.kopje {
  display: flex;
  flex-direction: column;
  gap: 16px;
  max-width: var(--breed);
  margin: 0 auto;
  padding: 0 var(--rand);
}

.kopje.midden {
  align-items: center;
  text-align: center;
}

/* Kop */

.kop {
  position: absolute;
  top: 48px;
  left: 0;
  right: 0;
  z-index: 5;
  display: flex;
  justify-content: center;
  gap: 8px;
}

.kop-logo {
  display: grid;
  place-items: center;
  width: 52px;
  height: 52px;
  border-radius: 50%;
  background: var(--zwart-puur);
}

.kop-logo img {
  width: 18px;
  height: auto;
}

.kop-pil {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 0 24px;
  border-radius: 999px;
  background: var(--zwart-puur);
  color: var(--grijs-300);
  font-size: 12px;
  font-weight: 500;
  text-transform: uppercase;
}

.kop-pil span {
  color: var(--geel);
}

/* Held */

.held {
  max-width: var(--breed);
  margin: 0 auto;
  padding: 176px var(--rand) 0;
}

.held-kader {
  display: flex;
  flex-direction: column;
  align-items: center;
  max-width: 824px;
  margin: 0 auto;
  padding: 88px 16px 76px;
  text-align: center;
}

.held-sub {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: 10px;
  margin: 0;
  font-size: 18px;
  font-weight: 900;
  font-stretch: 112%;
  text-transform: uppercase;
}

/* De gele markerstreep door "Qball Internet" */
.streep {
  position: relative;
}

.streep::after {
  content: "";
  position: absolute;
  left: -6px;
  right: -6px;
  top: 50%;
  height: 5px;
  translate: 0 -50%;
  background: url(assets/img/marker-line.svg) 0 0 / 100% 100% no-repeat;
  transform-origin: left center;
}

.held h1 {
  margin-top: 40px;
  font-size: clamp(36px, 7.4vw, 80px);
}

.held-tekst {
  max-width: 34em;
  margin: 32px 0 56px;
  color: var(--grijs-250);
  font-size: clamp(16px, 1.6vw, 18px);
}

/* Van qball.nl naar outlawz.nl */

.van-naar {
  padding-top: 152px;
}

.schermen {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 40px;
  max-width: var(--breed);
  margin: 64px auto 0;
  padding: 0 var(--rand);
}

.scherm {
  margin: 0;
}

.scherm img {
  display: block;
  width: 100%;
  height: auto;
}

.tag {
  position: absolute;
  left: 12px;
  bottom: 12px;
  padding: 4px 8px;
  border: 1px solid var(--grijs-600);
  background: var(--zwart);
  color: var(--grijs-400);
  font: 400 10px/1.5 var(--mono);
  text-transform: uppercase;
}

.pijl {
  font-size: clamp(28px, 3.4vw, 42px);
  rotate: -8deg;
}

/* Klanten en veelgestelde vragen */

.faq {
  display: grid;
  grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
  gap: 64px;
  max-width: var(--breed);
  margin: 0 auto;
  padding: 152px var(--rand) 0;
}

.faq-intro {
  position: sticky;
  top: 48px;
  align-self: start;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 16px;
}

.faq-intro p:not(.label) {
  max-width: 30em;
  margin: 8px 0 16px;
  color: var(--grijs-250);
}

.vragen {
  border-top: 1px solid var(--grijs-750);
}

details {
  border-bottom: 1px solid var(--grijs-750);
}

summary {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 24px;
  padding: 24px 0;
  font-size: 18px;
  font-weight: 700;
  line-height: 1.3;
  cursor: pointer;
  list-style: none;
  transition: color 0.2s;
}

summary::-webkit-details-marker {
  display: none;
}

/* Rond plusje dat bij openen een kruisje wordt */
summary::after {
  content: "";
  flex: none;
  width: 28px;
  height: 28px;
  border: 1px solid var(--grijs-700);
  border-radius: 50%;
  background:
    linear-gradient(currentColor 0 0) center / 10px 1.5px no-repeat,
    linear-gradient(currentColor 0 0) center / 1.5px 10px no-repeat;
  transition: rotate 0.3s, border-color 0.3s;
}

summary:hover,
details[open] summary {
  color: var(--geel);
}

details[open] summary::after {
  rotate: 45deg;
  border-color: var(--geel);
}

summary:focus-visible {
  outline: 2px solid var(--geel);
  outline-offset: 4px;
}

details p {
  max-width: 40em;
  margin: 0;
  padding: 0 52px 24px 0;
  color: var(--grijs-250);
}

details p a {
  color: var(--geel);
}

/* Voet */

.voet {
  margin-top: 152px;
}

.voet-regel {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 16px 32px;
  width: calc(100% - 2 * var(--rand));
  max-width: calc(var(--breed) - 2 * var(--rand));
  margin: 0 auto;
  padding: 32px 0;
  border-top: 1px solid var(--grijs-750);
  color: var(--grijs-300);
  font: 600 12px/1.5 var(--mono);
  text-transform: uppercase;
}

.voet-regel a:hover {
  color: var(--wit);
}

.opnieuw {
  padding: 0;
  border: 0;
  background: none;
  color: inherit;
  font: inherit;
  text-transform: inherit;
  cursor: pointer;
}

.opnieuw:hover,
.opnieuw:focus-visible {
  color: var(--geel);
}

@media (max-width: 767px) {
  :root {
    --rand: 32px;
  }

  .kop {
    top: 32px;
  }

  .kop-logo {
    width: 40px;
    height: 40px;
  }

  .kop-pil {
    padding: 0 16px;
    font-size: 10px;
  }

  .held {
    padding-top: 128px;
  }

  .held-kader {
    padding: 56px 8px 48px;
  }

  .held-sub {
    font-size: 12px;
  }

  .knop {
    font-size: 12px;
  }

  .knop::after {
    width: 12px;
    height: 12px;
  }

  .van-naar {
    padding-top: 96px;
  }

  .faq {
    grid-template-columns: 1fr;
    gap: 40px;
    padding-top: 96px;
  }

  .faq-intro {
    position: static;
  }

  summary {
    font-size: 16px;
  }

  details p {
    padding-right: 0;
  }

  .voet {
    margin-top: 96px;
  }

  .voet-regel {
    flex-direction: column;
  }
}

/*
  Beweging, alleen zonder "minder beweging": de grain, het openschuiven van de vragen en de intro.

  Tijdlijn van de intro (alleen met html.speel):
  0 - 1,2s    Qball: bellen, beeldmerk en woordmerk komen op
  1,2 - 2,4s  het zwart van Outlawz scheurt van onder naar boven over Qball heen
  2,0 - 3,1s  de loader van outlawz-v2 loopt vol, "Overzetten" wordt "Daar gaan we"
  3,3 - 3,7s  het hoekkader klapt dicht om het logo, de balk zakt weg
  3,6 - 4,5s  het zwart scheurt van onder naar boven weg, de pagina komt eronder op
*/

.intro {
  display: none;
}

@media (prefers-reduced-motion: no-preference) {
  body {
    animation: grain 0.8s steps(1) infinite;
  }

  /* Antwoorden schuiven open (Chrome en Edge; elders gaan ze direct open) */
  @supports (interpolate-size: allow-keywords) {
    :root {
      interpolate-size: allow-keywords;
    }

    details::details-content {
      height: 0;
      overflow: clip;
      transition: height 0.35s ease, content-visibility 0.35s allow-discrete;
    }

    details[open]::details-content {
      height: auto;
    }
  }

  .speel .intro {
    position: fixed;
    inset: 0;
    z-index: 100;
    display: block;
    overflow: hidden;
    cursor: pointer;
    animation: weg 0.01s linear 4.5s forwards;
  }

  .overslaan .intro {
    display: none;
  }

  .qball {
    position: absolute;
    inset: 0;
    display: grid;
    place-items: center;
    align-content: center;
    gap: 28px;
    background: var(--wit);
    animation: zak 1.2s cubic-bezier(0.76, 0, 0.24, 1) 1.2s forwards, weg 0.01s linear 2.5s forwards;
  }

  .qball .bel {
    position: absolute;
    border-radius: 50%;
    background: rgb(230 41 41 / 0.1);
    animation: bel-op 0.8s cubic-bezier(0.2, 0.8, 0.2, 1.2) both;
  }

  .qball .b1 { width: 34vmin; height: 34vmin; top: 8%; left: 6%; }
  .qball .b2 { width: 12vmin; height: 12vmin; top: 6%; left: 30%; animation-delay: 0.15s; }
  .qball .b3 { width: 22vmin; height: 22vmin; bottom: 8%; right: 10%; animation-delay: 0.1s; }
  .qball .b4 { width: 8vmin; height: 8vmin; bottom: 34%; right: 6%; animation-delay: 0.25s; }

  .beeldmerk {
    width: clamp(120px, 22vmin, 180px);
    animation: bel-op 0.7s cubic-bezier(0.2, 0.8, 0.2, 1.3) both;
  }

  .woordmerk {
    width: min(76vw, 360px);
    animation: op 0.6s ease 0.35s both;
  }

  .scheur {
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 48px;
    /* iets donkerder dan de pagina, zodat de scheurrand bij het wegscheuren te zien is */
    background: #121212 var(--grain);
    animation:
      scheur 1.2s cubic-bezier(0.76, 0, 0.24, 1) 1.2s both,
      wegscheur 0.9s cubic-bezier(0.76, 0, 0.24, 1) 3.6s both;
    clip-path: polygon(
      0% var(--tear), 5% calc(var(--tear) + 18px), 10% calc(var(--tear) - 12px),
      15% calc(var(--tear) + 24px), 20% calc(var(--tear) - 6px), 25% calc(var(--tear) + 15px),
      30% calc(var(--tear) - 18px), 35% calc(var(--tear) + 9px), 40% calc(var(--tear) + 21px),
      45% calc(var(--tear) - 9px), 50% calc(var(--tear) + 12px), 55% calc(var(--tear) - 15px),
      60% calc(var(--tear) + 18px), 65% calc(var(--tear) - 3px), 70% calc(var(--tear) + 24px),
      75% calc(var(--tear) - 12px), 80% calc(var(--tear) + 6px), 85% calc(var(--tear) + 21px),
      90% calc(var(--tear) - 18px), 95% calc(var(--tear) + 9px), 100% var(--tear),
      100% calc(var(--onder) - 9px), 95% calc(var(--onder) + 15px), 90% calc(var(--onder) - 6px),
      85% calc(var(--onder) + 21px), 80% calc(var(--onder) - 15px), 75% calc(var(--onder) + 6px),
      70% calc(var(--onder) - 18px), 65% calc(var(--onder) + 12px), 60% calc(var(--onder) - 3px),
      55% calc(var(--onder) + 24px), 50% calc(var(--onder) - 12px), 45% calc(var(--onder) + 9px),
      40% calc(var(--onder) - 21px), 35% calc(var(--onder) + 3px), 30% calc(var(--onder) + 18px),
      25% calc(var(--onder) - 9px), 20% calc(var(--onder) + 12px), 15% calc(var(--onder) - 18px),
      10% calc(var(--onder) + 6px), 5% calc(var(--onder) - 12px), 0% calc(var(--onder) + 15px)
    );
  }

  .loader-kader {
    display: grid;
    place-items: center;
    width: 160px;
    height: 160px;
    animation: dicht 0.45s cubic-bezier(0.6, 0, 0.3, 1) 3.3s forwards;
  }

  .loader-kader::before {
    animation: hoeken-dicht 0.3s cubic-bezier(0.6, 0, 0.3, 1) 3.3s forwards;
  }

  .loader-kader img {
    width: 32px;
    animation: bel-op 0.6s cubic-bezier(0.2, 0.8, 0.2, 1.4) 1.8s both;
  }

  .loader-meta {
    display: flex;
    flex-direction: column;
    gap: 12px;
    width: 208px;
    animation: zak-weg 0.35s ease-in 3.3s forwards;
  }

  .loader-balk {
    height: 2px;
    background: rgb(111 111 111 / 0.4);
  }

  .loader-balk span {
    display: block;
    height: 100%;
    background: var(--geel);
    transform-origin: left center;
    animation: vul 1.1s cubic-bezier(0.4, 0, 0.2, 1) 2s both;
  }

  .loader-regel {
    display: flex;
    justify-content: space-between;
    font: 600 12px/1 var(--mono);
    text-transform: uppercase;
  }

  .loader-status {
    display: grid;
    color: var(--grijs-600);
  }

  .loader-status span {
    grid-area: 1 / 1;
  }

  .loader-status span:first-child {
    animation: weg 0.01s linear 3.1s forwards;
  }

  .loader-status span:last-child {
    color: var(--wit);
    animation: op 0.3s ease 3.1s both;
  }

  .loader-pct {
    color: var(--geel);
    counter-reset: pct var(--pct);
    animation: tel 1.1s cubic-bezier(0.4, 0, 0.2, 1) 2s both;
  }

  .loader-pct::after {
    content: counter(pct, decimal-leading-zero) "%";
  }

  /* De pagina komt al onder het zwart op, zodat hij klaarstaat als het wegscheurt */
  .speel .kop,
  .speel .held-kader > * {
    animation: op 0.7s cubic-bezier(0.22, 1, 0.36, 1) 3.3s both;
  }

  .speel .held-kader::before { animation: op 0.9s ease 3.3s both; }
  .speel .held h1 { animation-delay: 3.4s; }
  .speel .held-tekst { animation-delay: 3.5s; }
  .speel .held-kader .knop { animation-delay: 3.55s; }
  .speel .streep::after { animation: streep 0.5s cubic-bezier(0.6, 0, 0.3, 1) 4.3s both; }

  .speel.overslaan .kop,
  .speel.overslaan .held-kader > *,
  .speel.overslaan .held-kader::before,
  .speel.overslaan .streep::after {
    animation: none;
  }
}

@keyframes op {
  from { opacity: 0; translate: 0 0.75rem; }
}

@keyframes weg {
  to { opacity: 0; visibility: hidden; }
}

@keyframes bel-op {
  from { opacity: 0; scale: 0.4; }
}

@keyframes zak {
  to { scale: 0.9; filter: brightness(0.3); }
}

@keyframes scheur {
  from { --tear: 105%; }
  to { --tear: -5%; }
}

@keyframes wegscheur {
  from { --onder: 105%; }
  to { --onder: -10%; }
}

/* Het kader klapt om het logo heen en verdwijnt met het logo */
@keyframes dicht {
  60% { opacity: 1; scale: 0.55; }
  to { opacity: 0; scale: 0.4; filter: blur(4px); }
}

@keyframes hoeken-dicht {
  to { inset: 24px; border-color: var(--geel); }
}

@keyframes zak-weg {
  to { opacity: 0; translate: 0 16px; }
}

@keyframes vul {
  from { scale: 0 1; }
}

@keyframes tel {
  to { --pct: 100; }
}

@keyframes streep {
  from { scale: 0 1; }
}

@keyframes grain {
  0% { background-position: 0 0; }
  20% { background-position: -37px 51px; }
  40% { background-position: 83px -29px; }
  60% { background-position: -64px -88px; }
  80% { background-position: 22px 95px; }
}