/* Anmelden (layouts/guest.blade.php, components/authentication-card-tempomedia)
   Links eine dunkle Buehne - bewusst in beiden Themen dunkel, wie ein Kinosaal -
   mit dem TEMPO-Schriftzug der Navigation. Ein Lichtstreifen faehrt beim Laden
   darueber (wie die Ladeanzeige), danach alle paar Sekunden leise wieder; beim
   Absenden laeuft er schnell und ohne Pause. Rechts das Formular in den Tokens. */

.tm-auth-body { margin: 0; background: var(--tm-bg); color: var(--tm-text); font-family: var(--tm-font); -webkit-font-smoothing: antialiased; }

.tm-auth { min-height: 100vh; display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(380px, 1fr); }

/* ---------- Buehne ---------- */
.tm-auth__stage {
  --stage: #0c0c0f; --stage-ink: #f3efe9; --stage-dim: rgba(243, 239, 233, .34);
  position: relative; overflow: hidden; isolation: isolate;
  background: var(--stage); color: var(--stage-ink);
  display: flex; flex-direction: column; justify-content: center; align-items: center; padding: 48px;
  box-shadow: inset -1px 0 0 rgba(255, 255, 255, .07);   /* Kante zum Formular, sichtbar im dunklen Thema */
}
/* wanderndes Licht: ein warmer Kegel in der Akzentfarbe, sehr langsam */
.tm-auth__light {
  position: absolute; inset: -30%; z-index: -2;
  background:
    radial-gradient(38% 30% at 30% 40%, rgba(232, 72, 48, .20), transparent 70%),
    radial-gradient(30% 26% at 72% 62%, rgba(255, 196, 150, .12), transparent 70%);
  filter: blur(20px);
  animation: tm-auth-drift 40s ease-in-out infinite alternate;
}
/* Filmkorn */
.tm-auth__grain {
  position: absolute; inset: -50%; z-index: -1; opacity: .16; pointer-events: none;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='160' height='160'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 1  0 0 0 0 1  0 0 0 0 1  0 0 0 .55 0'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>");
  animation: tm-auth-grain .9s steps(6) infinite;
}

/* Mosaik aus Film-Stills (login:mosaic), abgedunkelt und langsam
   schraeg wandernd. Das Bild kachelt nahtlos (Raster), die Bewegung ist eine Kachel lang. */
.tm-auth__wall {
  position: absolute; inset: 0; z-index: -3;
  background: var(--wall) repeat 0 0 / 1304px auto;
  filter: saturate(.75) brightness(.5);
  animation: tm-auth-wall 160s linear infinite;
}
.tm-auth__stage.is-wall::after {
  content: ""; position: absolute; inset: 0; z-index: -2; pointer-events: none;
  background: radial-gradient(70% 60% at 50% 50%, rgba(12, 12, 15, .35), rgba(12, 12, 15, .82));
}
.tm-auth__stage.is-wall .tm-auth__light { opacity: .6; }
.tm-auth__stage.is-wall .tm-auth__wm { opacity: .95; }
/* Schatten am Rahmen: auf dem Logo selbst (Maske) wuerde er weggeschnitten */
.tm-auth__stage.is-wall .tm-auth__mark { filter: drop-shadow(0 2px 30px rgba(0, 0, 0, .55)); }
@keyframes tm-auth-wall { to { background-position: -1304px -558px; } }
@media (prefers-reduced-motion: reduce) { .tm-auth__wall { animation: none; } }

.tm-auth__mark { display: grid; justify-items: center; gap: 6px; }
.tm-auth__wm {
  font-size: clamp(88px, 12vw, 190px); height: .9em;
  color: var(--stage-ink); opacity: .82;
  /* dezent: einmal beim Laden aus leichter Unschaerfe scharf, die Buchstaben
     ruecken sanft zusammen - danach steht der Schriftzug still */
  animation: tm-auth-in 1.8s cubic-bezier(.2, .7, .1, 1) .15s both;
}
.tm-auth__sub { font-size: 13px; letter-spacing: .32em; text-transform: uppercase; color: var(--stage-dim); padding-left: .32em; }
.tm-auth__claim { position: absolute; left: 48px; bottom: 40px; margin: 0; font-size: 13px; color: var(--stage-dim); max-width: 34ch; }

/* beim Absenden: leises Atmen */
.is-busy .tm-auth__wm { animation: tm-auth-breathe 1.6s ease-in-out infinite; }

