/* Sign in and Sign up (login.html, signup.html): 3D and animation (auth-fx.js, founder 2026-10-09: make the app pages
   beautiful with 3D animations like Website Analytics). The card keeps its size and look (login.css, founder: "the
   exact one https://app.tanimawoai.com/founder"); everything moving is behind it or a light touch on it. */
.ax-net { position: fixed; inset: 0; width: 100%; height: 100%; z-index: 0; pointer-events: none; }
.al-page .al-wrap { position: relative; isolation: isolate; }
.al-page .al-card { position: relative; z-index: 1; }
.ax-tilt { transition: transform .35s cubic-bezier(.2, .7, .2, 1); }

/* A light sweeps over the logo, and the pill glints */
.ax-shine { position: absolute; left: 0; right: 0; top: 0; height: var(--ax-logo-h, 0px); z-index: 2; overflow: hidden; pointer-events: none; }
.ax-shine::before { content: ""; position: absolute; top: -10%; bottom: -10%; left: -45%; width: 32%; transform: skewX(-20deg);
  background: linear-gradient(90deg, transparent, rgba(160, 215, 255, .22) 50%, transparent); animation: axSweep 7s 1.2s ease-in-out infinite; }
@keyframes axSweep { 0% { left: -45%; } 30%, 100% { left: 130%; } }
.al-page .al-pill { position: relative; overflow: hidden; }
.al-page .al-pill::after { content: ""; position: absolute; inset: 0; background: linear-gradient(100deg, transparent 30%, rgba(255, 255, 255, .45) 50%, transparent 70%); background-size: 260% 100%; animation: axPill 5s 2s linear infinite; }
@keyframes axPill { 0% { background-position: 130% 0; } 40%, 100% { background-position: -130% 0; } }
.al-page .al-head h1 { background-size: 200% 100%; animation: axTitle 8s ease-in-out infinite; }
@keyframes axTitle { 50% { background-position: 100% 0; } }

/* The parts of the card come in one after another */
.ax-in { animation: axIn .7s cubic-bezier(.2, .7, .2, 1) both; animation-delay: calc(.35s + var(--i, 0) * 60ms); }
@keyframes axIn { from { opacity: 0; transform: translateY(14px); } }

/* Fields: a glowing line runs under the box that has focus */
.ax-field { position: relative; }
.ax-field::after { content: ""; position: absolute; left: 10px; right: 10px; bottom: 0; height: 2px; border-radius: 2px; background: linear-gradient(90deg, #38b6ff, #8b7bff, #38b6ff); background-size: 200% 100%;
  transform: scaleX(0); transition: transform .35s cubic-bezier(.2, .7, .2, 1); pointer-events: none; animation: axLine 3s linear infinite; }
.ax-field:focus-within::after { transform: scaleX(1); }
@keyframes axLine { to { background-position: -200% 0; } }

/* Buttons: a shine passes, they press down in 3D, and show a moving bar while they wait */
.al-page .al-btn { position: relative; overflow: hidden; isolation: isolate; transition: background .15s, transform .15s, box-shadow .2s; }
.al-page .al-btn::before { content: ""; position: absolute; top: 0; bottom: 0; left: -60%; width: 40%; z-index: -1; transform: skewX(-20deg); background: linear-gradient(90deg, transparent, rgba(255, 255, 255, .35), transparent); animation: axBtn 4.5s 1.6s ease-in-out infinite; pointer-events: none; }
@keyframes axBtn { 0%, 65% { left: -60%; } 100% { left: 140%; } }
.al-page .al-btn:hover:not(:disabled) { box-shadow: 0 12px 28px -12px rgba(31, 123, 255, .95); transform: translateY(-1px); }
.al-page .al-btn:active:not(:disabled) { transform: perspective(500px) rotateX(10deg) scale(.985); }
.al-page .al-btn:disabled::after { content: ""; position: absolute; left: 0; bottom: 0; height: 3px; width: 35%; background: linear-gradient(90deg, transparent, #fff, transparent); animation: axWait 1s linear infinite; }
@keyframes axWait { from { left: -35%; } to { left: 100%; } }
.al-page .al-google { transition: background .15s, border-color .15s, transform .15s; }
.al-page .al-google:hover { transform: translateY(-1px); }

/* Password helpers: strength, Caps Lock, both passwords the same */
.ax-meter { display: flex; align-items: center; gap: 10px; margin: 8px 0 0; font-size: .76rem; color: #7d86a3; }
.ax-meter[hidden], .ax-caps[hidden], .ax-match[hidden] { display: none; }
.ax-bars { display: grid; grid-template-columns: repeat(4, 1fr); gap: 4px; flex: 1; max-width: 180px; }
.ax-bars i { height: 4px; border-radius: 2px; background: rgba(255, 255, 255, .1); transition: background .25s, box-shadow .25s; }
.ax-meter[data-s="1"] .ax-bars i:nth-child(-n+1) { background: #f87171; }
.ax-meter[data-s="2"] .ax-bars i:nth-child(-n+2) { background: #fbbf24; }
.ax-meter[data-s="3"] .ax-bars i:nth-child(-n+3) { background: #38b6ff; }
.ax-meter[data-s="4"] .ax-bars i { background: #4ade80; box-shadow: 0 0 8px rgba(74, 222, 128, .5); }
.ax-meter[data-s="1"] b { color: #fca5a5; } .ax-meter[data-s="2"] b { color: #fcd34d; } .ax-meter[data-s="3"] b { color: #7dd3fc; } .ax-meter[data-s="4"] b { color: #86efac; }
.ax-meter b { font-weight: 600; white-space: nowrap; }
.ax-caps, .ax-match { display: flex; align-items: center; gap: 6px; margin: 8px 0 0; font-size: .78rem; font-weight: 600; }
.ax-caps { color: #fcd34d; }
.ax-match { color: #86efac; } .ax-match.is-no { color: #fca5a5; }
.ax-caps svg, .ax-match svg { width: 14px; height: 14px; flex: 0 0 auto; }

@media (prefers-reduced-motion: reduce) {
  .ax-shine::before, .al-page .al-pill::after, .al-page .al-head h1, .ax-in, .ax-field::after, .al-page .al-btn::before { animation: none !important; }
  .ax-tilt { transition: none; }
}