/* d.css — het vaste frame van versie D: bovenbalk met modusschakelaar en
   geluid, het Dymo-label met de principes, de kameleon-veeg tussen modi.
   Alles hierbinnen verandert niet van vorm of kleur per modus — behalve de
   actieve modus-chip, die de accentkleur van het moment aanneemt.
   Modi stylen alleen binnen hun eigen .m-<id>-wortel (zie modes/). */

:root {
  --top-h: 64px;
  --safe-t: env(safe-area-inset-top, 0px);
  --safe-b: env(safe-area-inset-bottom, 0px);
  --safe-l: env(safe-area-inset-left, 0px);
  --safe-r: env(safe-area-inset-right, 0px);
  --dymo-room: 64px;                 /* zoveel ruimte onderaan laten modi vrij */
  --pill: #151413;
  --pill-ink: #f3eee6;
  --chip: #e5432a;                   /* accent van het moment (ctx.setAccent) */
  --chip-ink: #fff;
  --top-ink: #1e1a16;
}

html { background: var(--page-bg, #efbf98); }
body { min-height: 100svh; background: var(--page-bg, #efbf98); color: #1e1a16; font: 450 16px/1.5 var(--f-sans); transition: background-color .5s var(--e-soft); }
html.is-switching body { overflow: hidden; }

.skip {
  position: fixed; z-index: 120; left: 12px; top: -60px; padding: 10px 14px; border-radius: 99px;
  background: var(--pill); color: var(--pill-ink); font: 500 12px/1 var(--f-mono); text-decoration: none;
}
.skip:focus { top: calc(12px + var(--safe-t)); }

/* ---------- bovenbalk ---------- */

.top {
  position: fixed; z-index: 90; left: 0; right: 0; top: 0;
  height: calc(var(--top-h) + var(--safe-t)); padding: var(--safe-t) max(20px, var(--safe-r)) 0 max(20px, var(--safe-l));
  display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 16px;
  pointer-events: none; color: var(--top-ink); transition: color .5s var(--e-soft);
}
.top > * { pointer-events: auto; }
.top__brand { justify-self: start; display: inline-flex; align-items: center; gap: 9px; text-decoration: none; font: 500 15px/1 var(--f-wide); letter-spacing: -.01em; }
.top__brand b { font-weight: 760; }
.top__dot { width: 11px; height: 11px; border-radius: 50%; background: var(--chip); box-shadow: 0 0 0 3px color-mix(in srgb, var(--chip) 25%, transparent); transition: background-color .5s var(--e-soft), box-shadow .5s var(--e-soft); }

/* modusschakelaar — Arno's pil, maar dan voor de hele site */
.modes { position: relative; justify-self: center; }
.modes__open { display: none; }
.modes__list {
  position: relative; display: flex; align-items: center; gap: 2px; padding: 5px;
  border-radius: 99px; background: var(--pill); color: var(--pill-ink);
  box-shadow: 0 10px 30px -12px rgb(0 0 0 / .45), inset 0 0 0 1px rgb(255 255 255 / .06);
}
.modes__k { font: 400 10px/1 var(--f-mono); letter-spacing: .16em; text-transform: uppercase; opacity: .5; }
.modes__k--wide { padding: 0 10px 0 12px; }
.modes__list a {
  position: relative; z-index: 1; padding: 9px 15px; border-radius: 99px;
  font: 500 13px/1 var(--f-sans); letter-spacing: .005em; text-decoration: none; white-space: nowrap;
  color: color-mix(in srgb, var(--pill-ink) 72%, transparent); transition: color .3s var(--e-soft);
}
.modes__list a:hover { color: var(--pill-ink); }
.modes__list a[aria-current="true"] { color: var(--chip-ink); }
.modes__list a:focus-visible { outline: 1px solid var(--pill-ink); outline-offset: -3px; }
.modes__ink {
  position: absolute; z-index: 0; top: 5px; bottom: 5px; left: 0; width: 0; border-radius: 99px;
  background: var(--chip); transition: transform .55s var(--e-out), width .55s var(--e-out), background-color .5s var(--e-soft);
}
.modes__back { display: none; }

/* geluid — "Sound off", zoals bij Arno */
.snd {
  justify-self: end; display: inline-flex; align-items: center; gap: 10px; padding: 9px 14px 9px 12px;
  border-radius: 99px; border: 1px solid color-mix(in srgb, var(--top-ink) 30%, transparent);
  font: 500 12px/1 var(--f-sans); transition: border-color .3s, background-color .3s;
  max-width: 100%; min-width: 0;
}
.snd:hover { border-color: currentColor; }
.snd[aria-pressed="true"] { background: color-mix(in srgb, var(--top-ink) 8%, transparent); }
.snd__bars { display: inline-flex; align-items: flex-end; gap: 2px; height: 12px; }
.snd__bars i { width: 2px; height: 3px; background: currentColor; border-radius: 1px; transition: height .2s; }
.snd[aria-pressed="true"] .snd__bars i { animation: snd 1s var(--e-soft) infinite alternate; }
.snd[aria-pressed="true"] .snd__bars i:nth-child(2) { animation-delay: -.3s; }
.snd[aria-pressed="true"] .snd__bars i:nth-child(3) { animation-delay: -.6s; }
.snd[aria-pressed="true"] .snd__bars i:nth-child(4) { animation-delay: -.15s; }
@keyframes snd { from { height: 3px; } to { height: 12px; } }
.snd__now {
  display: none; max-width: 0; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; font: 400 10.5px/1 var(--f-mono); letter-spacing: .06em;
  opacity: .7; transition: max-width .6s var(--e-out);
}
.snd[aria-pressed="true"] .snd__now { display: inline-block; max-width: min(190px, calc(50vw - 420px)); }
@media (max-width: 1180px) { .snd[aria-pressed="true"] .snd__now { display: none; } }

/* ---------- podium ---------- */

.stage { position: relative; min-height: 100svh; outline: none; }
.stage > .mode { position: relative; min-height: 100svh; }
.nojs { max-width: 640px; margin: 0 auto; padding: calc(var(--top-h) + 60px) 20px 120px; }
.nojs h1 { font: 700 clamp(48px, 9vw, 96px)/.95 var(--f-wide); letter-spacing: -.04em; margin: 12px 0 20px; }
.nojs p { margin-bottom: 14px; }
.nojs__k { font: 400 11px/1 var(--f-mono); letter-spacing: .14em; text-transform: uppercase; }
.js .nojs { visibility: hidden; }

/* ---------- Dymo-label: de principes, overal precies hetzelfde ---------- */

.dymo {
  position: fixed; z-index: 95; left: max(18px, var(--safe-l)); bottom: max(16px, calc(var(--safe-b) + 8px));
  display: flex; align-items: center; gap: .7em; margin: 0; padding: 9px 16px 8px;
  background:
    linear-gradient(180deg, rgb(255 255 255 / .09), rgb(255 255 255 / 0) 45%, rgb(0 0 0 / .25)),
    #121212;
  color: #f4f2ee; font: 500 11px/1 var(--f-mono); letter-spacing: .2em; text-transform: uppercase;
  text-shadow: 0 1px 0 rgb(0 0 0 / .9), 0 -1px 0 rgb(255 255 255 / .22);
  clip-path: polygon(0 0, 100% 0, calc(100% - 5px) 50%, 100% 100%, 0 100%, 5px 50%);
  transform: rotate(-1.4deg); transform-origin: 0 100%;
  filter: drop-shadow(0 6px 10px rgb(0 0 0 / .28));
  pointer-events: none; user-select: none;
}
.dymo i { width: 3px; height: 3px; border-radius: 50%; background: currentColor; opacity: .55; }

/* ---------- kameleon-veeg tussen modi ---------- */

.sweep {
  position: fixed; inset: 0; z-index: 85; pointer-events: none; visibility: hidden;
  display: grid; place-items: center; background: var(--sweep-bg, #111); color: var(--sweep-ink, #fff);
  clip-path: circle(0% at var(--sx, 50%) var(--sy, 40px));
}
.sweep__t { display: grid; justify-items: center; gap: 14px; text-align: center; padding: 0 20px; }
.sweep__k { font: 400 11px/1 var(--f-mono); letter-spacing: .2em; text-transform: uppercase; opacity: .6; }
.sweep__mode { font: 800 clamp(56px, 11vw, 168px)/.86 var(--f-wide); font-stretch: 112%; letter-spacing: -.045em; }
.sweep__sub { font: italic 400 clamp(20px, 2.4vw, 30px)/1.2 var(--f-serif); opacity: .85; }
.sweep.is-in { visibility: visible; animation: sweep-in .7s var(--e-world) forwards; }
.sweep.is-out { visibility: visible; clip-path: circle(150% at var(--sx, 50%) var(--sy, 40px)); animation: sweep-out .6s var(--e-soft) forwards; }
@keyframes sweep-in { from { clip-path: circle(0% at var(--sx) var(--sy)); } to { clip-path: circle(150% at var(--sx) var(--sy)); } }
@keyframes sweep-out { from { opacity: 1; } to { opacity: 0; } }
.sweep .sweep__t > * { opacity: 0; transform: translateY(14px); }
.sweep.is-in .sweep__t > * { animation: sweep-word .5s var(--e-out) .22s forwards; }
.sweep.is-in .sweep__mode { animation-delay: .28s; }
.sweep.is-in .sweep__sub { animation-delay: .36s; }
.sweep.is-out .sweep__t > * { opacity: 1; transform: none; }
@keyframes sweep-word { to { opacity: 1; transform: none; } }

/* terug-link rechtsonder, uit de buurt van het Dymo-label */
.design-back { left: auto; right: max(14px, var(--safe-r)); transform: none; color: var(--top-ink); }

/* ---------- smal: modusmenu klapt in ---------- */

@media (max-width: 860px) {
  :root { --top-h: 58px; }
  .top { grid-template-columns: auto 1fr auto; gap: 10px; padding-left: max(14px, var(--safe-l)); padding-right: max(14px, var(--safe-r)); }
  .top__word { display: none; }
  .modes { justify-self: center; }
  .modes__open {
    display: inline-flex; align-items: center; gap: 9px; padding: 11px 14px 11px 16px; border-radius: 99px;
    background: var(--pill); color: var(--pill-ink); font: 500 13px/1 var(--f-sans);
    box-shadow: 0 10px 30px -12px rgb(0 0 0 / .45);
  }
  .modes__open b { font-weight: 600; color: var(--pill-ink); display: inline-flex; align-items: center; gap: 7px; }
  .modes__open b::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--chip); }
  .modes__chev { width: 7px; height: 7px; border-right: 1.5px solid currentColor; border-bottom: 1.5px solid currentColor; transform: translateY(-2px) rotate(45deg); opacity: .7; transition: transform .3s var(--e-out); }
  .modes.is-open .modes__chev { transform: translateY(2px) rotate(-135deg); }
  .modes__list {
    position: absolute; top: calc(100% + 8px); left: 50%; width: min(260px, calc(100vw - 28px));
    flex-direction: column; align-items: stretch; gap: 2px; padding: 8px; border-radius: 22px;
    transform: translate(-50%, -6px) scale(.98); opacity: 0; visibility: hidden;
    transition: opacity .25s var(--e-soft), transform .35s var(--e-out), visibility 0s .35s;
  }
  .modes.is-open .modes__list { opacity: 1; visibility: visible; transform: translate(-50%, 0); transition-delay: 0s; }
  .modes__k--wide { display: none; }
  .modes__list a { padding: 14px 16px; font-size: 15px; border-radius: 14px; }
  .modes__list a[aria-current="true"] { background: var(--chip); }
  .modes__ink { display: none; }
  .modes__back { display: block; margin-top: 6px; border-top: 1px solid rgb(255 255 255 / .1); border-radius: 0 0 14px 14px !important; font: 400 11px/1 var(--f-mono) !important; letter-spacing: .14em; text-transform: uppercase; opacity: .6; }
  .snd { padding: 10px 11px; }
  .snd__label, .snd__now { display: none !important; }
  .design-back { display: none; }
  .dymo { left: 50%; transform: translateX(-50%) rotate(-1.4deg); transform-origin: 50% 100%; font-size: 10px; letter-spacing: .16em; padding: 8px 13px 7px; gap: .55em; white-space: nowrap; }
  :root { --dymo-room: 60px; }
}

@media (prefers-reduced-motion: reduce) {
  .sweep.is-in { animation: sweep-fade .2s linear forwards; clip-path: none; }
  @keyframes sweep-fade { from { opacity: 0; } to { opacity: 1; } }
  .sweep.is-in .sweep__t > * { animation-duration: .01s; animation-delay: 0s; }
  .modes__ink, .top__dot { transition: none; }
}

.is-preview .snd__now { display: none !important; }

/* ---------- Cayenne Coaching-logo: origineel logo, pepertje beweegt een beetje (cayenne.js) ---------- */
.cay { display: block; width: 100%; padding: 0; border: 0; background: none; color: inherit; -webkit-tap-highlight-color: transparent; }
button.cay, a.cay { cursor: pointer; }
.cay:focus-visible { outline: 1px solid currentColor; outline-offset: 6px; }
.cay__logo { position: relative; display: block; width: 100%; aspect-ratio: 1648 / 514; }
.cay__base { display: block; width: 100%; height: auto; }
.cay__pepwrap { position: absolute; left: 14.02%; top: 19.07%; width: 12.8%; }
.cay__pep { display: block; width: 100%; height: auto; transform-origin: 84% 34%; }
/* op een donkere grond: lichte letters, het pepertje blijft zoals het is */
.cay--light .cay__base { filter: invert(1) hue-rotate(180deg) brightness(1.04); }

/* binnenkomst: zacht op zijn plek, daarna af en toe even wiegen */
.cay:not(.is-in) .cay__pepwrap { opacity: 0; transform: translateY(-16%) rotate(-6deg); }
.cay.is-in .cay__pepwrap { animation: cay-settle 1.1s cubic-bezier(.22, .9, .3, 1) .3s both; }
.cay.is-in .cay__pep { animation: cay-sway 9s ease-in-out 3.5s infinite; }
@keyframes cay-settle {
  0% { opacity: 0; transform: translateY(-16%) rotate(-6deg); }
  55% { opacity: 1; transform: translateY(2%) rotate(1.2deg); }
  100% { opacity: 1; transform: none; }
}
@keyframes cay-sway { 0%, 86%, 100% { transform: none; } 89% { transform: rotate(-2.4deg); } 93% { transform: rotate(1.6deg); } 97% { transform: rotate(-.6deg); } }
@keyframes cay-wiggle { 0%, 100% { transform: none; } 25% { transform: rotate(-3deg); } 55% { transform: rotate(2deg); } 80% { transform: rotate(-.8deg); } }
@media (hover: hover) { .cay.is-in:hover .cay__pep { animation: cay-wiggle .9s ease-in-out; } }
.cay.is-pop .cay__pep { animation: cay-wiggle .9s ease-in-out; }

.cay.is-still .cay__pepwrap, .cay.is-still .cay__pep { opacity: 1; transform: none; animation: none; }
@media (prefers-reduced-motion: reduce) {
  .cay .cay__pepwrap, .cay .cay__pep { opacity: 1 !important; transform: none !important; animation: none !important; }
}

/* ---------- D1a: nog geen modi — de schakelaar blijft weg ---------- */
.no-modes .modes { display: none; }
.no-modes .snd { grid-column: 3; }
@media (max-width: 860px) {
  .no-modes .top { grid-template-columns: auto 1fr auto; }
  .no-modes .design-back { display: block; top: calc(var(--safe-t) + 22px); bottom: auto; left: 50%; right: auto; transform: translateX(-50%); }
}
@media (max-width: 860px) { .no-modes .top__word { display: inline; } }