/* =========================================================
   TSCB UTILITY-SYSTEEM — animaties
   Onderdeel van het tscb-systeem, zie basis/kleur.css voor
   de kleur-bridge en het versie-/hergebruikbeleid.
   ========================================================= */

:root {
  /* Animatie-tokens — snelheid en afstand centraal geregeld.
     Standaard ease = softe ease-out: het laatste stuk remt
     in een boog af (zachte landing). De ease_in is voor
     uitgaande beweging (verdwijnen/exit), niet de standaard. */
  --tscb_anim_duration: .6s;    /* entrance-animaties */
  --tscb_anim_hover:    .25s;   /* hover-effecten */
  --tscb_anim_ease:     cubic-bezier(.16, 1, .3, 1); /* softe ease-out, zachte landing (standaard) */
  --tscb_anim_ease_in:  cubic-bezier(.55, 0, .85, .36); /* ease-in — rustige start, voor uitgaande beweging */
  --tscb_anim_distance: 1.5rem; /* verplaatsing bij fade_up e.d. */

  /* Ambient- en breathe-tokens — traag en subtiel. Duraties
     zijn bewust priemachtig zodat lagen/elementen nooit
     synchroon lopen (het "bos bij wind"-effect). Per sectie
     of element te overriden; vars in keyframes herrekenen
     per element, dus dat werkt gewoon. */
  --tscb_ambient_duration: 23s;   /* basistempo overlaylaag */
  --tscb_ambient_drift:    4%;    /* verplaatsing van de laag (laag is oversized) */
  --tscb_ambient_tilt:     .6deg; /* micro-rotatie voor het wuiven */
  --tscb_breathe_duration: 11s;   /* basistempo ademen */
  --tscb_breathe_scale:    1.015; /* max. uitzetting (1.008 = fluister, 1.03 = zichtbaar) */
  --tscb_spin_duration:    30s;   /* basistempo ronddraaien (lineair) */

  /* Golfje onder de koppen — zie het streepje in layout/spacing.css.
     Twee bewegingen met verschillende, niet-harmonische duraties:
     daardoor lopen ze steeds net anders langs elkaar en herhaalt
     het patroon zich nooit hoorbaar. Zelfde "bos bij wind"-idee
     als de tokens hierboven. Bewust traag en klein: het mag je
     nooit van de tekst aftrekken. */
  --tscb_rule_drift_duration:   19s;
  --tscb_rule_breathe_duration: 23s;
  --tscb_rule_travel:           25%;    /* hoever het verloop heen en weer schuift */
  --tscb_rule_breathe_scale:    1.05;   /* hoever het streepje uitrekt */
}

/* ---------------------------------------------------------
   9. ANIMATIES — pure CSS, drie soorten:
   - hover:    werken direct (lift/grow), geen trigger nodig
   - entrance: spelen bij laden; op scroll triggeren via een
     Bricks-interactie "enter viewport → add class"
   - continu:  lopen oneindig (float/pulse)
   Snelheid/afstand via de animatie-tokens in :root.
   Custom slots: tscb_anim_custom_1..3, per project invullen.
   --------------------------------------------------------- */
/* hover-effecten */
.tscb_anim_lift { transition: translate var(--tscb_anim_hover) var(--tscb_anim_ease), box-shadow var(--tscb_anim_hover) var(--tscb_anim_ease); }
.tscb_anim_lift:hover { translate: 0 -4px; }
.tscb_anim_grow { transition: scale var(--tscb_anim_hover) var(--tscb_anim_ease); }
.tscb_anim_grow:hover { scale: 1.04; }

/* entrance-animaties */
@keyframes tscb_fade    { from { opacity: 0; } to { opacity: 1; } }
@keyframes tscb_fade_up { from { opacity: 0; translate: 0 var(--tscb_anim_distance); } to { opacity: 1; translate: 0 0; } }
@keyframes tscb_zoom    { from { opacity: 0; scale: .92; } to { opacity: 1; scale: 1; } }
.tscb_anim_fade    { animation: tscb_fade var(--tscb_anim_duration) var(--tscb_anim_ease) both; }
.tscb_anim_fade_up { animation: tscb_fade_up var(--tscb_anim_duration) var(--tscb_anim_ease) both; }
.tscb_anim_zoom    { animation: tscb_zoom var(--tscb_anim_duration) var(--tscb_anim_ease) both; }

/* Scroll-triggering zonder flits: zet tscb_anim_ready alvast
   op het element in de builder (element start onzichtbaar),
   laat de Bricks-interactie "enter viewport → add class" de
   animatie-class toevoegen. Zonder ready-class knipt het
   element eerst zichtbaar → onzichtbaar → fade (flits). */
