/* ==========================================================================
   Het Sportkamp: beweging
   --------------------------------------------------------------------------
   Het idee: alles gedraagt zich als een sticker die op het papier wordt
   geplakt. Koppen springen woord voor woord omhoog, handschrift-subkoppen
   schrijven zichzelf van links naar rechts, de speelse lijnen tekenen
   zichzelf, foto's in boogvorm vallen schuin op hun plek en stickers
   "ploppen" met een klein overschot.

   Opbouw
   1. Tokens en hulpklassen
   2. Openingsmoment per hero (alleen CSS, speelt bij het laden)
   3. Scroll-animaties (motion.js zet data-reveal + .is-in)
   4. Hover en klik
   5. Toestanden (filter, vragen, menu, kampdag, paklijst, formulieren)
   6. Doorlopend (rustig, op een paar plekken)

   Alles staat binnen prefers-reduced-motion: no-preference. Wie minder
   beweging wil, krijgt de site zoals hij was.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. Tokens en hulpklassen
   -------------------------------------------------------------------------- */
:root {
  --bounce: cubic-bezier(0.34, 1.56, 0.64, 1);      /* plop met overschot */
  --bounce-soft: cubic-bezier(0.25, 1.3, 0.5, 1);   /* landen met een veertje */
  --write: cubic-bezier(0.65, 0.05, 0.36, 1);       /* handschrift */
  --word-step: 65ms;                                /* tijd tussen woorden */
}

/* Losse woorden in een kop (hsk_words() of motion.js) */
.w { display: inline-block; }

/* Cijfers die optellen schuiven niet heen en weer */
[data-counting] { font-variant-numeric: tabular-nums; }

/* Desktopmenu: groene streep groeit onder de link */
@media (min-width: 1024px) {
  .main-nav__list a,
  .main-nav__list .current-menu-item > a,
  .main-nav__list a[aria-current],
  .main-nav__list a:hover {
    text-decoration: none;
  }

  .main-nav__list a {
    padding-bottom: 0.2rem;
    background: linear-gradient(var(--apple), var(--apple)) 0 100% / 0 3px no-repeat;
    transition: background-size 320ms var(--ease), color var(--dur) var(--ease);
  }

  .main-nav__list a:hover,
  .main-nav__list a:focus-visible,
  .main-nav__list a[aria-current],
  .main-nav__list .current-menu-item > a {
    background-size: 100% 3px;
  }
}

