/* ==========================================================================
   Sign-in page: brand panel (glass hero + motion) and form-card motion.
   Loaded by layouts/auth2 after its inline styles.
   Theme colours only (--brand-pop / --brand-cool follow light = teal, dark = gold).
   Animates transform / opacity; every animation is off under prefers-reduced-motion
   and the static markup already shows the finished state.
   ========================================================================== */
:root {
  --am-ease: cubic-bezier(.22, 1, .36, 1);
  --am-spring: cubic-bezier(.34, 1.56, .64, 1);
}

/* ======================= BRAND PANEL ======================= */
.auth-brand { gap: 1.4rem; padding: 2.2rem clamp(1.75rem, 4vw, 3.5rem); }

/* the old clip-art is retired; only the faint DNA helix stays as texture behind the glass */
.brand-art { opacity: .4; }
.brand-art > polyline, .brand-art > circle, .brand-art > path,
.brand-art #molecule, .brand-art #flask, .brand-art #petri, .brand-art #tubes { display: none; }
.brand-art .am-w { transform-box: fill-box; transform-origin: center; }
.am-dna { animation: amSway 10s ease-in-out infinite alternate; }
@keyframes amSway { from { transform: translateX(-10px) scaleX(.96); } to { transform: translateX(10px) scaleX(1.04); } }
.brand-art { transition: transform .6s var(--am-ease); will-change: transform; }

/* ---- background fx ---- */
.auth-brand > .brand-fx { position: absolute !important; inset: 0; pointer-events: none; overflow: hidden; }
.brand-aurora i { position: absolute; border-radius: 50%; will-change: transform; }
.brand-aurora i:nth-child(1) { left: -180px; top: -140px; width: 560px; height: 560px; background: radial-gradient(circle, rgba(var(--brand-pop-rgb), .36), transparent 65%); animation: amD1 18s ease-in-out infinite alternate; }
.brand-aurora i:nth-child(2) { right: -220px; bottom: -180px; width: 600px; height: 600px; background: radial-gradient(circle, rgba(var(--brand-cool-rgb), .26), transparent 65%); animation: amD2 22s ease-in-out infinite alternate; }
.brand-aurora i:nth-child(3) { left: 28%; top: 38%; width: 400px; height: 400px; background: radial-gradient(circle, rgba(var(--brand-pop-rgb), .16), transparent 65%); animation: amD3 26s ease-in-out infinite alternate; }
@keyframes amD1 { to { transform: translate(140px, 110px) scale(1.15); } }
@keyframes amD2 { to { transform: translate(-160px, -90px) scale(1.2); } }
@keyframes amD3 { to { transform: translate(-110px, 70px) scale(.85); } }

