/* login.rise.sk: Authelia's portal in the rise.sk look. Loaded after rise-brand.css (tokens, lockup) by default.conf.
   Authelia 4.39 styles with Tailwind/shadcn variables, so most of the look is a variable swap; the rest targets stable
   ids (#username-textfield, #sign-in-button, ...). login.js adds the animated lockup. Check after every Authelia update. */

html[data-theme] {
  --background: var(--rise-canvas); --foreground: var(--rise-text-strong);
  --card: var(--rise-elevated); --card-foreground: var(--rise-text-strong);
  --popover: var(--rise-elevated); --popover-foreground: var(--rise-text-strong);
  --primary: var(--rise-brand); --primary-foreground: var(--rise-brand-ink);
  --muted: var(--rise-elevated); --muted-foreground: var(--rise-text-muted);
  --accent: var(--rise-elevated); --accent-foreground: var(--rise-text-strong);
  --secondary: var(--rise-brand); --secondary-foreground: var(--rise-brand-ink);
  --info: var(--rise-brand); --info-foreground: var(--rise-brand-ink); --warning: var(--rise-brand-soft);
  --destructive: var(--rise-danger); --success: var(--rise-success);
  --border: var(--rise-line); --input: var(--rise-line); --ring: var(--rise-brand); --divider: var(--rise-line);
  --custom-icon: var(--rise-brand); --custom-loading-bar: var(--rise-brand);
  --radius: .75rem;
  --default-font-family: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  background: var(--rise-canvas);
}

/* The gold button and the card shadow per theme: on light the gold darkens (white text stays readable), the shadow softens. */
:root {
  --rise-button: linear-gradient(135deg, var(--rise-brand-soft) 0%, var(--rise-brand) 45%, var(--rise-brand-deep) 100%);
  --rise-card-shadow: color-mix(in srgb, #000 70%, transparent);
}
:root[data-theme="light"] {
  --rise-button: linear-gradient(135deg, var(--rise-brand) 0%, var(--rise-brand-soft) 60%, var(--rise-brand-shadow) 100%);
  --rise-card-shadow: color-mix(in srgb, #3E2C0D 22%, transparent);
}

body {
  min-height: 100vh; background: transparent; color: var(--rise-text-body);
  font-feature-settings: "cv11", "ss01"; -webkit-font-smoothing: antialiased;
}

/* Background: the web's ambient light, a slow breathing glow that leans toward the pointer (--rise-px/--rise-py from
   login.js, centre without it), and a faint horizon line. */
body::before, body::after { content: ""; position: fixed; inset: 0; z-index: -1; pointer-events: none; }
body::before { background: var(--rise-ambient), var(--rise-canvas); }
body::after {
  inset: -20vmax;
  background: radial-gradient(circle at calc(50% + var(--rise-px, 0) * 6%) calc(42% + var(--rise-py, 0) * 6%),
      color-mix(in srgb, var(--rise-brand) calc(14% * var(--rise-glow) + 5%), transparent) 0%,
      color-mix(in srgb, var(--rise-brand) calc(5% * var(--rise-glow) + 2%), transparent) 22%, transparent 46%);
  animation: rise-breathe 9s var(--rise-ease-standard) infinite alternate;
  transition: background-position 600ms var(--rise-ease-standard);
}
@keyframes rise-breathe { from { opacity: .65; transform: scale(1); } to { opacity: 1; transform: scale(1.06); } }

/* Every stage (first factor, second factor, consent, settings) is a centred column: give it the web's card. */
#root [id$="-stage"] > div {
  position: relative; max-width: 440px; margin-inline: auto; padding: 36px 32px 28px;
  border: 1px solid var(--rise-line); border-radius: 24px;
  background: linear-gradient(145deg, var(--rise-elevated) 0%, var(--rise-surface) 60%, var(--rise-canvas) 100%);
  box-shadow: 0 1.5rem 3.5rem -1.75rem var(--rise-card-shadow),
    inset 0 1px 0 color-mix(in srgb, var(--rise-brand-highlight) 6%, transparent);
  animation: rise-card-in 700ms var(--rise-ease-entrance) 220ms both;
}
/* A gold edge light that follows the pointer over the card (--rise-cx/--rise-cy from login.js). */
#root [id$="-stage"] > div::before {
  content: ""; position: absolute; inset: -1px; border-radius: inherit; padding: 1px; pointer-events: none;
  background: radial-gradient(260px circle at var(--rise-cx, 50%) var(--rise-cy, 0%),
    color-mix(in srgb, var(--rise-brand) 70%, transparent), transparent 70%);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor;
  mask: linear-gradient(#000 0 0) content-box exclude, linear-gradient(#000 0 0);
  opacity: .55; transition: opacity 240ms var(--rise-ease-standard);
}
#root [id$="-stage"] > div:hover::before { opacity: 1; }
@keyframes rise-card-in { from { opacity: 0; transform: translateY(18px) scale(.985); filter: blur(6px); } to { opacity: 1; transform: none; filter: none; } }

/* Lockup in place of Authelia's round logo (login.js); the PNG stays as the fallback without JS. */
.rise-tag + img[alt="Logo"] { display: none; }
/* The web's lockup (config/brand/rise-brand.css), only bigger: same mark, word, proportions, idle motion and hover wave. */
.rise-lockup { display: flex; width: max-content; font-size: 30px; margin: 4px auto 0; }
.rise-tag { display: flex; width: max-content; margin: 14px auto 18px; }
.rise-tag img { width: 16px; height: 16px; display: block; }
.rise-tag b { color: var(--rise-text-strong); font-weight: 600; }

/* First paint: lockup, then the pill, then the form, each rising in softly. */
html:not(.rise-intro-done) .rise-lockup { animation: rise-fade-up 700ms var(--rise-ease-entrance) 200ms both; }
html:not(.rise-intro-done) .rise-tag { animation: rise-fade-up 600ms var(--rise-ease-entrance) 450ms both; }
@keyframes rise-fade-up { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }

/* Form: content rises in after the lockup. */
#root [id$="-stage"] h5 { color: var(--rise-text-strong); font-weight: 600; font-size: 22px; letter-spacing: -.01em; }
html:not(.rise-intro-done) #root [id$="-stage"] form,
html:not(.rise-intro-done) #root [id$="-stage"] h5 { animation: rise-fade-up 600ms var(--rise-ease-entrance) 760ms both; }

#root input[data-slot="floating-input"] {
  background: color-mix(in srgb, var(--rise-canvas) 55%, transparent); border-color: var(--rise-line); border-radius: 12px;
  color: var(--rise-text-strong); transition: border-color 160ms var(--rise-ease-standard), box-shadow 160ms var(--rise-ease-standard);
}
#root input[data-slot="floating-input"]:hover { border-color: color-mix(in srgb, var(--rise-brand) 45%, var(--rise-line)); }
#root input[data-slot="floating-input"]:focus {
  border-color: var(--rise-brand); box-shadow: 0 0 0 4px color-mix(in srgb, var(--rise-brand) 18%, transparent);
}
#root input:-webkit-autofill { -webkit-text-fill-color: var(--rise-text-strong); -webkit-box-shadow: 0 0 0 40px var(--rise-elevated) inset; caret-color: var(--rise-text-strong); }

