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

:root {
  font-size: 16px;
  --page-padding: 2rem;
  --color-text: #000;
  --color-bg: #fff;
  --color-link: rgba(0, 0, 0, 0.8);
  --color-link-hover: #000;
  --color-list-item: #000;
  --color-title: #000;
  --color-number: #000;
  --color-bg-effect: #fff;
  --blendmode-effect: difference;
  --bg-blur: 0px;
  --font-size-list-item: 18px;
}

html.no-js .hover-effect {
  /* JS off: keep text legible, no animation */
}

body {
  margin: 0;
  color: var(--color-text);
  /* Transparent so the WaveLine drawn behind the iframe (on the parent
     About-section background) can show through underneath the list rows. */
  background-color: transparent;
  font-family: "JetBrains Mono", monospace;
  font-weight: 300;
  font-optical-sizing: auto;
  text-transform: uppercase;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  /* No min-height: the embedded body must collapse to the list's natural
     height so the parent iframe (measured via scrollHeight) doesn't add a
     viewport-tall whitespace gap below the Selected Clients list. */
}

/* CRT scanline overlay disabled — Velmoy uses a clean white surface. */

/* Variant: terminal dark */
.demo-2 {
  --color-text: #fff;
  --color-bg: #252a33;
  --color-link: #717781;
  --color-link-hover: #fff;
  --color-list-item: #c7c0b3;
  --color-title: #5b6b85;
  --color-number: #fff;
}

/* Variant: forest dark + color play */
.demo-3 {
  --color-text: #fff;
  --color-bg: #1d2619;
  --color-link: #8adcc0;
  --color-link-hover: #fff;
  --color-list-item: #c5c5c5;
  --color-title: #41483e;
  --color-number: #fff;
}

/* Variant: photo bg + frosted glass */
.demo-4 {
  background-image: url(../img/noise.png), url(../img/bg.jpg);
  background-size: 100px, cover;
  background-position: 50% 50%;
  --color-text: #fff;
  --color-bg: #000;
  --color-link: #515151;
  --color-link-hover: #fff;
  --color-list-item: #ffffffd9;
  --color-title: #2d2d2d;
  --color-number: #615f60;
  --color-bg-effect: rgb(229 222 204 / 10%);
  --blendmode-effect: none;
  --bg-blur: 5px;
  --font-size-list-item: clamp(1rem, 4vw, 2rem);
}

.demo-4::after {
  display: none;
}

main {
  display: flex;
  flex-direction: column;
  justify-content: center;
}

a {
  text-decoration: none;
  color: var(--color-link);
  outline: none;
  cursor: pointer;
}

a:hover {
  color: var(--color-link-hover);
}

a:focus-visible {
  outline: 2px solid red;
}

/* Header (#Hover Animations / Article / All Demos / GitHub) hidden
   inside the embedded version — the parent page has its own nav and
   the iframe's whitespace was creating a visible gap above the list. */
.frame {
  display: none;
}

.frame__title {
  grid-area: title;
  font-size: inherit;
  font-weight: inherit;
  margin: 0;
}

.frame__back {
  grid-area: back;
}
.frame__archive {
  grid-area: archive;
}
.frame__github {
  grid-area: github;
}

.frame__demos {
  grid-area: demos;
  display: flex;
  gap: 1rem;
}

.content {
  display: flex;
  flex-direction: column;
  padding: 2.5rem var(--page-padding);
  justify-content: center;
}

.content__title {
  font-size: clamp(1.75rem, 4.5vw, 3rem);
  font-weight: 600;
  text-align: center;
  letter-spacing: -0.01em;
  line-height: 1.08;
  margin: 0 0 2rem;
  color: var(--color-title);
}

.spacer {
  margin-top: 15vh;
}

/* Statement-Block — centered headline + long-form paragraph, replaces the
   grid lists for the "Mit wem wir (nicht) zusammenarbeiten" sections. */
.statement-block {
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  padding: 1.5rem 0 2.5rem;
}

.statement-block__title {
  font-size: clamp(1.25rem, 2.4vw, 2.25rem);
  font-weight: 700;
  letter-spacing: -0.01em;
  line-height: 1.1;
  margin: 0;
  color: var(--color-list-item);
  max-width: 24ch;
  white-space: normal;
}

.statement-block__title.hover-effect,
.statement-block__title .hover-effect {
  white-space: normal;
}

.statement-block__body {
  margin-top: 2rem;
  font-size: clamp(1rem, 1.4vw, 1.25rem);
  line-height: 1.55;
  text-transform: none;
  letter-spacing: 0;
  font-weight: 300;
  color: var(--color-list-item);
  max-width: 52ch;
  display: flex;
  flex-direction: column;
  gap: 0.45rem;
}

.statement-block__body .hover-effect {
  white-space: normal;
}

