/* ============================================================================
   Aurora — sign-in (v5)
   The wordmark is TWO complete words stacked in the same space: AURORA in flow,
   ATRIA centred absolutely over it. Each letter of AURORA turns away while the
   matching ATRIA letter turns in, so no letter can ever collide or be seen
   mirrored — the "ATRIA collapsing into II" artefact is gone by construction.
   Light flows inside the glyphs (clipped layers with -webkit-text-fill-color),
   nothing shimmers.
   ========================================================================== */

:root {
  --btn-white: #ffe7ff;
  --btn-p100: #f4b1fd;
  --btn-p300: #eed99f;
  --btn-p400: #b8860b;
  --ui-font: Roboto, "Helvetica Neue", "Segoe UI", system-ui, -apple-system, Arial, sans-serif;
  /* the wordmark face — a flared serif that reads like the reference lettering.
     Swap this single line back to var(--ui-font) for the original sans wordmark. */
  --brand-font: "Palatino Linotype", "Book Antiqua", Palatino, Georgia, "Times New Roman", serif;
}

/* the wrap owns the layout: wordmark pinned near the top, card pushed down */
body.login-page {
  display: block;
  padding: 0;
  min-height: 100vh;
  font-family: var(--ui-font);
}

/* ---------------- institutional mark, top-left (as in the app) ------------- */
.atria-mark {
  position: fixed;
  top: 20px;
  left: 24px;
  z-index: 5;
  /* big: this is the institution's mark, not a favicon */
  width: clamp(170px, 22vw, 320px);
  height: auto;
  object-fit: contain;
  opacity: 0.95;
  filter: drop-shadow(0 4px 16px rgba(15, 23, 42, 0.08));
  pointer-events: none;
}
@media (max-width: 1100px) {
  .atria-mark { width: 168px; top: 14px; left: 16px; }
}
@media (max-width: 620px) {
  .atria-mark { position: static; display: block; margin: 0 auto 20px; width: 150px; }
}

/* ================================ wordmark ================================ */
.brand-hold {
  position: relative;
  display: flex;
  justify-content: center;
  margin: 0 0 20px;                     /* closer to the card, one cohesive unit */
  user-select: none;
  -webkit-tap-highlight-color: transparent;
  cursor: grab;
  touch-action: none;
  pointer-events: auto;
}

.title-atria-logo {
  position: absolute;
  top: -30px;
  right: 18px;
  height: clamp(40px, 6.8vw, 70px);
  width: auto;
  object-fit: contain;
  opacity: 0.98;
  filter: drop-shadow(0 4px 14px rgba(0, 0, 0, 0.58));
  z-index: 10;
  pointer-events: none;
}
.brand-hold:active {
  cursor: grabbing;
}
.brand-hold::after {
  content: "";
  position: absolute;
  left: 50%;
  bottom: -16px;
  width: 58%;
  height: 24px;
  transform: translateX(-50%);
  border-radius: 50%;
  background: radial-gradient(50% 50% at 50% 50%, rgba(214, 255, 246, 0.30), rgba(45, 212, 191, 0.16) 56%, transparent 74%);
  filter: blur(15px);
  animation: brandFloor 6s ease-in-out infinite;
  pointer-events: none;
}
@keyframes brandFloor {
  0%, 100% { opacity: 0.45; transform: translateX(-50%) scaleX(1); }
  50%      { opacity: 0.75; transform: translateX(-50%) scaleX(1.05); }
}

.brand {
  position: relative;
  display: inline-block;
  font-family: var(--brand-font);
  /* big, headline-scale lettering */
  font-size: clamp(3.8rem, 18.5vw, 134px);
  font-weight: 700;
  letter-spacing: -0.014em;
  line-height: 1;
  text-align: center;
}
.brand-inner {
  position: relative;
  display: inline-block;
  transform: none;
  transform-origin: center center;
  transition: transform 1.2s cubic-bezier(0.22, 0.61, 0.36, 1);
}
.brand.is-atria .brand-inner { transform: none; }
/* a slow breath on every transformation (no flash, no sparkle) */
.brand.is-flipping .brand-inner { transform: none; }
.brand.is-atria.is-flipping .brand-inner { transform: none; }