@media (prefers-reduced-motion: no-preference) {

  /* Niets mag de pagina zijwaarts laten scrollen tijdens een animatie */
  body { overflow-x: clip; }

  /* ------------------------------------------------------------------------
     2. Openingsmoment: homepage-hero
     ------------------------------------------------------------------------ */
  .hero__title .w {
    animation: hsk-word 760ms var(--bounce-soft) backwards;
    animation-delay: calc(120ms + var(--wi, 0) * var(--word-step));
  }

  .hero__subkop { animation: hsk-wipe 900ms var(--write) 520ms backwards; }
  .hero__lead { animation: hsk-rise 800ms var(--ease) 700ms backwards; }

  .hero .btn-row > * { animation: hsk-pop-soft 650ms var(--bounce) backwards; }
  .hero .btn-row > :nth-child(1) { animation-delay: 860ms; }
  .hero .btn-row > :nth-child(2) { animation-delay: 960ms; }

  .perk { animation: hsk-rise 600ms var(--ease) backwards; }
  .perk .sticker { animation: hsk-slap 700ms var(--bounce) backwards; }
  .perk:nth-child(1), .perk:nth-child(1) .sticker { animation-delay: 1080ms; }
  .perk:nth-child(2), .perk:nth-child(2) .sticker { animation-delay: 1180ms; }
  .perk:nth-child(3), .perk:nth-child(3) .sticker { animation-delay: 1280ms; }

  /* Foto schuift binnen en zoomt rustig uit; daarna doet motion.js parallax */
  .hero__media { animation: hsk-media-in 1300ms var(--ease) backwards; }

  .hero__photo > img,
  .hero__photo > video {
    scale: 1.08;
    animation: hsk-hero-photo 1600ms var(--ease) backwards;
  }

  /* De bestaande swoosh-tekening, nu na de kop */
  .hero__swoosh path { animation-delay: 650ms; }
  .hero__swoosh .swoosh__b { animation-delay: 790ms; }
  .hero__swoosh .swoosh__c { animation-delay: 930ms; }

  /* Leeftijdssticker draait erin en blijft daarna zachtjes deinen */
  .age-sticker {
    animation:
      hsk-spin-in 900ms var(--bounce) 1150ms backwards,
      hsk-bob 3.2s ease-in-out 2200ms infinite alternate;
  }

  /* ------------------------------------------------------------------------
     2b. Openingsmoment: subpagina's (kampen, contact, inschrijven, kamp)
     ------------------------------------------------------------------------ */
  .page-hero .breadcrumb,
  .camp-hero .breadcrumb { animation: hsk-fade 700ms var(--ease) backwards; }

  .page-hero__title .w {
    animation: hsk-word 760ms var(--bounce-soft) backwards;
    animation-delay: calc(160ms + var(--wi, 0) * var(--word-step));
  }

  .page-hero__subkop { animation: hsk-wipe 900ms var(--write) 520ms backwards; }
  .page-hero__lead { animation: hsk-rise 800ms var(--ease) 680ms backwards; }

  .page-hero__actions > *,
  .camp-hero__actions > *,
  .page-hero .fact-chips li {
    animation: hsk-pop-soft 600ms var(--bounce) backwards;
  }

  .page-hero__actions > :nth-child(1), .camp-hero__actions > :nth-child(1), .page-hero .fact-chips li:nth-child(1) { animation-delay: 820ms; }
  .page-hero__actions > :nth-child(2), .camp-hero__actions > :nth-child(2), .page-hero .fact-chips li:nth-child(2) { animation-delay: 900ms; }
  .page-hero .fact-chips li:nth-child(3) { animation-delay: 980ms; }
  .page-hero .fact-chips li:nth-child(4) { animation-delay: 1060ms; }
  .page-hero .fact-chips li:nth-child(5) { animation-delay: 1140ms; }
  .page-hero .fact-chips li:nth-child(6) { animation-delay: 1220ms; }

  /* Boogfoto valt schuin op zijn plek, de titelsticker wordt erop geplakt */
  .page-hero__figure { animation: hsk-settle 1300ms var(--bounce-soft) 100ms backwards; }
  .page-hero__figure .photo > img { animation: hsk-zoom-out 1600ms var(--ease) 100ms backwards; }
  .page-hero__label { animation: hsk-slap 700ms var(--bounce) 950ms backwards; }

  .page-hero__swoosh path {
    stroke-dasharray: 260;
    animation: hsk-draw 900ms var(--ease) 600ms backwards;
  }

  .page-hero__swoosh .swoosh__b { animation-delay: 740ms; }
  .page-hero__swoosh .swoosh__c { animation-delay: 880ms; }

  /* Kamppagina: badges ploppen, gegevenskaart schuift binnen */
  .camp-hero__badges > * { animation: hsk-slap 600ms var(--bounce) backwards; }
  .camp-hero__badges > :nth-child(1) { animation-delay: 100ms; }
  .camp-hero__badges > :nth-child(2) { animation-delay: 180ms; }
  .camp-hero__badges > :nth-child(3) { animation-delay: 260ms; }

  .facts-card { animation: hsk-card-in 1000ms var(--bounce-soft) 300ms backwards; }
  .facts-card__visual > .material-symbols-rounded,
  .facts-card__icon { animation: hsk-slap 700ms var(--bounce) 800ms backwards; }

  .facts-card__list > div { animation: hsk-rise 600ms var(--ease) backwards; }
  .facts-card__list > :nth-child(1) { animation-delay: 650ms; }
  .facts-card__list > :nth-child(2) { animation-delay: 730ms; }
  .facts-card__list > :nth-child(3) { animation-delay: 810ms; }
  .facts-card__list > :nth-child(4) { animation-delay: 890ms; }
  .facts-card__price { animation: hsk-rise 600ms var(--ease) 970ms backwards; }
  .facts-card__cta { animation: hsk-pop-soft 600ms var(--bounce) 1050ms backwards; }

  /* 404: de bal stuitert nog na */
  .lost-ball__ball {
    animation: hsk-ball 1.1s cubic-bezier(0.5, 0, 0.5, 1) infinite alternate;
  }

  .lost-ball__ball .material-symbols-rounded {
    animation: hsk-spin 2.2s linear infinite;
  }

  .lost-ball__shadow {
    animation: hsk-ball-shadow 1.1s cubic-bezier(0.5, 0, 0.5, 1) infinite alternate;
  }

  /* ------------------------------------------------------------------------
     3. Scroll-animaties
     motion.js zet data-reveal="type" en --d (vertraging). Zodra het element
     in beeld komt krijgt het .is-in; na afloop haalt motion.js alles weer
     weg, zodat de eigen hover-effecten van het element terugkomen.
     Individuele transform-eigenschappen (translate, rotate, scale) werken
     bovenop de schuine stand die veel elementen al hebben.
     ------------------------------------------------------------------------ */

  /* Omhoog komen */
  .hsk-reveal [data-reveal="rise"] {
    transition:
      opacity 700ms var(--ease) var(--d, 0ms),
      translate 900ms var(--ease) var(--d, 0ms);
  }

  .hsk-reveal [data-reveal="rise"]:not(.is-in) {
    opacity: 0;
    translate: 0 2.25rem;
  }

  /* Rustig verschijnen */
  .hsk-reveal [data-reveal="fade"] { transition: opacity 900ms var(--ease) var(--d, 0ms); }
  .hsk-reveal [data-reveal="fade"]:not(.is-in) { opacity: 0; }

  /* Van opzij */
  .hsk-reveal [data-reveal="slide-l"],
  .hsk-reveal [data-reveal="slide-r"] {
    transition:
      opacity 700ms var(--ease) var(--d, 0ms),
      translate 900ms var(--bounce-soft) var(--d, 0ms);
  }

  .hsk-reveal [data-reveal="slide-l"]:not(.is-in) { opacity: 0; translate: -2rem 0; }
  .hsk-reveal [data-reveal="slide-r"]:not(.is-in) { opacity: 0; translate: 2rem 0; }

  /* Sticker die erop wordt geplakt */
  .hsk-reveal [data-reveal="pop"] {
    transition:
      opacity 250ms linear var(--d, 0ms),
      scale 700ms var(--bounce) var(--d, 0ms),
      rotate 700ms var(--bounce) var(--d, 0ms);
  }

  .hsk-reveal [data-reveal="pop"]:not(.is-in) {
    opacity: 0;
    scale: 0.35;
    rotate: -22deg;
  }

  /* Stempel (de beste korting) */
  .hsk-reveal [data-reveal="stamp"] {
    transition:
      opacity 200ms linear var(--d, 0ms),
      scale 650ms var(--bounce) var(--d, 0ms),
      rotate 650ms var(--bounce) var(--d, 0ms);
  }

  .hsk-reveal [data-reveal="stamp"]:not(.is-in) {
    opacity: 0;
    scale: 1.45;
    rotate: 4deg;
  }

  /* Boogfoto valt schuin op zijn plek */
  .hsk-reveal [data-reveal="settle"] {
    transition:
      opacity 600ms var(--ease) var(--d, 0ms),
      translate 1200ms var(--bounce-soft) var(--d, 0ms),
      rotate 1200ms var(--bounce-soft) var(--d, 0ms);
  }

  .hsk-reveal [data-reveal="settle"]:not(.is-in) {
    opacity: 0;
    translate: 0 3.5rem;
    rotate: 8deg;
  }

  .hsk-reveal [data-reveal="settle"] .photo > img {
    transition: scale 1500ms var(--ease) var(--d, 0ms), opacity 220ms var(--ease);
  }

  .hsk-reveal [data-reveal="settle"]:not(.is-in) .photo > img { scale: 1.22; }

  /* Kop: woord voor woord */
  .hsk-reveal [data-reveal="words"] .w {
    transition:
      opacity 500ms var(--ease) calc(var(--d, 0ms) + var(--wi, 0) * var(--word-step)),
      translate 760ms var(--bounce-soft) calc(var(--d, 0ms) + var(--wi, 0) * var(--word-step)),
      rotate 760ms var(--bounce-soft) calc(var(--d, 0ms) + var(--wi, 0) * var(--word-step));
  }

  .hsk-reveal [data-reveal="words"]:not(.is-in) .w {
    opacity: 0;
    translate: 0 0.6em;
    rotate: 7deg;
  }

  /* Handschrift: schrijft zich van links naar rechts */
  .hsk-reveal [data-reveal="wipe"] {
    clip-path: inset(-0.3em -0.3em -0.45em -0.3em);
    transition: clip-path 950ms var(--write) var(--d, 0ms);
  }

  .hsk-reveal [data-reveal="wipe"]:not(.is-in) {
    clip-path: inset(-0.3em 100% -0.45em -0.3em);
  }

  /* Speelse lijnen tekenen zichzelf */
  .hsk-reveal [data-reveal="draw"] path {
    stroke-dasharray: 260;
    transition: stroke-dashoffset 900ms var(--ease) var(--d, 0ms);
  }

  .hsk-reveal [data-reveal="draw"] .swoosh__b { transition-delay: calc(var(--d, 0ms) + 140ms); }
  .hsk-reveal [data-reveal="draw"] .swoosh__c { transition-delay: calc(var(--d, 0ms) + 280ms); }
  .hsk-reveal [data-reveal="draw"]:not(.is-in) path { stroke-dashoffset: 260; }

  /* Achtergrondfoto zoomt langzaam uit */
  .hsk-reveal [data-reveal="zoom"] { transition: scale 2200ms var(--ease) var(--d, 0ms); }
  .hsk-reveal [data-reveal="zoom"]:not(.is-in) { scale: 1.18; }

  /* Ruimte voor parallax op de CTA-foto (motion.js schuift hem mee) */
  .hsk-parallax .cta-band__bg {
    top: -12%;
    height: 124%;
  }

  /* ------------------------------------------------------------------------
     4. Hover en klik (alleen met een muis, niet op touchscreens)
     ------------------------------------------------------------------------ */
  @media (hover: hover) {
    /* Kampkaart: komt omhoog, sticker wiebelt */
    .camp-card {
      transition: translate 350ms var(--bounce), box-shadow 350ms var(--ease), border-color var(--dur) var(--ease);
    }

    .camp-card:not(.camp-card--summer-intro):hover {
      translate: 0 -6px;
      box-shadow: var(--shadow-float);
      border-color: rgba(36, 98, 67, 0.3);
    }

    .camp-card--featured:hover { border-color: var(--berry) !important; }

    .camp-card:hover .camp-card__top .sticker,
    .why-item:hover > .sticker,
    .included__grid li:hover .sticker,
    .step:hover .step__num,
    .contact-card:hover .sticker,
    .provide__tile:hover .sticker,
    .discount:hover .discount__icon {
      animation: hsk-wiggle 650ms var(--ease);
    }

    /* Swoosh in de introkaart tekent zich opnieuw */
    .camp-card--summer-intro:hover .camp-card__swoosh path {
      stroke-dasharray: 260;
      animation: hsk-draw 800ms var(--ease) backwards;
    }

    .camp-card--summer-intro:hover .camp-card__swoosh .swoosh__b { animation-delay: 120ms; }
    .camp-card--summer-intro:hover .camp-card__swoosh .swoosh__c { animation-delay: 240ms; }

    /* Kampkaart op de kampenpagina: speelveld groeit, icoon springt */
    .kamp-card {
      transition: translate 350ms var(--bounce), box-shadow 350ms var(--ease);
    }

    .kamp-card:hover {
      translate: 0 -5px;
      box-shadow: var(--shadow-float);
    }

    .kamp-card__visual::before { transition: scale 600ms var(--bounce); }
    .kamp-card:hover .kamp-card__visual::before { scale: 1.45; }
    .kamp-card:hover .kamp-card__visual > .material-symbols-rounded { animation: hsk-hop 650ms var(--bounce); }

    .kamp-card__visual--photo img { transition: scale 700ms var(--ease); }
    .kamp-card:hover .kamp-card__visual--photo img { scale: 1.06; }
    .kamp-card:hover .kamp-card__badge { animation: hsk-wiggle 650ms var(--ease); }

    .contact-place__photo img { transition: scale 700ms var(--ease); }
    .contact-place:hover .contact-place__photo img { scale: 1.05; }

    /* Waarom-punten en inbegrepen: kleine lift */
    .why-item,
    .included__grid li,
    .step {
      transition: translate 350ms var(--bounce);
    }

    .why-item:hover,
    .included__grid li:hover,
    .step:hover {
      translate: 0 -4px;
    }

    .provide__tile {
      transition: scale 350ms var(--bounce), background-color var(--dur) var(--ease);
    }

    .provide__tile:hover {
      scale: 1.04;
      background: rgba(255, 255, 255, 0.15);
    }

    /* Korting: rijen schuiven iets op */
    .discount__table div { transition: translate 300ms var(--bounce); }
    .discount__table div:hover { translate: 4px 0; }

    /* Foto's in de strook en bogen: optillen */
    .collage__track .collage__item figure {
      transition: translate 400ms var(--bounce);
    }

    .collage__track .collage__item:hover figure { translate: 0 -10px; }

    .collage__photo > img { transition: scale 700ms var(--ease); }
    .collage__item:hover .collage__photo > img { scale: 1.06; }

    .collage__item:hover .collage__label { animation: hsk-wiggle-soft 600ms var(--ease); }

    /* Reviews: kaart komt naar voren */
    .review-card { transition: scale 400ms var(--bounce); }
    .review-card:hover { scale: 1.035; }
    .review-card:hover .review-card__deco { animation: hsk-wiggle 650ms var(--ease); }

    /* Vragen */
    .accordion__item { transition: translate 300ms var(--bounce), box-shadow 300ms var(--ease); }
    .accordion__item:hover { translate: 4px 0; box-shadow: var(--shadow-float); }

    /* Kampdag-foto: draait mee met de muis */
    .day__figure { transition: rotate 500ms var(--bounce); }
    .day__figure:hover { rotate: -2deg; }

    .unique__figure { transition: rotate 500ms var(--bounce); }
    .unique__figure:hover { rotate: 3deg; }

    /* Knoppen: pijl schiet weg en komt terug */
    .btn:hover .material-symbols-rounded[aria-hidden] {
      animation: hsk-arrow 520ms var(--ease);
    }

    .round-btn:hover .material-symbols-rounded { animation: hsk-hop 450ms var(--bounce); }

    .camp-link--all:hover .camp-arch__all-icon { animation: hsk-arrow 650ms var(--ease); }

    /* Footer en socials */
    .site-footer__links a,
    .site-footer__contact a {
      display: inline-block;
      transition: translate 250ms var(--bounce);
    }

    .site-footer__links a:hover,
    .site-footer__contact a:hover { translate: 4px 0; }

    .socials a,
    .contact-socials a {
      transition: translate 300ms var(--bounce), rotate 300ms var(--bounce), background-color var(--dur) var(--ease), color var(--dur) var(--ease);
    }

    .socials a:hover,
    .contact-socials a:hover {
      translate: 0 -4px;
      rotate: -8deg;
    }

    .daycard__location:hover .material-symbols-rounded { animation: hsk-hop 600ms var(--bounce); }

    .packlist__item:hover .packlist__box { scale: 1.1; }
    .packlist__box { transition: scale 250ms var(--bounce), background-color var(--dur) var(--ease), border-color var(--dur) var(--ease); }
  }

  /* Knoppen voelen als een sticker die je indrukt */
  .chip:active,
  .round-btn:active { scale: 0.92; }

  .chip,
  .round-btn { transition: scale 150ms var(--ease), background-color var(--dur) var(--ease), color var(--dur) var(--ease), border-color var(--dur) var(--ease); }

  /* ------------------------------------------------------------------------
     5. Toestanden
     ------------------------------------------------------------------------ */

  /* Filter: gekozen chip plopt, kaarten springen opnieuw in beeld */
  .chip.is-active { animation: hsk-chip 380ms var(--bounce); }

  .is-filter-in {
    animation: hsk-filter-in 520ms var(--bounce-soft) backwards;
    animation-delay: calc(var(--fi, 0) * 55ms);
  }

  /* Vragen: antwoord schuift open */
  .accordion__panel:not([hidden]) { animation: hsk-panel 380ms var(--ease); }

  [data-tabs] [role="tabpanel"]:not([hidden]) { animation: hsk-panel 380ms var(--ease); }

  /* Mobiel menu: valt naar beneden, links één voor één */
  @media (max-width: 1023px) {
    .main-nav.is-open { animation: hsk-menu 320ms var(--ease); }

    .main-nav.is-open li,
    .main-nav.is-open .main-nav__cta {
      animation: hsk-rise-small 420ms var(--ease) backwards;
    }

    .main-nav.is-open li:nth-child(1) { animation-delay: 40ms; }
    .main-nav.is-open li:nth-child(2) { animation-delay: 80ms; }
    .main-nav.is-open li:nth-child(3) { animation-delay: 120ms; }
    .main-nav.is-open li:nth-child(4) { animation-delay: 160ms; }
    .main-nav.is-open li:nth-child(5) { animation-delay: 200ms; }
    .main-nav.is-open li:nth-child(6) { animation-delay: 240ms; }
    .main-nav.is-open li:nth-child(7) { animation-delay: 280ms; }
    .main-nav.is-open .main-nav__cta { animation-delay: 300ms; }

    .nav-toggle .material-symbols-rounded { transition: rotate 380ms var(--bounce); }
    .nav-toggle[aria-expanded="true"] .material-symbols-rounded { rotate: 180deg; }
  }

  /* Kampdag: tekst schuift mee als je naar een ander moment gaat */
  .daycard__title,
  .daycard__text {
    transition: opacity 220ms var(--ease), translate 320ms var(--ease);
  }

  .day__inner.is-swapping .daycard__title,
  .day__inner.is-swapping .daycard__text { translate: 0 0.6rem; }

  .day__photo img { transition: opacity 220ms var(--ease), scale 500ms var(--ease); }
  .day__inner.is-swapping .day__photo img { scale: 1.08; }

  .day__label { transition: opacity 220ms var(--ease), scale 450ms var(--bounce); }
  .day__inner.is-swapping .day__label { scale: 0.7; }

  .daytrack__stop[aria-pressed="true"] .daytrack__dot .material-symbols-rounded {
    animation: hsk-hop 520ms var(--bounce);
  }

  /* Weekprogramma: icoon van de geopende dag springt */
  .daypanel.is-open .daypanel__icon--big .material-symbols-rounded {
    animation: hsk-hop 650ms var(--bounce) 250ms;
  }

  /* Paklijst: vinkje plopt, de tas springt als alles erin zit */
  .packlist__item[aria-checked="true"] .packlist__box { animation: hsk-check 420ms var(--bounce); }
  .packing__card.is-done .packing__bag { animation: hsk-jump 750ms var(--bounce); }

  /* Formulieren: stappen schuiven binnen, fouten schudden even */
  .form-step:not([hidden]) { animation: hsk-step 450ms var(--ease); }
  .child-block:not([hidden]) { animation: hsk-rise-small 450ms var(--ease); }
  .stepper li.is-current .stepper__num { animation: hsk-chip 450ms var(--bounce); }
  .hsk-has-error { animation: hsk-shake 420ms var(--ease); }
  .summary:not([hidden]) { animation: hsk-card-in 700ms var(--bounce-soft); }

  /* ------------------------------------------------------------------------
     6. Doorlopend (rustig, alleen waar het iets betekent)
     ------------------------------------------------------------------------ */

  /* "Eerstvolgende kamp": zachte ring om de badge.
     Een losse ring die alleen groeit en vervaagt (scale + opacity), zodat
     de browser niets opnieuw hoeft te tekenen. */
  .camp-card--featured .badge--berry,
  .kamp-card .badge--berry {
    position: relative;
  }

  .camp-card--featured .badge--berry::after,
  .kamp-card .badge--berry::after {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: inherit;
    box-shadow: 0 0 0 3px rgba(185, 30, 71, 0.5);
    opacity: 0;
    pointer-events: none;
    animation: hsk-ping 2.4s var(--ease) 1.5s infinite;
  }

  /* Locatiepin op de contactpagina deint */
  .contact-place__pin { animation: hsk-bob 1.6s ease-in-out infinite alternate; }

  /* Kampicoon in de gegevenskaart */
  .facts-card__visual:not(.facts-card__visual--media) > .material-symbols-rounded {
    animation:
      hsk-slap 700ms var(--bounce) 800ms backwards,
      hsk-bob 2.6s ease-in-out 1.6s infinite alternate;
  }
}

