/* BRAIN — Login screen */

:root {
  --login-bg: #f7e4ea;
  --login-bg-deep: #f1d6df;
  --login-pink: #e8a4b8;
  --login-pink-soft: #f5d0dc;
  --login-pink-glow: rgba(232, 140, 168, 0.45);
  --login-text: #2a2430;
  --login-text-soft: #8a7a82;
  --login-white: rgba(255, 255, 255, 0.92);
  --login-glass-border: rgba(255, 255, 255, 0.75);
  --login-error: #c45c6a;
  --login-font: system-ui, -apple-system, "SF Pro Display", "SF Pro Text", "Segoe UI", sans-serif;
}

body.login-pending {
  overflow: hidden;
  background: var(--login-bg);
}

body.login-pending.login-to-app {
  background: var(--bg);
  transition: background-color 1.05s cubic-bezier(0.33, 0, 0.18, 1);
}

body.login-pending.login-from-app {
  background: var(--bg);
  transition: background-color 1.05s cubic-bezier(0.33, 0, 0.18, 1);
}

body.login-pending.login-from-app.login-at-login-bg {
  background: var(--login-bg);
}

.login-screen.is-dormant {
  visibility: hidden;
  pointer-events: none;
  opacity: 0;
}

.login-screen.is-dormant .login-handoff {
  opacity: 0;
}

