/* =========================================================
   Prihlásenie: štúdio za kartou (prihlasenie-scena.js)
   ---------------------------------------------------------
   Na desktope karta vľavo, vpravo cez celú výšku Michal z bodiek
   ako na monitore úvodu, s páskou PROGRAM a kontrolkou ON AIR.
   Kontrolka sa rozsvieti, keď niekto píše do formulára (zapína
   sa reláciu). Dole beží žltý pás s témami. Na telefóne je
   portrét nad kartou, stlmený a stratí sa do tmy.
   ========================================================= */

.auth-page--scena {
  isolation: isolate;
  padding-bottom: 4rem;
}
.auth-page__stred { position: relative; z-index: 2; display: grid; place-items: center; }
/* Obal cez celú šírku nesmie zakryť portrét: klik a kurzor idú
   cez neho na Michala (šošovka v poloton.js), karta ich chytá sama. */
.auth-page__stred { pointer-events: none; }
.auth-page__stred .auth-card { pointer-events: auto; }

.auth-scena { position: absolute; inset: 0; z-index: 0; overflow: hidden; }

.auth-scena__portret {
  position: absolute;
  right: 0; top: 0;
  width: 100%; height: 62svh;
  -webkit-mask-image: linear-gradient(180deg, #000 30%, transparent 100%);
  mask-image: linear-gradient(180deg, #000 30%, transparent 100%);
  opacity: 0.42;
}
.auth-scena__portret img {
  width: 100%; height: 100%;
  object-fit: cover; object-position: 50% 20%;
  display: block;
  transition: opacity .9s ease .2s;
}
.auth-scena__portret.je-poloton img { opacity: 0; }
.auth-scena__portret .poloton { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }


/* Kto je na obraze, ako na monitore úvodu. Len na desktope. */
.auth-scena__who {
  position: fixed; z-index: 1; display: none;
  right: clamp(1.5rem, 4vw, 4rem); bottom: 2rem;
  margin: 0;
  align-items: center; gap: 0.6rem;
  font-size: 0.8rem; font-weight: 600; color: var(--paper-dim);
}

/* Karta na tme stojí ako panel pultu. */
.auth-page--scena .auth-card {
  box-shadow: inset 0 1px 0 rgba(242, 237, 228, .05), 0 30px 60px -30px rgba(0, 0, 0, .9);
}

/* Telefón a tablet: karta začína nižšie, aby bol Michal nad ňou vidieť. */
@media (max-width: 1023px) {
  /* Formulár je hlavná vec: portrét len nakukne nad kartu. */
  .auth-page--scena { place-items: start center; padding-top: 7.5rem; }
  .auth-scena__portret { height: 15rem; opacity: 0.6; }
}

@media (min-width: 1024px) {
  .auth-page__stred { place-items: center start; }
  .auth-page--scena .auth-card { margin-left: clamp(0rem, 4vw, 4rem); }
  /* Portrét stojí pri scrollovaní na mieste a plátno má len výšku
     okna, nie celej stránky (menej bodiek na prekreslenie). */
  .auth-scena__portret {
    position: fixed;
    width: 60vw; height: 100svh;
    opacity: 1;
    -webkit-mask-image: linear-gradient(90deg, transparent 0%, #000 30%);
    mask-image: linear-gradient(90deg, transparent 0%, #000 30%);
    pointer-events: auto;
  }
  .auth-scena__who { display: inline-flex; }
}

@media (prefers-reduced-motion: no-preference) {
  .auth-page--scena .auth-card { animation: pohyb-monitor 700ms var(--e-out) backwards 120ms; }
  .auth-scena__portret { animation: auth-portret 1400ms var(--e-out) backwards; }
  .auth-scena__who { animation: pohyb-nabeh 600ms var(--e-out) backwards 900ms; }
}
@keyframes auth-portret { from { opacity: 0; } }

/* ---------- Formulár: plynulé zaostrenie a hovery ---------- */
.auth-page--scena .field input { transition: border-color 200ms ease, background-color 200ms ease; }
.auth-page--scena .field input:hover:not(:focus):not(.is-bad) { border-color: var(--sand-deep); }
.auth-page--scena .field__eye { transition: color 180ms ease, background-color 180ms ease, transform 180ms var(--e-out); }
.auth-page--scena .field__eye:active { transform: scale(0.92); }
.auth-page--scena .switch-mode button, .auth-page--scena #forgotBtn {
  background-image: linear-gradient(var(--yellow), var(--yellow));
  background-repeat: no-repeat; background-position: 100% 100%; background-size: 0% 2px;
  transition: background-size 260ms var(--e-out), color 180ms ease;
}
@media (hover: hover) and (pointer: fine) {
  .auth-page--scena .switch-mode button:hover, .auth-page--scena #forgotBtn:hover { background-position: 0 100%; background-size: 100% 2px; text-decoration: none; }
}

/* ---------- Michal sa zaostrí ----------
   Kým je kurzor inde, portrét je rozostrený a stlmený ako záber
   kamery mimo ostrosti. Keď naň prejdeš myšou, zaostrí sa a bodky
   pod kurzorom zožltnú (šošovka v poloton.js). Len pre myš: na
   dotyku je portrét ostrý stále. Filter sa mení len pri prechode,
   inak stojí, takže nesekne. */
@media (hover: hover) and (pointer: fine) and (min-width: 1024px) {
  .auth-scena__portret {
    filter: blur(7px) brightness(0.62);
    transition: filter 700ms var(--e-out);
  }
  .auth-scena__portret:hover { filter: blur(0) brightness(1); }
}
@media (hover: hover) and (pointer: fine) and (min-width: 1024px) and (prefers-reduced-motion: reduce) {
  .auth-scena__portret { transition: filter 200ms ease; }
}