/* AURORA sits in flow and defines the box; ATRIA is centred over it */
.word-a { display: inline-flex; justify-content: center; white-space: nowrap; }
.word-b {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  white-space: nowrap;
  pointer-events: none;
}
/* ATRIA is one letter shorter, so it gets a touch more tracking to sit evenly */
.word-b .cell { margin: 0 0.012em; }

.cell { position: relative; display: inline-block; perspective: 760px; transform-style: preserve-3d; }

/* ---- the glyph: white glass, lit from the inside ---- */
.g {
  position: relative;
  display: inline-block;
  font-style: normal;
  /* Aurora light instead of white glass: every letter carries the whole ribbon —
     violet at the rim, then indigo, cyan, a mint-green core, and back out through
     emerald into violet. The hot centre rides on the radial layer above it. */
  background-image:
    /* one small hot flare near the crown of each letter, nothing more */
    radial-gradient(46% 22% at 50% 5%, rgba(255, 255, 255, 0.72), rgba(255, 255, 255, 0) 72%),
    /* the ribbon: violet crown → indigo → cyan → teal → emerald core → out again */
    linear-gradient(176deg,
      #e8cf8a 0%,
      #a67c00 6%,
      #c9a227 15%,
      #b8860b 26%,
      #06b6d4 36%,
      #34d399 48%,
      #4ade80 57%,
      #22c55e 65%,
      #14b8a6 75%,
      #d4af37 88%,
      #e8cf8a 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  -webkit-text-fill-color: transparent;
  /* deliberately NO text-shadow: it would paint *over* the clipped gradient. The
     bloom is a drop-shadow filter on .brand, so it wraps the finished letters. */
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
  transform-style: preserve-3d;
  transition: transform 1.1s cubic-bezier(0.22, 0.61, 0.36, 1), opacity 0.9s ease;
  transition-delay: calc(var(--s, 0) * 120ms);
  will-change: transform, opacity;
}

/* ---- LAYER 1 — the steady inner light: every glyph is lit from within and
        quietly breathes, so the letters never look like flat white text ---- */
.g::before {
  content: attr(data-g);
  position: absolute;
  inset: 0;
  display: block;
  background-image: radial-gradient(72% 52% at 50% 24%,
    rgba(240, 255, 251, 0.62) 0%,
    rgba(134, 247, 221, 0.34) 44%,
    rgba(34, 211, 238, 0.14) 68%,
    rgba(34, 211, 238, 0) 84%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  -webkit-text-fill-color: transparent;
  animation: innerBreathe 6.5s ease-in-out infinite;
  animation-delay: calc(var(--s, 0) * 170ms);
  pointer-events: none;
}
@keyframes innerBreathe {
  0%, 100% { opacity: 0.55; }
  50%      { opacity: 0.90; }
}

/* ---- LAYER 2 — the light that travels INSIDE the letterforms: a soft aurora
        sheen (violet → pale sky → white core) clipped to the glyphs ---- */
.g::after {
  content: attr(data-g);
  position: absolute;
  inset: 0;
  display: block;
  background-image: linear-gradient(104deg,
    rgba(255, 255, 255, 0) 22%,
    rgba(232, 207, 138, 0.40) 34%,
    rgba(236, 254, 255, 0.95) 50%,
    rgba(52, 211, 153, 0.42) 64%,
    rgba(255, 255, 255, 0) 78%);
  background-repeat: no-repeat;
  background-size: 240% 100%;
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  -webkit-text-fill-color: transparent;
  animation: innerFlow 7.5s linear infinite;
  animation-delay: calc(var(--s, 0) * 200ms);
  pointer-events: none;
}
@keyframes innerFlow {
  from { background-position: 120% 0; }
  to   { background-position: -120% 0; }
}

/* ---- the bloom: one filtered pass over the finished wordmark, so the letters
        sit inside a real aurora halo instead of a flat white glow. Stacked
        drop-shadows give the hot rim → emerald → cyan → violet falloff of the
        reference; nothing here is painted over the letterforms themselves. ---- */
.brand {
  filter:
    saturate(1.12) brightness(1.08)          /* lift the ribbon to a lit, not painted, green */
    drop-shadow(0 0 3px rgba(226, 255, 250, 0.70))
    drop-shadow(0 0 14px rgba(16, 185, 129, 0.70))
    drop-shadow(0 0 38px rgba(34, 211, 238, 0.45))
    drop-shadow(0 0 88px rgba(166, 124, 0, 0.55));
}

/* a wide aurora wash *behind* the word — the sky-glow of the reference. Sits
   under the letters and above the page backdrop (negative z-index inside the
   .login-wrap stacking context). */
.brand-hold::before {
  content: "";
  position: absolute;
  left: 50%;
  top: 44%;
  width: 132%;
  height: 214%;
  transform: translate(-50%, -50%);
  z-index: -1;
  background:
    radial-gradient(46% 36% at 50% 50%, rgba(52, 211, 153, 0.22), rgba(232, 207, 138, 0.10) 46%, transparent 70%),
    radial-gradient(60% 40% at 22% 30%, rgba(224, 185, 74, 0.20), transparent 68%),
    radial-gradient(50% 36% at 82% 68%, rgba(34, 211, 238, 0.16), transparent 70%);
  filter: blur(28px);
  animation: brandAurora 9s ease-in-out infinite;
  pointer-events: none;
}
@keyframes brandAurora {
  0%, 100% { opacity: 0.70; transform: translate(-50%, -50%) scale(1); }
  50%      { opacity: 1;    transform: translate(-50%, -50%) scale(1.05); }
}

/* ---- the transformation: AURORA turns away, ATRIA turns in ---- */
.word-b .g { transform: rotateY(-176deg); opacity: 0; }
.brand.is-atria .word-a .g { transform: rotateY(176deg); opacity: 0.10; }
.brand.is-atria .word-b .g { transform: rotateY(0deg); opacity: 1; }

/* ====================== CosmicUiverse Sign In button ====================== */
.btn-cosmic {
  position: relative;
  display: block;
  width: 100%;
  height: 54px;
  padding: 2px;
  border: 0;
  border-radius: 17px;
  cursor: pointer;
  background: linear-gradient(180deg, var(--btn-p100), var(--btn-p400));
  box-shadow:
    0 1px 0 rgba(255, 255, 255, 0.22) inset,
    0 8px 22px rgba(25, 6, 53, 0.45),
    0 16px 34px rgba(244, 177, 253, 0.20);   /* soft, no hard slab line under the button */
  transition: transform 0.18s cubic-bezier(0.3, 0.8, 0.3, 1), box-shadow 0.2s ease;
}
.btn-cosmic:active { transform: scale(0.97); }
.btn-cosmic .cos-inner {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  height: 100%;
  border-radius: 15px;
  background: linear-gradient(180deg, var(--btn-p300), var(--btn-p400));
  overflow: hidden;
  padding: 0 18px;
}
.btn-cosmic .cos-inner::before {
  content: "";
  position: absolute;
  inset: 0 0 auto 0;
  height: 45%;
  background: linear-gradient(180deg, rgba(255, 231, 255, 0.24), transparent);
  pointer-events: none;
}
.btn-cosmic .cos-inner::after {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  width: 90px;
  background: linear-gradient(105deg, transparent,
    rgba(255, 231, 255, 0.14) 30%, rgba(255, 231, 255, 0.42) 50%,
    rgba(255, 231, 255, 0.14) 70%, transparent);
  animation: cosSweep 2.6s linear infinite;
  pointer-events: none;
}
@keyframes cosSweep { 0% { left: -40%; } 100% { left: 140%; } }
.btn-cosmic .cos-label { position: relative; z-index: 1; color: var(--btn-white); font-size: 15px; font-weight: 900; letter-spacing: 0.2px; }
.btn-cosmic .cos-arrow { position: relative; z-index: 1; color: var(--btn-white); display: inline-flex; animation: cosArrow 1.1s cubic-bezier(0.4, 0, 0.2, 1) infinite alternate; }
@keyframes cosArrow { from { transform: translateX(0); } to { transform: translateX(5px); } }

/* ------------------------- minimal email + password card ------------------- */
/* full-height column. The brand + card are centred as a pair, which leaves the
   card sitting just below the middle of the viewport — not pinned to the bottom. */
.login-wrap {
  width: 100%;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 9vh 20px 6vh;
}
.login-page .login-card {
  width: min(364px, 100%);
  padding: 28px 26px 26px;              /* room to breathe inside the card */
  border-radius: 18px;
  background: rgba(255, 255, 255, 0.65);    /* beautiful white glass */
  border: 1px solid rgba(212, 175, 55, 0.12);
  box-shadow: 0 22px 50px rgba(31, 26, 58, 0.05), inset 0 1px 0 rgba(255, 255, 255, 0.25);
  font-family: var(--ui-font);
}
/* the ribbon field is decorative here — keep it from vibrating behind the form */
body.login-page .aurora-canvas { opacity: 0.5; }
.login-page .field { margin-bottom: 11px; }
.login-page .field span {
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: #1b1633;
  margin-bottom: 7px;
}
.login-page .field input {
  padding: 12px 13px;
  font-size: 14px;
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.60);
  border: 1px solid rgba(212, 175, 55, 0.14);
  color: #1b1633;
  transition: border-color 0.18s, background 0.18s, box-shadow 0.18s;
}
.login-page .field input::placeholder { color: rgba(27, 22, 51, 0.45); }   /* was failing contrast */
.login-page .field input:focus {
  outline: none;
  border-color: rgba(212, 175, 55, 0.45);
  background: #ffffff;
  box-shadow: 0 0 0 3px rgba(212, 175, 55, 0.10);
}
.login-page .form-err { min-height: 13px; margin: 0 0 8px; font-size: 11px; font-weight: 600; color: #e11d48; }
.login-page .signin-stack { margin-top: 10px; }
/* (the footer caption was removed — the card now sits just below centre) */

/* ======================= admin PIN — glass entry box ====================== */
.pin-overlay {
  position: fixed;
  inset: 0;
  z-index: 40;
  display: grid;
  place-items: center;
  background: rgba(15, 23, 42, 0.04);
  backdrop-filter: blur(1.5px) saturate(102%);
  -webkit-backdrop-filter: blur(1.5px) saturate(102%);
  opacity: 0;
  transition: opacity 0.24s ease;
}
.pin-overlay.open { opacity: 1; }
.pin-overlay[hidden] { display: none; }

.pin-card {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 316px;
  max-width: calc(100vw - 48px);
  padding: 12px 13px;
  border-radius: 20px;
  background: rgba(255, 255, 255, 0.88);
  border: 1px solid rgba(212, 175, 55, 0.16);
  backdrop-filter: blur(24px) saturate(130%);
  -webkit-backdrop-filter: blur(24px) saturate(130%);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.4), 0 24px 56px rgba(31, 26, 58, 0.12);
  transform: translateY(-8px) scale(0.97);
  transition: transform 0.26s cubic-bezier(0.2, 0.8, 0.2, 1), border-color 0.2s ease, box-shadow 0.2s ease;
}
.pin-overlay.open .pin-card { transform: none; }
.pin-card input {
  flex: 1;
  min-width: 0;
  border: 0;
  outline: none;
  background: transparent;
  color: #fff;
  font-family: var(--ui-font);
  font-size: 17px;
  text-align: center;
  letter-spacing: 7px;
  padding: 12px 8px;
}
.pin-card input::placeholder { letter-spacing: 4px; font-size: 14px; color: rgba(255, 255, 255, 0.42); }
.pin-card button {
  width: 42px;
  height: 42px;
  flex: none;
  border: 0;
  border-radius: 13px;
  background: var(--btn-p400);
  color: #fff;
  display: grid;
  place-items: center;
  cursor: pointer;
  transition: filter 0.2s ease, transform 0.14s ease;
}
.pin-card button svg { width: 18px; height: 18px; }
.pin-card button:hover { filter: brightness(1.12); }
.pin-card button:active { transform: scale(0.96); }
.pin-card button:disabled { opacity: 0.45; cursor: not-allowed; }
.pin-card.bad {
  border-color: rgba(255, 120, 140, 0.75);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.28), 0 0 0 3px rgba(255, 90, 120, 0.20), 0 24px 56px rgba(6, 2, 20, 0.55);
}
.pin-card.shake { animation: pinShake 0.34s ease; }
@keyframes pinShake {
  0%, 100% { transform: translateX(0); }
  25%      { transform: translateX(-7px); }
  60%      { transform: translateX(6px); }
}

