/* rise brand for our admin pages (login skin, admin.rise.sk, error page): the rise.sk web's colours and its logo lockup.
   Source of truth is the web repo rise.sk-website: src/config/rise-design-tokens.ts (colours) and src/app/animations.css
   (lockup motion, ported 1:1). Change it there first, then copy here. README.md in this folder lists the files. */

@font-face { font-family: "Inter"; src: url("inter-latin.woff2") format("woff2"); font-weight: 100 900; font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Inter"; src: url("inter-latin-ext.woff2") format("woff2"); font-weight: 100 900; font-display: swap;
  unicode-range: U+0100-02AF, U+0304, U+0308, U+0329, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }

/* Dark is the brand default, as on the web. Light uses the web's light set, where gold darkens to stay readable on white.
   Theme: data-theme="light"|"dark" on <html> (Authelia always sets it, admin.rise.sk's toggle), else the system setting. */
:root {
  --rise-brand-highlight: #FEFBD8; --rise-brand-soft: #DBC28C; --rise-brand: #DAB549;
  --rise-brand-deep: #8B6723; --rise-brand-shadow: #6A4C1A; --rise-brand-ink: #1A1710;
  --rise-canvas: #080807; --rise-surface: #0C0C0C; --rise-elevated: #141414; --rise-line: #2B2924;
  --rise-text-strong: #F8F4EC; --rise-text-body: #D5D3D0; --rise-text-muted: #9B978E;
  --rise-success: #34D399; --rise-danger: #F87171;
  --rise-glow: 1;
}
@media (prefers-color-scheme: light) { :root:not([data-theme="dark"]) {
  --rise-brand-highlight: #4A340F; --rise-brand-soft: #6A4C1A; --rise-brand: #855F1F;
  --rise-brand-deep: #DAB549; --rise-brand-shadow: #3E2C0D; --rise-brand-ink: #FFFFFF;
  --rise-canvas: #FFFFFF; --rise-surface: #F7F5F0; --rise-elevated: #F0EDE5; --rise-line: #DED8CB;
  --rise-text-strong: #14120E; --rise-text-body: #3D3A34; --rise-text-muted: #6B665C;
  --rise-success: #0F7A52; --rise-danger: #B3261E;
  --rise-glow: 0;
} }
:root[data-theme="light"] {
  --rise-brand-highlight: #4A340F; --rise-brand-soft: #6A4C1A; --rise-brand: #855F1F;
  --rise-brand-deep: #DAB549; --rise-brand-shadow: #3E2C0D; --rise-brand-ink: #FFFFFF;
  --rise-canvas: #FFFFFF; --rise-surface: #F7F5F0; --rise-elevated: #F0EDE5; --rise-line: #DED8CB;
  --rise-text-strong: #14120E; --rise-text-body: #3D3A34; --rise-text-muted: #6B665C;
  --rise-success: #0F7A52; --rise-danger: #B3261E;
  --rise-glow: 0;
}
:root {
  --rise-ease-standard: cubic-bezier(.2, 0, .38, .9);
  --rise-ease-entrance: cubic-bezier(0, 0, .38, .9);
  --rise-feedback: 120ms; --rise-reveal: 360ms; --rise-brand-idle: 4800ms;
  /* The web's ambient: a gold light from the top left, a deep brown one from the bottom right. */
  --rise-ambient: radial-gradient(circle at 20% 0%, color-mix(in srgb, #DAB549 12%, transparent) 0%, transparent 34%),
    radial-gradient(circle at 80% 100%, color-mix(in srgb, #6A4C1A 12%, transparent) 0%, transparent 38%);
}

/* Lockup: the mark (image) and the word (live text). Glyphs stay white; gold is carried by the mark and the glow,
   and a gold wave crosses the word on hover. */
@property --brand-wave-radius { syntax: "<percentage>"; inherits: false; initial-value: 0%; }

@keyframes brand-logo-idle {
  0%, 100% { transform: translate3d(0, 0, 0) rotate(calc(var(--brand-logo-rotation) * -0.35)) scale(1); }
  28% { transform: translate3d(var(--brand-logo-x), calc(var(--brand-logo-y) * -1), 0) rotate(var(--brand-logo-rotation)) scale(var(--brand-logo-idle-scale)); }
  58% { transform: translate3d(calc(var(--brand-logo-x) * -0.8), calc(var(--brand-logo-y) * -0.45), 0) rotate(calc(var(--brand-logo-rotation) * -0.75)) scale(1.008); }
  82% { transform: translate3d(calc(var(--brand-logo-x) * 0.4), calc(var(--brand-logo-y) * -0.75), 0) rotate(calc(var(--brand-logo-rotation) * 0.35)) scale(1.014); }
}
@keyframes brand-word-idle {
  0%, 100% { transform: translate3d(0, 0, 0) rotate(calc(var(--brand-word-rotation) * -0.45)); }
  34% { transform: translate3d(var(--brand-word-x), calc(var(--brand-word-y) * -1), 0) rotate(var(--brand-word-rotation)); }
  68% { transform: translate3d(calc(var(--brand-word-x) * -0.65), calc(var(--brand-word-y) * -0.35), 0) rotate(calc(var(--brand-word-rotation) * -0.7)); }
}

.brand-lockup {
  --brand-logo-x: 1.25px; --brand-logo-y: 3.5px; --brand-logo-rotation: 1.75deg; --brand-logo-idle-scale: 1.025;
  --brand-word-x: .8px; --brand-word-y: 2px; --brand-word-rotation: .45deg;
  /* Sizes in em, so a bigger lockup keeps the web's proportions; at font-size 24px it is the web's header exactly
     (mark 50 px, word text-2xl bold, space-x-3). */
  display: inline-flex; align-items: center; gap: .5em; isolation: isolate; color: var(--rise-text-strong);
  font-family: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; line-height: 1.3333; text-decoration: none;
}
.brand-lockup .brand-logo-image { width: 2.0833em; height: 2.0833em; }
.brand-logo-motion { display: block; transform-origin: 50% 52%; animation: brand-logo-idle var(--rise-brand-idle) var(--rise-ease-standard) infinite; will-change: transform; }
.brand-logo-image {
  display: block; transform-origin: 50% 52%;
  filter: drop-shadow(0 0 10px color-mix(in srgb, var(--rise-brand) calc(55% * var(--rise-glow)), transparent));
  transition: filter var(--rise-feedback) var(--rise-ease-standard), transform var(--rise-feedback) var(--rise-ease-standard);
  user-select: none; -webkit-user-drag: none;
}
.brand-word-motion { display: block; transform-origin: 50% 58%; animation: brand-word-idle var(--rise-brand-idle) var(--rise-ease-standard) infinite; animation-delay: -1.35s; will-change: transform; }
.brand-word {
  --brand-wave-origin: 50%;
  position: relative; display: inline-block; font-size: 1em; font-weight: 700; white-space: nowrap;
  color: var(--rise-text-strong); user-select: none;
  filter: drop-shadow(0 0 15px color-mix(in srgb, var(--rise-brand) calc(40% * var(--rise-glow)), transparent));
  transition: filter var(--rise-feedback) var(--rise-ease-standard);
}
.brand-word::after {
  --brand-wave-radius: 0%;
  position: absolute; inset: 0; content: attr(data-brand-text); color: var(--rise-brand); -webkit-text-fill-color: var(--rise-brand);
  pointer-events: none; white-space: nowrap;
  clip-path: circle(var(--brand-wave-radius) at var(--brand-wave-origin) 50%);
  transition: --brand-wave-radius var(--rise-reveal) var(--rise-ease-entrance);
}
.brand-lockup:hover .brand-logo-image, a.brand-lockup:focus-visible .brand-logo-image {
  filter: brightness(1.08) saturate(1.06) drop-shadow(0 0 20px color-mix(in srgb, var(--rise-brand) calc(70% * var(--rise-glow)), transparent));
  transform: rotate(6deg) scale(1.08);
}
.brand-lockup:hover .brand-word, a.brand-lockup:focus-visible .brand-word {
  filter: drop-shadow(0 0 25px color-mix(in srgb, var(--rise-brand) calc(80% * var(--rise-glow)), transparent));
}
.brand-word:hover::after, a.brand-lockup:focus-visible .brand-word::after { --brand-wave-radius: 140%; }
.brand-lockup:active .brand-logo-image { transform: scale(.98); }
/* On light the gold glow reads as a brown smudge (web rule): the mark keeps its pixels, the glow goes. */
:root[data-theme="light"] .brand-logo-image, :root[data-theme="light"] .brand-word { filter: none; }
@media (prefers-color-scheme: light) { :root:not([data-theme="dark"]) :is(.brand-logo-image, .brand-word) { filter: none; } }

@media (hover: none), (pointer: coarse) {
  .brand-lockup { --brand-logo-x: .6px; --brand-logo-y: 1.8px; --brand-logo-rotation: .9deg; --brand-logo-idle-scale: 1.012;
    --brand-word-x: .4px; --brand-word-y: 1px; --brand-word-rotation: .2deg; }
}
@media (prefers-reduced-motion: reduce) {
  .brand-logo-motion, .brand-word-motion { animation: none; }
  .brand-logo-image, .brand-word, .brand-word::after { transition: none; }
}

/* Section name next to (admin) or under (login) the lockup: a quiet pill, the same look as the login's target tool. */
.brand-tag {
  display: inline-flex; align-items: center; gap: 8px; padding: 4px 10px; border: 1px solid var(--rise-line); border-radius: 999px;
  color: var(--rise-text-muted); font: 500 13px/1.3 "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  letter-spacing: 0; text-transform: none; white-space: nowrap;
}
.brand-lockup .brand-tag { margin-left: .25em; align-self: center; }
@media (max-width: 359px) { .brand-lockup .brand-tag { display: none; } }