/* MARK: 1. Font & Bronvermelding
   Font: Seraphs Variable Font (SeraphsVF.woff2)
   Inspiratie & technieken: Deepdives 'Het web is voor iedereen' (HvA)
*/
@font-face {
  font-family: 'Seraphs';
  src: url('font/SeraphsVF.woff2') format('woff2');
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}

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

/* MARK: 2. Custom Properties & Schaalbare Typografie */
html {
  font-size: 62.5%;
  --font-seraphs: 'Seraphs', sans-serif;

  /* Typografie schaalt met clamp, vi (viewport-inline) en cqi (container-query) */
  --h1: clamp(6rem, 3rem + 14vi, 24rem);
  --h2: clamp(3.6rem, 2rem + 6cqi, 6.5rem);
  --h3: clamp(2.8rem, 1.4rem + 4cqi, 4.8rem);
  --p: clamp(2.4rem, 1.2rem + 3cqi, 3.8rem);

  --ink: currentColor;
  --ink-2: #FF4FD8;
  --ink-3: #4FF8FF;
}

body {
  font-size: var(--p);
  font-family: var(--font-seraphs);
  color: #222;
  background-color: #FAFAFA;
}

p {
  font-size: var(--p);
  line-height: 1.4;
  font-variation-settings: 'wght' 380;
}

article p span:not([class]) {
  font-variation-settings: 'wght' 900;
  color: var(--ink-2);
  letter-spacing: 0.05em;
}