.brand-grid {
  opacity: .55;
  background-image: linear-gradient(rgba(255, 255, 255, .045) 1px, transparent 1px), linear-gradient(90deg, rgba(255, 255, 255, .045) 1px, transparent 1px);
  background-size: 44px 44px;
  -webkit-mask-image: radial-gradient(ellipse at 40% 45%, #000, transparent 75%);
  mask-image: radial-gradient(ellipse at 40% 45%, #000, transparent 75%);
  animation: amGrid 30s linear infinite;
}
@keyframes amGrid { to { background-position: 44px 44px, 44px 44px; } }

.brand-dots b {
  position: absolute; bottom: -12px;
  width: var(--s, 4px); height: var(--s, 4px);
  border-radius: 50%;
  background: rgba(var(--brand-pop-rgb), .75);
  box-shadow: 0 0 10px rgba(var(--brand-pop-rgb), .8);
  opacity: 0;
  animation: amUp var(--t, 14s) linear var(--d, 0s) infinite;
}
@keyframes amUp {
  0% { transform: translate3d(0, 0, 0); opacity: 0; }
  10% { opacity: .9; }
  90% { opacity: .5; }
  100% { transform: translate3d(var(--x, 30px), -105vh, 0); opacity: 0; }
}

/* ---- top: logo ---- */
.brand-top { margin-bottom: 0; }
.brand-top .logo-chip {
  padding: .65rem 1.1rem;
  border-radius: 14px;
  background: rgba(255, 255, 255, .96);
  box-shadow: 0 10px 30px rgba(0, 0, 0, .28), 0 0 0 1px rgba(255, 255, 255, .5) inset;
  animation: amDrop .8s var(--am-spring) .05s backwards;
}
.brand-top img { height: 60px; }
@keyframes amDrop { from { opacity: 0; transform: translateY(-24px) scale(.9); } }

/* ---- headline ---- */
.brand-copy, .brand-copy h1 { max-width: 560px; }
.brand-copy .eyebrow {
  margin-bottom: .9rem;
  animation: amRise .7s var(--am-ease) .2s backwards;
}
.brand-copy .eyebrow::before {
  content: ""; display: inline-block; width: 7px; height: 7px; margin-right: 8px; border-radius: 50%;
  background: var(--brand-pop); vertical-align: 1px;
  box-shadow: 0 0 0 0 rgba(var(--brand-pop-rgb), .7);
  animation: amPulse 2s ease-out infinite;
}
@keyframes amPulse { to { box-shadow: 0 0 0 10px rgba(var(--brand-pop-rgb), 0); } }
.brand-copy h1 {
  font-size: clamp(2rem, 2.9vw, 2.55rem);
  margin-bottom: .8rem;
  min-height: 2.3em;                /* two lines: the rotating word sits on its own line, so it never moves the layout */
  animation: amRise .8s var(--am-ease) .3s backwards;
}
.brand-copy > p { font-size: .98rem; line-height: 1.6; max-width: 500px; margin: 0; animation: amRise .8s var(--am-ease) .42s backwards; }
@keyframes amRise { from { opacity: 0; transform: translateY(22px); } }

.brand-copy h1 .am-word {
  display: block; width: fit-content;
  background: linear-gradient(100deg, var(--brand-pop) 20%, #fff 45%, var(--brand-pop) 70%);
  background-size: 220% 100%;
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent; color: transparent;
  animation: amShine 4.5s linear infinite;
}
.brand-copy h1 .am-word.out { animation: amWordOut .35s var(--am-ease) forwards; }
.brand-copy h1 .am-word.in { animation: amWordIn .5s var(--am-ease) backwards, amShine 4.5s linear infinite; }
@keyframes amShine { to { background-position: -220% 0; } }
@keyframes amWordOut { to { opacity: 0; transform: translateY(-14px); filter: blur(4px); } }
@keyframes amWordIn { from { opacity: 0; transform: translateY(16px); filter: blur(4px); } }

/* ---- glass stage ---- */
.brand-stage {
  position: relative;
  display: grid;
  grid-template-columns: 1.4fr 1fr;
  gap: 14px;
  max-width: 560px;
  margin-bottom: 22px;
  transform: perspective(1100px) rotateY(calc(var(--mx, 0) * 4deg)) rotateX(calc(var(--my, 0) * -3deg));
  transition: transform .5s var(--am-ease);
}
.gl {
  position: relative;
  padding: 14px 16px;
  border-radius: 18px;
  color: #e9eef7;
  background: linear-gradient(155deg, rgba(255, 255, 255, .13), rgba(255, 255, 255, .04));
  border: 1px solid rgba(255, 255, 255, .16);
  box-shadow: 0 18px 40px rgba(0, 0, 0, .28), 0 1px 0 rgba(255, 255, 255, .22) inset;
  -webkit-backdrop-filter: blur(16px) saturate(140%);
  backdrop-filter: blur(16px) saturate(140%);
  translate: calc(var(--mx, 0) * var(--d, 10) * -1px) calc(var(--my, 0) * var(--d, 10) * -.7px);
  animation: amIn .8s var(--am-ease) backwards, amFloat 7s ease-in-out infinite;
}
.gl::before {                     /* soft top-edge highlight that sweeps across */
  content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none;
  background: linear-gradient(110deg, transparent 35%, rgba(255, 255, 255, .12) 50%, transparent 65%);
  background-size: 250% 100%; background-position: 130% 0;
  animation: amGlint 6s ease-in-out infinite;
}
@keyframes amIn { from { opacity: 0; transform: translateY(26px) scale(.96); } }
@keyframes amFloat { 50% { transform: translateY(-6px); } }
@keyframes amGlint { 0%, 55% { background-position: 130% 0; } 100% { background-position: -30% 0; } }

/* entrance first, then the float loop starts (both use transform, so they must not overlap) */
.gl-flow { grid-column: 1 / -1; animation-delay: .55s, 1.4s; }
.gl-chart { animation-delay: .7s, 1.6s; animation-duration: .8s, 8s; }
.gl-ring { animation-delay: .85s, 1.8s; animation-duration: .8s, 9s; display: flex; flex-direction: column; align-items: center; justify-content: center; }

.gl-head { display: flex; align-items: center; justify-content: space-between; font-size: .74rem; font-weight: 600; letter-spacing: .03em; color: #b9c4d8; margin-bottom: 10px; }
.gl-head em { font-style: normal; display: inline-flex; align-items: center; gap: 5px; padding: 2px 8px; border-radius: 999px; font-size: .68rem; }
.gl-head em.live { color: #7ee0a8; background: rgba(126, 224, 168, .12); border: 1px solid rgba(126, 224, 168, .3); }
.gl-head em.live i { width: 6px; height: 6px; border-radius: 50%; background: #7ee0a8; animation: amLive 1.6s ease-out infinite; }
@keyframes amLive { 0% { box-shadow: 0 0 0 0 rgba(126, 224, 168, .7); } 100% { box-shadow: 0 0 0 8px rgba(126, 224, 168, 0); } }
.gl-head em.delta { color: #7ee0a8; background: rgba(126, 224, 168, .12); }
.gl-head em.delta .mdi { font-size: .9rem; line-height: 1; }

/* workflow pipeline */
.flow { position: relative; display: grid; grid-template-columns: repeat(4, 1fr); text-align: center; padding-top: 2px; }
.flow-track { position: absolute; left: 12.5%; right: 12.5%; top: 19px; height: 3px; border-radius: 3px; background: rgba(255, 255, 255, .12); overflow: hidden; }
.flow-fill {
  position: absolute; inset: 0; border-radius: inherit;
  background: linear-gradient(90deg, var(--brand-pop), var(--brand-cool));
  box-shadow: 0 0 12px rgba(var(--brand-pop-rgb), .8);
  transform-origin: 0 50%; transform: scaleX(.66);
  transition: transform .9s var(--am-ease);
}
.flow-step { position: relative; z-index: 1; }
.flow-step > span {
  display: grid; place-items: center; width: 40px; height: 40px; margin: 0 auto 7px;
  border-radius: 12px; font-size: 19px;
  color: #8f9db5; background: rgba(15, 23, 42, .55);
  border: 1px solid rgba(255, 255, 255, .14);
  transition: color .4s, background-color .4s, border-color .4s, transform .5s var(--am-spring), box-shadow .4s;
}
.flow-step small { font-size: .7rem; color: #8f9db5; transition: color .4s; }
.flow-step.on > span { color: var(--brand-pop); background: rgba(var(--brand-pop-rgb), .16); border-color: rgba(var(--brand-pop-rgb), .5); }
.flow-step.on small { color: #e9eef7; }
.flow-step.now > span { transform: translateY(-3px) scale(1.1); box-shadow: 0 0 0 4px rgba(var(--brand-pop-rgb), .14), 0 8px 18px rgba(var(--brand-pop-rgb), .3); }

/* chart card */
.gl-chart { color: var(--brand-pop); }
.gl-chart .gl-head { color: #b9c4d8; }
.gl-num { font-size: 1.7rem; font-weight: 700; letter-spacing: -.02em; line-height: 1; color: #fff; font-variant-numeric: tabular-nums; margin-bottom: 4px; }
.spark { display: block; width: 100%; height: auto; overflow: visible; }
.spark-line { stroke-dasharray: 100; stroke-dashoffset: 0; animation: amSpark 8s ease-in-out 1.2s infinite; }
.spark-area { animation: amArea 8s ease-in-out 1.2s infinite; }
.spark-dot { fill: #fff; animation: amDot 8s ease-in-out 1.2s infinite; }
.spark-halo { fill: none; stroke: currentColor; stroke-width: 1.5; transform-box: fill-box; transform-origin: center; animation: amHalo 2s ease-out 2.4s infinite; }
@keyframes amSpark { 0% { stroke-dashoffset: 100; opacity: 1; } 35%, 86% { stroke-dashoffset: 0; opacity: 1; } 96%, 100% { stroke-dashoffset: 0; opacity: 0; } }
@keyframes amArea { 0%, 18% { opacity: 0; } 40%, 86% { opacity: 1; } 96%, 100% { opacity: 0; } }
@keyframes amDot { 0%, 33% { opacity: 0; } 40%, 86% { opacity: 1; } 96%, 100% { opacity: 0; } }
@keyframes amHalo { from { transform: scale(1); opacity: .8; } to { transform: scale(4); opacity: 0; } }

/* ring card */
.ring-wrap { position: relative; width: 92px; height: 92px; }
.ring-wrap svg { width: 100%; height: 100%; transform: rotate(-90deg); }
.ring-bg { fill: none; stroke: rgba(255, 255, 255, .12); stroke-width: 7; }
.ring-fg {
  fill: none; stroke: url(#amRing); stroke-width: 7; stroke-linecap: round;
  stroke-dasharray: 100; stroke-dashoffset: 8;
  filter: drop-shadow(0 0 6px rgba(var(--brand-pop-rgb), .6));
  animation: amRing 2s var(--am-ease) 1.1s backwards;
}
@keyframes amRing { from { stroke-dashoffset: 100; } }
.ring-val { position: absolute; inset: 0; display: grid; place-content: center; text-align: center; font-size: 1.45rem; font-weight: 700; color: #fff; font-variant-numeric: tabular-nums; line-height: 1; }
.ring-val sup { font-size: .6em; color: var(--brand-pop); top: 0; margin-left: 1px; vertical-align: baseline; position: relative; }
.ring-val { display: flex; align-items: center; justify-content: center; }
.ring-label { margin-top: 8px; font-size: .72rem; font-weight: 600; letter-spacing: .03em; color: #b9c4d8; }

/* floating notification */
.gl-toast {
  position: absolute; z-index: 3; right: -14px; bottom: -30px;
  display: flex; align-items: center; gap: 10px;
  padding: 10px 14px 10px 10px; border-radius: 14px;
  background: linear-gradient(155deg, rgba(255, 255, 255, .22), rgba(255, 255, 255, .08));
  animation: amToast 9s var(--am-ease) 2.2s infinite;
}
.gl-toast::before { display: none; }
.gl-toast b { display: block; font-size: .82rem; color: #fff; }
.gl-toast small { display: block; font-size: .7rem; color: #b9c4d8; }
.gl-ico { display: grid; place-items: center; width: 34px; height: 34px; border-radius: 10px; font-size: 19px; }
.gl-ico.ok { color: #7ee0a8; background: rgba(126, 224, 168, .16); border: 1px solid rgba(126, 224, 168, .35); }
@keyframes amToast {
  0% { opacity: 0; transform: translateX(34px) scale(.95); }
  8%, 62% { opacity: 1; transform: none; }
  72%, 100% { opacity: 0; transform: translateX(20px) scale(.97); }
}

/* trust badges */
.brand-trust { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: .5rem .9rem; }
.brand-trust li {
  display: inline-flex; align-items: center; gap: .4rem;
  font-size: .78rem; font-weight: 500; color: #c3cde0;
  animation: amRise .6s var(--am-ease) backwards;
}
.brand-trust li:nth-child(1) { animation-delay: 1.1s; }
.brand-trust li:nth-child(2) { animation-delay: 1.2s; }
.brand-trust li:nth-child(3) { animation-delay: 1.3s; }
.brand-trust .mdi { font-size: 1rem; color: var(--brand-pop); }

/* module ticker */
.brand-marquee {
  overflow: hidden;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 10%, #000 90%, transparent);
  mask-image: linear-gradient(90deg, transparent, #000 10%, #000 90%, transparent);
  animation: amRise .6s var(--am-ease) 1.4s backwards;
}
.mq-track { display: flex; gap: .55rem; width: max-content; animation: amMq 38s linear infinite; }
.brand-marquee:hover .mq-track { animation-play-state: paused; }
.mq-track span {
  flex: none; padding: .3rem .85rem; border-radius: 999px; font-size: .76rem; color: #c3cde0;
  background: rgba(255, 255, 255, .06); border: 1px solid rgba(255, 255, 255, .12);
}
@keyframes amMq { to { transform: translateX(-50%); } }

.brand-foot { margin-top: 0; animation: amRise .6s var(--am-ease) 1.5s backwards; }

/* short screens: drop the secondary rows instead of overflowing */
@media (max-height: 820px) { .brand-trust { display: none; } }
@media (max-height: 780px) {
  .auth-brand { gap: 1rem; padding-top: 1.5rem; padding-bottom: 1.5rem; }
  .brand-top img { height: 46px; }
  .gl-ring, .brand-marquee, .gl-toast { display: none; }
  .gl-chart { grid-column: 1 / -1; }
  .spark { max-height: 44px; }
  .brand-stage { margin-bottom: 0; }
}

/* ======================= FORM CARD ======================= */
.auth-card { position: relative; animation: amCard .8s var(--am-ease) .15s backwards !important; transition: box-shadow .4s var(--am-ease); }
.auth-card:hover { box-shadow: 0 1px 2px rgba(15, 23, 42, .04), 0 22px 48px rgba(var(--accent-rgb), .14); }
@keyframes amCard { from { opacity: 0; transform: translateY(34px) scale(.97); } }
.auth-card::before {
  content: ""; position: absolute; left: 24px; right: 24px; top: -1px; height: 3px; border-radius: 0 0 4px 4px;
  background: linear-gradient(90deg, transparent, var(--accent), var(--brand-pop), var(--accent), transparent);
  background-size: 200% 100%; animation: amEdge 3.5s linear infinite;
}
@keyframes amEdge { to { background-position: -200% 0; } }

.auth-logo { animation: amRise .7s var(--am-ease) .35s backwards; }
.auth-logo img { transition: transform .5s var(--am-spring); }
.auth-logo img:hover { transform: scale(1.06); }
.auth-header h3 { animation: amRise .7s var(--am-ease) .45s backwards; }
.auth-header p { animation: amRise .7s var(--am-ease) .52s backwards; }
#loginForm .form-group:nth-of-type(1) { animation: amRise .7s var(--am-ease) .6s backwards; }
#loginForm .form-group:nth-of-type(2) { animation: amRise .7s var(--am-ease) .7s backwards; }
#loginForm .d-flex { animation: amRise .7s var(--am-ease) .8s backwards; }
#loginForm .btn-auth { animation: amRise .7s var(--am-ease) .9s backwards; }
#loginForm .secure-note { animation: amRise .7s var(--am-ease) 1s backwards; }

.input-wrap .form-control { transition: border-color .2s, box-shadow .25s, transform .25s var(--am-ease); }
.input-wrap:focus-within .form-control { transform: translateY(-1px); }
.input-wrap:focus-within .input-icon { transform: translateY(-50%) scale(1.15); }
.input-icon { z-index: 2; transition: color .15s, transform .3s var(--am-spring); }
.toggle-pass { z-index: 2; transition: background-color .2s, color .2s, transform .25s var(--am-spring); }
.toggle-pass:hover { transform: translateY(-50%) scale(1.1); }
.toggle-pass:active { transform: translateY(-50%) scale(.9); }
.toggle-pass .mdi { display: inline-block; animation: amEye .3s var(--am-spring); }
@keyframes amEye { from { transform: scale(.5) rotate(-30deg); opacity: 0; } }
.field-label { transition: color .2s, transform .25s var(--am-ease); }
.form-group:focus-within .field-label { color: var(--accent); transform: translateX(2px); }
.form-check-input { transition: background-color .2s, border-color .2s, transform .25s var(--am-spring), box-shadow .2s; }
.form-check-input:checked { transform: scale(1.12); }

.btn-auth { position: relative; overflow: hidden; }
.btn-auth::after {
  content: ""; position: absolute; top: 0; bottom: 0; left: -60%; width: 40%;
  background: linear-gradient(100deg, transparent, rgba(255, 255, 255, .35), transparent);
  transform: skewX(-20deg); animation: amSheen 4.5s ease-in-out 2s infinite;
}
@keyframes amSheen { 0%, 55% { left: -60%; } 100% { left: 140%; } }
.btn-auth:active { transform: scale(.98) !important; }
.btn-auth.is-loading { pointer-events: none; }
.btn-auth .am-spin {
  display: inline-block; width: 16px; height: 16px; margin-right: 8px; vertical-align: -3px;
  border: 2px solid rgba(255, 255, 255, .35); border-top-color: var(--on-accent); border-radius: 50%;
  animation: amSpin .7s linear infinite;
}
@keyframes amSpin { to { transform: rotate(360deg); } }
.am-ripple {
  position: absolute; width: 12px; height: 12px; margin: -6px 0 0 -6px; border-radius: 50%;
  background: rgba(255, 255, 255, .4); transform: scale(0); pointer-events: none;
  animation: amRipple .65s var(--am-ease) forwards;
}
@keyframes amRipple { to { transform: scale(28); opacity: 0; } }

.alert-auth { animation: amShake .5s var(--am-ease), amRise .4s var(--am-ease) backwards; }
@keyframes amShake { 15% { transform: translateX(-7px); } 30% { transform: translateX(6px); } 45% { transform: translateX(-4px); } 60% { transform: translateX(3px); } 80% { transform: translateX(-1px); } }
.field-error { animation: amRise .35s var(--am-ease) backwards; }

.am-caps { display: none; align-items: center; gap: .4rem; margin-top: .4rem; font-size: .78rem; color: var(--text-secondary); }
.am-caps.show { display: flex; animation: amRise .3s var(--am-ease); }

.gt-theme-switch button { transition: background-color .25s, color .25s, transform .25s var(--am-spring); }
.gt-theme-switch button:active { transform: scale(.94); }
.gt-theme-switch button svg { transition: transform .5s var(--am-spring); }
.gt-theme-switch button:hover svg { transform: rotate(40deg) scale(1.1); }
html.am-theming *, html.am-theming *::before, html.am-theming *::after {
  transition: background-color .4s ease, color .4s ease, border-color .4s ease, box-shadow .4s ease !important;
}

/* ======================= reduced motion: finished state, no movement ======================= */
@media (prefers-reduced-motion: reduce) {
  .auth-brand *, .auth-brand *::before, .auth-brand *::after,
  .auth-card, .auth-card *, .auth-card::before { animation: none !important; transition: none !important; }
  .brand-dots { display: none; }
  .gl-toast { opacity: 1; }
  .brand-stage { transform: none; }
  .mq-track { flex-wrap: wrap; width: auto; }
  .mq-track span:nth-child(n+12) { display: none; }
}