.tscb_anim_ready { opacity: 0; }
.tscb_anim_ready.tscb_anim_fade,
.tscb_anim_ready.tscb_anim_fade_up,
.tscb_anim_ready.tscb_anim_zoom { opacity: 1; }

/* continue animaties */
@keyframes tscb_float { 0%, 100% { translate: 0 0; } 50% { translate: 0 -8px; } }
@keyframes tscb_pulse { 0%, 100% { scale: 1; } 50% { scale: 1.03; } }
.tscb_anim_float { animation: tscb_float 4s ease-in-out infinite; }
.tscb_anim_pulse { animation: tscb_pulse 2.5s ease-in-out infinite; }

/* draai — continu rond het eigen middelpunt. LINEAIR (constante
   snelheid, anders hapert 't per cyclus). transform-box + -origin
   laten 't ook op een SVG om z'n eigen hart draaien i.p.v. om de
   viewport-oorsprong. Snelheid via --tscb_spin_duration.
   Modifiers: _reverse (andersom), _daily (exact 1× per 24 uur —
   haast onmerkbaar, "zonnewijzer"; combineer bv. met een subtiele
   decoratieve ring/zon). */
@keyframes tscb_spin { to { rotate: 360deg; } }
.tscb_anim_spin {
  transform-box: fill-box;
  transform-origin: center;
  animation: tscb_spin var(--tscb_spin_duration) linear infinite;
}
.tscb_anim_spin_reverse { animation-direction: reverse; }
.tscb_anim_spin_daily   { --tscb_spin_duration: 3600s; } /* 1 uur */

/* breathe — heel traag ademen (grow/shrink). Voor het
   bos-effect geef je naburige elementen verschillende
   varianten: _2 en _3 lopen op eigen tempo én fase
   (negatieve delay = start midden in de cyclus), dus
   nooit synchroon met de basis. Diepte-modifiers stapelen:
   "tscb_anim_breathe_2 tscb_anim_breathe_deep".
   NIET op tekst-containers (subpixel-scaling kan tekst
   licht laten shimmeren) — wel op images, cards, iconen,
   decoratieve vormen. Nooit op buttons (anti-bots-regel). */
@keyframes tscb_breathe { 0%, 100% { scale: 1; } 50% { scale: var(--tscb_breathe_scale); } }

/* Het golfje van de kop-streepjes. drift schuift het kleurverloop
   heen en weer binnen een achtergrond die iets breder is dan het
   streepje; breathe rekt 'm vanaf links een fractie uit. Samen
   geeft dat een traag deinen i.p.v. een mechanische schuif. */
@keyframes tscb_rule_drift {
  0%, 100% { background-position-x: 0%; }
  50%      { background-position-x: 100%; }
}
@keyframes tscb_rule_breathe {
  0%, 100% { transform: scaleX(1); }
  50%      { transform: scaleX(var(--tscb_rule_breathe_scale)); }
}
.tscb_anim_breathe,
.tscb_anim_breathe_2,
.tscb_anim_breathe_3 { animation: tscb_breathe var(--tscb_breathe_duration) ease-in-out infinite; }
.tscb_anim_breathe_2 { animation-duration: 13s; animation-delay: -5s; }
.tscb_anim_breathe_3 { animation-duration: 17s; animation-delay: -9s; }

/* diepte-modifiers — hoeveel het element uitzet */
.tscb_anim_breathe_soft { --tscb_breathe_scale: 1.008; }
.tscb_anim_breathe_deep { --tscb_breathe_scale: 1.03; }
.tscb_anim_breathe_deeper { --tscb_breathe_scale: 1.14; }

/* snelheid-modifiers — combineren met elke entrance-animatie */
.tscb_anim_slow { --tscb_anim_duration: 1.2s; }
.tscb_anim_fast { --tscb_anim_duration: .3s; }

/* ---------------------------------------------------------
   8. PROJECT CUSTOM — vaste namen, per project invullen
   (keyframes + class). Leeg in het basisbestand; de
   standaardgroepen hierboven wijzig je NOOIT per project.
   --------------------------------------------------------- */
/* .tscb_anim_custom_1 { } */
/* .tscb_anim_custom_2 { } */
/* .tscb_anim_custom_3 { } */