.login-screen {
  position: fixed;
  inset: 0;
  z-index: 10000;
  display: flex;
  align-items: center;
  justify-content: center;
  perspective: 1100px;
  overflow: hidden;
  background:
    radial-gradient(ellipse 52% 42% at 50% 36%, rgba(255, 255, 255, 0.34), transparent 68%),
    radial-gradient(ellipse 90% 70% at 50% 40%, rgba(244, 210, 223, 0.8) 0%, transparent 58%),
    radial-gradient(ellipse 130% 100% at 50% 50%, transparent 36%, rgba(180, 132, 150, 0.28) 100%),
    linear-gradient(168deg, #f3dce5 0%, #e9c8d4 48%, #e3bdcb 100%);
  opacity: 1;
  visibility: visible;
  transition:
    opacity 0.65s cubic-bezier(0.22, 1, 0.36, 1),
    visibility 0.65s step-end;
}

.login-screen.is-exiting {
  opacity: 0;
  visibility: hidden;
  transition:
    opacity 0.65s cubic-bezier(0.22, 1, 0.36, 1),
    visibility 0.65s step-start;
  pointer-events: none;
}

.login-particles {
  position: absolute;
  inset: 0;
  z-index: 1;
  width: 100%;
  height: 100%;
  pointer-events: none;
  transform-origin: 50% 38%;
  transition:
    transform 0.96s cubic-bezier(0.42, 0, 0.18, 1),
    filter 0.96s cubic-bezier(0.42, 0, 0.18, 1);
}

.login-enter-bloom {
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  opacity: 0;
  background: radial-gradient(
    circle at 50% 38%,
    rgba(255, 255, 255, 0.62) 0%,
    rgba(252, 228, 236, 0.28) 26%,
    transparent 62%
  );
}

.login-enter-flash {
  position: absolute;
  inset: 0;
  z-index: 4;
  pointer-events: none;
  opacity: 0;
  background: radial-gradient(
    circle at 50% 40%,
    color-mix(in srgb, var(--bg) 42%, white) 0%,
    color-mix(in srgb, var(--bg) 72%, #fceef2) 30%,
    transparent 58%
  );
}

.login-handoff {
  position: absolute;
  inset: 0;
  z-index: 6;
  pointer-events: none;
  opacity: 0;
  background: var(--bg);
}

.login-scene {
  position: relative;
  z-index: 2;
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  transform-style: preserve-3d;
  transform-origin: 50% 42%;
  transition:
    transform 0.96s cubic-bezier(0.42, 0, 0.18, 1),
    opacity 0.96s cubic-bezier(0.42, 0, 0.18, 1),
    filter 0.96s cubic-bezier(0.42, 0, 0.18, 1);
}

.login-vignette {
  position: absolute;
  inset: 0;
  z-index: 2;
  pointer-events: none;
  background:
    radial-gradient(ellipse 70% 55% at 50% 38%, transparent 0%, transparent 42%, rgba(186, 138, 154, 0.14) 100%),
    radial-gradient(ellipse at center, transparent 28%, rgba(175, 128, 145, 0.16) 100%);
}

.login-main {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  width: min(100%, 44rem);
  padding: 1rem 1rem 2rem;
  text-align: center;
}

.login-brand {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 100%;
  margin-bottom: 0;
}

.login-stack {
  width: 100%;
  margin-top: -3.75rem;
  display: flex;
  flex-direction: column;
  align-items: center;
  transition:
    opacity 0.5s cubic-bezier(0.22, 1, 0.36, 1),
    transform 0.5s cubic-bezier(0.22, 1, 0.36, 1);
}

.login-logo-wrap {
  --tilt-x: 0deg;
  --tilt-y: 0deg;
  --push-x: 0px;
  --push-y: 0px;
  --shadow-x: 0px;
  --shadow-y: 12px;
  --logo-scale: 1;
  --logo-squish-x: 1;
  --logo-squish-y: 1;
  --logo-glow: 1;
  --extrude-x: 0px;
  --extrude-y: 0px;
  --depth: 1;
  --edge-light: 0;
  position: relative;
  width: min(78vmin, 96vw);
  max-width: 100%;
  margin-bottom: 0;
  transform-origin: 50% 50%;
  transform:
    perspective(900px)
    rotateX(var(--tilt-x))
    rotateY(var(--tilt-y))
    translate3d(var(--push-x), var(--push-y), 0)
    scaleX(var(--logo-squish-x))
    scaleY(var(--logo-squish-y))
    scale(var(--logo-scale));
  will-change: transform, filter;
  transition:
    transform 0.85s cubic-bezier(0.22, 1, 0.36, 1),
    opacity 0.85s cubic-bezier(0.22, 1, 0.36, 1),
    filter 0.55s ease;
  filter:
    drop-shadow(var(--shadow-x) var(--shadow-y) 40px rgba(210, 128, 156, calc(0.2 * var(--logo-glow))))
    drop-shadow(calc(var(--shadow-x) * 0.45) calc(var(--shadow-y) * 0.7) 78px rgba(255, 220, 232, calc(0.16 * var(--logo-glow))));
}

.login-logo-depth-stack {
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  transform-style: preserve-3d;
}

.login-logo-depth-layer {
  --layer: 1;
  --layer-alpha: 0.16;
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;
  pointer-events: none;
  transform:
    translate3d(
      calc(var(--extrude-x) * var(--layer) * var(--depth)),
      calc(var(--extrude-y) * var(--layer) * var(--depth)),
      calc(var(--layer) * -0.62px)
    );
  opacity: var(--layer-alpha);
  filter:
    blur(calc(var(--layer) * 0.04px))
    brightness(calc(0.9 - var(--layer) * 0.03))
    saturate(calc(0.86 - var(--layer) * 0.02))
    sepia(0.24)
    hue-rotate(-12deg);
  mix-blend-mode: multiply;
  transition: transform 120ms linear;
}

.login-logo-wrap::before {
  content: "";
  position: absolute;
  inset: 2%;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(255, 255, 255, 0.72) 0%, rgba(248, 188, 208, 0.42) 38%, transparent 72%);
  filter: blur(42px);
  opacity: calc(0.9 * var(--logo-glow));
  z-index: -1;
  animation: login-halo-breathe 6.8s ease-in-out infinite;
}

.login-logo-wrap::after {
  content: "";
  position: absolute;
  inset: -4%;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(232, 164, 184, 0.38) 0%, rgba(245, 210, 222, 0.16) 45%, transparent 70%);
  filter: blur(28px);
  opacity: calc(0.88 * var(--logo-glow));
  z-index: -2;
  animation: login-halo-breathe 8.4s ease-in-out infinite reverse;
}

