/* Natural High · der Spieler
 ---- Das Kino -------------------------------------------------------
   Der Weg hinein liegt in der Mitte des Zeichens. Von dort geht das
   Video direkt in die Ecke unten rechts und laeuft mit, waehrend man
   weiterliest. Von der Ecke aus laesst es sich gross machen.
   ---------------------------------------------------------------------- */

/* Der Knopf im Zeichen. Er atmet nicht mit - sonst waere er ein
   bewegliches Ziel. */
.zeichen-huelle{position:relative}
.kino-start{
  position:absolute; left:50%; top:50%;
  transform:translate(-50%,-50%);
  width:3.2rem; height:3.2rem; padding:0;
  display:grid; place-items:center;
  background:none; border:0; border-radius:50%;
  color:var(--fg); cursor:pointer; z-index:3;
  transition:transform .6s cubic-bezier(.22,.61,.36,1);
  /* Er pulsiert leise im Takt des Atems - gegenlaeufig zum Ring, damit
     sich beide nie decken und es lebendig bleibt. */
  animation:kino-puls 9.9s ease-in-out infinite;
}
.kino-start::before, .kino-start::after{content:none}
.kino-start svg{width:1.75rem; height:1.75rem; fill:currentColor; margin-left:.14rem}
.kino-start:hover{transform:translate(-50%,-50%) scale(1.14); animation-play-state:paused; opacity:1}
@keyframes kino-puls{
  0%    {opacity:.9;  filter:drop-shadow(0 0 10px rgba(236,232,225,.35))}
  43.43%{opacity:.52; filter:drop-shadow(0 0 2px rgba(236,232,225,.08))}
  100%  {opacity:.9;  filter:drop-shadow(0 0 10px rgba(236,232,225,.35))}
}

/* Der Spieler. Ein schmaler Streifen unten rechts: das Bild klein
   daneben, ein Zaehler, drei Knoepfe. Die Lage kommt aus right/bottom,
   nicht aus transform - genau wie die Buehne der ONE-App. Ein transform
   wird von jeder Animation ueberschrieben, die dieselbe Eigenschaft
   anfasst; eine Position nicht.
   ---------------------------------------------------------------------- */
.kino-buehne{
  position:fixed; z-index:6;
  --breit:min(19rem, 76vw);
  width:var(--breit);
  right:14px; bottom:calc(14px + env(safe-area-inset-bottom));
  display:flex; align-items:center; gap:.55rem;
  padding:.5rem .55rem .5rem .5rem;
  border:1px solid var(--line); border-radius:14px;
  background:rgba(11,13,16,.92);
  backdrop-filter:blur(14px); -webkit-backdrop-filter:blur(14px);
  box-shadow:0 14px 40px rgba(0,0,0,.55);
  transition:right .55s cubic-bezier(.22,.61,.36,1), box-shadow .55s ease;
}
.kino-buehne[hidden]{display:none}

/* Das Bild bleibt sichtbar - so verlangt es YouTube, und es zeigt auch,
   woher der Ton kommt. */
.kino-bild{
  position:relative; flex:0 0 auto;
  width:4.6rem; aspect-ratio:16/9;
  border-radius:9px; overflow:hidden; background:var(--bg-2);
}
.kino-bild iframe{position:absolute; inset:0; width:100%; height:100%; border:0}

.kino-mitte{flex:1 1 auto; min-width:0; display:flex; flex-direction:column; gap:.18rem}
.kino-titel{
  font-size:.72rem; letter-spacing:.02em; color:var(--fg);
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
  text-transform:none;
}
.kino-zaehler{
  font-size:.62rem; letter-spacing:.16em; text-transform:uppercase;
  color:#5b6670;
}

.kino-bedien{display:flex; align-items:center; gap:.1rem; flex:0 0 auto}
.kino-bedien button{
  width:1.9rem; height:1.9rem; padding:0; border:0; border-radius:50%;
  background:none; color:var(--fg-dim);
  display:grid; place-items:center; cursor:pointer;
  transition:color .4s ease, background .4s ease;
}
.kino-bedien button::before, .kino-bedien button::after{content:none}
.kino-bedien button:hover{color:var(--fg); background:rgba(255,255,255,.06)}
.kino-bedien svg{width:15px; height:15px; fill:none; stroke:currentColor;
                 stroke-width:2; stroke-linecap:round; stroke-linejoin:round}
.kino-bedien .voll svg{fill:currentColor; stroke:none}

/* Eingeklappt: der Streifen faehrt nach rechts hinaus, der Griff mit dem
   Pfeil bleibt stehen. Der Ton laeuft weiter. */
.kino-buehne.eingeklappt{
  right:calc(2.9rem - var(--breit));
  box-shadow:0 10px 30px rgba(0,0,0,.45);
}
.kino-buehne.eingeklappt .kino-bild,
.kino-buehne.eingeklappt .kino-mitte,
.kino-buehne.eingeklappt .kino-bedien{opacity:0; pointer-events:none;
                                      transition:opacity .35s ease}

/* Der Griff steht ganz links im Streifen - als eigenes Element, nicht
   darueber gelegt. Ein iframe faengt Klicks ab; ein Knopf, der darunter
   liegt, ist nicht mehr zu treffen. Genau daran ist das Einklappen
   gescheitert. */
.kino-klapp{
  flex:0 0 auto; z-index:4;
  width:1.8rem; height:1.8rem; padding:0; border:0; border-radius:50%;
  background:none; color:var(--fg-dim);
  display:grid; place-items:center; cursor:pointer;
  transition:color .4s ease;
}
.kino-klapp::before, .kino-klapp::after{content:none}
.kino-klapp:hover{color:var(--fg)}
.kino-klapp svg{width:15px; height:15px; fill:none; stroke:currentColor; stroke-width:2;
                stroke-linecap:round; stroke-linejoin:round;
                transition:transform .55s cubic-bezier(.22,.61,.36,1)}
/* Ein Zeichen, zwei Richtungen. */
.kino-buehne.eingeklappt .kino-klapp svg{transform:rotate(180deg)}

@media (min-width: 780px){
  .kino-buehne{--breit:22rem; right:20px; bottom:20px}
  .kino-buehne.eingeklappt{right:calc(3.1rem - var(--breit))}
  .kino-bild{width:5.4rem}
}

@media (prefers-reduced-motion: reduce){
  .kino-start{animation:none; opacity:.85}
}