/* =========================================================================
   DAS FILM-TOR (Entwurf, 29. Oktober)
   Oliver: *„auf der Website — da steht dann open gate in tor — dann scannt
   ein Laser … wird grün, Tor geht auf"*. Klick aufs Tor → Film (Blender,
   Cycles, 9 s mit Ton) → das Wasser bleibt stehen, und in ihm sitzt die
   Anmeldung. Abgeschickt wird sie wie bisher von konto.js (#torform, gleiche
   Kennungen) — ohne zweite Anmeldung direkt ins Spiel.

   Alle Lagen messen in Prozent des FILMBILDES (1920×1046). Das Tor sitzt bei
   50,06 % / 59,94 %, sein Wasser ist 29 % der Bildbreite groß. Auf dem
   Telefon ist das Bild auf 760×1046 um das Tor beschnitten: dort 50 % /
   59,94 %, Wasser 73,3 % der Breite.
   ========================================================================= */
.tor.filmtor{background:#050807}
.filmtor .torbild,.filmtor .torhandy{display:none}
.torfilm{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);
  width:max(100%,calc(100svh * 1920 / 1046));aspect-ratio:1920/1046;z-index:1;
  --tx:50.06%;--ty:59.94%;--tw:29%;--fw:15.6%}
.torfilm>picture,.torfilm>video{position:absolute;inset:0;width:100%;height:100%;display:block;pointer-events:none}
.torfilm>picture img,.torfilm>video{width:100%;height:100%;object-fit:cover;display:block;max-width:none}
.torfilm>video{opacity:0;transition:opacity .25s linear}
.filmtor.spielt #torOeffnen{opacity:1}
.filmtor.offen #torSchleife.laeuft{opacity:1}
.torfilm>.offenbild{opacity:0;transition:opacity .4s}
.filmtor.offen .offenbild{opacity:1}
/* Ohne Javascript gibt es keinen Film: dann steht das Tor gleich offen und
   die Anmeldung darin ist sofort benutzbar (Formular mit method=post bleibt
   die Reißleine, siehe index.html). */
html:not(.js) .offenbild{opacity:1}

/* ---- Der Knopf: das Tor selbst ----------------------------------------- */
.torknopf{position:absolute;left:var(--tx);top:var(--ty);width:var(--tw);aspect-ratio:1;
  transform:translate(-50%,-50%);border-radius:50%;border:0;background:none;cursor:pointer;
  z-index:4;padding:0;color:inherit;-webkit-tap-highlight-color:transparent}
.torknopf:focus-visible{outline:2px solid #6fe3b4;outline-offset:6px}
.torruf{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);
  font-family:'Lora',Georgia,serif;font-weight:700;font-size:clamp(15px,1.55vw,30px);
  letter-spacing:.42em;padding-left:.42em;text-transform:uppercase;white-space:nowrap;color:#ffd9c8;
  text-shadow:0 0 10px rgba(255,70,40,.85),0 0 28px rgba(255,40,20,.55),0 2px 8px #000;
  animation:torPuls 2.6s ease-in-out infinite;transition:opacity .35s,letter-spacing .35s,color .35s}
