/* Frisuren-Kino (Abschnitt #instagram), Baustein werkzeuge/bausteine-frisurenkino.py.
   Eigene Datei der Instagram-Sitzung, wird NACH sm.css geladen.
   Farben nur aus sm.css, Zeiten nur --dur-* und Vielfache von --dur-takt. */

.fk{position:relative;overflow:hidden;margin-top:14px;padding:22px 0 6px;
  --kb:clamp(230px,30vw,380px)}
.fk-buehne{position:relative;height:calc(var(--kb) * 4 / 3);perspective:1600px;
  touch-action:pan-y pinch-zoom}

/* ---- Karten im Faecher ---------------------------------------------------- */
.fk-karte{position:absolute;top:0;left:50%;width:var(--kb);aspect-ratio:3/4;
  margin:0 0 0 calc(var(--kb) / -2);border-radius:18px;overflow:hidden;
  background-color:var(--rose);cursor:pointer;
  box-shadow:0 26px 50px -20px rgba(var(--schatten),.5),0 2px 6px rgba(var(--schatten),.14);
  transform:translateX(calc(var(--d,0) * 64%)) rotateY(calc(var(--d,0) * -18deg))
    scale(calc(1 - var(--a,0) * .15));
  transition:transform calc(var(--dur-takt) * .9) var(--ease-out),
    opacity var(--dur-3) var(--ease-out),filter var(--dur-3) var(--ease-out);
  will-change:transform}
/* Tiefe ueber Helligkeit, nicht ueber Deckkraft: halbdurchsichtige Karten
   liessen die Karte dahinter durchscheinen */
.fk-karte:not(.fk-aktiv){filter:saturate(calc(1 - var(--a,0) * .12)) brightness(calc(1 - var(--a,0) * .05))}
.fk-aktiv{cursor:default}
.fk-weg{opacity:0;visibility:hidden;pointer-events:none}
.fk-karte img,.fk-film{position:absolute;inset:0;width:100%;height:100%;
  object-fit:cover;display:block;margin:0}
.fk-film{opacity:0;transition:opacity var(--dur-3) var(--ease-out)}
.fk-film-laeuft .fk-film{opacity:1}

/* Karte ohne Film: das Foto zoomt langsam, damit auch sie sich bewegt */
.fk-aktiv.fk-ohne-film img{animation:fk-zoom calc(var(--dur-takt) * 6) var(--ease-zug) both}
@keyframes fk-zoom{from{transform:scale(1)}to{transform:scale(1.07)}}

/* Glanz, der beim Wechsel einmal ueber das Haar streicht */
.fk-karte::before{content:"";position:absolute;top:0;bottom:0;left:0;width:55%;z-index:2;
  pointer-events:none;opacity:0;transform:translateX(-120%) skewX(-12deg);
  background-image:linear-gradient(100deg in oklab,rgb(255 255 255 / 0),
    rgb(255 255 255 / .34) 50%,rgb(255 255 255 / 0))}
.fk-glanz::before{animation:fk-glanz calc(var(--dur-takt) * 1.3) var(--ease-in-out)
  calc(var(--dur-takt) * .6) 1 both}
@keyframes fk-glanz{
  from{opacity:1;transform:translateX(-120%) skewX(-12deg)}
  to{opacity:1;transform:translateX(260%) skewX(-12deg)}}

/* ---- Rahmen ueber der mittleren Karte: Storyleiste und Monogramm ---------- */
.fk-rahmen{position:absolute;top:0;left:50%;width:var(--kb);aspect-ratio:3/4;
  margin-left:calc(var(--kb) / -2);z-index:30;pointer-events:none}
.fk-leiste{position:absolute;top:12px;left:12px;right:12px;display:flex;gap:3px}
.fk-strich{flex:1;height:3px;border-radius:3px;overflow:hidden;
  background-color:rgb(255 255 255 / .45);box-shadow:0 0 3px rgba(var(--dunkel-rgb),.35)}
.fk-strich i{display:block;height:100%;background-color:#fff;
  transform:scaleX(0);transform-origin:left center}
.fk-voll i{transform:scaleX(1)}
.fk-jetzt i{animation:fk-lauf calc(var(--dur-takt) * 5.2) linear both}
.fk-pause .fk-jetzt i{animation-play-state:paused}
@keyframes fk-lauf{to{transform:scaleX(1)}}

.fk-zeichen{position:absolute;left:50%;top:50%;width:48%;overflow:visible;opacity:0;
  transform:translate(-50%,-50%);
  filter:drop-shadow(0 2px 10px rgba(var(--dunkel-rgb),.55))}
.fk-zeichen line{stroke:#fff;stroke-width:12;stroke-dasharray:1;stroke-dashoffset:1}
.fk-zeichnet .fk-zeichen{animation:fk-zeichen calc(var(--dur-takt) * 2.4) var(--ease-in-out) both}
.fk-zeichnet .fk-zeichen line{animation:fk-strich calc(var(--dur-takt) * .5) var(--ease-out)
  calc(var(--dur-takt) * (.12 + var(--n) * .15)) both}
@keyframes fk-zeichen{
  0%{opacity:0;transform:translate(-50%,-50%) scale(.9)}
  10%{opacity:1}
  62%{opacity:1;transform:translate(-50%,-50%) scale(1)}
  100%{opacity:0;transform:translate(-50%,-50%) scale(1.06)}}
@keyframes fk-strich{to{stroke-dashoffset:0}}

/* ---- Steuerung ------------------------------------------------------------ */
.fk-steuer{display:flex;align-items:center;justify-content:center;gap:18px;margin-top:24px}
.fk-pfeil{width:48px;height:48px;border-radius:50%;display:inline-flex;align-items:center;
  justify-content:center;padding:0;cursor:pointer;background-color:#fff;
  border:1px solid var(--linie);color:var(--akzent-dunkel);
  transition:background-color var(--dur-2) var(--ease-out),color var(--dur-2) var(--ease-out),
    border-color var(--dur-2) var(--ease-out),transform var(--dur-1) var(--ease-out)}
.fk-pfeil:hover{background-color:var(--akzent);border-color:var(--akzent);color:#fff}
.fk-pfeil:active{transform:scale(.94)}
.fk-zaehler{min-width:78px;text-align:center;font-size:14px;font-weight:500;
  letter-spacing:.06em;color:var(--nebentext);font-variant-numeric:tabular-nums;white-space:nowrap}
.fk-zaehler b{font-weight:700;color:var(--tinte)}
.fk-knopfreihe{justify-content:center;margin-top:26px}

/* ---- Handy: Nachbarn schauen nur halb herein ------------------------------ */
@media (max-width:640px){
  .fk{--kb:min(64vw,300px)}
  .fk-leiste{gap:2px;left:10px;right:10px}
  .fk-karte{transform:translateX(calc(var(--d,0) * 76%)) rotateY(calc(var(--d,0) * -14deg))
    scale(calc(1 - var(--a,0) * .18))}
}

/* ---- Vor dem Start, ohne JavaScript, Bewegung reduzieren ------------------ */
.fk:not(.fk-bereit) .fk-karte:not(:first-child){opacity:0}
html:not(.js) .fk-karte:not(:first-child){display:none}
html:not(.js) .fk-steuer,html:not(.js) .fk-rahmen{display:none}
@media (prefers-reduced-motion:reduce){
  .fk-jetzt i{transform:scaleX(1)}
  .fk-film{display:none}
}