/* Buttons: the gold primary with a light sweep on hover; the passkey one as the outlined second choice. */
#root button[data-slot="button"] { height: 46px; border-radius: 12px; font-weight: 600; letter-spacing: .04em; position: relative; overflow: hidden;
  transition: transform 120ms var(--rise-ease-standard), box-shadow 200ms var(--rise-ease-standard), background-color 200ms var(--rise-ease-standard); }
#root button[data-slot="button"][data-variant="default"] {
  background: var(--rise-button);
  color: var(--rise-brand-ink); box-shadow: 0 10px 28px -14px color-mix(in srgb, var(--rise-brand) 80%, transparent);
}
#root button[data-slot="button"][data-variant="default"]::after {
  content: ""; position: absolute; inset: 0; transform: translateX(-120%); pointer-events: none;
  background: linear-gradient(105deg, transparent 30%, color-mix(in srgb, #fff 45%, transparent) 50%, transparent 70%);
}
#root button[data-slot="button"][data-variant="default"]:hover::after { transform: translateX(120%); transition: transform 700ms var(--rise-ease-standard); }
#root button[data-slot="button"][data-variant="default"]:hover { box-shadow: 0 14px 34px -14px color-mix(in srgb, var(--rise-brand) 95%, transparent); }
#root button[data-slot="button"]:active { transform: scale(.98); }
#root #passkey-sign-in-button {
  background: transparent; color: var(--rise-text-strong); border: 1px solid color-mix(in srgb, var(--rise-brand) 45%, var(--rise-line)); box-shadow: none;
}
#root #passkey-sign-in-button::after { display: none; }
#root #passkey-sign-in-button:hover { background: color-mix(in srgb, var(--rise-brand) 10%, transparent); border-color: var(--rise-brand); }
#root #passkey-sign-in-button svg { color: var(--rise-brand); }
#root button:focus-visible, #root [role="checkbox"]:focus-visible { outline: 2px solid var(--rise-brand); outline-offset: 3px; }

/* Second factor: Authelia hard-codes a blue for its hints. */
#root [id="2fa-container"] p { color: var(--rise-text-body); }
#root [id="2fa-container"] svg { color: var(--rise-brand); }

/* Language switch top right, quieter; the "Powered by Authelia" link goes. */
#root #language-button { color: var(--rise-text-muted); }
#root a[href="https://www.authelia.com"] { display: none; }

@media (max-width: 480px) {
  #root [id$="-stage"] > div { width: calc(100% - 32px); padding: 28px 20px 22px; border-radius: 20px; }
  .rise-lockup { font-size: 26px; }
}

@media (prefers-reduced-motion: reduce) {
  body::after { animation: none; }
  html:not(.rise-intro-done) :is(.rise-lockup, .rise-tag, #root [id$="-stage"] form, #root [id$="-stage"] h5),
  #root [id$="-stage"] > div { animation: rise-fade 300ms linear both; }
  #root button[data-slot="button"]::after { display: none; }
}
@keyframes rise-fade { from { opacity: 0; } to { opacity: 1; } }