/* ---------- Formular ---------- */
.tm-auth__side { display: flex; flex-direction: column; justify-content: center; align-items: center; padding: 40px 24px 24px; }
.tm-auth__card { width: 100%; max-width: 360px; }
.tm-auth__mini { display: none; align-items: baseline; gap: 8px; margin-bottom: 28px; font-size: 12px; color: var(--tm-faint); }
.tm-auth__mini .tm-logo { font-size: 28px; color: var(--tm-text); align-self: center; }
.tm-auth__h { margin: 0; font-size: 26px; font-weight: 600; letter-spacing: -.02em; }
.tm-auth__lead { margin: 6px 0 24px; font-size: 13.5px; color: var(--tm-muted); }

.tm-auth__form { display: grid; gap: 8px; }
.tm-auth__field { display: grid; gap: 6px; margin-top: 8px; }
.tm-auth__field > span:first-child { display: flex; justify-content: space-between; align-items: baseline; font-size: 12.5px; font-weight: 600; color: var(--tm-muted); }
.tm-auth__form .tm-input { width: 100%; height: 42px; font-size: 14px; padding: 0 12px; }
.tm-auth__form .tm-input.is-bad { border-color: var(--tm-accent); }
.tm-auth__forgot { font-weight: 500; font-size: 12.5px; color: var(--tm-muted); text-decoration: underline; text-decoration-color: var(--tm-border-2); text-underline-offset: 3px; }
.tm-auth__forgot:hover { color: var(--tm-text); }
.tm-auth__pw { position: relative; display: block; }
.tm-auth__pw .tm-input { padding-right: 64px; }
.tm-auth__show {
  position: absolute; right: 6px; top: 50%; transform: translateY(-50%); height: 30px; padding: 0 10px;
  border: 0; border-radius: 6px; background: transparent; color: var(--tm-muted); font-size: 12.5px; font-weight: 500; cursor: pointer;
}
.tm-auth__show:hover { background: var(--tm-hover); color: var(--tm-text); }
.tm-auth__err { font-size: 12.5px; color: var(--tm-accent); }
.tm-auth__ok { margin-bottom: 14px; padding: 10px 12px; border-radius: var(--tm-r); font-size: 13px; color: var(--tm-good); background: color-mix(in srgb, var(--tm-good) 10%, transparent); }
.tm-auth__remember { display: flex; align-items: center; gap: 9px; margin: 12px 0 6px; font-size: 13px; color: var(--tm-muted); cursor: pointer; }
.tm-auth__remember input { width: 16px; height: 16px; accent-color: var(--tm-accent); }
.tm-auth__submit { height: 44px; justify-content: center; gap: 8px; font-size: 14px; margin-top: 8px; }
.tm-auth__submit svg { width: 16px; height: 16px; transition: transform .15s ease; }
.tm-auth__submit:hover svg { transform: translateX(3px); }
.tm-auth__submit:disabled { opacity: .75; cursor: progress; }
.tm-auth__back { margin-top: 10px; font-size: 13px; color: var(--tm-muted); text-decoration: none; justify-self: center; }
.tm-auth__back:hover { color: var(--tm-text); }
.tm-auth__foot { margin: 28px 0 0; font-size: 11.5px; color: var(--tm-faint); }

@keyframes tm-auth-in {
  from { opacity: 0; filter: blur(10px); letter-spacing: .09em; transform: translateY(6px); }
  to { opacity: .82; filter: blur(0); letter-spacing: .02em; transform: none; }
}
@keyframes tm-auth-breathe { 0%, 100% { opacity: .82; } 50% { opacity: .45; } }
@keyframes tm-auth-drift { from { transform: translate(-4%, -3%) rotate(0deg); } to { transform: translate(5%, 4%) rotate(8deg); } }
@keyframes tm-auth-grain {
  0% { transform: translate(0, 0); } 20% { transform: translate(-3%, 2%); } 40% { transform: translate(2%, -3%); }
  60% { transform: translate(-2%, -1%); } 80% { transform: translate(3%, 3%); } 100% { transform: translate(0, 0); }
}

/* schmal: Buehne als Band oben */
@media (max-width: 860px) {
  .tm-auth { grid-template-columns: minmax(0, 1fr); }
  .tm-auth__stage { min-height: 200px; padding: 32px 16px; }
  .tm-auth__wm { font-size: clamp(64px, 20vw, 110px); }
  .tm-auth__claim { display: none; }
  .tm-auth__side { justify-content: flex-start; padding-top: 32px; }
}

@media (prefers-reduced-motion: reduce) {
  .tm-auth__light, .tm-auth__grain, .tm-auth__wm, .is-busy .tm-auth__wm { animation: none; }
  .tm-auth__wm { opacity: .82; }
}