/* PRO Mail — prihlasovacia stránka. Nadväzuje na tokeny z app.css. */

body.auth {
  display: block;
  background: #fafaf8;
}

.auth-scene {
  position: relative;
  width: 100%;
  min-height: 100vh;
  min-height: 100svh;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  font-family: var(--sans);
  color: var(--ink);
  background:
    radial-gradient(1100px 640px at 82% 6%, #eaf6ee 0%, rgba(255,255,255,0) 60%),
    radial-gradient(900px 600px at 4% 96%, #f0f4ec 0%, rgba(255,255,255,0) 58%),
    #fafaf8;
}

@supports (color: oklch(0.5 0.1 150)) {
  .auth-scene {
    background:
      radial-gradient(1100px 640px at 82% 6%, oklch(0.96 0.035 150) 0%, rgba(255,255,255,0) 60%),
      radial-gradient(900px 600px at 4% 96%, oklch(0.97 0.02 120) 0%, rgba(255,255,255,0) 58%),
      #fafaf8;
  }
}

/* ------------------------------------------------- letiace obálky v pozadí */

@keyframes fly  { from { transform: translateX(-22vw); } to { transform: translateX(130vw); } }
@keyframes bob  { 0% { transform: translateY(0) rotate(-7deg); } 50% { transform: translateY(-28px) rotate(6deg); } 100% { transform: translateY(0) rotate(-7deg); } }
@keyframes rise { from { opacity: 0; transform: translateY(16px); } to { opacity: 1; transform: none; } }
@keyframes fade { from { opacity: 0; } to { opacity: 1; } }
@keyframes flap { 0%, 88% { transform: rotateX(0deg); } 94% { transform: rotateX(-155deg); } 100% { transform: rotateX(0deg); } }

.auth-bg { position: absolute; inset: 0; pointer-events: none; overflow: hidden; }
.auth-bg .track { position: absolute; left: 0; animation-name: fly; animation-timing-function: linear; animation-iteration-count: infinite; }
.auth-bg .float { animation-name: bob; animation-timing-function: ease-in-out; animation-iteration-count: infinite; }

.env { position: relative; }
.env .paper {
  position: absolute; inset: 0; background: #fff; border: 1px solid #e6e7e2; border-radius: inherit;
}
.env.soft .paper { border-color: #e8e9e4; }
.env.shadow .paper { box-shadow: 0 24px 44px -26px rgba(23,26,22,0.45); }
.env .flap {
  position: absolute; top: 0; left: 0; right: 0; height: 62%;
  background: linear-gradient(#f7f8f4, #eef0ea);
  clip-path: polygon(0 0, 100% 0, 50% 100%);
  border-radius: inherit; border-bottom-left-radius: 0; border-bottom-right-radius: 0;
}
.env .line { position: absolute; height: 4px; border-radius: 2px; background: #edefe8; }
.env .chip { position: absolute; width: 16px; height: 16px; border-radius: 4px; background: #dbeee2; }
@supports (color: oklch(0.5 0.1 150)) { .env .chip { background: oklch(0.92 0.06 150); } }

/* ------------------------------------------------------------- rozloženie */

.auth-main {
  position: relative; flex: 1;
  display: flex; align-items: center; justify-content: center;
  padding: 56px 48px 40px;
}
.auth-grid {
  width: 100%; max-width: 1060px;
  display: grid; grid-template-columns: 1.05fr 0.95fr; gap: 80px; align-items: center;
}

/* ---------------------------------------------------------- ľavý stĺpec */

.auth-left { display: flex; flex-direction: column; gap: 24px; max-width: 500px; }

.auth-eyebrow {
  font-family: var(--mono); font-size: 11.5px; letter-spacing: 0.16em; text-transform: uppercase;
  color: #2f7d52;
  animation: rise 0.8s cubic-bezier(0.2,0.8,0.25,1) 0.05s both;
}
@supports (color: oklch(0.5 0.1 150)) { .auth-eyebrow { color: oklch(0.5 0.13 150); } }

.auth-title {
  font-size: 48px; font-weight: 800; letter-spacing: -0.04em; line-height: 1.03; margin: 0;
  animation: rise 0.9s cubic-bezier(0.2,0.8,0.25,1) 0.14s both;
}
.auth-lede {
  font-size: 16px; line-height: 1.55; color: #6c7168; margin: 0;
  animation: rise 0.9s cubic-bezier(0.2,0.8,0.25,1) 0.24s both;
}

.auth-stats {
  display: flex; border: 1px solid var(--line); border-radius: 10px;
  background: rgba(255,255,255,0.72); overflow: hidden;
  animation: rise 0.9s cubic-bezier(0.2,0.8,0.25,1) 0.34s both;
}
.auth-stats .cell { flex: 1; padding: 16px 18px; display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.auth-stats .lbl { font-size: 10.5px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--muted); white-space: nowrap; }
.auth-stats .val { font-size: 22px; font-weight: 700; font-family: var(--mono); letter-spacing: -0.02em; }
.auth-stats .val.text { font-family: var(--sans); font-size: 15px; letter-spacing: -0.01em; white-space: nowrap; }
.auth-stats .sep { width: 1px; background: #eceee8; flex: none; }

/* ------------------------------------------------------------ karta */

.auth-card-wrap { position: relative; animation: rise 1s cubic-bezier(0.2,0.8,0.25,1) 0.2s both; }
.auth-card {
  position: relative;
  background: rgba(255,255,255,0.9);
  -webkit-backdrop-filter: blur(14px);
  backdrop-filter: blur(14px);
  border: 1px solid var(--line); border-radius: 12px; padding: 34px 32px;
  box-shadow: 0 40px 80px -50px rgba(23,26,22,0.6), 0 1px 3px rgba(23,26,22,0.05);
  display: flex; flex-direction: column; gap: 20px;
}

.auth-head { display: flex; flex-direction: column; gap: 7px; align-items: flex-start; }
.auth-mark { position: relative; width: 44px; height: 30px; perspective: 300px; margin-bottom: 8px; }
.auth-mark .paper {
  position: absolute; inset: 0; background: #eef8f1; border: 1px solid #bfe0cd; border-radius: 5px;
}
.auth-mark .flap {
  position: absolute; top: 0; left: 0; right: 0; height: 64%; transform-origin: top;
  animation: flap 6s ease-in-out infinite;
  background: linear-gradient(#d8eee1, #c7e6d3);
  clip-path: polygon(0 0, 100% 0, 50% 100%);
  border-radius: 5px 5px 0 0;
}
@supports (color: oklch(0.5 0.1 150)) {
  .auth-mark .paper { background: oklch(0.97 0.02 150); border-color: oklch(0.88 0.05 150); }
  .auth-mark .flap { background: linear-gradient(oklch(0.93 0.05 150), oklch(0.89 0.06 150)); }
}

.auth-h { font-size: 23px; font-weight: 700; letter-spacing: -0.025em; margin: 0; }
.auth-sub { font-size: 13.5px; color: #6c7168; margin: 0; }

.auth-fields { display: flex; flex-direction: column; gap: 14px; }
.fld { display: flex; flex-direction: column; gap: 6px; }
.fld > .cap {
  display: flex; justify-content: space-between; align-items: baseline;
  font-size: 11px; letter-spacing: 0.07em; text-transform: uppercase; font-weight: 600; color: #6c7168;
}
.fld > .cap a { font-size: 12px; letter-spacing: 0; text-transform: none; font-weight: 500; }
.auth-card input[type=email],
.auth-card input[type=password] {
  height: 44px; border: 1px solid var(--line-2); border-radius: 7px; background: #fff;
  padding: 0 13px; font-family: var(--sans); font-size: 14px; color: var(--ink); width: 100%;
  outline: none; transition: border-color 0.2s ease, box-shadow 0.2s ease;
}
.auth-card input[type=email]:focus,
.auth-card input[type=password]:focus {
  border-color: #3f9c68; box-shadow: 0 0 0 3px #e2f2e8;
}
@supports (color: oklch(0.5 0.1 150)) {
  .auth-card input[type=email]:focus,
  .auth-card input[type=password]:focus { border-color: oklch(0.6 0.13 150); box-shadow: 0 0 0 3px oklch(0.94 0.05 150); }
}

.auth-check { display: flex; align-items: center; gap: 9px; font-size: 13px; color: #5c6056; cursor: pointer; }
.auth-check input { width: 16px; height: 16px; border-radius: 4px; accent-color: var(--accent); margin: 0; }

.auth-btn {
  height: 48px; border: none; border-radius: 8px; background: var(--accent); color: #fff;
  font-family: var(--sans); font-size: 14.5px; font-weight: 600; letter-spacing: -0.005em; cursor: pointer;
  box-shadow: 0 16px 30px -18px var(--accent);
  transition: transform 0.18s cubic-bezier(0.2,0.8,0.25,1), background 0.2s ease, box-shadow 0.2s ease;
}
.auth-btn:hover { background: var(--accent-hi); transform: translateY(-2px); box-shadow: 0 22px 38px -18px var(--accent); }
.auth-btn:active { transform: translateY(0) scale(0.99); }

.auth-msg {
  font-size: 13px; line-height: 1.5; padding: 10px 12px; border-radius: 7px;
  animation: fade 0.3s ease both;
}
.auth-msg.err { background: var(--danger-bg); color: var(--danger); }
.auth-msg.note { background: #f4f6f1; color: var(--text-2); }

.auth-foot {
  position: relative; display: flex; justify-content: space-between; gap: 16px;
  padding: 0 48px 26px; font-size: 12.5px; color: var(--muted);
  animation: fade 1.2s ease 0.4s both;
}

/* ----------------------------------------------------------- responzíva */

@media (max-width: 980px) {
  .auth-grid { grid-template-columns: 1fr; gap: 40px; max-width: 460px; }
  .auth-left { max-width: none; }
  .auth-title { font-size: 36px; }
  .auth-main { padding: 40px 22px 28px; }
  .auth-foot { padding: 0 22px 22px; }
  .auth-bg { opacity: 0.5; }
}
@media (max-width: 560px) {
  .auth-title { font-size: 30px; }
  .auth-stats { flex-direction: column; }
  .auth-stats .sep { width: auto; height: 1px; }
  .auth-card { padding: 26px 22px; }
}

/* Používatelia s vypnutými animáciami dostanú statickú scénu. */
@media (prefers-reduced-motion: reduce) {
  .auth-bg .track, .auth-bg .float, .auth-mark .flap { animation: none; }
  .auth-eyebrow, .auth-title, .auth-lede, .auth-stats, .auth-card-wrap, .auth-foot { animation: none; opacity: 1; transform: none; }
  .auth-btn:hover { transform: none; }
}