/* --------------------------------------------------------------------------
   Keyframes
   Alleen "from" waar het kan: het eindpunt is dan de eigen stijl van het
   element (inclusief zijn schuine stand).
   -------------------------------------------------------------------------- */
@keyframes hsk-word {
  from { opacity: 0; translate: 0 0.6em; rotate: 7deg; }
}

@keyframes hsk-rise {
  from { opacity: 0; translate: 0 1.5rem; }
}

@keyframes hsk-rise-small {
  from { opacity: 0; translate: 0 0.6rem; }
}

@keyframes hsk-fade {
  from { opacity: 0; }
}

@keyframes hsk-wipe {
  from { clip-path: inset(-0.3em 100% -0.45em -0.3em); }
  to { clip-path: inset(-0.3em -0.3em -0.45em -0.3em); }
}

@keyframes hsk-pop-soft {
  from { opacity: 0; scale: 0.8; translate: 0 0.5rem; }
}

@keyframes hsk-slap {
  from { opacity: 0; scale: 0.3; rotate: -24deg; }
}

@keyframes hsk-spin-in {
  from { opacity: 0; scale: 0; rotate: -200deg; }
}

@keyframes hsk-media-in {
  from { translate: 3rem 0; }
}

@keyframes hsk-hero-photo {
  from { scale: 1.24; }
  to { scale: 1.08; }
}