@media (prefers-reduced-motion: reduce) {
  .brand-inner, .cell, .g { transition-duration: 0.01ms; }
  .g::after { animation: none; }
  .g::before { animation: none; opacity: 0.85; }
  .brand-hold::after { display: none; }
  .brand-hold::before { animation: none; }
}

/* ======================== soft white foreground theme =======================
   The aurora backdrop remains unchanged; only the foreground UI is softened.
   The mark stays serif-led and luminous, but its visible letter color is white. */
:root {
  --ui-font: "Inter", "Avenir Next", "Segoe UI", system-ui, -apple-system, sans-serif;
  --brand-font: "Cormorant Garamond", "Palatino Linotype", "Book Antiqua", Georgia, serif;
  --btn-white: #ffffff;
  --btn-p100: #ffffff;
  --btn-p300: #eef2ff;
  --btn-p400: #6471b8;
}

.brand {
  font-weight: 600;
  letter-spacing: 0.012em;
  filter:
    drop-shadow(0 0 2px rgba(255, 255, 255, 0.96))
    drop-shadow(0 0 16px rgba(255, 255, 255, 0.58))
    drop-shadow(0 0 48px rgba(198, 213, 255, 0.48));
}
.brand-inner { transform: none; }
.brand.is-atria .brand-inner { transform: none; }
.brand.is-flipping .brand-inner { transform: none; }
.brand.is-atria.is-flipping .brand-inner { transform: none; }