.login-logo-wrap.is-logo-hovered::after {
  box-shadow:
    calc(var(--extrude-x) * -2.8)
    calc(var(--extrude-y) * -2.4)
    42px
    rgba(255, 247, 251, calc(var(--edge-light) * 0.28));
}

.login-logo {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 1;
  object-fit: contain;
  filter:
    drop-shadow(calc(var(--shadow-x) * 0.75) calc(var(--shadow-y) + 4px) 48px rgba(212, 130, 158, calc(0.34 * var(--logo-glow))))
    drop-shadow(calc(var(--shadow-x) * 0.25) calc(var(--shadow-y) * 0.6) 74px rgba(255, 224, 236, calc(0.16 * var(--logo-glow))));
  animation:
    login-logo-float 5.5s ease-in-out infinite,
    login-logo-breathe 7.2s ease-in-out infinite;
  position: relative;
  z-index: 2;
}

.login-subtitle {
  margin: 0 0 1.1rem;
  max-width: 22rem;
  font-family: var(--login-font);
  font-size: 1.0625rem;
  font-weight: 600;
  line-height: 1.5;
  letter-spacing: 0.015em;
  color: rgba(92, 78, 86, 0.92);
}

.login-form {
  width: 50%;
  max-width: 22rem;
  min-width: 10.5rem;
  margin-inline: auto;
  position: relative;
  min-height: 3.25rem;
}

.login-step {
  position: absolute;
  inset: 0;
  opacity: 0;
  visibility: hidden;
  transform: translateY(12px);
  transition:
    opacity 0.42s cubic-bezier(0.22, 1, 0.36, 1),
    transform 0.42s cubic-bezier(0.22, 1, 0.36, 1),
    visibility 0.42s step-end;
}

.login-step.is-active {
  position: relative;
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
  transition:
    opacity 0.42s cubic-bezier(0.22, 1, 0.36, 1),
    transform 0.42s cubic-bezier(0.22, 1, 0.36, 1),
    visibility 0.42s step-start;
}

.login-step.is-leaving {
  opacity: 0;
  transform: translateY(-10px);
  visibility: hidden;
  transition:
    opacity 0.32s ease,
    transform 0.32s ease,
    visibility 0.32s step-start;
}

.login-field-wrap {
  display: flex;
  align-items: stretch;
  width: 100%;
  border-radius: 1rem;
  background: var(--login-white);
  border: 1px solid var(--login-glass-border);
  box-shadow:
    0 1px 2px rgba(255, 255, 255, 0.8) inset,
    0 8px 32px rgba(232, 140, 168, 0.12),
    0 2px 8px rgba(42, 36, 48, 0.04);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  overflow: hidden;
  transition:
    box-shadow 0.25s ease,
    border-color 0.25s ease,
    transform 0.25s ease;
}

.login-field-wrap:focus-within {
  border-color: rgba(232, 140, 168, 0.55);
  box-shadow:
    0 1px 2px rgba(255, 255, 255, 0.9) inset,
    0 0 0 3px rgba(232, 140, 168, 0.18),
    0 10px 36px rgba(232, 140, 168, 0.2),
    0 2px 8px rgba(42, 36, 48, 0.04);
}

.login-field-wrap--success {
  border-color: rgba(255, 255, 255, 0.92);
  animation: login-field-success-pulse 0.62s cubic-bezier(0.22, 1, 0.36, 1);
  box-shadow:
    0 1px 2px rgba(255, 255, 255, 0.95) inset,
    0 0 0 4px rgba(255, 255, 255, 0.38),
    0 0 32px rgba(240, 180, 200, 0.48),
    0 12px 40px rgba(212, 130, 158, 0.28);
}

