/* ============================================================================
   Coffee Festival Europe — KINETIK · die gemeinsame Bewegungs- und
   Kompositionsschicht der Unterseiten (Stand 03.09.2026, Fassung 2)

   Die Startseite hat Kino; die Unterseiten hatten nur den Einzug der
   Absaetze. Diese Datei legt auf alle Seiten DIESELBE zweite Schicht — die
   Bewegungssprache ist Teil der Marke und unterscheidet sich nicht von Seite
   zu Seite (Vorgabe des Kunden): Ken-Burns-Film und Aurora im Kopf, das
   Orbit-Ornament, Bilder, die sich wie ein Vorhang oeffnen, ein Trenner, der
   sich zwischen den Abschnitten zeichnet, Regeln und Karten, die dem Zeiger
   antworten. Was sich von Seite zu Seite unterscheidet, ist der AUFBAU der
   Abschnitte — der steht in layouts.css.

   Regeln: nur transform, opacity und clip-path bewegen sich; Zeigerantworten
   nur bei (hover:hover)/(pointer:fine); unter prefers-reduced-motion steht
   alles offen und still. Die Skriptseite ist assets/js/kinetik.js.
   ========================================================================== */

:root{
  --kx-out:var(--e-out-expo,cubic-bezier(.16,1,.3,1));
  --kx-cubic:var(--e-out-cubic,cubic-bezier(.33,1,.68,1));
}

/* ══ 1 · KOPFBEREICH — AUF ALLEN SEITEN GLEICH ═════════════════════════════
   Der Film kommt aus einer leichten Vergroesserung zur Ruhe (sieben Sekunden).
   Krumen, Vorspann und Hinweiszeile folgen dem Titel gestaffelt; als
   CSS-Animation mit `both`, damit sie auch ohne Skript sicher ankommen.     */
.phead--film .phead__film video,
.phead--film .phead__film img{
  transform:scale(1.14);
  animation:kxSettle 7s var(--kx-cubic) .1s forwards;
}
@keyframes kxSettle{to{transform:scale(1)}}

.phead .crumbs{animation:kxRise 1s var(--kx-out) .05s both}
.phead__lede{animation:kxRise 1.1s var(--kx-out) .42s both}
.phead__soon{animation:kxRise 1.1s var(--kx-out) .58s both}
@keyframes kxRise{from{opacity:0;transform:translate3d(0,16px,0)}to{opacity:1;transform:none}}

/* Tiefe beim Scrollen: Film und Text ziehen verschieden schnell weg.
   Das Skript setzt --kx-y (0..1). */
.phead--film .phead__film{will-change:transform}
.phead--film.kx-para .phead__film{transform:translate3d(0,calc(var(--kx-y,0) * 26vh),0)}
.phead--film.kx-para > .shell{
  transform:translate3d(0,calc(var(--kx-y,0) * 9vh),0);
  opacity:calc(1 - var(--kx-y,0) * 1.15);
}

/* Aurora: zwei Lichtfelder in Ember, die langsam umeinander wandern.
   Beide Ornamente sind <span>; thememotion.css setzt mit
   `body[data-pt] .phead > *` jedes Kind des Kopfes auf position:relative
   (0,2,1) und laedt nach dieser Datei — darum eine Stufe schwerer. */
html body .phead--film .kx-aurora{display:block;position:absolute;inset:0;overflow:hidden;
  pointer-events:none;z-index:0;mix-blend-mode:screen;opacity:.75}
.kx-aurora i{position:absolute;border-radius:50%;will-change:transform;
  background:radial-gradient(circle at center,rgba(226,85,30,.42) 0%,rgba(226,85,30,.12) 38%,transparent 66%)}
.kx-aurora i:nth-child(1){left:-12vw;top:-30vh;width:58vw;height:58vw;
  animation:kxDriftA 26s ease-in-out infinite alternate}
.kx-aurora i:nth-child(2){right:-14vw;bottom:-46vh;width:52vw;height:52vw;
  background:radial-gradient(circle at center,rgba(240,138,84,.34) 0%,rgba(240,138,84,.1) 40%,transparent 66%);
  animation:kxDriftB 31s ease-in-out infinite alternate}
