/* Reset, tokens and type. Techniques follow good-css.com (foundations, interaction, motion). */

*,
*::before,
*::after {
  box-sizing: border-box;
  min-width: 0;
}

:root {
  interpolate-size: allow-keywords;
  scrollbar-gutter: stable;
  text-wrap: pretty;
  overflow-wrap: break-word;
  font-synthesis: none;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  -webkit-text-size-adjust: 100%;
  -webkit-tap-highlight-color: transparent;
}

body {
  margin: 0;
  min-height: 100svh;
}

h1, h2, h3, h4 { text-wrap: balance; }

img, svg, video {
  display: block;
  max-width: 100%;
  height: auto;
}

input, textarea, select { font-size: max(16px, 1rem); }

button, a, [role="button"] { touch-action: manipulation; }

button, [role="button"] {
  user-select: none;
  -webkit-user-select: none;
}

/* Tokens */

:root {
  color-scheme: light;

  /* House style of theaterroermond.nl */
  --brand: oklch(0.623 0.244 14.4);
  --brand-pressed: color-mix(in oklch, var(--brand), black 14%);
  --forest: oklch(0.286 0.036 189.5);
  --forest-soft: color-mix(in oklch, var(--forest) 8%, white);
  --mint: oklch(0.818 0.2 155.5);
  --star: oklch(0.821 0.15 84.1);
  --star-edge: color-mix(in oklch, var(--star), black 28%);

  --ink: oklch(0.262 0.009 248.2);
  --ink-soft: oklch(0.45 0 none);
  --page: oklch(0.958 0 none);
  --surface: oklch(1 0 none);
  --line: oklch(0.88 0 none);
  --line-strong: oklch(0.6 0 none);
  --on-dark: oklch(1 0 none);
  --on-dark-soft: color-mix(in oklch, var(--on-dark) 78%, transparent);

  --on-brand: var(--on-dark);

  --font-body: Poppins, system-ui, sans-serif;
  --font-display: var(--font-body);

  --ease-out: cubic-bezier(0.23, 1, 0.32, 1);

  --radius: 0.75rem;
  --radius-pill: 100vmax;
  --gutter: 1rem;
  --measure: 40rem;
  --tap-size: 2.75rem;

  /* One fluid scale for type and space: six plain numbers, the browser derives the steps. */
  --narrow: 20;
  --wide: 60;
  --size-narrow: 1;
  --size-wide: 1.125;
  --ratio-narrow: 1.2;
  --ratio-wide: 1.25;

  --fluid: clamp(0rem, (100vw - var(--narrow) * 1rem) / (var(--wide) - var(--narrow)), 1rem);
  --at-narrow: calc(var(--size-narrow) * (1rem - var(--fluid)));
  --at-wide: calc(var(--size-wide) * var(--fluid));

  --step--1: calc(var(--step-0) / var(--ratio-narrow));
  --step-0: calc(var(--at-narrow) + var(--at-wide));
  --step-1: calc(var(--at-narrow) * var(--ratio-narrow) + var(--at-wide) * var(--ratio-wide));
  --step-2: calc(var(--at-narrow) * pow(var(--ratio-narrow), 2) + var(--at-wide) * pow(var(--ratio-wide), 2));
  --step-4: calc(var(--at-narrow) * pow(var(--ratio-narrow), 4) + var(--at-wide) * pow(var(--ratio-wide), 4));

  --space-xs: calc(0.5 * var(--step-0));
  --space-s: var(--step-0);
  --space-m: calc(1.5 * var(--step-0));
  --space-l: calc(2 * var(--step-0));
  --space-s-l: calc(var(--at-narrow) + 2 * var(--at-wide));
  --space-l-xl: calc(2 * var(--at-narrow) + 4 * var(--at-wide));
}

/* Type */

body {
  font-family: var(--font-body);
  font-size: var(--step-0);
  line-height: 1.55;
  color: var(--ink);
  background: var(--page);
}

h1, h2, p { margin: 0; }

h1, h2 { font-family: var(--font-display); }

a { color: inherit; }

button, input, textarea { font: inherit; color: inherit; }

/* Interaction defaults */

:focus-visible {
  outline: max(2px, 0.08em) solid currentColor;
  outline-offset: 0.25em;
}

/* Utilities */

/* Components set their own display, which would otherwise undo the hidden attribute. */
[hidden] { display: none !important; }

.visually-hidden {
  position: absolute;
  inline-size: 1px;
  block-size: 1px;
  margin: -1px;
  overflow: clip;
  clip-path: inset(50%);
  white-space: nowrap;
}

.sprite {
  position: absolute;
  inline-size: 0;
  block-size: 0;
}

/* Blocks that appear as the visitor answers. The fade runs for everyone; the slide is opt-in. */

.reveal {
  transition:
    opacity 0.25s var(--ease-out),
    translate 0.25s var(--ease-out),
    display 0.25s allow-discrete;
}

.reveal[hidden] {
  display: none;
  opacity: 0;
}

@starting-style {
  .reveal:not([hidden]) { opacity: 0; }
}

@media (prefers-reduced-motion: no-preference) {
  .reveal[hidden] { translate: 0 0.5rem; }

  @starting-style {
    .reveal:not([hidden]) { translate: 0 0.5rem; }
  }
}