/* UEBER MICH - Welle & Fenster. Scroll entscheidet WANN, die
   Transitions hier entscheiden WIE schnell (wie Agave).
   Statisches liegt im Designer: .intro_text, .intro_text_word,
   .intro_text_window. Variante: data-wave=a|b|c am .intro_text. */
[data-wave] {
  --dkw-accent: #ffb800;
  --dkw-set: #fff;
  --dkw-hit: var(--dkw-accent);
  --dkw-dim: rgba(255,255,255,.2);
  --dkw-crest: 2.55em;              /* Breite des Wellenkamms */
  --dkw-settle: 0em;            /* wie weit ein Wort absinkt */
  --dkw-scope: 2.39;               /* Fensterformat — Cinemascope */
  --dkw-win-h: .82em;

  --dkw-ease: cubic-bezier(.6,0,.2,1);   /* Agaves Kurve */
  --dkw-word-dur: .9s;             /* Wort blendet auf */
  --dkw-win-dur: 1.15s;            /* Fenster zieht auf — ruhiger */
  --dkw-win-delay: .12s;           /* erst der Kamm, dann der Clip */
}

/* --dkw-p muss registriert sein, sonst ist es nicht animierbar.
   Damit läuft der Verlauf als echte CSS-Transition. */
@property --dkw-p { syntax: '<number>'; inherits: false; initial-value: 0; }
@property --dkw-drift { syntax: '<percentage>'; inherits: false; initial-value: 0%; }

/* ---- das Wort ---- */
[data-wave][data-wave-ready] .dkw-word {
  display: inline-block;
  --dkw-x: var(--dkw-cursor-x,calc(var(--dkw-p) * (100% + 2 * var(--dkw-crest)) - var(--dkw-crest)));
  /* die Box muss Umlautpunkte und Kommaschwänze tragen, sonst
     schneidet background-clip sie ab — Padding rein, Margin raus */
  padding: .17em 0 .11em;
  margin-top: -.17em;
  margin-bottom: -.11em;
  background-image: linear-gradient(90deg,
      var(--dkw-set) 0%,
      var(--dkw-set) calc(var(--dkw-x) - var(--dkw-crest)),
      color-mix(in srgb,var(--dkw-hit) 28%,var(--dkw-set)) calc(var(--dkw-x) - var(--dkw-crest)*.70),
      color-mix(in srgb,var(--dkw-hit) 72%,var(--dkw-set)) calc(var(--dkw-x) - var(--dkw-crest)*.35),
      var(--dkw-hit) var(--dkw-x),
      color-mix(in srgb,var(--dkw-hit) 65%,var(--dkw-dim)) calc(var(--dkw-x) + var(--dkw-crest)*.30),
      color-mix(in srgb,var(--dkw-dim) 68%,var(--dkw-set)) calc(var(--dkw-x) + var(--dkw-crest)*.65),
      color-mix(in srgb,var(--dkw-dim) 35%,var(--dkw-set)) calc(var(--dkw-x) + var(--dkw-crest)),
      var(--dkw-set) calc(var(--dkw-x) + var(--dkw-crest)*1.5),
      var(--dkw-set) 100%);
  -webkit-background-clip: text;
          background-clip: text;
  color: transparent;
  text-shadow: none;
  transform: translateY(var(--dkw-settle));
  transition: none;
}
[data-wave][data-wave-ready] .dkw-word.lit {
  --dkw-p: 1;
  transform: translateY(0);
}
[data-wave][data-wave-ready] .dkw-word.is-accent {
  --dkw-set: var(--dkw-accent);
  --dkw-hit: #fff;
}


@media(max-width:767px){[data-wave]{--dkw-crest:2.1em}}
@media(prefers-reduced-motion:reduce){[data-wave][data-wave-ready] .dkw-word{transition:none;--dkw-p:1;transform:none}}

.dkw-token{display:inline-block;white-space:nowrap}
.heading-letter{position:relative;transform-origin:50% 65%}

/* Shared DIGITAL DESIGN ink and travelling light for all main-site headings. */
[data-wave][data-wave-ready]:is(h1,h2,h3,h4,h5,h6),:is(h1,h2,h3,h4,h5,h6) [data-wave][data-wave-ready]{--dkw-set:#d7d7d3!important;--dkw-hit:#ffb800!important;--dkw-accent:#ffb800!important;--dkw-dim:rgba(215,215,211,.2)!important}