.torknopf:hover .torruf,.torknopf:focus-visible .torruf{color:#fff;letter-spacing:.48em;padding-left:.48em}
.torknopf .torladen{position:absolute;inset:18%;border-radius:50%;border:2px solid rgba(255,190,160,.0);
  border-top-color:rgba(255,190,160,.85);opacity:0;transition:opacity .3s}
.filmtor.laedt .torladen{opacity:1;animation:torDreh 1s linear infinite}
@keyframes torPuls{0%,100%{opacity:.45}50%{opacity:1}}
@keyframes torDreh{to{transform:rotate(360deg)}}
.filmtor.spielt .torknopf,.filmtor.offen .torknopf{pointer-events:none}
.filmtor.spielt .torruf,.filmtor.offen .torruf,html:not(.js) .torknopf{opacity:0;animation:none}
html:not(.js) .torknopf{display:none}

/* ---- Die Anmeldung im Wasser ------------------------------------------ */
.filmtor .torlage{position:absolute;left:var(--tx);top:var(--ty);width:var(--fw);
  aspect-ratio:auto;transform:translate(-50%,-46%);z-index:5;
  display:flex;flex-direction:column;gap:clamp(8px,.75vw,14px);
  opacity:0;pointer-events:none;transition:opacity .8s ease,transform .8s ease}
.filmtor.offen .torlage,html:not(.js) .filmtor .torlage{opacity:1;pointer-events:auto;transform:translate(-50%,-50%)}
.filmtor .torfeld{position:static;width:auto;height:auto;display:flex;flex-direction:column;gap:5px}
.filmtor .tormarke{position:static;margin:0;font-family:'Poppins',sans-serif;
  font-size:clamp(9.5px,.66vw,12.5px);letter-spacing:.22em;background:none;color:#f0dfae;
  text-shadow:0 2px 6px rgba(0,0,0,.95),0 0 14px rgba(0,0,0,.6)}
.filmtor .torfeld input{height:clamp(34px,2.3vw,44px);border-radius:999px;
  border:1px solid rgba(227,182,97,.72);background:rgba(4,10,8,.74);color:#f6eee0;
  font-size:clamp(13px,.9vw,16px);padding:0 16px;backdrop-filter:blur(3px);-webkit-backdrop-filter:blur(3px)}
/* Der Name steht IM Feld (Oliver, 29. Oktober: Marke und Feldtext doppelt
   sah falsch aus); die Marke bleibt unsichtbar für Vorleseprogramme. */
.filmtor .tormarke{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.filmtor .torfeld input::placeholder{color:rgba(240,223,174,.6);letter-spacing:.14em;font-size:.8em;text-transform:uppercase}
.filmtor .torfeld input:focus{border-color:#6fe3b4;box-shadow:0 0 16px rgba(111,227,180,.35)}
.filmtor .tortun{position:static;transform:none;display:flex;flex-direction:column;gap:8px;margin-top:2px}
.filmtor .tortun .knopf{width:100%;text-align:center;padding:10px 12px;font-size:clamp(11.5px,.82vw,14px);letter-spacing:.16em}
.filmtor .tortun a.knopf{align-self:center;width:auto;white-space:normal;background:rgba(5,9,8,.7);
  border:0;border-radius:999px;padding:4px 14px;font-size:clamp(10.5px,.7vw,12.5px);line-height:1.4;
  letter-spacing:.12em;color:#f0dfae;text-shadow:0 1px 3px #000;backdrop-filter:blur(3px);-webkit-backdrop-filter:blur(3px)}
.filmtor .tortun a.knopf:hover{color:#fff;background:rgba(5,9,8,.85);text-decoration:underline}
.filmtor .tormeldung{position:static;transform:none;white-space:normal;text-align:center;align-self:center;
  font-size:clamp(11.5px,.78vw,14px);line-height:1.35;padding:5px 14px;border-radius:12px;
  background:rgba(5,9,8,.8);backdrop-filter:blur(3px);-webkit-backdrop-filter:blur(3px)}
.filmtor .tormeldung:empty{display:none}

/* ---- Überspringen ------------------------------------------------------ */
.torweiter{position:absolute;right:22px;bottom:22px;z-index:7;opacity:0;pointer-events:none;
  font-family:'Poppins',sans-serif;font-size:.74rem;letter-spacing:.16em;text-transform:uppercase;
  color:var(--sand);background:rgba(10,7,4,.55);border:1px solid rgba(168,118,47,.6);border-radius:999px;
  padding:8px 16px;cursor:pointer;transition:opacity .4s}
.filmtor.spielt .torweiter{opacity:.85;pointer-events:auto}
.torweiter:hover{opacity:1;color:var(--gold);border-color:var(--gold)}

/* Während der Film läuft, treten Worte und Pfeil zurück. */
.filmtor .torworte,.filmtor .runter{transition:opacity .6s}
.filmtor.spielt .torworte,.filmtor.spielt .runter{opacity:.25}
.filmtor .torschleier{background:linear-gradient(180deg, rgba(16,13,9,.55) 0%, rgba(16,13,9,0) 16%,
    rgba(16,13,9,0) 70%, rgba(16,13,9,.75) 90%, var(--tinte) 100%)}

/* ---- Telefon: das Tor groß, Worte darunter ----------------------------- */
@media (max-width:900px){
  .tor.filmtor{display:block;height:auto;min-height:0;padding-top:var(--kopfhoehe,112px);background:#050807}
  .torfilm{position:relative;top:auto;left:auto;transform:none;width:100%;aspect-ratio:760/1046;
    max-height:calc(100svh - var(--kopfhoehe,112px));margin:0 auto;
    max-width:calc((100svh - var(--kopfhoehe,112px)) * 760 / 1046);
    --tx:50%;--tw:73.3%;--fw:52%}
  .torruf{font-size:clamp(15px,4.6vw,24px)}
  /* Auf dem Telefon ist das Wasser zu klein für Marken über den Feldern:
     dort steht der Name IM Feld (placeholder), die Marke bleibt für Leser. */
  .filmtor .torlage{gap:8px;--fw:56%}
  .filmtor .tormarke{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
  .filmtor .torfeld input{height:38px;font-size:16px}
  .filmtor .torfeld input::placeholder{color:rgba(240,223,174,.62);letter-spacing:.12em;font-size:12px;text-transform:uppercase}
  .filmtor .tortun .knopf{font-size:12.5px}
  .filmtor .tortun a.knopf{font-size:11.5px}
  .filmtor .tormeldung{font-size:12.5px}
  .torweiter{bottom:auto;top:calc(var(--kopfhoehe,112px) + 10px);right:12px}
  .filmtor .torschleier{display:none}
  .filmtor .torlogo{display:none}
  .filmtor .runter{display:none}
}
@media (prefers-reduced-motion:reduce){
  .torruf,.filmtor.laedt .torladen{animation:none}
  .torruf{opacity:1}
}