.g {
  background-image: linear-gradient(180deg, #ffffff 0%, #ffffff 48%, #edf1ff 78%, #ffffff 100%);
  color: #ffffff;
  -webkit-text-fill-color: #ffffff;
  text-shadow: 0 1px 0 rgba(255, 255, 255, 0.9);
}
.g::before {
  background-image: linear-gradient(180deg, rgba(255,255,255,0.95), rgba(205,219,255,0.34));
  opacity: 0.62;
}
.g::after {
  background-image: linear-gradient(104deg,
    rgba(255,255,255,0) 22%,
    rgba(255,255,255,0.18) 36%,
    rgba(255,255,255,0.96) 50%,
    rgba(224,232,255,0.22) 64%,
    rgba(255,255,255,0) 78%);
}
.brand-hold::before {
  background:
    radial-gradient(46% 36% at 50% 50%, rgba(255,255,255,0.24), rgba(215,224,255,0.10) 46%, transparent 70%),
    radial-gradient(60% 40% at 22% 30%, rgba(255,255,255,0.16), transparent 68%),
    radial-gradient(50% 36% at 82% 68%, rgba(206,220,255,0.18), transparent 70%);
}
.brand-hold::after {
  background: radial-gradient(50% 50% at 50% 50%, rgba(255,255,255,0.34), rgba(211,222,255,0.18) 56%, transparent 74%);
}

.login-wrap { padding: 10vh 20px 7vh; pointer-events: none; }
.login-wrap .brand-hold,
.login-wrap .login-card { pointer-events: auto; }
.login-page .login-card {
  width: min(390px, 100%);
  padding: 30px;
  border-radius: 24px;
  background: rgba(255, 255, 255, 0.92);
  border: 1px solid rgba(255, 255, 255, 0.88);
  box-shadow: 0 24px 70px rgba(8, 12, 42, 0.30), inset 0 1px 0 rgba(255, 255, 255, 0.96);
  color: #18213d;
}
.login-page .field { margin-bottom: 16px; }
.login-page .field span {
  color: #56617d;
  font-size: 11px;
  letter-spacing: 0.12em;
}
.login-page .field input {
  color: #18213d;
  background: rgba(247, 249, 255, 0.88);
  border: 1px solid #dbe1ef;
  border-radius: 14px;
  padding: 13px 14px;
}
.login-page .field input::placeholder { color: #9aa4b9; }
.login-page .field input:focus {
  border-color: #9da9d4;
  background: #ffffff;
  box-shadow: 0 0 0 4px rgba(132, 148, 205, 0.16);
}
.login-page .form-err { color: #b44c63; }
.btn-cosmic {
  height: 54px;
  border-radius: 15px;
  background: linear-gradient(135deg, #dce3f7, #7381be);
  box-shadow: 0 12px 24px rgba(71, 86, 151, 0.25), inset 0 1px 0 rgba(255,255,255,0.9);
}
.btn-cosmic .cos-inner {
  border-radius: 13px;
  background: linear-gradient(135deg, #aebbe4, #5f6da9);
}
.btn-cosmic .cos-label, .btn-cosmic .cos-arrow { color: #ffffff; }

.pin-overlay { background: rgba(18, 25, 54, 0.30); }
.pin-card {
  background: rgba(255, 255, 255, 0.94);
  border: 1px solid rgba(255, 255, 255, 0.92);
  box-shadow: 0 24px 60px rgba(8, 12, 42, 0.28), inset 0 1px 0 #fff;
}
.pin-card input { color: #18213d; }
.pin-card input::placeholder { color: #9aa4b9; }
.pin-card button { background: #6471b8; color: #fff; }

/* ====================== final glass sign-in treatment ======================= */
.login-page .login-card {
  background:
    linear-gradient(135deg, rgba(255, 255, 255, 0.65), rgba(255, 255, 255, 0.45)),
    radial-gradient(120% 90% at 0% 0%, rgba(255, 255, 255, 0.30), transparent 58%);
  border: 1px solid rgba(212, 175, 55, 0.14);
  box-shadow:
    0 28px 80px rgba(31, 26, 58, 0.05),
    inset 0 1px 0 rgba(255, 255, 255, 0.40),
    inset 0 -1px 0 rgba(255, 255, 255, 0.15);
  backdrop-filter: blur(34px) saturate(155%);
  -webkit-backdrop-filter: blur(34px) saturate(155%);
  color: #1b1633;
}
.login-page .field span { color: #1b1633; }
.login-page .field input {
  color: #1b1633;
  background: rgba(255, 255, 255, 0.65);
  border-color: rgba(212, 175, 55, 0.14);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.20);
}
.login-page .field input::placeholder { color: rgba(27, 22, 51, 0.45); }
.login-page .field input:focus {
  background: #ffffff;
  border-color: rgba(212, 175, 55, 0.45);
  box-shadow: 0 0 0 4px rgba(212, 175, 55, 0.10), inset 0 1px 0 rgba(255, 255, 255, 0.35);
}
.login-page .form-err { color: #e11d48; text-shadow: none; }
.btn-cosmic {
  background: linear-gradient(135deg, rgba(212, 175, 55, 0.18), rgba(219, 39, 119, 0.18));
  border: 1px solid rgba(212, 175, 55, 0.25);
  box-shadow: 0 14px 30px rgba(212, 175, 55, 0.08), inset 0 1px 0 rgba(255, 255, 255, 0.60);
}
.btn-cosmic .cos-inner { background: linear-gradient(135deg, rgba(212, 175, 55, 0.70), rgba(219, 39, 119, 0.70)); }
.btn-cosmic .cos-label, .btn-cosmic .cos-arrow { color: #ffffff; }

/* Refined editorial serif: tall contrast, generous tracking, and a crisp rim. */
.brand {
  font-family: "Bodoni 72", "Didot", "Iowan Old Style", "Palatino Linotype", Georgia, serif;
  font-weight: 700;
  letter-spacing: 0.035em;
  font-kerning: normal;
  text-rendering: geometricPrecision;
}
.brand-inner { transform: none; }
.brand.is-atria .brand-inner { transform: none; }
.brand.is-flipping .brand-inner { transform: none; }
.brand.is-atria.is-flipping .brand-inner { transform: none; }
.word-b .cell { margin: 0 0.035em; }
.g {
  -webkit-text-stroke: 0.45px rgba(255,255,255,0.72);
  text-shadow: 0 1px 0 rgba(255,255,255,0.96), 0 0 10px rgba(255,255,255,0.26);
}

/* ==================== Awwwards-style high-contrast brand wordmark =======================
   AURORA ⇄ ATRIA morph animation with deep polished indigo-slate body and crystalline highlights. */
.brand-hold { overflow: visible; padding: 24px 18px 20px; }
.brand {
  z-index: 2;
  filter:
    drop-shadow(0 4px 14px rgba(201, 162, 39, 0.14))
    drop-shadow(0 14px 34px rgba(15, 23, 42, 0.08));
}
.g {
  background-image: linear-gradient(180deg, #0f172a 0%, #1e1b4b 24%, #7a5c07 50%, #a67c00 78%, #d4af37 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
  -webkit-text-stroke: 0.5px rgba(255, 255, 255, 0.4);
  text-shadow: none;
}
.word-a .rune-o {
  background-image: linear-gradient(180deg, #7a5c07 0%, #a67c00 30%, #d4af37 65%, #e8cf8a 100%);
  filter: drop-shadow(0 0 8px rgba(212, 175, 55, 0.45));
}
.word-a .rune-o::before {
  background-image: radial-gradient(circle at 50% 50%, rgba(212, 175, 55, 0.5), rgba(201, 162, 39, 0.15) 50%, transparent 75%);
  opacity: 0.85;
}
.title-frame {
  position: absolute;
  z-index: 1;
  inset: 17px 2% 13px;
  border: 1px solid rgba(236,242,235,0.42);
  border-left-color: rgba(116,91,73,0.46);
  border-right-color: rgba(116,91,73,0.46);
  border-radius: 18px 18px 28px 28px;
  transform: skewX(-5deg);
  box-shadow: inset 0 0 0 1px rgba(255,255,255,0.12), 0 0 0 1px rgba(57,43,36,0.16);
  pointer-events: none;
}
.title-frame::before,
.title-frame::after {
  content: "⟡";
  position: absolute;
  top: 50%;
  color: rgba(241,250,245,0.86);
  font-family: Georgia, serif;
  font-size: 17px;
  text-shadow: 0 0 8px rgba(116,238,220,0.36);
}
.title-frame::before { left: -10px; transform: translateY(-50%) rotate(-22deg); }
.title-frame::after { right: -10px; transform: translateY(-50%) rotate(22deg); }
.title-crest {
  position: absolute;
  z-index: 3;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  color: #f7f7ef;
  font: 700 clamp(18px, 2.2vw, 26px)/1 Georgia, serif;
  text-shadow: 0 2px 0 rgba(72,78,77,0.46), 0 0 12px rgba(144,255,238,0.48);
  filter: drop-shadow(0 0 4px rgba(255,255,255,0.62));
  pointer-events: none;
}
.title-teeth {
  position: absolute;
  z-index: 3;
  left: 50%;
  bottom: 1px;
  transform: translateX(-50%) rotate(-2deg) scaleX(1.15);
  color: rgba(245,246,235,0.92);
  font: 700 13px/1 Georgia, serif;
  letter-spacing: 0.28em;
  text-shadow: 0 1px 0 rgba(75,78,73,0.46), 0 0 7px rgba(178,255,239,0.24);
  white-space: nowrap;
  pointer-events: none;
}

/* ========================= final sign-in typography ======================== */
.login-page .login-card,
.login-page .field,
.login-page .btn-cosmic,
.login-page .pin-card {
  font-family: "Inter", "Avenir Next", "Segoe UI", system-ui, -apple-system, sans-serif;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
.login-page .field span {
  color: #1b1633;
  font-weight: 700;
  letter-spacing: 0.10em;
  line-height: 1.35;
}
.login-page .field input {
  font-size: 14px;
  font-weight: 550;
  letter-spacing: 0.01em;
}
.login-page .field input::placeholder { color: rgba(27, 22, 51, 0.45); }
.login-page .btn-cosmic .cos-label,
.login-page .btn-cosmic .cos-arrow { font-weight: 800; letter-spacing: 0.025em; }

/* Optional carved Norse insignia emblem preview */
.aurora-norse-logo {
  display: block;
  width: 100%;
  max-width: 250px;
  height: auto;
  margin: 0 auto;
  filter: drop-shadow(0 10px 30px rgba(212, 175, 55, 0.08));
  transition: transform 0.4s ease, filter 0.4s ease;
}