/* ---------------------------------------------------------
   10. AMBIENT OVERLAYS — trage golf/wind-lagen die een
   sectie laten "ademen". Twee pseudo-element-lagen (::before
   en ::after), oversized (inset -20%) zodat randen nooit in
   beeld drijven. Alleen translate/rotate wordt geanimeerd —
   de paint van de laag zelf blijft statisch (nooit
   background-position/-size of blur animeren!).
   ::after loopt trager en in tegenfase → diepte/parallax.

   Gebruik:
   1. bewegingsclass op de sectie: tscb_ambient_wave of
      tscb_ambient_wind
   2. + een per-project visualclass (zoals bij gradients:
      descriptief, geen standaardset) die --_tscb_ambient_1
      en optioneel --_tscb_ambient_2 vult
   Max 1–2 ambient-secties tegelijk in beeld houden.
   z-index -1 + isolation: laag ligt boven de sectie-
   achtergrond maar onder alle content — content hoeft
   nergens aangepast te worden.
   --------------------------------------------------------- */
.tscb_ambient_wave,
.tscb_ambient_wind {
  position: relative;
  overflow: clip;
  isolation: isolate; /* houdt z-index -1 binnen de sectie */
}
.tscb_ambient_wave::before, .tscb_ambient_wave::after,
.tscb_ambient_wind::before, .tscb_ambient_wind::after {
  content: "";
  position: absolute;
  inset: -20%;
  z-index: -1;
  pointer-events: none;
  background-image: var(--_tscb_ambient_1, none);
}
.tscb_ambient_wave::after,
.tscb_ambient_wind::after { background-image: var(--_tscb_ambient_2, none); }

/* golven — schuin wiegen met micro-rotatie (water/deining) */
@keyframes tscb_ambient_wave {
  0%, 100% { translate: 0 0; rotate: 0deg; }
  50%      { translate: calc(-1 * var(--tscb_ambient_drift)) calc(var(--tscb_ambient_drift) / 2);
             rotate: var(--tscb_ambient_tilt); }
}
.tscb_ambient_wave::before { animation: tscb_ambient_wave var(--tscb_ambient_duration) ease-in-out infinite; }
.tscb_ambient_wave::after  { animation: tscb_ambient_wave calc(var(--tscb_ambient_duration) * 1.4) ease-in-out -7s infinite reverse; }

/* wind — horizontaal drijven, heen en weer (vlagen) */
@keyframes tscb_ambient_wind {
  from { translate: calc(-1 * var(--tscb_ambient_drift)) 0; }
  to   { translate: var(--tscb_ambient_drift) 0; }
}
.tscb_ambient_wind::before { animation: tscb_ambient_wind var(--tscb_ambient_duration) ease-in-out infinite alternate; }
.tscb_ambient_wind::after  { animation: tscb_ambient_wind calc(var(--tscb_ambient_duration) * 1.4) ease-in-out -7s infinite alternate-reverse; }

/* tempo-modifiers voor de hele sectie */
.tscb_ambient_slow { --tscb_ambient_duration: 34s; }
.tscb_ambient_fast { --tscb_ambient_duration: 15s; }

/* VOORBEELD-TEMPLATES — vervang per project door eigen
   descriptieve classes (verwijder de voorbeelden), zelfde
   afspraak als bij de gradients. Zachtheid komt uit brede,
   transparante banen (color-mix) — GEEN filter: blur, dat
   is duur op grote lagen. Laag 1 = brede deining, laag 2 =
   smallere strepen op ander tempo → interferentie doet de
   rest van het organische werk. */
.tscb_ambient_voorbeeld_zee {
  --_tscb_ambient_1: linear-gradient(105deg,
    transparent 15%,
    color-mix(in srgb, var(--tscb_secondary_1) 14%, transparent) 40%,
    color-mix(in srgb, var(--tscb_primary_1) 10%, transparent) 60%,
    transparent 85%);
  --_tscb_ambient_2: repeating-linear-gradient(100deg,
    transparent 0,
    color-mix(in srgb, var(--tscb_white) 5%, transparent) 6rem,
    transparent 13rem);
}
.tscb_ambient_voorbeeld_bries {
  --_tscb_ambient_1: repeating-linear-gradient(115deg,
    transparent 0,
    color-mix(in srgb, var(--tscb_tertiary_1) 8%, transparent) 9rem,
    transparent 19rem);
}

/* toegankelijkheid — grote/continue beweging uit bij reduced
   motion, incl. de ambient-pseudolagen (de visuele laag
   blijft wél staan, alleen de beweging stopt).
   Button-microfeedback (1.5px hover/active) blijft bewust
   aan: functionele feedback, geen klacht-triggerende motion. */
@media (prefers-reduced-motion: reduce) {
  [class*="tscb_anim_"] { animation: none; transition: none; }
  [class*="tscb_ambient_"]::before,
  [class*="tscb_ambient_"]::after { animation: none; }
  .tscb_anim_ready { opacity: 1; } /* nooit verborgen laten */
}