/**
 * Bewegung — dezente, hochwertige Übergänge (eigene Easing-Kurven).
 */

:root {
  --ease-standard-smooth: cubic-bezier(0.25, 0.1, 0.25, 1);
  --ease-emphasized-decelerate: cubic-bezier(0, 0, 0.2, 1);
  --ease-emphasized-accelerate: cubic-bezier(0.4, 0, 1, 1);
  --ease-login-spring: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-login-soft: cubic-bezier(0.22, 0.61, 0.36, 1);
}

[data-motion="subtle"] {
  transition:
    opacity var(--duration-normal) var(--ease-standard-smooth),
    transform var(--duration-normal) var(--ease-emphasized-decelerate);
}

.view {
  animation: viewEnter 0.35s var(--ease-emphasized-decelerate) both;
}

@keyframes viewEnter {
  from {
    opacity: 0;
    transform: translateY(4px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* —— Login screen —— */
.login-screen {
  position: relative;
  overflow: hidden;
}

.login-hero {
  position: relative;
}

.login-ambient {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 0;
  overflow: hidden;
}

.login-ambient-orb {
  position: absolute;
  border-radius: 50%;
  filter: blur(80px);
  opacity: 0.38;
  will-change: transform;
}

.login-ambient-orb--1 {
  width: min(42vw, 28rem);
  height: min(42vw, 28rem);
  top: -8%;
  left: -6%;
  background: color-mix(in srgb, var(--accent) 34%, #3d5068);
  animation: loginOrbDriftA 38s var(--ease-login-soft) infinite alternate;
}

.login-ambient-orb--2 {
  width: min(34vw, 20rem);
  height: min(34vw, 20rem);
  bottom: 10%;
  left: 18%;
  background: color-mix(in srgb, var(--accent) 22%, #4a6080);
  animation: loginOrbDriftB 44s var(--ease-login-soft) infinite alternate;
}

.login-ambient-orb--3 {
  width: min(26vw, 15rem);
  height: min(26vw, 15rem);
  top: 38%;
  left: 42%;
  background: color-mix(in srgb, #6b8cff 18%, transparent);
  animation: loginOrbDriftC 32s var(--ease-login-soft) infinite alternate;
}

.login-layout {
  position: relative;
  z-index: 1;
}

.login-hero-pattern {
  animation: loginGridDrift 55s linear infinite;
}

.login-screen--motion .login-hero-content .insec-brand-logo-img {
  animation: loginFadeUp 1.35s var(--ease-login-spring) 0.1s both;
}

.login-screen--motion .login-hero-lead {
  animation: loginFadeUp 1.3s var(--ease-login-spring) 0.28s both;
}

.login-screen--motion .login-hero-points li {
  animation: loginFadeUp 1.25s var(--ease-login-spring) both;
}

.login-screen--motion .login-hero-points li:nth-child(1) {
  animation-delay: 0.45s;
}

.login-screen--motion .login-hero-points li:nth-child(2) {
  animation-delay: 0.62s;
}

.login-screen--motion .login-hero-points li:nth-child(3) {
  animation-delay: 0.78s;
}

.login-screen--motion .login-hero-points li::before {
  animation: loginDotPulse 4.5s var(--ease-login-soft) infinite;
}

.login-screen--motion .login-hero-points li:nth-child(2)::before {
  animation-delay: 0.6s;
}

.login-screen--motion .login-hero-points li:nth-child(3)::before {
  animation-delay: 1.2s;
}

.login-screen--motion .login-panel .login-card {
  animation: loginCardEnter 1.45s var(--ease-login-spring) 0.2s both;
}

.login-screen--motion .login-panel-header {
  animation: loginFadeUp 1.2s var(--ease-login-spring) 0.38s both;
}

.login-screen--motion .login-footer-note {
  animation: loginFadeUp 1.15s var(--ease-login-spring) 0.72s both;
}

.login-auth-switch {
  position: relative;
  isolation: isolate;
}

.login-auth-switch::before {
  content: "";
  position: absolute;
  top: 0.28rem;
  left: 0.28rem;
  width: calc(50% - 0.28rem - 0.175rem);
  height: calc(100% - 0.56rem);
  border-radius: 9px;
  background: color-mix(in srgb, var(--surface-card) 92%, var(--accent) 8%);
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.16);
  transition: transform 0.72s var(--ease-login-spring);
  z-index: 0;
}

.login-layout--register .login-auth-switch::before {
  transform: translateX(calc(100% + 0.35rem));
}

.login-auth-switch-btn {
  position: relative;
  z-index: 1;
  transition: color 0.35s var(--ease-login-soft);
}

.login-auth-switch-btn.is-active {
  background: transparent;
  box-shadow: none;
}

.auth-form.auth-form--enter {
  animation: loginFormEnter 0.82s var(--ease-login-spring) both;
}

.login-card .auth-primary-btn {
  position: relative;
  overflow: hidden;
  transition: transform 0.28s var(--ease-login-soft), box-shadow 0.28s var(--ease-login-soft);
}

.login-card .auth-primary-btn::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(
    105deg,
    transparent 38%,
    color-mix(in srgb, #fff 22%, transparent) 50%,
    transparent 62%
  );
  transform: translateX(-130%);
  transition: transform 0.9s var(--ease-login-soft);
  pointer-events: none;
}

.login-card .auth-primary-btn:hover::after {
  transform: translateX(130%);
}

.login-card .auth-primary-btn:active {
  transform: scale(0.988);
}

.login-card .auth-form input:not([type="checkbox"]):focus {
  animation: loginInputFocusPulse 0.75s var(--ease-login-soft);
}

.login-error.login-error--shake {
  animation: loginErrorShake 0.65s var(--ease-emphasized-accelerate);
}

.login-register-success:not(.hidden) {
  animation: loginSuccessPop 0.95s var(--ease-login-spring) both;
}

.login-register-success:not(.hidden) .login-register-success-icon {
  animation: loginSuccessIcon 1.1s var(--ease-login-spring) 0.12s both;
}

@keyframes loginOrbDriftA {
  from {
    transform: translate(0, 0) scale(1);
  }
  to {
    transform: translate(6%, 9%) scale(1.05);
  }
}

@keyframes loginOrbDriftB {
  from {
    transform: translate(0, 0) scale(1);
  }
  to {
    transform: translate(-7%, -6%) scale(1.04);
  }
}

@keyframes loginOrbDriftC {
  from {
    transform: translate(0, 0) scale(0.96);
  }
  to {
    transform: translate(5%, -7%) scale(1.03);
  }
}

@keyframes loginGridDrift {
  from {
    background-position: 0 0, 0 0;
  }
  to {
    background-position: 48px 48px, 48px 48px;
  }
}

@keyframes loginFadeUp {
  from {
    opacity: 0;
    transform: translateY(10px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes loginCardEnter {
  from {
    opacity: 0;
    transform: translateY(12px) scale(0.985);
  }
  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

@keyframes loginFormEnter {
  from {
    opacity: 0;
    transform: translateY(8px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes loginDotPulse {
  0%,
  100% {
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--color-success) 20%, transparent);
    transform: scale(1);
  }
  50% {
    box-shadow: 0 0 0 4px color-mix(in srgb, var(--color-success) 10%, transparent);
    transform: scale(1.08);
  }
}

@keyframes loginInputFocusPulse {
  0% {
    transform: scale(1);
  }
  45% {
    transform: scale(1.004);
  }
  100% {
    transform: scale(1);
  }
}

@keyframes loginErrorShake {
  0%,
  100% {
    transform: translateX(0);
  }
  20% {
    transform: translateX(-5px);
  }
  40% {
    transform: translateX(4px);
  }
  60% {
    transform: translateX(-3px);
  }
  80% {
    transform: translateX(2px);
  }
}

@keyframes loginSuccessPop {
  from {
    opacity: 0;
    transform: scale(0.96) translateY(6px);
  }
  to {
    opacity: 1;
    transform: scale(1) translateY(0);
  }
}

@keyframes loginSuccessIcon {
  from {
    opacity: 0;
    transform: scale(0.75) rotate(-8deg);
  }
  65% {
    transform: scale(1.04) rotate(2deg);
  }
  to {
    opacity: 1;
    transform: scale(1) rotate(0);
  }
}

html[data-theme="light"] .login-ambient-orb {
  opacity: 0.24;
}

html.insec-lowfx .login-ambient {
  display: none;
}

html.insec-lowfx .login-hero-pattern {
  animation: none;
}

html.insec-lowfx .login-card .auth-primary-btn::after {
  display: none;
}

@media (prefers-reduced-motion: reduce) {
  .view {
    animation: none;
  }

  .login-ambient,
  .login-hero-pattern,
  .login-screen--motion .login-hero-content .insec-brand-logo-img,
  .login-screen--motion .login-hero-lead,
  .login-screen--motion .login-hero-points li,
  .login-screen--motion .login-hero-points li::before,
  .login-screen--motion .login-panel .login-card,
  .login-screen--motion .login-panel-header,
  .login-screen--motion .login-footer-note,
  .auth-form.auth-form--enter,
  .login-card .auth-form input:not([type="checkbox"]):focus,
  .login-error.login-error--shake,
  .login-register-success:not(.hidden),
  .login-register-success:not(.hidden) .login-register-success-icon {
    animation: none !important;
  }

  .login-auth-switch::before {
    transition: none;
  }

  .login-card .auth-primary-btn::after {
    display: none;
  }

  .login-card .auth-primary-btn:active {
    transform: none;
  }
}

/* —— Wartungsmodus —— */
.maintenance-ambient-orb--1 {
  animation: maintenanceOrbDriftA 42s var(--ease-login-soft) infinite alternate;
}

.maintenance-ambient-orb--2 {
  animation: maintenanceOrbDriftB 48s var(--ease-login-soft) infinite alternate;
}

.maintenance-ambient-orb--3 {
  animation: maintenanceOrbDriftC 36s var(--ease-login-soft) infinite alternate;
}

.maintenance-screen--enter .maintenance-screen__card {
  animation: maintenanceCardEnter 1.1s var(--ease-login-spring) both;
}

.maintenance-screen--enter .maintenance-screen__brand {
  animation: maintenanceFadeUp 1.2s var(--ease-login-spring) 0.35s both;
}

@keyframes maintenanceOrbDriftA {
  from { transform: translateX(-50%) translate(0, 0); }
  to { transform: translateX(-50%) translate(3%, 4%); }
}

@keyframes maintenanceOrbDriftB {
  from { transform: translate(0, 0); }
  to { transform: translate(5%, -3%); }
}

@keyframes maintenanceOrbDriftC {
  from { transform: translate(0, 0); }
  to { transform: translate(-4%, 2%); }
}

@keyframes maintenanceCardEnter {
  from {
    opacity: 0;
    transform: translateY(14px) scale(0.98);
  }
  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

@keyframes maintenanceFadeUp {
  from {
    opacity: 0;
    transform: translateY(8px);
  }
  to {
    opacity: 0.42;
    transform: translateY(0);
  }
}

@media (prefers-reduced-motion: reduce) {
  .maintenance-ambient-orb--1,
  .maintenance-ambient-orb--2,
  .maintenance-ambient-orb--3,
  .maintenance-screen--enter .maintenance-screen__card,
  .maintenance-screen--enter .maintenance-screen__brand {
    animation: none;
  }
}