/* Auth + unit-select pages (login.html, register.html, index.html) */

.auth-body { display: flex; align-items: center; justify-content: center; }

.auth-wrap { width: 100%; max-width: 440px; padding: 20px; }
.logo-top { text-align: center; margin-bottom: 24px; }
.logo-top .tcu-logo { font-size: 2.2rem; }
.logo-sub { font-size: 0.82rem; color: var(--text-soft); margin-top: 2px; }
.auth-card { background: var(--surface); border-radius: 18px; box-shadow: var(--shadow-float); overflow: hidden; }
.card-header-title { padding: 24px 28px 0 28px; font-size: 1.25rem; font-weight: 700; color: var(--text); opacity: 0; animation: titleRise 0.55s cubic-bezier(.16,1,.3,1) forwards; animation-delay: 0.2s; }
.tab-body { padding: 24px 28px 28px 28px; }
.auth-card .form-label { font-size: 0.83rem; color: #444; }
.auth-card .form-control, .auth-card .form-select { border-radius: 9px; border-color: var(--border-strong); padding: 10px 13px; }

.btn-purple-block {
  background: var(--brand-purple); color: #fff; border: none; border-radius: 9px;
  padding: 12px; font-size: 0.93rem; font-weight: 700; width: 100%; cursor: pointer;
  transition: background 0.2s;
}
.btn-purple-block:hover { background: var(--brand-purple-dark); }

.remember-row { display: flex; align-items: center; gap: 8px; font-size: 0.82rem; color: #555; }
.forgot-link { font-size: 0.82rem; color: var(--brand-purple); margin-left: auto; }
.forgot-link:hover { text-decoration: underline; }
.redirect-row { text-align: center; font-size: 0.85rem; color: var(--text-muted); margin-top: 20px; }
.redirect-row a { color: var(--brand-purple); font-weight: 600; }
.redirect-row a:hover { text-decoration: underline; }
.secure-note { text-align: center; font-size: 0.78rem; color: #aaa; margin-top: 20px; }

/* ---- Unit select (index.html) ---- */
.logo-badge { width: 80px; height: 80px; background: #fff; border-radius: 18px; box-shadow: var(--shadow-card); display: flex; align-items: center; justify-content: center; margin: 0 auto; }
.main-title { font-size: 2.8rem; font-weight: 800; color: var(--brand-purple); }
.search-input { border-radius: 50px; border: 1px solid #e0e0e0; padding: 14px 24px; font-size: 1rem; box-shadow: var(--shadow-card); width: 100%; max-width: 500px; outline: none; }
.search-input:focus { border-color: var(--brand-purple); box-shadow: 0 0 0 3px rgba(108, 61, 224, 0.1); }
.brand-label { font-size: 0.75rem; font-weight: 700; letter-spacing: 0.12em; color: #a0a0b0; margin-bottom: 14px; }
.brand-card { background: #1e2130; border-radius: 16px; border: 1.5px solid #2e3250; padding: 24px 14px 18px; text-align: center; cursor: pointer; transition: border-color 0.4s cubic-bezier(.16,1,.3,1), transform 0.4s cubic-bezier(.16,1,.3,1), box-shadow 0.4s cubic-bezier(.16,1,.3,1); position: relative; min-height: 190px; display: flex; flex-direction: column; align-items: center; justify-content: center; }
.brand-card:hover { border-color: #00c9a7; transform: translateY(-3px); box-shadow: 0 8px 32px rgba(0, 201, 167, 0.15); }
.brand-card.active { border-color: #00c9a7; box-shadow: 0 0 0 2px rgba(0, 201, 167, 0.25); }
.tick-badge { position: absolute; top: 12px; right: 12px; width: 26px; height: 26px; border-radius: 50%; background: #00c9a7; display: flex; align-items: center; justify-content: center; opacity: 0; transition: opacity 0.2s; }
.brand-card.active .tick-badge { opacity: 1; }
.elite-circle-outer { width: 84px; height: 84px; border-radius: 50%; border: 2.5px solid #00c9a7; display: flex; align-items: center; justify-content: center; background: #141624; margin: 0 auto 18px; }
.elite-circle-inner { width: 64px; height: 64px; border-radius: 50%; background: #0d0f1c; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; }
.elite-arc { width: 28px; height: 14px; border: 2.5px solid #00c9a7; border-bottom: none; border-radius: 28px 28px 0 0; margin-bottom: 2px; }
.elite-dot { width: 5px; height: 5px; border-radius: 50%; background: #00c9a7; margin-top: -6px; }
.elite-text { font-size: 0.58rem; font-weight: 800; letter-spacing: 0.08em; color: #00c9a7; margin-top: 2px; }
.hwd-text { font-size: 2rem; font-weight: 800; color: var(--brand-orange); letter-spacing: 0.04em; margin-bottom: 18px; }
.brand-name { font-size: 0.88rem; font-weight: 600; color: #c8ccd8; margin-top: 4px; }
.brand-logo-wrap { width: 84px; height: 84px; border-radius: 50%; background: #fff; display: flex; align-items: center; justify-content: center; margin: 0 auto 14px; overflow: hidden; padding: 8px; }
.brand-logo-img { max-width: 100%; max-height: 100%; object-fit: contain; display: block; }
.footer-hint { font-size: 0.82rem; color: #999; background: #fff; border-radius: var(--radius-pill); padding: 8px 20px; display: inline-block; box-shadow: var(--shadow-card); }

/* ---- Brand-select micro-animations ---- */
@keyframes logoPop { 0% { transform: scale(0.6); opacity: 0; } 70% { transform: scale(1.08); opacity: 1; } 100% { transform: scale(1); opacity: 1; } }
.brand-logo-wrap, .elite-circle-outer { animation: logoPop 0.85s cubic-bezier(.34,1.56,.64,1) both; animation-delay: calc(var(--d, 0s) + 0.35s); }

@keyframes tickPop { 0% { transform: scale(0) rotate(-45deg); opacity: 0; } 100% { transform: scale(1) rotate(0deg); opacity: 1; } }
.tick-badge { animation: tickPop 0.7s cubic-bezier(.34,1.56,.64,1) both; animation-delay: calc(var(--d, 0s) + 0.55s); }
.brand-card:not(.active) .tick-badge { animation: none; }

@keyframes activePulse { 0%, 100% { box-shadow: 0 0 0 0 rgba(0, 201, 167, 0.45); } 50% { box-shadow: 0 0 0 8px rgba(0, 201, 167, 0); } }
.brand-card.active { animation: activePulse 3s ease-in-out infinite; }

.brand-name { position: relative; display: inline-block; }
.brand-name::after { content: ''; position: absolute; left: 0; bottom: -3px; width: 100%; height: 1px; background: currentColor; transform: scaleX(0); transform-origin: left; transition: transform 0.5s cubic-bezier(.16,1,.3,1); }
.brand-card:hover .brand-name::after { transform: scaleX(1); }

/* ---- Hero title staggered word reveal (Select Your Brand / Sign In / Create Account) ---- */
.hero-title { overflow: visible; }
.word-mask { display: inline-block; overflow: hidden; vertical-align: top; padding-bottom: 0.08em; }
.word-mask .word { display: inline-block; transform: translateY(115%); animation: wordRise 1.1s cubic-bezier(.16,1,.3,1) forwards; }
.word-mask:nth-child(1) .word { animation-delay: 0.1s; }
.word-mask:nth-child(2) .word { animation-delay: 0.26s; }
.word-mask:nth-child(3) .word { animation-delay: 0.42s; }
.word.accent { color: var(--brand-purple); }
@keyframes wordRise { to { transform: translateY(0); } }

@media (prefers-reduced-motion: reduce) {
  .brand-logo-wrap, .elite-circle-outer, .tick-badge, .brand-card.active, .word-mask .word, .brand-name::after {
    animation: none !important; transition: none !important; opacity: 1 !important; transform: none !important;
  }
}