@keyframes hsk-zoom-out {
  from { scale: 1.22; }
}

@keyframes hsk-settle {
  from { opacity: 0; translate: 0 3rem; rotate: 9deg; }
}

@keyframes hsk-card-in {
  from { opacity: 0; translate: 2.5rem 1rem; rotate: 2deg; }
}

@keyframes hsk-draw {
  from { stroke-dashoffset: 260; }
  to { stroke-dashoffset: 0; }
}

@keyframes hsk-bob {
  to { translate: 0 -7px; }
}

@keyframes hsk-wiggle {
  0%, 100% { rotate: 0deg; scale: 1; }
  20% { rotate: -14deg; scale: 1.12; }
  45% { rotate: 10deg; }
  70% { rotate: -5deg; }
}

@keyframes hsk-wiggle-soft {
  0%, 100% { rotate: 0deg; }
  30% { rotate: -3deg; }
  65% { rotate: 2deg; }
}

@keyframes hsk-hop {
  0%, 100% { translate: 0 0; }
  40% { translate: 0 -6px; scale: 1.12; }
  70% { translate: 0 1px; scale: 0.96; }
}

@keyframes hsk-arrow {
  0% { translate: 0 0; opacity: 1; }
  45% { translate: 0.6em 0; opacity: 0; }
  46% { translate: -0.6em 0; opacity: 0; }
  100% { translate: 0 0; opacity: 1; }
}