@keyframes kxDriftA{from{transform:translate3d(0,0,0) scale(1)}to{transform:translate3d(9vw,6vh,0) scale(1.18)}}
@keyframes kxDriftB{from{transform:translate3d(0,0,0) scale(1.1)}to{transform:translate3d(-8vw,-7vh,0) scale(.92)}}
.phead--film > .shell{position:relative;z-index:1}

/* Orbit: zwei gestrichelte Ringe, gegenlaeufig, ein Punkt in Glut auf seiner
   Bahn, eine Bohne, die sich in einem Strich zeichnet. Ab 900px, unten rechts. */
html body .phead--film .kx-orbit{display:block;position:absolute;left:auto;top:auto;
  right:calc(var(--gutter) - 10px);bottom:clamp(18px,3vh,40px);
  width:clamp(120px,11vw,170px);height:clamp(120px,11vw,170px);
  pointer-events:none;z-index:1;opacity:.62}
.kx-orbit svg{width:100%;height:100%;overflow:visible;display:block}
.kx-orbit .kx-ring{fill:none;stroke:rgba(244,238,228,.42);stroke-width:1;transform-box:fill-box;transform-origin:center}
.kx-orbit .kx-ring--a{stroke-dasharray:2 7;animation:kxTurn 64s linear infinite}
.kx-orbit .kx-ring--b{stroke-dasharray:1 5;stroke:rgba(244,238,228,.26);animation:kxTurn 96s linear infinite reverse}
.kx-orbit .kx-sat{transform-box:fill-box;transform-origin:center;animation:kxTurn 18s linear infinite}
.kx-orbit .kx-sat circle{fill:var(--ember);filter:drop-shadow(0 0 6px rgba(226,85,30,.9))}
.kx-orbit .kx-core{fill:none;stroke:var(--ember);stroke-width:1.2;stroke-dasharray:140;stroke-dashoffset:140;
  animation:kxDraw 5.2s var(--kx-cubic) .9s infinite}
@keyframes kxTurn{to{transform:rotate(360deg)}}
@keyframes kxDraw{0%{stroke-dashoffset:140;opacity:0}12%{opacity:1}55%{stroke-dashoffset:0;opacity:1}85%{stroke-dashoffset:-140;opacity:0}100%{stroke-dashoffset:-140;opacity:0}}
@media (max-width:899px){html body .phead--film .kx-orbit{display:none}}
/* Auf dem Telefon steht die Aurora still: das Licht bleibt, die Drift und
   damit die Mischebene, die dauernd neu gemalt wuerde, entfaellt. */
@media (max-width:699px){.kx-aurora i{animation:none}}

/* ══ 2 · BILDER WERDEN AUFGEDECKT ══════════════════════════════════════════
   Grundform: ein Vorhang oeffnet sich von unten, das Motiv kommt aus einer
   leichten Vergroesserung zur Ruhe. Das Skript vergibt .kx-img an Figuren im
   Inhalt (nicht an Klebesatz, Kinobahn und Kopf) und .kx-in beim Eintreffen. */
.kx-img{clip-path:inset(0 0 100% 0);transition:clip-path 1.25s var(--kx-out) var(--kx-d,0ms)}
.kx-img > img,.kx-img > video,.kx-img > picture > img{
  transform:scale(1.12);transition:transform 1.5s var(--kx-out) var(--kx-d,0ms)}
.kx-img.kx-in{clip-path:inset(0 0 0 0)}
.kx-img.kx-in > img,.kx-img.kx-in > video,.kx-img.kx-in > picture > img{transform:none}
/* ══ 3 · TRENNER ZWISCHEN DEN ABSCHNITTEN ═══════════════════════════════════
   Das Skript setzt vor jeden weiteren Abschnitt einen .kx-div (Hoehe 0, liegt
   auf der Kante): eine Linie im Zweitton, die von links aufzieht, ein Punkt
   an ihrem Anfang, rechts die laufende Nummer in Mono. Ueberall dieselbe. */
