/* ============================================================================
   AURORA login — Norse artifact treatment
   The title is the supplied transparent artwork exactly as rendered: no added
   border, no frame, no backing panel. One AURORA face sits alone in the box;
   it does not turn.

   Both controls are one material language: cracked weathered marble set down
   inside a heavy forged silver frame, warmed by a gold catch along the lower lip
   and a gold inlay where the stone meets the iron. No ornament on the face.
   ========================================================================== */

/* ------------------------------ title: AURORA ------------------------------ */

.login-page .brand-morph {
  position: relative;
  display: grid;
  place-items: center;
  width: min(780px, 100%);
  height: clamp(64px, 11.5vw, 172px);
  perspective: 1200px;
  transform-style: preserve-3d;
}

/* The wordmark fills its cell. Height is the axis the artwork is measured
   against, so the carved letters keep the same physical size at every width. */
.login-page .brand-title {
  grid-area: 1 / 1;
  max-width: 100%;
  max-height: 100%;
  width: auto;
  height: auto;
  object-fit: contain;
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
  filter: drop-shadow(0 14px 26px rgba(15, 23, 42, 0.16));
  transition:
    opacity 1s ease,
    transform 1s cubic-bezier(0.22, 0.61, 0.36, 1);
}

.login-page .brand-title-aurora { opacity: 1; transform: rotateY(0deg); }

/* ============================================================================
   Shared forging: the metal band, the stone, the engraved channel
   ========================================================================== */

/* Forged silver frame with a warm gold catch along its lower lip: brushed steel,
   a light rake across the top, shadow pooling at the base. No ornament — the
   metal itself carries the detail. */
.login-page .btn-cosmic {
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.66), rgba(255, 255, 255, 0) 26%, rgba(0, 0, 0, 0.22) 100%),
    linear-gradient(0deg, rgba(196, 150, 60, 0.58) 0%, rgba(196, 150, 60, 0.16) 22%, rgba(196, 150, 60, 0) 44%),
    linear-gradient(152deg,
      #fcfbf6 0%, #dcdfda 11%, #aeb3ae 24%, #7f8681 40%,
      #9aa09b 52%, #c9ccc7 66%, #9ba19c 80%, #e9e8e1 100%);
}

/* Weathered marble: warm stone body, a few irregular hairline cracks, and light
   falling from above. Cracks are deliberately uneven so the stone reads as
   quarried rather than patterned. */
.login-page .btn-cosmic .cos-inner {
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.78), rgba(255, 255, 255, 0) 34%),
    linear-gradient(97deg, transparent 0 21.6%, rgba(116, 122, 118, 0.075) 22% 22.5%, transparent 22.9% 60.6%, rgba(116, 122, 118, 0.062) 61% 61.5%, transparent 61.9%),
    linear-gradient(72deg, transparent 0 37.7%, rgba(116, 122, 118, 0.07) 38.1% 38.6%, transparent 39% 78.6%, rgba(116, 122, 118, 0.055) 79% 79.4%, transparent 79.8%),
    linear-gradient(115deg, transparent 0 51.6%, rgba(134, 134, 126, 0.07) 52% 52.4%, transparent 52.8%),
    linear-gradient(180deg, #fcfbf7 0%, #f2f0e9 34%, #e5e2da 66%, #d3d0c7 100%);
}

/* ------------------------------ Sign In: forged plaque ------------------------------ */

.login-page .btn-cosmic {
  position: relative;
  display: block;
  width: 100%;
  height: 62px;
  padding: 4px;                     /* the thickness of the forged rim */
  border: 0;
  border-radius: 15px;
  overflow: hidden;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.95),
    inset 0 -1px 0 rgba(34, 38, 37, 0.55),
    0 0 0 1px rgba(52, 58, 56, 0.62),
    0 1px 0 rgba(255, 255, 255, 0.5),
    0 14px 26px rgba(28, 33, 32, 0.28);
  transition:
    transform 0.18s cubic-bezier(0.3, 0.8, 0.3, 1),
    box-shadow 0.22s ease,
    filter 0.22s ease;
}

.login-page .btn-cosmic .cos-inner {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  height: 100%;
  padding: 0 22px;
  border-radius: 11px;
  border: 1px solid rgba(44, 50, 48, 0.62);
  box-shadow:
    inset 0 0 0 1.5px rgba(198, 156, 68, 0.50),       /* gold inlay set into the iron */
    inset 0 7px 11px -7px rgba(40, 45, 43, 0.55),     /* the rim casts down onto the stone */
    inset 0 -1px 0 rgba(255, 255, 255, 0.72);
}

.login-page .btn-cosmic .cos-inner::before {
  content: "";
  position: absolute;
  inset: 0 0 auto 0;
  height: 46%;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.52), transparent);
  pointer-events: none;
}

/* a slow specular pass across the stone, not a neon sheen */
.login-page .btn-cosmic .cos-inner::after {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  width: 74px;
  background: linear-gradient(105deg, transparent,
    rgba(255, 255, 255, 0.24) 34%, rgba(255, 255, 255, 0.54) 50%,
    rgba(255, 255, 255, 0.24) 66%, transparent);
  animation: cosSweep 4.6s linear infinite;
  pointer-events: none;
}

/* carved into the stone: dark face, lit lower lip, shadowed upper lip */
.login-page .btn-cosmic .cos-label {
  position: relative;
  z-index: 1;
  font-family: Georgia, "Times New Roman", "Palatino Linotype", serif;
  font-size: 16px;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: #2b3134;
  text-shadow:
    0 1px 0 rgba(255, 255, 255, 0.95),
    0 -1px 0 rgba(58, 63, 62, 0.26);
}

.login-page .btn-cosmic .cos-arrow {
  position: relative;
  z-index: 1;
  display: inline-flex;
  color: #9a7228;
  filter: drop-shadow(0 1px 0 rgba(255, 255, 255, 0.8));
  animation: cosArrow 1.2s cubic-bezier(0.4, 0, 0.2, 1) infinite alternate;
}

.login-page .btn-cosmic:hover {
  transform: translateY(-1px);
  filter: brightness(1.05) saturate(1.08);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.95),
    inset 0 -1px 0 rgba(38, 42, 41, 0.48),
    0 0 0 1px rgba(120, 94, 38, 0.55),
    0 16px 30px rgba(28, 33, 32, 0.30),
    0 0 38px rgba(198, 156, 64, 0.24);
}

.login-page .btn-cosmic:active {
  transform: scale(0.985);
  filter: brightness(0.985);
  box-shadow:
    inset 0 3px 6px rgba(52, 56, 55, 0.34),
    0 4px 12px rgba(28, 33, 32, 0.20),
    0 0 0 1px rgba(66, 72, 70, 0.52);
}

.login-page .btn-cosmic:focus-visible {
  outline: 2px solid rgba(154, 114, 40, 0.8);
  outline-offset: 3px;
}

/* PIN card: forged-stone treatment removed. Soft glass lives in
   modern-compact-overrides.css so it matches the sign-in card. */

@media (prefers-reduced-motion: reduce) {
  .login-page .brand-title { transition-duration: 0.01ms; }
  .login-page .btn-cosmic .cos-inner::after,
  .login-page .btn-cosmic .cos-arrow { animation: none; }
}