@keyframes hsk-chip {
  0% { scale: 1; }
  40% { scale: 1.14; }
  100% { scale: 1; }
}

@keyframes hsk-filter-in {
  from { opacity: 0; translate: 0 1.25rem; scale: 0.94; }
}

@keyframes hsk-panel {
  from { opacity: 0; translate: 0 -0.5rem; }
}

@keyframes hsk-menu {
  from { opacity: 0; translate: 0 -0.75rem; }
}

@keyframes hsk-check {
  0% { scale: 1; }
  45% { scale: 1.3; rotate: -8deg; }
  100% { scale: 1; rotate: 0deg; }
}

@keyframes hsk-jump {
  0%, 100% { translate: 0 0; }
  30% { translate: 0 -14px; }
  55% { translate: 0 2px; }
  75% { translate: 0 -4px; }
}

@keyframes hsk-step {
  from { opacity: 0; translate: 1.5rem 0; }
}

@keyframes hsk-shake {
  0%, 100% { translate: 0 0; }
  20% { translate: -6px 0; }
  40% { translate: 5px 0; }
  60% { translate: -3px 0; }
  80% { translate: 2px 0; }
}

@keyframes hsk-ping {
  0% { opacity: 1; scale: 1; }
  70%, 100% { opacity: 0; scale: 1.25 1.6; }
}

@keyframes hsk-ball {
  from { translate: 0 -2.25rem; }
  to { translate: 0 0; }
}

@keyframes hsk-ball-shadow {
  from { scale: 0.55; opacity: 0.5; }
  to { scale: 1; opacity: 1; }
}

@keyframes hsk-spin {
  to { rotate: 360deg; }
}

/* Afdrukken: alles gewoon zichtbaar */
@media print {
  [data-reveal] {
    opacity: 1 !important;
    translate: none !important;
    rotate: none !important;
    scale: none !important;
    clip-path: none !important;
  }

  [data-reveal] .w,
  [data-reveal] path {
    opacity: 1 !important;
    translate: none !important;
    rotate: none !important;
    stroke-dashoffset: 0 !important;
  }
}