header {
  background: linear-gradient(to right, #00A651, #72C6EF, #F7941E);
  min-height: 50vh;
  width: 100%;
  display: grid;
  place-content: center;
  color: #FFF;
  text-align: center;
  padding: 4rem 2rem;
}

header section {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

header p {
  margin-top: 1.5rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  text-shadow: 0 0.1rem 0.4rem rgba(0, 0, 0, 0.4);
}

/* MARK: 3. Main & Container Context */
main {
  max-width: 75rem;
  margin: 4rem auto;
  padding: 0 2rem;
  container-type: inline-size;
}

main > section:first-of-type > article {
  margin-bottom: 5rem;
}

main > section:first-of-type > article:first-of-type {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  gap: 1.2rem;
}

main > section:first-of-type > article:first-of-type > h2,
main > section:first-of-type > article:first-of-type > h3 {
  width: 100%;
}

main > section:first-of-type > article:nth-of-type(2) {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: 1rem;
}

main > section:first-of-type > article:nth-of-type(2) > h2,
main > section:first-of-type > article:nth-of-type(2) > h3 {
  width: 100%;
}

main > section:first-of-type > article:nth-of-type(2) > p:nth-of-type(2) {
  border-bottom: 0.2rem solid currentColor;
  padding-bottom: 0.2rem;
}

/* MARK: 4. Typografie & Kinetic Effecten */
.fx-typing {
  font-family: var(--font-seraphs);
  font-size: var(--h1);
  font-weight: 900;
  font-stretch: 75%;
  font-variation-settings: 'wght' 200, 'SRFS' 0;
  text-transform: uppercase;
  line-height: 0.9;
  letter-spacing: 0.02em;
  display: inline-block;
  white-space: nowrap;
  overflow: hidden;
  border-right: 0.08em solid currentColor;
  text-shadow: 0 0.2rem 1rem rgba(0, 0, 0, 0.35);
  animation:
    ymca-smooth-beat 3.8s ease-in-out infinite,
    cursor-blink 0.5s step-end infinite alternate;
}

.fx-loud {
  font-family: var(--font-seraphs);
  font-size: var(--h2);
  font-weight: 800;
  font-variation-settings: 'wght' 780;
  letter-spacing: 0.05em;
  color: var(--ink);
  display: inline-block;
  transform-origin: left center;
  animation: fx-loud 3s infinite;
}

.fx-heartbeat {
  font-family: var(--font-seraphs);
  font-size: var(--h3);
  font-weight: 700;
  font-variation-settings: 'wght' 650;
  letter-spacing: 0.1em;
  color: var(--ink-2);
  display: block;
  text-align: center;
  margin: 3.5rem 0;
  animation: fx-heartbeat 1.4s ease-in-out infinite;
}

/* Toegankelijke knop met button-reset voor toetsenbord (WCAG) */
.fx-fall {
  font-family: var(--font-seraphs);
  font-weight: 900;
  font-size: inherit;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  line-height: 0.85;
  cursor: pointer;
  background: transparent;
  border: none;
  padding: 0;
  color: inherit;
  border-bottom: 0.2rem dashed var(--ink-2);
  display: inline-block;
  user-select: none;
  transition: color 0.2s ease, border-color 0.2s ease;
}

.fx-fall:hover,
.fx-fall:focus-visible {
  color: var(--ink-2);
  border-color: transparent;
  outline: none;
  animation: fx-fall 0.65s cubic-bezier(0.55, 0.055, 0.675, 0.19) forwards;
}

.fx-new {
  display: inline-block;
  font-family: var(--font-seraphs);
  font-weight: 900;
  font-variation-settings: 'wght' 900;
  text-transform: uppercase;
  color: #FFE500;
  -webkit-text-stroke: 0.04em #400404;
  text-shadow: 
    0.03em 0.03em 0 #FF6600,
    0.06em 0.06em 0 #FF6600,
    0.08em 0.08em 0 #400404,
    0.10em 0.10em 0 #400404;
  transform: rotate(-8deg);
  letter-spacing: 0.02em;
  margin: 0 0.2em;
  transition: transform 0.2s ease;
}

.fx-new:hover {
  transform: rotate(-3deg) scale(1.15);
}

.fx-dough {
  display: inline-block;
  font-weight: 900;
  font-variation-settings: 'wght' 900;
  text-transform: uppercase;
  background-image: 
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 80 40' width='80' height='40'%3E%3Cpath d='M0 20 Q 20 8, 40 20 T 80 20 L 80 40 L 0 40 Z' fill='%23FFB800'/%3E%3C/svg%3E"),
    linear-gradient(to top, #FFB800 0%, #FFD700 60%, transparent 100%);
  background-size: 3rem 1.5rem, 100% 100%;
  background-repeat: repeat-x, no-repeat;
  background-position: 0 100%, 0 0;
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  filter: drop-shadow(0 0.05em 0.08em rgba(247, 148, 30, 0.4));
  animation: dough-liquid 2s linear infinite;
}

.fx-time {
  display: inline-block;
  font-weight: 800;
  color: var(--ink-2);
  transform-origin: center center;
  animation: time-clock 6s infinite linear;
}

.fx-go {
  display: inline-block;
  font-weight: 800;
  color: #00A651;
  margin-left: 0.1em;
  animation: go-slide 2.2s cubic-bezier(0.25, 1, 0.5, 1) infinite;
}

.fx-unhappy {
  display: inline-block;
  font-style: italic;
  transform-origin: center bottom;
  animation: unhappy-sigh 3.5s ease-in-out infinite;
}

.fx-short {
  display: inline-block;
  letter-spacing: -0.07em;
  transform: scaleX(0.72);
  transform-origin: center;
  font-variation-settings: 'wght' 900;
  color: var(--ink-2);
}

footer {
  text-align: center;
  padding: 4rem 2rem;
  font-size: 1.4rem;
  color: #666;
}

footer a {
  color: inherit;
  text-decoration: underline;
  transition: color 0.2s ease;
}

footer a:hover {
  color: #222;
}

footer a:focus-visible {
  outline: 0.2rem solid #00A651;
  outline-offset: 0.3rem;
}

/* MARK: 5. Scroll-Driven Animatie */
@supports (animation-timeline: view()) {
  main > section:first-of-type > article {
    view-timeline-name: --lyric-verse;
    view-timeline-axis: block;
    animation-timeline: --lyric-verse;
    animation-name: verse-reveal;
    animation-range: entry 10% cover 35%;
    animation-fill-mode: both;
  }

  @keyframes verse-reveal {
    from {
      opacity: 0.15;
      transform: translateY(3.5rem) scale(0.96);
    }
    to {
      opacity: 1;
      transform: translateY(0) scale(1);
    }
  }
}

/* MARK: 6. Keyframe Animaties */
@keyframes ymca-smooth-beat {
  0%, 5% { max-width: 0ch; }
  14%, 20% { max-width: 2.2ch; }
  32%, 38% { max-width: 4.8ch; }
  50%, 56% { max-width: 7.2ch; }
  68%, 88% { max-width: 10ch; }
  98%, 100% { max-width: 0ch; }
}

@keyframes cursor-blink {
  50% { border-color: transparent; }
}

@keyframes fx-loud {
  0%, 12% {
    transform: scale(1);
    color: var(--ink);
    text-shadow: none;
    animation-timing-function: cubic-bezier(.2, 1.5, .4, 1);
  }
  20% {
    transform: scale(1.35);
    color: var(--ink-2);
    text-shadow: 0 0 1.8rem color-mix(in srgb, var(--ink-2) 55%, transparent);
  }
  23% { transform: translate(-0.4rem, 0.2rem) rotate(-3deg) scale(1.35); }
  26% { transform: translate(0.4rem, -0.2rem) rotate(3deg) scale(1.35); }
  29% { transform: translate(-0.3rem, -0.1rem) rotate(-2deg) scale(1.35); }
  32% { transform: translate(0.3rem, 0.1rem) rotate(2deg) scale(1.35); }
  35% { transform: translate(-0.2rem, 0.2rem) rotate(-1deg) scale(1.35); }
  38% { transform: translate(0.2rem, -0.1rem) rotate(1deg) scale(1.35); }
  44% {
    transform: scale(1.35);
    color: var(--ink-2);
    text-shadow: 0 0 1.8rem color-mix(in srgb, var(--ink-2) 55%, transparent);
    animation-timing-function: cubic-bezier(.3, 1.6, .5, 1);
  }
  54%, 100% {
    transform: scale(1);
    color: var(--ink);
    text-shadow: none;
  }
}

@keyframes fx-heartbeat {
  0%, 100% { transform: scale(1); text-shadow: 0 0 0 transparent; }
  14% {
    transform: scale(1.18);
    text-shadow: 0 0 1.8rem color-mix(in srgb, var(--ink-2) 65%, transparent);
  }
  28% { transform: scale(1); }
  42% {
    transform: scale(1.25);
    text-shadow: 0 0 2.6rem color-mix(in srgb, var(--ink-2) 80%, transparent);
  }
  70% { transform: scale(1); text-shadow: 0 0 0 transparent; }
}

@keyframes fx-fall {
  0% { transform: translateY(0) rotate(0deg); }
  70% { transform: translateY(5rem) rotate(-4deg); }
  85% { transform: translateY(4.6rem) rotate(-2deg); }
  100% { transform: translateY(5.2rem) rotate(-5deg); opacity: 0.75; }
}

@keyframes dough-liquid {
  0% { background-position: 0 100%, 0 0; }
  100% { background-position: 6rem 100%, 0 0; }
}

@keyframes time-clock {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}

@keyframes go-slide {
  0%, 15% { transform: translateX(0); }
  50% { transform: translateX(3.5rem); }
  85%, 100% { transform: translateX(0); }
}

@keyframes unhappy-sigh {
  0%, 100% {
    font-variation-settings: 'wght' 700;
    transform: translateY(0) scale(1);
    color: #444;
  }
  50% {
    font-variation-settings: 'wght' 120;
    transform: translateY(0.25em) scale(0.9);
    color: #888;
  }
}

/* MARK: 7. Reduced Motion (Toegankelijkheid) */
@media (prefers-reduced-motion: reduce) {
  main > section:first-of-type > article {
    animation: none;
    opacity: 1;
    transform: none;
  }

  .fx-typing,
  .fx-loud,
  .fx-heartbeat,
  .fx-time,
  .fx-go,
  .fx-unhappy,
  .fx-dough {
    animation: none;
    max-width: 100%;
    border-right: none;
    transform: none;
  }

  .fx-fall:hover,
  .fx-fall:focus-visible {
    animation: none;
    transform: none;
    color: var(--ink-2);
  }
}