.login-arrow-btn--confirmed {
  color: #c97892 !important;
  border-color: rgba(255, 255, 255, 0.85) !important;
  background: linear-gradient(155deg, #fff 0%, #fceef4 100%) !important;
  box-shadow:
    0 1px 0 rgba(255, 255, 255, 0.98) inset,
    0 0 20px rgba(240, 180, 200, 0.45) !important;
}

.login-field-wrap.is-shake {
  animation: login-shake 0.48s cubic-bezier(0.36, 0.07, 0.19, 0.97);
}

.login-field {
  flex: 1;
  min-width: 0;
  padding: 0.95rem 1rem 0.95rem 1.15rem;
  border: none;
  background: transparent;
  font-family: var(--login-font);
  font-size: 1rem;
  font-weight: 400;
  letter-spacing: 0.02em;
  color: var(--login-text);
  outline: none;
}

.login-field::placeholder {
  color: rgba(138, 122, 130, 0.75);
}

.login-field[type="password"] {
  letter-spacing: 0.22em;
  font-variant-numeric: tabular-nums;
}

.login-arrow-btn {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 3.1rem;
  margin: 0.35rem 0.35rem 0.35rem 0;
  padding: 0;
  border: 1px solid rgba(220, 148, 168, 0.42);
  border-radius: 0.75rem;
  background: linear-gradient(155deg, #fff 0%, #fceef4 55%, #f8e2eb 100%);
  color: #c96a88;
  box-shadow:
    0 1px 0 rgba(255, 255, 255, 0.95) inset,
    0 4px 16px rgba(212, 130, 158, 0.28),
    0 0 0 0 rgba(232, 164, 184, 0);
  cursor: pointer;
  transition:
    transform 0.18s ease,
    box-shadow 0.22s ease,
    color 0.18s ease,
    border-color 0.18s ease,
    opacity 0.22s ease;
}

.login-arrow-btn:hover {
  color: #b85a78;
  border-color: rgba(220, 148, 168, 0.62);
  box-shadow:
    0 1px 0 rgba(255, 255, 255, 0.98) inset,
    0 6px 22px rgba(212, 130, 158, 0.38),
    0 0 18px rgba(232, 164, 184, 0.22);
}

.login-arrow-btn:active {
  transform: scale(0.91);
  box-shadow:
    0 1px 0 rgba(255, 255, 255, 0.88) inset,
    0 2px 8px rgba(212, 130, 158, 0.22);
}

.login-arrow-btn--back {
  margin: 0.35rem 0 0.35rem 0.35rem;
}

#login-step-pin:not(.is-active) .login-arrow-btn--back {
  opacity: 0;
  transform: translateX(-8px) scale(0.92);
  pointer-events: none;
}

#login-step-pin.is-active .login-arrow-btn--back {
  opacity: 1;
  transform: translateX(0) scale(1);
}

.login-arrow-btn svg {
  display: block;
}

.login-error {
  margin: 0.85rem 0 0;
  font-family: var(--login-font);
  font-size: 0.8125rem;
  font-weight: 500;
  letter-spacing: 0.01em;
  color: var(--login-error);
  opacity: 0;
  transform: translateY(-4px);
  transition:
    opacity 0.3s ease,
    transform 0.3s ease;
}

.login-error.is-visible {
  opacity: 1;
  transform: translateY(0);
}

.login-footer {
  position: absolute;
  bottom: calc(env(safe-area-inset-bottom, 0px) + 1.1rem);
  left: 50%;
  transform: translateX(-50%);
  z-index: 2;
  margin: 0;
  font-family: var(--login-font);
  font-size: 0.625rem;
  font-weight: 500;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: rgba(108, 92, 100, 0.48);
  white-space: nowrap;
  pointer-events: none;
  transition:
    opacity 0.45s ease,
    transform 0.45s ease;
}

/* Phase 1 — success feedback */
.login-screen.login-success .login-stack {
  transform: scale(1.015);
}

.login-screen.login-success .login-logo-wrap {
  filter: drop-shadow(0 18px 52px rgba(212, 130, 158, 0.48));
}

/* Phase 2 — entering BRAIN (forward zoom) */
.login-screen.login-entering-app .login-scene {
  transform: scale(1.2) translateZ(140px);
  opacity: 0;
  filter: blur(9px);
}