.statement-block__cta {
  margin-top: 2.5rem;
  display: inline-flex;
  align-items: center;
  gap: 0.85rem;
  padding: 0.85rem 1.6rem;
  border: 1px solid currentColor;
  border-radius: 999px;
  font-family: "JetBrains Mono", ui-monospace, monospace;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: var(--color-list-item);
  background: transparent;
  transition: background 0.25s ease, color 0.25s ease;
}

.statement-block__cta:hover {
  background: var(--color-list-item);
  color: var(--color-bg);
}

.statement-block__cta-arrow {
  font-size: 14px;
  letter-spacing: 0;
}

.list {
  margin: 0;
  padding: 0;
  width: 100%;
  list-style: none;
  display: flex;
  flex-direction: column;
  counter-reset: item 0;
}

.list__item {
  font-size: var(--font-size-list-item);
  cursor: pointer;
  width: 100%;
  display: grid;
  color: var(--color-list-item);
  grid-column-gap: 2rem;
  padding: 0.5rem 0;
  grid-template-columns: 100%;
  align-items: start;
  justify-items: start;
}

.demo-4 .list__item {
  padding: 0.85rem 0;
}

.list__item::before {
  color: var(--color-number);
  content: counter(item, decimal-leading-zero);
  counter-increment: item;
  font-weight: 500;
  padding: 3px 3px 0;
  line-height: 0.8;
}

.demo-4 .list__item::before {
  font-size: 0.8rem;
}

.list--alt .list__item::before {
  content: "EVT#" counter(item, decimal-leading-zero) "0";
}

.list__item-col {
  flex: none;
  padding: 3px 3px 0;
  line-height: 0.8;
}

/* SplitType output: .word and .char */
.hover-effect {
  font-kerning: none;
  position: relative;
  white-space: nowrap;
}

.hover-effect .word {
  white-space: nowrap;
}

.hover-effect .char {
  position: relative;
}

/* V1 — cursor-square: per-char filled block that sweeps with the scramble */
.hover-effect--cursor-square .char {
  --opa: 0;
}

.hover-effect--cursor-square .char::after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 1ch;
  height: 100%;
  background: currentColor;
  opacity: var(--opa);
}

/* V2 — bg: full-cell scaleX wipe with difference blend */
.hover-effect--bg,
.hover-effect--bg-south {
  --anim: 0;
}

.hover-effect--bg::after,
.hover-effect--bg-south::after {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: calc(100% + 3px);
  background-color: var(--color-bg-effect);
  mix-blend-mode: var(--blendmode-effect);
  -webkit-backdrop-filter: blur(var(--bg-blur));
  backdrop-filter: blur(var(--bg-blur));
  transform-origin: 0% 50%;
  transform: scaleX(var(--anim));
}

/* V4 — bg-south: padded rounded box, scales from bottom, frosted glass */
.hover-effect--bg-south::after {
  z-index: -1;
  left: -8px;
  right: -8px;
  top: -8px;
  bottom: -8px;
  height: auto;
  width: auto;
  border-radius: 2px;
  transform-origin: 50% 100%;
  transform: scaleY(var(--anim));
}

@media (prefers-reduced-motion: reduce) {
  .hover-effect--bg::after,
  .hover-effect--bg-south::after,
  .hover-effect--cursor-square .char::after {
    transition: none !important;
  }
}

@media screen and (min-width: 40em) {
  .list__item {
    grid-template-columns: auto 1fr 1fr 1fr auto;
  }
}

@media screen and (min-width: 53em) {
  .frame {
    grid-template-columns: auto auto auto auto 1fr auto;
    grid-template-areas: "title back archive github . demos";
  }
  .frame__demos {
    justify-self: end;
  }
}

@media screen and (min-width: 73em) {
  .list__item {
    grid-template-columns: 100px 30% 1fr 1fr 1fr;
  }
  .demo-4 .list__item {
    grid-template-columns: 100px 1fr 1fr auto;
  }
  .list__item-col:last-child {
    justify-self: end;
  }
}

/* MOBILE (<40em): the 10 clients stacked into one tall column read badly.
   Lay them out as a 2-up grid — 5 rows of 2 clients — each a compact,
   name-first card (number + name prominent, industry/year/region muted). */
@media screen and (max-width: 39.99em) {
  .content {
    padding: 2.5rem 1.25rem;
  }
  .list {
    display: grid;
    grid-template-columns: 1fr 1fr;
    column-gap: 1.25rem;
    row-gap: 1.5rem;
  }
  .list__item {
    font-size: 13px;
    padding: 0;
    grid-row-gap: 2px;
  }
  .list__item::before {
    font-size: 10px;
    opacity: 0.5;
  }
  .list__item-col:first-of-type {
    font-size: 15px;
    font-weight: 500;
  }
  .list__item-col:not(:first-of-type) {
    font-size: 11px;
    opacity: 0.55;
  }
}