.kx-div{position:relative;height:0;margin:0;pointer-events:none}
/* theme.css hebt jedes Kind von main auf z-index 1 (0,2,1); der Trenner muss ueber dem folgenden Abschnitt liegen */
html body[data-pt] main > .kx-div{z-index:3}
.kx-div__in{position:absolute;left:var(--gutter);right:var(--gutter);top:-1px;height:2px}
.kx-div__l{position:absolute;left:0;right:0;top:0;height:1px;
  background:linear-gradient(90deg,var(--pt),rgba(244,238,228,.14) 60%,transparent);
  transform:scaleX(0);transform-origin:left;transition:transform 1.4s var(--kx-out)}
.kx-div.kx-on .kx-div__l{transform:scaleX(1)}
.kx-div__d{position:absolute;left:0;top:-3px;width:7px;height:7px;border-radius:50%;background:var(--pt);
  opacity:0;transform:scale(.3);transition:opacity .5s,transform .8s var(--kx-out)}
.kx-div.kx-on .kx-div__d{opacity:1;transform:none}
.kx-div__n{position:absolute;right:0;top:-.7em;font-family:var(--f-mono);font-size:var(--t-label);letter-spacing:.16em;
  color:var(--pt);opacity:0;transform:translate3d(0,6px,0);transition:opacity .6s .5s,transform .8s var(--kx-out) .5s}
.kx-div.kx-on .kx-div__n{opacity:.9;transform:none}
/* ══ 4 · CHRONIK, REGELN, KARTEN ═══════════════════════════════════════════ */
.hist__i{opacity:0;transform:translate3d(28px,0,0)}
.hist__i::before{transform:scaleX(0);transform-origin:left}
.hist.kx-in .hist__i{opacity:1;transform:none;
  transition:opacity .9s var(--kx-cubic) var(--kx-d,0ms),transform 1.1s var(--kx-out) var(--kx-d,0ms)}
.hist.kx-in .hist__i::before{transform:scaleX(1);transition:transform 1.2s var(--kx-out) calc(var(--kx-d,0ms) + 120ms)}

.rule__n{transform:translate3d(0,22px,0);transition:transform 1.2s var(--kx-out) var(--pm-d,0ms)}
.rule.pm-rail .rule__n{transform:none}
.card__ico,.card__go{transition:transform .5s var(--kx-out),background-color .35s var(--kx-cubic),
  border-color .35s var(--kx-cubic),color .35s var(--kx-cubic)}
.card__go svg{transition:transform .5s var(--kx-out)}
@media (hover:hover) and (pointer:fine){
  .rule:hover .rule__n{transform:translate3d(0,-6px,0);transition-delay:0ms;transition-duration:.6s}
  .card:hover .card__ico{transform:translate3d(0,-3px,0) rotate(-5deg)}
  .card:hover .card__go{background:var(--ember);border-color:var(--ember);color:#fff}
  .card:hover .card__go svg{transform:translate3d(1px,-1px,0)}
  .faq__item summary{transition:background-color .35s var(--kx-cubic)}
  .faq__item summary:hover{background-color:rgba(244,238,228,.035)}
}
.card:active{transform:translateY(-4px) scale(.985);transition-duration:.16s}

/* ══ 5 · RUHE ══════════════════════════════════════════════════════════════ */
@media (prefers-reduced-motion:reduce){
  .phead--film .phead__film video,.phead--film .phead__film img{transform:none;animation:none}
  .phead .crumbs,.phead__lede,.phead__soon{animation:none}
  .phead--film.kx-para .phead__film,.phead--film.kx-para > .shell{transform:none;opacity:1}
  .kx-aurora i{animation:none}
  .kx-orbit *{animation:none!important}
  .kx-orbit .kx-core{stroke-dashoffset:0;opacity:.6}
  .kx-img{clip-path:none;transition:none}
  .kx-img > img,.kx-img > video,.kx-img > picture > img{transform:none;transition:none}
  .kx-div__l,.kx-div__d,.kx-div__n{transform:none;opacity:1;transition:none}
  .hist__i{opacity:1;transform:none}
  .hist__i::before{transform:none}
  .rule__n{transform:none;transition:none}
}

/* 10.09.2026: Orbit im Kopf abgeschaltet (kinetik.js baut ihn nicht mehr; hier die Sicherung) */
html body .phead--film .kx-orbit{display:none!important}