.login-screen.login-entering-app.particle-warp .login-particles {
  transform: scale(1.58);
  filter: blur(3px);
}

.login-screen.login-entering-app .login-enter-bloom {
  animation: login-bloom 0.92s cubic-bezier(0.33, 0, 0.18, 1) forwards;
}

.login-screen.login-entering-app .login-enter-flash {
  animation: login-flash 0.92s cubic-bezier(0.33, 0, 0.18, 1) forwards;
}

.login-screen.login-entering-app .login-handoff {
  animation: login-handoff-in 1.02s cubic-bezier(0.33, 0, 0.18, 1) forwards;
}

.login-screen.login-entering-app .login-footer {
  opacity: 0;
  transform: translateX(-50%) translateY(8px);
}

.login-screen.is-exiting {
  pointer-events: none;
}

/* Phase 3 — leaving BRAIN (reverse zoom back to login) */
.login-screen.login-leaving-app .login-scene {
  transform: scale(1.2) translateZ(140px);
  opacity: 0;
  filter: blur(9px);
}

.login-screen.login-leaving-app.particle-warp .login-particles {
  transform: scale(1.58);
  filter: blur(3px);
}

.login-screen.login-leaving-app .login-handoff {
  opacity: 1;
}

.login-screen.login-leaving-app .login-footer {
  opacity: 0;
  transform: translateX(-50%) translateY(8px);
}

.login-screen.login-leaving-app.login-scene-return .login-scene {
  animation: login-scene-return 0.96s cubic-bezier(0.42, 0, 0.18, 1) forwards;
}

.login-screen.login-leaving-app.login-handoff-out .login-handoff {
  animation: login-handoff-out 1.02s cubic-bezier(0.33, 0, 0.18, 1) forwards;
}

.login-screen.login-leaving-app.login-scene-return .login-footer {
  animation: login-footer-return 0.72s cubic-bezier(0.33, 0, 0.18, 1) 0.18s forwards;
}

.login-screen.login-leaving-app.login-scene-return.particle-warp .login-particles {
  animation: login-particles-return 0.96s cubic-bezier(0.42, 0, 0.18, 1) forwards;
}

.login-screen.login-leaving-app .login-enter-bloom {
  animation: login-bloom-out 0.92s cubic-bezier(0.33, 0, 0.18, 1) forwards;
}

.login-screen.login-leaving-app .login-enter-flash {
  animation: login-flash-out 0.92s cubic-bezier(0.33, 0, 0.18, 1) forwards;
}

.app-shell.is-visible.is-exiting-to-login {
  animation: app-exit-to-login 0.52s cubic-bezier(0.33, 0, 0.18, 1) forwards;
  pointer-events: none;
}

.app-shell {
  opacity: 0;
  visibility: hidden;
}

.app-shell:not(.is-visible) {
  display: none !important;
  visibility: hidden !important;
  pointer-events: none !important;
}

.app-shell.is-visible {
  display: block !important;
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
}

.app-shell.is-visible.is-from-login {
  opacity: 0;
  animation: app-emerge-from-login 0.72s cubic-bezier(0.33, 0, 0.18, 1) forwards;
}

@keyframes login-logo-float {
  0%,
  100% {
    transform: translateY(0) scale(1);
  }
  50% {
    transform: translateY(-10px) scale(1);
  }
}

@keyframes login-logo-breathe {
  0%,
  100% {
    filter: drop-shadow(0 16px 48px rgba(212, 130, 158, 0.38));
  }
  50% {
    filter: drop-shadow(0 20px 56px rgba(212, 130, 158, 0.52));
  }
}

@keyframes login-halo-breathe {
  0%,
  100% {
    opacity: 0.82;
    transform: scale(1);
  }
  50% {
    opacity: 1;
    transform: scale(1.06);
  }
}

@keyframes login-field-success-pulse {
  0% {
    transform: scale(1);
  }
  45% {
    transform: scale(1.018);
  }
  100% {
    transform: scale(1);
  }
}

