/* Denk.Mal Haptik-Ebene (Roman 17.07.): alle Bewegungs-Effekte, per data-Attribut steuerbar.
   Ohne JavaScript ist alles sofort sichtbar. Bei "reduzierte Bewegung" schalten sich Effekte ab. */

/* Logo bleibt IMMER mehrfarbig. Fuer starken Kontrast sitzt es in einem Feld, dessen
   Helligkeit der Seite folgt: dunkles Feld auf hellem Grund, helles Feld auf dunklem Grund.
   (creme statt reinem Weiss, Espresso als dunkelster Ton, DNA-konform.) */
.logo-feld { display:inline-flex; align-items:center; border-radius:14px; padding:.5rem .85rem; }
.logo-feld.hell { background:#FAF7F2; }
.logo-feld.dunkel { background:#2A1E15; }
.logo-bunt { display:block; width:auto; height:48px; aspect-ratio:1290 / 1747; }

/* Effekt 2: weiches Hereingleiten. Nur wenn JS aktiv (body.haptik), sonst sichtbar. */
body.haptik [data-reveal] { opacity:0; transform:translateY(38px);
  transition:opacity .9s cubic-bezier(.22,.8,.3,1), transform .9s cubic-bezier(.22,.8,.3,1); }
body.haptik [data-reveal].sichtbar { opacity:1; transform:none; }
[data-reveal][data-delay="1"] { transition-delay:.1s; }
[data-reveal][data-delay="2"] { transition-delay:.2s; }
[data-reveal][data-delay="3"] { transition-delay:.3s; }
[data-reveal][data-delay="4"] { transition-delay:.4s; }

/* Effekt 1: Aufbau beim Laden */
body.haptik [data-aufbau] { opacity:0; transform:translateY(24px) scale(.985);
  animation:haptik-aufbau 1s cubic-bezier(.22,.8,.3,1) forwards; }
body.haptik [data-aufbau="1"]{ animation-delay:.05s; } body.haptik [data-aufbau="2"]{ animation-delay:.2s; }
body.haptik [data-aufbau="3"]{ animation-delay:.35s; } body.haptik [data-aufbau="4"]{ animation-delay:.5s; }
@keyframes haptik-aufbau { to { opacity:1; transform:none; } }

/* Effekt 5: lebende Fläche (Ken-Burns) */
[data-ken] { overflow:hidden; }
[data-ken] > img { animation:haptik-ken 24s ease-in-out infinite alternate; transform-origin:center; }
@keyframes haptik-ken { from { transform:scale(1) translate(0,0); } to { transform:scale(1.1) translate(-1.6%,-1.6%); } }

/* Effekt 10: sanftes Schweben im Ruhezustand */
[data-schweb] { animation:haptik-schweb 6.5s ease-in-out infinite; will-change:transform; }
[data-schweb="2"] { animation-duration:7.5s; animation-delay:-2s; }
[data-schweb="3"] { animation-duration:8.5s; animation-delay:-4s; }
@keyframes haptik-schweb { 0%,100% { transform:translateY(0) rotate(-1deg); } 50% { transform:translateY(-16px) rotate(1deg); } }

/* Effekt 9: magnetischer Knopf (Transition, Bewegung kommt aus JS) */
[data-magnet] { transition:transform .2s cubic-bezier(.22,.8,.3,1); }

/* Effekt 3/11: wachsende Kachel und Parallax setzen ihre transform aus JS, hier nur weiche Kante */
[data-wachs] { will-change:transform; }
[data-parallax] { will-change:transform; }

/* Effekt 12: Wörter tauchen auf */
body.haptik [data-worte] .wort { display:inline-block; white-space:pre-wrap; overflow-wrap:anywhere; hyphens:auto; -webkit-hyphens:auto; opacity:0; transform:translateY(20px);
  transition:opacity .5s ease, transform .5s ease; }
body.haptik [data-worte].los .wort { opacity:1; transform:none; }

/* Effekt 4: Kapitel-Schiene */
.haptik-schiene { position:fixed; right:2vw; top:50%; transform:translateY(-50%); z-index:40;
  display:flex; flex-direction:column; gap:.85rem; opacity:0; transition:opacity .4s ease; pointer-events:none; }
.haptik-schiene.zeig { opacity:1; pointer-events:auto; }
.haptik-schiene a { display:flex; align-items:center; gap:.55rem; justify-content:flex-end; text-decoration:none;
  color:#2a1e1585; font-size:.78rem; font-weight:700; }
.haptik-schiene a .kreis { width:11px; height:11px; border-radius:50%; border:2px solid #2a1e1540; transition:all .3s ease; }
.haptik-schiene a.aktiv { color:#2a1e15; }
.haptik-schiene a.aktiv .kreis { background:#EA5C9F; border-color:#EA5C9F; transform:scale(1.35); }
@media (max-width:820px) { .haptik-schiene { display:none; } }

/* Effekt 7: Farbwisch beim Seitenwechsel */
#haptik-wisch { position:fixed; inset:0; z-index:300; transform:translateY(100%); pointer-events:none;
  display:flex; align-items:center; justify-content:center; }
#haptik-wisch .wort { font-family:'Museo Slab',Georgia,serif; font-size:clamp(2rem,6vw,4rem); color:#2A1E15; opacity:0; }

@media (prefers-reduced-motion:reduce) {
  body.haptik [data-reveal] { opacity:1; transform:none; transition:none; }
  body.haptik [data-aufbau] { opacity:1; transform:none; animation:none; }
  [data-ken] > img, [data-schweb] { animation:none; }
  body.haptik [data-worte] .wort { opacity:1; transform:none; }
}