/* Playful extras ("speeltjes"). Each block is active only when its key is in html[data-fun]
   (set by js/fun.js; ?fun=off switches all of them off, ?play opens the switchboard). */

:root { --neon: #c8ff3d; --neon-soft: rgba(200, 255, 61, 0.35); --glow: 0 0 6px rgba(200, 255, 61, 0.55), 0 0 26px rgba(200, 255, 61, 0.22); }

/* ---------- 1. Lights: the hero toggle really switches ---------- */
[data-fun~="lights"] .toggle--hero, [data-fun~="lights"] .toggle--tile { cursor: pointer; }
.toggle-wrap { position: relative; display: inline-flex; flex: none; }
.toggle .toggle__knob { transition: translate 420ms cubic-bezier(0.5, 1.6, 0.4, 1), background-color 300ms ease; }
.toggle .toggle__knob img { transition: opacity 200ms ease, scale 300ms ease; }
.toggle--hero { transition: background-color 300ms ease, box-shadow 300ms ease; }
.toggle--hero:focus-visible { outline: var(--focus-ring); outline-offset: 4px; border-radius: 0.62963em; }
[data-lights="off"] .toggle--hero .toggle__knob { translate: -0.85185em 0; }
[data-lights="off"] .toggle--tile .toggle__knob { translate: -208px 0; }
[data-lights="off"] .toggle .toggle__knob { background: #23402f; }
[data-lights="off"] .toggle .toggle__knob img { opacity: 0; scale: 0.6; }
[data-lights="off"] .toggle--hero, [data-lights="off"] .toggle--tile { background: #0d2117; animation: lights-pulse 1.6s ease-in-out infinite; }
@keyframes lights-pulse {
  0%, 100% { box-shadow: 0 0 0 2px var(--neon), 0 0 14px 2px var(--neon-soft); }
  50% { box-shadow: 0 0 0 2px var(--neon), 0 0 34px 8px var(--neon-soft); }
}
.hero__row:has(.toggle-wrap) { position: relative; }
.lights-hint {
  position: absolute; left: calc(100% + 0.3em); top: 50%; z-index: 3; translate: 0 -50%;
  padding: 0.42em 0.8em 0.46em; border-radius: 1.4em; background: var(--color-white); color: var(--color-black);
  font: 700 0.27em / 1.1 var(--font-hand); letter-spacing: -0.02em; white-space: nowrap; text-transform: uppercase;
  box-shadow: 0 0 0 2px var(--color-black), 0 0 24px rgba(255, 255, 255, 0.35); pointer-events: none;
  opacity: 0; scale: 0.6; transform-origin: 0 50%; transition: opacity 200ms ease, scale 260ms cubic-bezier(0.5, 1.8, 0.4, 1);
}
.lights-hint::after { content: ""; position: absolute; right: 100%; top: 50%; translate: 0 -50%; border: 0.5em solid transparent; border-right-color: var(--color-white); border-left: 0; margin-right: -1px; }
[data-lights="off"] .lights-hint { opacity: 1; scale: 1; animation: hint-bob 1.4s ease-in-out infinite 300ms; }
@keyframes hint-bob { 0%, 100% { translate: 0 -50%; } 50% { translate: 0.15em -50%; } }

/* Lights out: dark page, neon text. Not a dark mode, more "poof, it's dark". */
html { transition: background-color 400ms ease; }
body { transition: background-color 400ms ease, color 400ms ease; }
[data-lights="off"] {
  color-scheme: dark;
  --color-bg-base: #050d09; --color-bg-accent: #0d1b14; --color-bg-image: #0d1b14;
  --color-fg-primary: #eaffd2; --color-fg-secondary: #b6d1a8; --color-fg-tertiary: #97b28b; --color-fg-heading-news: #eaffd2;
  --color-white-secondary: rgba(234, 255, 210, 0.82);
  background: #050d09;
}
[data-lights="off"] body { background: var(--color-bg-base); }
[data-lights="off"] :is(.hero__title, .display-title, .heading-2, .heading-3, .pain-card__title, .feature__title, .post-card__title, .person__name, .mosaic__badge-label, .pill__label) {
  color: #f1ffe0; text-shadow: var(--glow);
}
[data-lights="off"] .hero__bg { background: #03130a; }
[data-lights="off"] .hero__blob img { filter: brightness(0.32) saturate(1.3); }
[data-lights="off"] .hero__blob--outer { opacity: 0.08; }
[data-lights="off"] :is(.pain-card, .stack-card, .quote-card, .mosaic__tile--gradient, .mosaic__tile--light, .gear-tile) {
  background: #08170f; box-shadow: inset 0 0 0 1px var(--neon-soft), 0 0 42px rgba(94, 163, 6, 0.16);
}
[data-lights="off"] .stack-card__blob { opacity: 0.25; }
[data-lights="off"] :is(.media > img:first-child, .mosaic__photo, .stack-card__media img) { filter: brightness(0.55) saturate(0.85); }
[data-lights="off"] :is(.tile, .person__avatar) { background: #0d1b14; box-shadow: inset 0 0 0 1px var(--neon-soft), 0 0 18px rgba(200, 255, 61, 0.15); }
[data-lights="off"] :is(.tile img, .mosaic__icon, .mosaic__tile--center img, .gear-tile img) { filter: invert(1) sepia(1) saturate(4) hue-rotate(35deg) brightness(1.1); }
[data-lights="off"] :is(.btn--primary, .btn--light, .btn--small) {
  background: transparent; color: var(--neon); text-shadow: var(--glow);
  box-shadow: inset 0 0 0 1.5px var(--neon), 0 0 18px var(--neon-soft);
}
[data-lights="off"] .cta { background: #06140c; }
[data-lights="off"] .cta__blob img { filter: brightness(0.35); }
[data-lights="off"] .logo-row__item img { filter: brightness(0) invert(1); opacity: 0.8; }
[data-lights="off"] :is(.pain-card__art, .mosaic__bubbles, .cta__bubbles) { filter: drop-shadow(0 0 12px rgba(255, 255, 255, 0.28)); }
[data-lights="off"] .post-card__meta { color: var(--neon); }
html[data-lights-anim="on"] body { animation: lights-flicker 760ms steps(1, end); }
@keyframes lights-flicker {
  0% { filter: brightness(0.25); } 12% { filter: brightness(1); } 20% { filter: brightness(0.4); }
  34% { filter: brightness(1.05); } 44% { filter: brightness(0.7); } 60%, 100% { filter: none; }
}

/* ---------- 2. Strike: pain titles get crossed out when they scroll in ---------- */
[data-fun~="strike"] .pain-card__title:has(> s) { text-decoration: none; }
[data-fun~="strike"] .pain-card__title s {
  text-decoration: none;
  background: linear-gradient(currentColor, currentColor) 0 58% / 0% 0.0625em no-repeat;
  -webkit-box-decoration-break: clone; box-decoration-break: clone;
  transition: background-size 700ms cubic-bezier(0.6, 0, 0.3, 1) 250ms;
}
[data-fun~="strike"] .pain-card.is-in .pain-card__title s { background-size: 100% 0.0625em; }

/* ---------- 3. Bubbles: comic speech bubbles pop in and wobble on hover ---------- */
.art-group { position: absolute; inset: 0; }
[data-fun~="bubbles"] :is(.pain-card__art .art-stage, .mosaic__bubbles > *, .cta__bubbles > *) {
  opacity: 0; scale: 0.4; rotate: -8deg;
  transition: opacity 180ms ease var(--pop-delay, 0ms), scale 520ms cubic-bezier(0.34, 1.9, 0.5, 1) var(--pop-delay, 0ms), rotate 520ms cubic-bezier(0.34, 1.9, 0.5, 1) var(--pop-delay, 0ms);
}
[data-fun~="bubbles"] .is-in :is(.art-stage, .mosaic__bubbles > *, .cta__bubbles > *),
[data-fun~="bubbles"] :is(.mosaic__bubbles, .cta__bubbles).is-in > * { opacity: 1; scale: 1; rotate: 0deg; }
[data-fun~="bubbles"] :is(.mosaic__bubbles > *, .cta__bubbles > *):not(.art-group),
[data-fun~="bubbles"] .art-group > .art { pointer-events: auto; cursor: grab; }
.art-group { pointer-events: none; }
[data-fun~="bubbles"] :is(.mosaic__bubbles > *, .cta__bubbles > *):not(.art-group):hover,
[data-fun~="bubbles"] .art-group:has(> .art:hover),
[data-fun~="bubbles"] .pain-card:hover .art-stage { animation: bubble-wobble 600ms ease-in-out; }
@keyframes bubble-wobble { 0%, 100% { rotate: 0deg; } 25% { rotate: -5deg; } 50% { rotate: 4deg; } 75% { rotate: -2deg; } }

/* ---------- 4. Gears and badge: gears turn while you scroll, the award badge spins on hover ---------- */
[data-fun~="gears"] .gear-tile__frame img { rotate: calc(8deg + var(--scroll-turn, 0deg)); }
[data-fun~="gears"] .hero-badge { cursor: pointer; transition: rotate 700ms cubic-bezier(0.34, 1.6, 0.5, 1); }
[data-fun~="gears"] .hero-badge:hover { rotate: 24deg; }
[data-fun~="gears"] .hero-badge.is-spinning { animation: badge-spin 900ms cubic-bezier(0.3, 1.4, 0.5, 1); }
@keyframes badge-spin { from { rotate: 0deg; } to { rotate: 360deg; } }

/* ---------- 5. Typing: the AI terminal types a prompt ---------- */
.code-tile__caret { display: inline-block; width: 0.55em; height: 1em; margin-left: 1px; vertical-align: -0.15em; background: var(--color-code-var); animation: caret-blink 1s steps(1) infinite; }
@keyframes caret-blink { 50% { opacity: 0; } }

/* ---------- 6. Footer: blinking "we're hiring" caret and a heart that beats ---------- */
[data-fun~="footer"] .lozenge::after { content: "_"; animation: caret-blink 1s steps(1) infinite; }
[data-fun~="footer"] .footer__tagline img { cursor: pointer; transform-origin: 50% 60%; }
[data-fun~="footer"] .footer__tagline:hover img { animation: heart-beat 900ms ease-in-out infinite; }
@keyframes heart-beat { 0%, 100% { scale: 1; } 15% { scale: 1.35; } 30% { scale: 1; } 45% { scale: 1.25; } }
.float-heart { position: fixed; z-index: 90; width: 16px; height: 16px; pointer-events: none; animation: heart-float 1400ms ease-out forwards; }
@keyframes heart-float { to { translate: var(--dx, 0px) -140px; opacity: 0; scale: 1.8; rotate: var(--rot, 0deg); } }

/* ---------- 7. Easter egg: type "clever" anywhere for confetti ---------- */
.confetti { position: fixed; inset: 0; z-index: 95; pointer-events: none; overflow: hidden; }
.confetti span { position: absolute; top: -24px; width: 12px; height: 16px; border-radius: 60% 20% 60% 20%; background: var(--c); animation: confetti-fall var(--t, 2.4s) cubic-bezier(0.2, 0.6, 0.4, 1) forwards; }
@keyframes confetti-fall { to { translate: var(--dx, 0px) 110vh; rotate: var(--rot, 540deg); } }
.egg-bubble {
  position: fixed; left: 50%; top: 18vh; z-index: 96; translate: -50% 0; padding: 14px 26px 16px; border-radius: 40px;
  background: var(--color-white); color: var(--color-black); box-shadow: 0 0 0 3px var(--color-black), 0 18px 40px rgba(0, 0, 0, 0.25);
  font: 700 28px / 1.1 var(--font-hand); text-transform: uppercase; letter-spacing: -0.03em; pointer-events: none;
  animation: egg-pop 2600ms cubic-bezier(0.34, 1.7, 0.5, 1) forwards;
}
@keyframes egg-pop { 0% { scale: 0.3; opacity: 0; } 12% { scale: 1; opacity: 1; } 85% { scale: 1; opacity: 1; } 100% { scale: 0.8; opacity: 0; } }

/* ---------- Switchboard (?play) ---------- */
.fun-panel {
  position: fixed; left: 16px; bottom: 16px; z-index: 80; width: min(340px, calc(100vw - 32px)); max-height: calc(100vh - 32px); overflow: auto;
  padding: 18px 18px 14px; border-radius: 20px; background: rgba(13, 39, 28, 0.94); color: #f3f7e4;
  box-shadow: 0 20px 48px rgba(0, 0, 0, 0.3); backdrop-filter: blur(8px);
  font: 500 14px / 1.45 var(--font-display);
}
.fun-panel[hidden] { display: none; }
.fun-panel h2 { margin: 0 0 4px; font: 700 18px / 1.2 var(--font-display); }
.fun-panel p { margin: 0 0 10px; color: rgba(243, 247, 228, 0.75); }
.fun-panel ul { margin: 0; padding: 0; list-style: none; }
.fun-panel li + li { border-top: 1px solid rgba(243, 247, 228, 0.12); }
.fun-panel label { display: grid; grid-template-columns: 1fr auto; gap: 2px 12px; align-items: center; min-height: 44px; padding: 8px 0; cursor: pointer; }
.fun-panel label small { grid-column: 1; color: rgba(243, 247, 228, 0.65); font-size: 12.5px; line-height: 1.35; }
.fun-panel input { grid-row: 1 / span 2; grid-column: 2; width: 40px; height: 22px; appearance: none; border-radius: 11px; background: #3a4f43; position: relative; cursor: pointer; transition: background-color 160ms ease; }
.fun-panel input::after { content: ""; position: absolute; left: 3px; top: 3px; width: 16px; height: 16px; border-radius: 50%; background: #fff; transition: translate 160ms ease; }
.fun-panel input:checked { background: var(--color-brand-mid); }
.fun-panel input:checked::after { translate: 18px 0; }
.fun-panel input:focus-visible { outline: 2px solid var(--color-brand-light); outline-offset: 2px; }
.fun-panel__actions { display: flex; gap: 8px; margin-top: 10px; }
.fun-panel__actions button { flex: 1; min-height: 40px; border: 1px solid rgba(243, 247, 228, 0.3); border-radius: 20px; background: transparent; color: inherit; font: 700 13px / 1 var(--font-display); cursor: pointer; }
.fun-panel__actions button:hover { background: rgba(243, 247, 228, 0.1); }
.fun-panel__toggle {
  position: fixed; left: 16px; bottom: 16px; z-index: 79; min-height: 44px; padding: 0 16px; border: 0; border-radius: 22px;
  background: var(--color-brand-deep); color: #f3f7e4; font: 700 14px / 1 var(--font-display); box-shadow: 0 10px 24px rgba(0, 0, 0, 0.25); cursor: pointer;
}

@media (prefers-reduced-motion: reduce) {
  [data-fun~="bubbles"] :is(.pain-card__art .art-stage, .mosaic__bubbles > *, .cta__bubbles > *) { opacity: 1; scale: 1; rotate: 0deg; }
  [data-fun~="strike"] .pain-card__title s { background-size: 100% 0.0625em; }
  html[data-lights-anim="on"] body { animation: none; }
}

@media (max-width: 1023px) {
  .lights-hint { left: auto; right: 0; top: calc(100% + 0.25em); translate: 0 0; font-size: 0.3em; transform-origin: 80% 0; }
  .lights-hint::after { right: 22%; top: auto; bottom: 100%; translate: 0 0; border: 0.5em solid transparent; border-bottom-color: var(--color-white); border-top: 0; margin: 0 0 -1px; }
  @keyframes hint-bob { 0%, 100% { translate: 0 0; } 50% { translate: 0 0.12em; } }
}

/* ---------- 8. Living title icons (hover a title, or tap the tile) ---------- */
.tile { position: relative; }
.tile__icon { position: relative; z-index: 1; }
.tile__fx { position: absolute; left: 50%; top: 50%; z-index: 0; width: 0.875em; height: 0.875em; translate: -50% -50%; opacity: 0; transition: opacity 260ms ease; pointer-events: none; }
.tile__fx--over { z-index: 2; }
[data-fun~="icons"] .display-title:hover .tile--colour .tile__fx,
[data-fun~="icons"] .tile--colour.is-playing .tile__fx { opacity: 1; }
[data-fun~="icons"] .display-title:hover .tile--colour,
[data-fun~="icons"] .tile.is-playing:not(.tile--crew) { animation: tile-hop 520ms cubic-bezier(0.34, 1.7, 0.5, 1); }
@keyframes tile-hop { 0% { translate: 0 0; } 35% { translate: 0 -0.08em; } 100% { translate: 0 0; } }
[data-fun~="icons"] .tile { cursor: pointer; }

/* The old man walks out of his tile on the right and comes back in on the left */
[data-fun~="icons"] .display-title:hover .tile--walker .tile__icon,
[data-fun~="icons"] .tile--walker.is-playing .tile__icon {
  transform-origin: 50% 100%;
  animation: walker-walk 3.2s linear infinite, walker-waddle 0.4s ease-in-out infinite alternate;
}
@keyframes walker-walk {
  0% { translate: 0 0; } 45% { translate: 1.3em 0; } 45.01% { translate: -1.3em 0; } 100% { translate: 0 0; }
}
@keyframes walker-waddle { from { rotate: -7deg; scale: 1 1; } to { rotate: 5deg; scale: 1 0.96; } }

/* The medal shines once it has its colours */
.tile--medal::after { content: ""; position: absolute; inset: -40% auto -40% -60%; width: 40%; z-index: 3; background: linear-gradient(100deg, transparent, rgba(255, 255, 255, 0.85), transparent); rotate: 18deg; opacity: 0; pointer-events: none; }
[data-fun~="icons"] .display-title:hover .tile--medal::after,
[data-fun~="icons"] .tile--medal.is-playing::after { animation: medal-shine 900ms ease 200ms; }
@keyframes medal-shine { 0% { opacity: 1; left: -60%; } 100% { opacity: 1; left: 130%; } }

/* The speech bubble types… and then says something */
.tile__chat { position: absolute; left: 0.33em; top: 0.27em; width: 0.62em; height: 0.46em; z-index: 3; display: grid; place-items: center; pointer-events: none; }
.tile__dots { display: flex; gap: 0.045em; opacity: 0; }
.tile__dots i { width: 0.07em; height: 0.07em; border-radius: 50%; background: var(--color-fg-primary); animation: chat-dot 900ms ease-in-out infinite; }
.tile__dots i:nth-child(2) { animation-delay: 150ms; }
.tile__dots i:nth-child(3) { animation-delay: 300ms; }
@keyframes chat-dot { 0%, 60%, 100% { translate: 0 0; opacity: 0.45; } 30% { translate: 0 -0.05em; opacity: 1; } }
.tile__word { position: absolute; inset: 0; display: grid; place-items: center; font: 700 0.16em / 1 var(--font-hand); letter-spacing: -0.03em; text-transform: uppercase; color: var(--color-black); opacity: 0; scale: 0.4; transition: opacity 160ms ease, scale 360ms cubic-bezier(0.34, 1.8, 0.5, 1); white-space: nowrap; }
.tile--chat.is-typing .tile__dots { opacity: 1; }
.tile--chat.is-talking .tile__word { opacity: 1; scale: 1; }
[data-lights="off"] .tile__dots i { background: var(--neon); }

/* ---------- 9. AI terminal ---------- */
.code-line.is-spinning::before { content: var(--spin, "✶") " "; color: var(--color-code-cmd); }
.code-line.is-spinning { color: rgba(243, 247, 228, 0.6); }

/* CleverCrew: the team gets colour, does a wave, and asks you to join */
.tile-anchor { position: relative; display: inline-flex; flex: none; }
.tile__fx--crew-group, .tile__fx--crew-right { z-index: 2; }
[data-fun~="icons"] .display-title:hover .tile--crew .tile__icon,
[data-fun~="icons"] .tile--crew.is-playing .tile__icon { opacity: 0; }
[data-fun~="icons"] .display-title:hover .tile--crew .tile__fx,
[data-fun~="icons"] .tile--crew.is-playing .tile__fx { opacity: 1; }
[data-fun~="icons"] .display-title:hover .tile--crew .tile__fx--crew-group,
[data-fun~="icons"] .tile--crew.is-playing .tile__fx--crew-group { animation: crew-hop 460ms cubic-bezier(0.3, 1.6, 0.5, 1) 120ms 2; }
[data-fun~="icons"] .display-title:hover .tile--crew .tile__fx--crew-right,
[data-fun~="icons"] .tile--crew.is-playing .tile__fx--crew-right { animation: crew-hop 460ms cubic-bezier(0.3, 1.6, 0.5, 1) 300ms 2; }
@keyframes crew-hop { 0%, 100% { translate: -50% -50%; } 45% { translate: -50% -62%; } }
.crew-badge {
  position: absolute; left: 56%; bottom: calc(100% - 0.35em); z-index: 4;
  padding: 0.28em 0.5em 0.32em; border-radius: 1em; background: var(--color-white); color: var(--color-black);
  box-shadow: 0 0 0 2px var(--color-black); font: 700 0.22em / 1 var(--font-hand); letter-spacing: -0.02em; text-transform: uppercase; white-space: nowrap;
  opacity: 0; scale: 0.3; rotate: -14deg; transform-origin: 0 100%; pointer-events: none;
  transition: opacity 160ms ease, scale 420ms cubic-bezier(0.34, 1.9, 0.5, 1), rotate 420ms cubic-bezier(0.34, 1.9, 0.5, 1);
}
.crew-badge::after { content: ""; position: absolute; left: 0.5em; top: 100%; border: 0.4em solid transparent; border-top-color: var(--color-white); border-bottom: 0; border-left: 0; margin-top: -1px; filter: drop-shadow(0 2px 0 var(--color-black)); }
[data-fun~="icons"] .display-title:hover .crew-badge,
[data-fun~="icons"] .tile-anchor:has(.is-playing) .crew-badge { opacity: 1; scale: 1; rotate: 8deg; transition-delay: 0ms, 380ms, 380ms; }

.toggle--tile:focus-visible { outline: var(--focus-ring-dark); outline-offset: 4px; }
@media (max-width: 767px) {
  .tile-anchor { display: inline-flex; vertical-align: -0.22em; }
  .tile-anchor .tile { vertical-align: 0; }
}