@keyframes login-bloom {
  0% {
    opacity: 0;
    transform: scale(0.88);
  }
  32% {
    opacity: 0.85;
    transform: scale(1);
  }
  100% {
    opacity: 0;
    transform: scale(1.35);
  }
}

@keyframes login-flash {
  0%,
  100% {
    opacity: 0;
  }
  38% {
    opacity: 0.22;
  }
  62% {
    opacity: 0;
  }
}

@keyframes login-handoff-in {
  0% {
    opacity: 0;
  }
  38% {
    opacity: 0;
  }
  72% {
    opacity: 0.55;
  }
  100% {
    opacity: 1;
  }
}

@keyframes login-handoff-out {
  0% {
    opacity: 1;
  }
  28% {
    opacity: 0.55;
  }
  62% {
    opacity: 0;
  }
  100% {
    opacity: 0;
  }
}

@keyframes login-scene-return {
  0% {
    transform: scale(1.2) translateZ(140px);
    opacity: 0;
    filter: blur(9px);
  }
  100% {
    transform: scale(1) translateZ(0);
    opacity: 1;
    filter: none;
  }
}

@keyframes login-particles-return {
  0% {
    transform: scale(1.58);
    filter: blur(3px);
  }
  100% {
    transform: scale(1);
    filter: none;
  }
}

@keyframes login-footer-return {
  0% {
    opacity: 0;
    transform: translateX(-50%) translateY(8px);
  }
  100% {
    opacity: 1;
    transform: translateX(-50%) translateY(0);
  }
}

@keyframes login-bloom-out {
  0% {
    opacity: 0;
    transform: scale(1.35);
  }
  68% {
    opacity: 0.85;
    transform: scale(1);
  }
  100% {
    opacity: 0;
    transform: scale(0.88);
  }
}

@keyframes login-flash-out {
  0%,
  100% {
    opacity: 0;
  }
  38% {
    opacity: 0.22;
  }
  62% {
    opacity: 0;
  }
}

@keyframes app-exit-to-login {
  0% {
    opacity: 1;
  }
  100% {
    opacity: 0;
  }
}

@keyframes app-emerge-from-login {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}

@keyframes login-shake {
  0%,
  100% {
    transform: translateX(0);
  }
  15%,
  45%,
  75% {
    transform: translateX(-6px);
  }
  30%,
  60%,
  90% {
    transform: translateX(6px);
  }
}

@media (prefers-reduced-motion: reduce) {
  .login-logo-wrap {
    transform: none !important;
    filter: none !important;
  }

  .login-logo-depth-stack {
    display: none;
  }

  .login-logo-wrap::before,
  .login-logo-wrap::after {
    animation: none;
  }

  .login-step,
  .login-screen,
  .app-shell,
  .login-error,
  .login-stack,
  .login-footer,
  .login-scene,
  .login-particles {
    transition-duration: 0.01ms !important;
    animation: none !important;
  }

  .login-screen.login-entering-app .login-scene {
    transform: none;
    filter: none;
    opacity: 0;
  }

  .login-screen.login-entering-app.particle-warp .login-particles {
    transform: none;
    filter: none;
  }

  .login-screen.login-entering-app .login-handoff {
    animation: login-handoff-in 0.4s ease forwards;
  }

  .login-screen.login-leaving-app .login-scene,
  .login-screen.login-leaving-app.particle-warp .login-particles {
    transform: none;
    filter: none;
    opacity: 0;
  }

  .login-screen.login-leaving-app.login-scene-return .login-scene {
    animation: login-scene-return 0.35s ease forwards;
  }

  .login-screen.login-leaving-app .login-handoff {
    opacity: 1;
  }

  .login-screen.login-leaving-app.login-handoff-out .login-handoff {
    animation: login-handoff-out 0.4s ease forwards;
  }

  .app-shell.is-visible.is-exiting-to-login {
    animation: app-exit-to-login 0.25s ease forwards;
  }

  .login-screen.login-success .login-stack {
    transform: none;
  }

  .app-shell.is-visible.is-from-login {
    animation: none;
  }
}