/* ═══════════════════════════════════════════════════════════════
   LeadTractor — customer portal motion
   Loaded only on /login, /register and /account (main.portal).
   Brand: LeadTractor Indigo + slate (BRAND.md). Motion is smooth and
   calm, mostly transform/opacity, and switches off for
   prefers-reduced-motion.
   ═══════════════════════════════════════════════════════════════ */

:root {
    --e-out: cubic-bezier(0.16, 1, 0.3, 1);
    --e-soft: cubic-bezier(0.45, 0, 0.2, 1);
    --st-ic-alert: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpath d='M12 7.5v5.2M12 16.3h.01'/%3E%3C/svg%3E");
    --st-ic-check: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpath d='M8.2 12.2l2.6 2.6 5-5.2'/%3E%3C/svg%3E");
}
@property --beam { syntax: '<angle>'; inherits: false; initial-value: 0deg; }

/* ── 1. Page transitions between the portal pages (Chromium) ── */
@view-transition { navigation: auto; }
::view-transition-old(root), ::view-transition-new(root) { animation-duration: 0.4s; animation-timing-function: var(--e-soft); }
::view-transition-group(portal-card), ::view-transition-group(portal-graphic) { animation-duration: 0.6s; animation-timing-function: var(--e-out); }
.portal .auth-shell > .auth-card { view-transition-name: portal-card; }
.portal .auth-shell > .portal-graphic { view-transition-name: portal-graphic; }
html.vt .portal .auth-shell > .auth-card, html.vt .portal .auth-shell > .portal-graphic { animation: none; }

/* ── 2. Frame & ambient background ─────────────────────────── */
.portal { position: relative; isolation: isolate; overflow: hidden; background: var(--slate-50); }
.portal > section { position: relative; z-index: 1; }
/* Desktop: copy and graphic on the left, card on the right.
   Phones: heading → form → graphic, so the form is never pushed down. */
.portal .auth-shell { grid-template-areas: ". card" "copy card" "graphic card" ". card"; grid-template-rows: 1fr auto auto 1fr; row-gap: 0; align-items: start; }
.portal .auth-shell > .auth-copy { grid-area: copy; }
.portal .auth-shell > .portal-graphic { grid-area: graphic; }
.portal .auth-shell > .auth-card { grid-area: card; align-self: center; }
.portal-bg { position: absolute; inset: 0; z-index: 0; overflow: hidden; pointer-events: none; }
.portal-orb { position: absolute; border-radius: 50%; will-change: transform; }
.portal-orb.o1 { width: 680px; height: 680px; left: -240px; top: -280px; background: radial-gradient(closest-side, rgba(99, 102, 241, 0.3), rgba(99, 102, 241, 0)); animation: orbA 24s var(--e-soft) infinite alternate; }
.portal-orb.o2 { width: 760px; height: 760px; right: -320px; top: 6%; background: radial-gradient(closest-side, rgba(129, 140, 248, 0.26), rgba(129, 140, 248, 0)); animation: orbB 30s var(--e-soft) -8s infinite alternate; }
.portal-orb.o3 { width: 560px; height: 560px; left: 30%; bottom: -340px; background: radial-gradient(closest-side, rgba(79, 70, 229, 0.2), rgba(79, 70, 229, 0)); animation: orbC 26s var(--e-soft) -4s infinite alternate; }
@keyframes orbA { to { transform: translate3d(130px, 90px, 0) scale(1.12); } }
@keyframes orbB { to { transform: translate3d(-150px, 70px, 0) scale(0.9); } }
@keyframes orbC { to { transform: translate3d(-100px, -120px, 0) scale(1.16); } }
.portal-grid { position: absolute; inset: -48px; background-image: linear-gradient(rgba(79, 70, 229, 0.07) 1px, transparent 1px), linear-gradient(90deg, rgba(79, 70, 229, 0.07) 1px, transparent 1px); background-size: 48px 48px; -webkit-mask-image: radial-gradient(ellipse 72% 58% at 50% 32%, #000 22%, transparent 74%); mask-image: radial-gradient(ellipse 72% 58% at 50% 32%, #000 22%, transparent 74%); animation: gridDrift 40s linear infinite; }
@keyframes gridDrift { to { transform: translate3d(48px, 48px, 0); } }
.portal-dots i { position: absolute; bottom: -12px; width: 5px; height: 5px; border-radius: 50%; background: var(--brand-400); opacity: 0; animation: dotRise 20s linear infinite; }
.portal-dots i:nth-child(1) { left: 6%; animation-duration: 17s; animation-delay: -3s; }
.portal-dots i:nth-child(2) { left: 14%; width: 4px; height: 4px; animation-duration: 22s; animation-delay: -11s; }
.portal-dots i:nth-child(3) { left: 23%; width: 6px; height: 6px; animation-duration: 19s; animation-delay: -7s; }
.portal-dots i:nth-child(4) { left: 31%; width: 4px; height: 4px; animation-duration: 25s; animation-delay: -15s; }
.portal-dots i:nth-child(5) { left: 42%; animation-duration: 18s; animation-delay: -1s; }
.portal-dots i:nth-child(6) { left: 51%; width: 3px; height: 3px; animation-duration: 23s; animation-delay: -9s; }
.portal-dots i:nth-child(7) { left: 60%; width: 6px; height: 6px; animation-duration: 20s; animation-delay: -13s; }
.portal-dots i:nth-child(8) { left: 68%; width: 4px; height: 4px; animation-duration: 26s; animation-delay: -5s; }
.portal-dots i:nth-child(9) { left: 76%; animation-duration: 19s; animation-delay: -17s; }
.portal-dots i:nth-child(10) { left: 84%; width: 4px; height: 4px; animation-duration: 24s; animation-delay: -2s; }
.portal-dots i:nth-child(11) { left: 91%; width: 6px; height: 6px; animation-duration: 21s; animation-delay: -10s; }
.portal-dots i:nth-child(12) { left: 97%; width: 3px; height: 3px; animation-duration: 27s; animation-delay: -6s; }
@keyframes dotRise {
    0% { opacity: 0; transform: translate3d(0, 0, 0) scale(0.5); }
    12% { opacity: 0.5; }
    85% { opacity: 0.25; }
    100% { opacity: 0; transform: translate3d(28px, -105vh, 0) scale(1.1); }
}

/* ── 3. Entrance choreography ──────────────────────────────── */
@keyframes pRise { from { opacity: 0; transform: translate3d(0, 20px, 0); filter: blur(6px); } }
@keyframes pWord { from { opacity: 0; transform: translate3d(0, 0.55em, 0) rotate(4deg); filter: blur(10px); } }
@keyframes pPop { from { opacity: 0; transform: translate3d(0, 18px, 0) scale(0.94); } }
@keyframes pCard { from { opacity: 0; transform: perspective(1100px) translate3d(0, 40px, 0) rotateX(8deg) scale(0.96); filter: blur(4px); } }

.portal .portal-badge { animation: pRise 0.7s var(--e-out) 0.05s backwards; }
.portal .portal-title .w { display: inline-block; animation: pWord 0.95s var(--e-out) calc(0.14s + var(--i, 0) * 0.09s) backwards; }
.portal .portal-title .w:nth-child(2) { --i: 1; }
.portal .portal-title .w:nth-child(3) { --i: 2; }
.portal .portal-title .w:nth-child(4) { --i: 3; }
.portal .portal-title .w:nth-child(5) { --i: 4; }
.portal .portal-title .w:nth-child(6) { --i: 5; }
.portal .portal-title .shine {
    color: var(--brand-600);
    padding: 0 0.03em 0.1em; margin: 0 -0.03em -0.1em;
    background: linear-gradient(100deg, var(--brand-600) 0%, var(--brand-600) 38%, var(--brand-300) 50%, var(--brand-600) 62%, var(--brand-600) 100%);
    background-size: 260% 100%; background-position: 100% 0;
    -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent;
    animation: pWord 0.95s var(--e-out) calc(0.14s + var(--i, 0) * 0.09s) backwards, sheen 6s var(--e-soft) 1.8s infinite;
}
@keyframes sheen { 0% { background-position: 100% 0; } 45%, 100% { background-position: 0 0; } }
.portal .auth-copy > p, .portal .portal-head > p { animation: pRise 0.8s var(--e-out) 0.5s backwards; }
.portal .auth-shell > .portal-graphic { animation: pRise 1s var(--e-out) 0.62s backwards; }

.portal .auth-shell > .auth-card { animation: pCard 1.1s var(--e-out) 0.22s backwards; }
.portal .auth-card-head { animation: pRise 0.7s var(--e-out) 0.45s backwards; }
.portal .stacked-form > * { animation: pRise 0.7s var(--e-out) calc(0.55s + var(--i, 0) * 0.08s) backwards; }
.portal .stacked-form > :nth-child(2) { --i: 1; }
.portal .stacked-form > :nth-child(3) { --i: 2; }
.portal .stacked-form > :nth-child(4) { --i: 3; }
.portal .stacked-form > :nth-child(5) { --i: 4; }
.portal .stacked-form > :nth-child(6) { --i: 5; }
.portal .auth-switch { animation: pRise 0.7s var(--e-out) 1s backwards; }

/* Live pulse dot used in badges */
.portal .pulse-dot { position: relative; width: 7px; height: 7px; border-radius: 50%; background: currentColor; flex-shrink: 0; }
.portal .pulse-dot::after { content: ''; position: absolute; inset: 0; border-radius: 50%; background: currentColor; animation: pulsePing 1.9s var(--e-soft) infinite; }
@keyframes pulsePing { 0% { transform: scale(1); opacity: 0.6; } 80%, 100% { transform: scale(2.8); opacity: 0; } }

/* ── 4. Auth card: light beam, spotlight, tilt, states ─────── */
.portal .auth-card { position: relative; isolation: isolate; }
.portal .auth-shell > .auth-card {
    border-color: rgba(203, 213, 225, 0.75);
    box-shadow: 0 1px 2px rgba(15, 23, 42, 0.04), 0 34px 70px -34px rgba(30, 27, 75, 0.42);
    transform: perspective(1100px) rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg));
    transition: transform 0.6s var(--e-out), box-shadow 0.45s var(--e-out);
}
.portal .auth-shell > .auth-card.is-tilting { transition: transform 0.12s linear, box-shadow 0.45s var(--e-out); }
.portal .auth-shell > .auth-card::before {
    content: ''; position: absolute; inset: -1px; z-index: 2; border-radius: inherit; padding: 1.5px; pointer-events: none;
    background: conic-gradient(from var(--beam), transparent 0turn, transparent 0.6turn, var(--brand-300) 0.8turn, var(--brand-600) 0.9turn, transparent 1turn);
    -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
    -webkit-mask-composite: xor;
    mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
    mask-composite: exclude;
    animation: beam 6.5s linear infinite;
}
@keyframes beam { to { --beam: 360deg; } }
.portal .auth-card::after {
    content: ''; position: absolute; inset: 0; z-index: -1; border-radius: inherit; pointer-events: none;
    background: radial-gradient(420px circle at var(--mx, 50%) var(--my, 0%), rgba(79, 70, 229, 0.09), transparent 62%);
    opacity: 0; transition: opacity 0.45s var(--e-soft);
}
.portal .auth-card:hover::after, .portal .auth-card:focus-within::after { opacity: 1; }
.portal .auth-shell > .auth-card.is-entered { animation: none; }
.portal .auth-shell > .auth-card.is-entered.is-shake { animation: cardShake 0.6s cubic-bezier(0.36, 0.07, 0.19, 0.97) both; }
@keyframes cardShake {
    10%, 90% { transform: translate3d(-1px, 0, 0); }
    20%, 80% { transform: translate3d(3px, 0, 0); }
    30%, 50%, 70% { transform: translate3d(-6px, 0, 0); }
    40%, 60% { transform: translate3d(6px, 0, 0); }
}
.portal .auth-shell > .auth-card.is-success { box-shadow: 0 0 0 4px rgba(79, 70, 229, 0.14), 0 34px 70px -30px rgba(30, 27, 75, 0.5); }
.portal .auth-shell > .auth-card.is-busy::before { animation-duration: 1.6s; }

.portal .auth-card-head { display: flex; align-items: center; gap: 14px; margin-bottom: 22px; }
.portal .auth-card-head h2 { margin-bottom: 2px; }
.portal .auth-card-head .auth-subtitle { margin-bottom: 0; }
.portal .auth-card-icon { position: relative; display: grid; place-items: center; width: 50px; height: 50px; flex-shrink: 0; border-radius: 15px; background: var(--brand-600); color: #fff; box-shadow: 0 12px 24px -12px rgba(79, 70, 229, 0.85); animation: iconIn 0.9s var(--e-out) 0.5s backwards; }
.portal .auth-card-icon .ic { width: 24px; height: 24px; vertical-align: 0; }
.portal .auth-card-icon::after { content: ''; position: absolute; inset: -5px; border-radius: 19px; border: 1.5px solid var(--brand-300); opacity: 0; animation: iconPing 3s var(--e-soft) 1.6s infinite; }
@keyframes iconIn { from { opacity: 0; transform: scale(0.5) rotate(-18deg); } }
@keyframes iconPing { 0% { opacity: 0.8; transform: scale(0.9); } 70%, 100% { opacity: 0; transform: scale(1.2); } }

/* ── 5. Fields ─────────────────────────────────────────────── */
.portal .stacked-form { gap: 18px; }
.portal .field-group { display: grid; gap: 7px; }
.portal .stacked-form .field-group > label { display: flex; flex-direction: row; align-items: baseline; justify-content: space-between; gap: 8px; font-size: 13.5px; font-weight: 600; color: var(--slate-800); }
.portal .field-group > label em { font-style: normal; font-size: 12px; font-weight: 500; color: var(--slate-400); }
.portal .field { position: relative; display: block; border-radius: 12px; }
.portal .stacked-form .field input {
    height: 48px; padding: 0 44px; border: 1px solid var(--slate-300); border-radius: 12px; background: #fff; font-size: 15px;
    transition: border-color 0.25s var(--e-soft), box-shadow 0.45s var(--e-out), background-color 0.25s;
}
.portal .stacked-form .field input::placeholder { color: var(--slate-400); transition: opacity 0.25s; }
.portal .stacked-form .field input:focus::placeholder { opacity: 0.5; }
.portal .stacked-form .field input:hover { border-color: var(--slate-400); }
.portal .stacked-form .field input:focus { border-color: var(--brand-500); box-shadow: 0 0 0 4px rgba(79, 70, 229, 0.13), 0 12px 26px -16px rgba(79, 70, 229, 0.6); }
.portal .field-ic { position: absolute; left: 15px; top: 50%; width: 18px; height: 18px; margin-top: -9px; color: var(--slate-400); pointer-events: none; vertical-align: 0; transition: color 0.25s, transform 0.5s var(--e-out); }
.portal .field:focus-within .field-ic { color: var(--brand-600); transform: scale(1.15) rotate(-6deg); }
.portal .field::after { content: ''; position: absolute; left: 14px; right: 14px; bottom: 0; height: 2px; border-radius: 2px; background: var(--brand-600); transform: scaleX(0); transition: transform 0.55s var(--e-out); pointer-events: none; }
.portal .field:focus-within::after { transform: scaleX(1); }
.portal .field-ok { position: absolute; right: 15px; top: 50%; width: 18px; height: 18px; margin-top: -9px; fill: none; stroke: var(--brand-600); stroke-width: 2.6; stroke-linecap: round; stroke-linejoin: round; pointer-events: none; opacity: 0; transform: scale(0.6); transition: opacity 0.2s, transform 0.5s var(--e-out); }
.portal .field-ok path { stroke-dasharray: 22; stroke-dashoffset: 22; transition: stroke-dashoffset 0.6s var(--e-out) 0.05s; }
.portal .field.is-valid .field-ok { opacity: 1; transform: none; }
.portal .field.is-valid .field-ok path { stroke-dashoffset: 0; }
.portal .stacked-form .field.is-invalid input { border-color: var(--st-lost); box-shadow: 0 0 0 4px rgba(220, 38, 38, 0.12); }
.portal .field.is-invalid .field-ic { color: var(--st-lost); }
.portal .field.is-invalid::after { background: var(--st-lost); }
.portal .field.is-shake { animation: fieldShake 0.45s cubic-bezier(0.36, 0.07, 0.19, 0.97); }
@keyframes fieldShake { 20%, 60% { transform: translateX(-5px); } 40%, 80% { transform: translateX(5px); } }

.portal .stacked-form .field.has-eye input { padding-right: 50px; }
.portal .field-eye { position: absolute; right: 7px; top: 50%; width: 34px; height: 34px; margin-top: -17px; display: grid; place-items: center; border: 0; border-radius: 9px; background: none; color: var(--slate-400); transition: color 0.2s, background-color 0.2s; }
.portal .field-eye:hover { color: var(--brand-700); background: var(--brand-50); }
.portal .field-eye .ic { grid-area: 1 / 1; width: 18px; height: 18px; vertical-align: 0; transition: opacity 0.25s, transform 0.5s var(--e-out); }
.portal .field-eye .ic-off { opacity: 0; transform: scale(0.5) rotate(-30deg); }
.portal .field-eye[aria-pressed="true"] .ic-on { opacity: 0; transform: scale(0.5) rotate(30deg); }
.portal .field-eye[aria-pressed="true"] .ic-off { opacity: 1; transform: none; }
.portal .caps-hint { display: flex; align-items: center; gap: 6px; font-size: 12.5px; font-weight: 600; color: var(--st-progress-fg); }
.portal .caps-hint .ic { width: 14px; height: 14px; vertical-align: 0; }
.portal .caps-hint:not([hidden]) { animation: pRise 0.35s var(--e-out) both; }

/* Password strength (register) — status colors carry the meaning */
.portal .pw-meter { display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px; margin-top: 3px; }
.portal .pw-meter i { position: relative; height: 4px; border-radius: 4px; background: var(--slate-200); overflow: hidden; }
.portal .pw-meter i::after { content: ''; position: absolute; inset: 0; border-radius: inherit; background: var(--pw, var(--brand-600)); transform: scaleX(0); transform-origin: left center; transition: transform 0.5s var(--e-out), background-color 0.3s; }
.portal .pw-meter i:nth-child(2)::after { transition-delay: 0.06s; }
.portal .pw-meter i:nth-child(3)::after { transition-delay: 0.12s; }
.portal .pw-meter i:nth-child(4)::after { transition-delay: 0.18s; }
.portal .pw-meter[data-score="1"] { --pw: var(--st-lost); }
.portal .pw-meter[data-score="2"] { --pw: var(--st-progress); }
.portal .pw-meter[data-score="3"], .portal .pw-meter[data-score="4"] { --pw: var(--st-done); }
.portal .pw-meter[data-score="1"] i:nth-child(-n+1)::after,
.portal .pw-meter[data-score="2"] i:nth-child(-n+2)::after,
.portal .pw-meter[data-score="3"] i:nth-child(-n+3)::after,
.portal .pw-meter[data-score="4"] i::after { transform: scaleX(1); }
.portal .pw-hint { min-height: 18px; font-size: 12.5px; color: var(--slate-500); transition: color 0.3s; }
.portal .pw-hint[data-tone="weak"] { color: var(--st-lost-fg); }
.portal .pw-hint[data-tone="fair"] { color: var(--st-progress-fg); }
.portal .pw-hint[data-tone="good"], .portal .pw-hint[data-tone="strong"] { color: var(--st-done-fg); }

/* ── 6. Buttons ────────────────────────────────────────────── */
.portal .btn { position: relative; overflow: hidden; isolation: isolate; }
.portal .btn .ic { transition: transform 0.4s var(--e-out); }
.portal .btn .ripple { position: absolute; z-index: -1; border-radius: 50%; pointer-events: none; background: rgba(255, 255, 255, 0.42); transform: scale(0); animation: ripple 0.7s var(--e-out) forwards; }
.portal .btn-secondary .ripple { background: rgba(79, 70, 229, 0.16); }
@keyframes ripple { to { transform: scale(1); opacity: 0; } }
.portal .btn-portal { height: 50px; margin-top: 2px; font-size: 15.5px; border-radius: 12px; }
.portal .btn-portal:hover { box-shadow: 0 16px 30px -14px rgba(79, 70, 229, 0.8); }
.portal .btn-portal::before { content: ''; position: absolute; z-index: -1; top: 0; bottom: 0; left: 0; width: 45%; background: linear-gradient(100deg, transparent, rgba(255, 255, 255, 0.3), transparent); transform: translateX(-120%) skewX(-18deg); animation: btnSheen 4.6s var(--e-soft) 2.4s infinite; }
@keyframes btnSheen { 0% { transform: translateX(-120%) skewX(-18deg); } 45%, 100% { transform: translateX(330%) skewX(-18deg); } }
.portal .btn-portal .btn-label { transition: transform 0.4s var(--e-out); }
.portal .btn-spinner, .portal .btn-done { position: absolute; left: 18px; top: 50%; width: 20px; height: 20px; margin-top: -10px; opacity: 0; transform: scale(0.4); transition: opacity 0.25s, transform 0.5s var(--e-out); }
.portal .btn-spinner { border-radius: 50%; border: 2.5px solid rgba(255, 255, 255, 0.3); border-top-color: #fff; animation: spin 0.8s linear infinite; }
.portal .btn-done { fill: none; stroke: #fff; stroke-width: 2.8; stroke-linecap: round; stroke-linejoin: round; }
.portal .btn-done path { stroke-dasharray: 22; stroke-dashoffset: 22; transition: stroke-dashoffset 0.55s var(--e-out) 0.1s; }
.portal .stacked-form .btn-portal.is-loading, .portal .stacked-form .btn-portal.is-success { opacity: 1; cursor: default; transform: none; }
.portal .btn-portal.is-loading .btn-spinner { opacity: 1; transform: none; }
.portal .btn-portal.is-loading::before { animation-duration: 1.3s; animation-delay: 0s; }
.portal .btn-portal.is-loading .btn-label, .portal .btn-portal.is-success .btn-label { transform: translateX(8px); }
.portal .btn-portal.is-success { background: var(--brand-700); border-color: var(--brand-700); }
.portal .btn-portal.is-success::before { animation: none; }
.portal .btn-portal.is-success .btn-done { opacity: 1; transform: none; }
.portal .btn-portal.is-success .btn-done path { stroke-dashoffset: 0; }
@keyframes spin { to { rotate: 360deg; } }
.portal .btn-logout:hover .ic { transform: translateX(3px); }
.portal .account-actions .btn-primary:hover .ic { transform: rotate(-8deg) scale(1.12); }

/* Success burst */
.portal .burst { position: absolute; z-index: 3; width: 0; height: 0; pointer-events: none; }
.portal .burst i { position: absolute; left: -3px; top: -3px; width: 6px; height: 6px; border-radius: 50%; background: var(--brand-500); animation: burst 0.85s var(--e-out) forwards; }
.portal .burst i:nth-child(3n) { background: var(--brand-300); width: 5px; height: 5px; }
.portal .burst i:nth-child(4n) { background: var(--brand-700); }
@keyframes burst { from { transform: translate3d(0, 0, 0) scale(1); opacity: 1; } to { transform: translate3d(var(--tx), var(--ty), 0) scale(0.2); opacity: 0; } }

/* ── 7. Status messages ────────────────────────────────────── */
.portal .form-status { display: flex; align-items: flex-start; gap: 10px; }
.portal .form-status[class*="form-status-"]::before { content: ''; flex-shrink: 0; width: 18px; height: 18px; margin-top: 1px; background: currentColor; -webkit-mask: var(--st-ic, var(--st-ic-alert)) center / contain no-repeat; mask: var(--st-ic, var(--st-ic-alert)) center / contain no-repeat; }
.portal .form-status-success { --st-ic: var(--st-ic-check); }
.portal .form-status:not([hidden]) { animation: statusIn 0.5s var(--e-out) both; }
.portal .form-status.is-replay { animation: statusNudge 0.5s var(--e-out); }
@keyframes statusIn { from { opacity: 0; transform: translateY(-8px) scale(0.98); } }
@keyframes statusNudge { 30% { transform: scale(1.02); } }

/* ── 8. Login graphic ──────────────────────────────────────── */
.portal .portal-graphic { position: relative; }
.portal .portal-window { box-shadow: 0 30px 60px -30px rgba(30, 27, 75, 0.38); animation: winFloat 7s var(--e-soft) 1.8s infinite alternate; }
@keyframes winFloat { to { transform: translate3d(0, -10px, 0); } }
.portal .portal-window-bar { align-items: center; }
.portal .portal-window-bar em { flex: 1; margin-left: 10px; font-style: normal; font-size: 11.5px; color: var(--slate-500); background: var(--slate-50); border: 1px solid var(--slate-200); border-radius: 6px; padding: 1px 10px; text-align: center; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.portal .portal-hero-line { position: relative; overflow: hidden; display: flex; flex-direction: column; justify-content: center; gap: 10px; padding: 0 18px; }
.portal .portal-hero-line b { position: relative; z-index: 1; color: #fff; font-size: 14px; font-weight: 700; letter-spacing: -0.01em; }
.portal .portal-hero-line i { position: relative; z-index: 1; display: block; height: 6px; border-radius: 6px; background: rgba(255, 255, 255, 0.22); overflow: hidden; }
.portal .portal-hero-line i::after { content: ''; position: absolute; inset: 0; border-radius: inherit; background: #fff; transform: scaleX(0); transform-origin: left center; animation: heroFill 5s var(--e-out) 1.3s infinite; }
@keyframes heroFill { 0% { transform: scaleX(0); opacity: 1; } 55% { transform: scaleX(1); opacity: 1; } 80%, 100% { transform: scaleX(1); opacity: 0; } }
.portal .portal-hero-line::after { content: ''; position: absolute; top: 0; bottom: 0; left: 0; width: 40%; background: linear-gradient(100deg, transparent, rgba(255, 255, 255, 0.24), transparent); transform: translateX(-120%) skewX(-20deg); animation: btnSheen 5.2s var(--e-soft) 2.6s infinite; }
.portal .portal-row { grid-template-columns: 30px 1fr auto; animation: rowIn 0.75s var(--e-out) backwards; }
.portal .portal-row:nth-child(1) { animation-delay: 1s; }
.portal .portal-row:nth-child(2) { animation-delay: 1.14s; }
.portal .portal-row:nth-child(3) { animation-delay: 1.28s; }
@keyframes rowIn { from { opacity: 0; transform: translate3d(28px, 0, 0); } }
.portal .portal-dot { position: relative; }
.portal .portal-dot::after { content: ''; position: absolute; inset: -9px; border-radius: 50%; border: 2px solid var(--brand-300); opacity: 0; animation: dotPing 2.6s var(--e-soft) 1.4s infinite; }
.portal .portal-row:nth-child(2) .portal-dot::after { animation-delay: 2.2s; }
.portal .portal-row:nth-child(3) .portal-dot::after { animation-delay: 3s; }
@keyframes dotPing { 0% { opacity: 0.9; transform: scale(0.55); } 70%, 100% { opacity: 0; transform: scale(1.15); } }
.portal .row-check { width: 18px; height: 18px; fill: none; stroke: var(--brand-600); stroke-width: 2.6; stroke-linecap: round; stroke-linejoin: round; }
.portal .row-check path { stroke-dasharray: 22; stroke-dashoffset: 22; animation: draw 0.6s var(--e-out) 1.6s forwards; }
.portal .portal-row:nth-child(2) .row-check path { animation-delay: 1.75s; }
@keyframes draw { to { stroke-dashoffset: 0; } }
.portal .row-typing { display: inline-flex; align-items: center; gap: 3px; padding: 6px 8px; border-radius: 999px; background: var(--brand-50); }
.portal .row-typing i { width: 5px; height: 5px; border-radius: 50%; background: var(--brand-500); animation: typing 1.2s var(--e-soft) infinite; }
.portal .row-typing i:nth-child(2) { animation-delay: 0.15s; }
.portal .row-typing i:nth-child(3) { animation-delay: 0.3s; }
@keyframes typing { 0%, 60%, 100% { transform: translateY(0); opacity: 0.45; } 30% { transform: translateY(-4px); opacity: 1; } }
.portal .portal-chip { position: absolute; z-index: 2; display: inline-flex; align-items: center; gap: 9px; padding: 8px 14px 8px 8px; border-radius: 12px; background: #fff; border: 1px solid var(--slate-200); box-shadow: 0 18px 36px -18px rgba(15, 23, 42, 0.38); font-size: 13px; font-weight: 600; color: var(--slate-800); white-space: nowrap; }
.portal .portal-chip .ic { width: 28px; height: 28px; padding: 6px; border-radius: 8px; background: var(--brand-50); color: var(--brand-600); vertical-align: 0; }
.portal .portal-chip.pc1 { top: -18px; right: -28px; animation: chipIn 0.8s var(--e-out) 1.5s backwards, chipFloat 6s var(--e-soft) 2.3s infinite alternate; }
.portal .portal-chip.pc2 { bottom: -20px; left: -26px; animation: chipIn 0.8s var(--e-out) 1.7s backwards, chipFloat 7s var(--e-soft) 2.5s infinite alternate-reverse; }
@keyframes chipIn { from { opacity: 0; transform: translate3d(0, 14px, 0) scale(0.85); } }
@keyframes chipFloat { to { transform: translate3d(0, -9px, 0); } }

/* ── 9. Register graphic: the customer journey ─────────────── */
.portal .portal-step { transition: border-color 0.45s var(--e-soft), box-shadow 0.45s var(--e-soft), transform 0.6s var(--e-out); }
.portal .portal-step strong { border: 1px solid transparent; background: var(--slate-100) var(--check-icon) center / 0 0 no-repeat; transition: background-color 0.45s, background-size 0.5s var(--e-out), color 0.3s, border-color 0.45s, transform 0.5s var(--e-out); }
.portal .portal-step.is-complete strong { background-color: var(--brand-50); background-size: 13px 13px; border-color: var(--brand-100); color: transparent; }
.portal .portal-step.is-active strong { background-color: var(--brand-600); color: #fff; animation: ringPulse 1.9s var(--e-soft) infinite; }
.portal .portal-step.is-active { transform: translateY(-3px); }
@keyframes ringPulse { 0% { box-shadow: 0 0 0 0 rgba(79, 70, 229, 0.45); } 100% { box-shadow: 0 0 0 10px rgba(79, 70, 229, 0); } }
.portal .portal-progress { height: 6px; margin: 0 0 14px; border-radius: 6px; background: var(--slate-100); overflow: hidden; }
.portal .portal-progress i { display: block; height: 100%; border-radius: inherit; background: var(--brand-600); transform: scaleX(var(--p, 0.5)); transform-origin: left center; transition: transform 0.9s var(--e-out); }
.portal .portal-license-card { position: relative; display: grid; overflow: hidden; padding-right: 48px; transition: border-color 0.45s, background-color 0.45s, box-shadow 0.45s; }
.portal .portal-license-card > span { grid-row: 1; }
.portal .portal-license-card .lic-wait, .portal .portal-license-card .lic-ready { grid-row: 2; grid-column: 1; transition: opacity 0.4s var(--e-soft), transform 0.55s var(--e-out); }
.portal .portal-license-card .lic-ready { opacity: 0; transform: translateY(8px); color: var(--brand-700); }
.portal .portal-license-card.is-ready { border-color: var(--brand-200); background: var(--brand-50); box-shadow: 0 14px 26px -18px rgba(79, 70, 229, 0.65); }
.portal .portal-license-card.is-ready .lic-wait { opacity: 0; transform: translateY(-8px); }
.portal .portal-license-card.is-ready .lic-ready { opacity: 1; transform: none; }
.portal .portal-license-card::after { content: ''; position: absolute; top: 0; bottom: 0; left: 0; width: 40%; background: linear-gradient(100deg, transparent, rgba(255, 255, 255, 0.8), transparent); transform: translateX(-130%) skewX(-20deg); pointer-events: none; }
.portal .portal-license-card.is-ready::after { animation: btnSheen 1.4s var(--e-soft) 0.2s 1 forwards; }
.portal .lic-key { position: absolute; right: 15px; top: 50%; width: 22px; height: 22px; margin-top: -11px; color: var(--slate-400); transition: color 0.45s, transform 0.7s var(--e-out); }
.portal .portal-license-card.is-ready .lic-key { color: var(--brand-600); transform: rotate(-24deg) scale(1.18); }

/* ── 10. Account dashboard ─────────────────────────────────── */
.portal .portal-head { margin-bottom: 36px; }
.portal .portal-head h1 { margin-top: 16px; }
.portal-checking-card { display: none; }
html.portal-checking .portal-checking-card { display: flex; align-items: center; justify-content: center; gap: 12px; max-width: 420px; margin: 0 auto; padding: 22px; border-radius: var(--radius-xl); background: #fff; border: 1px solid var(--slate-200); box-shadow: var(--shadow-lg); color: var(--slate-600); font-weight: 600; animation: pRise 0.5s var(--e-out) 0.2s backwards; }
html.portal-checking #signedOutPanel { display: none; }
.portal-spinner { width: 22px; height: 22px; border-radius: 50%; border: 3px solid var(--brand-100); border-top-color: var(--brand-600); animation: spin 0.8s linear infinite; }

.portal .portal-locked { max-width: 540px; margin: 0 auto; text-align: center; animation: pCard 1s var(--e-out) 0.15s backwards; }
.portal .portal-locked .btn-group { justify-content: center; }
.portal .lock-tile { display: inline-grid; place-items: center; width: 66px; height: 66px; margin-bottom: 18px; border-radius: 19px; background: var(--brand-600); color: #fff; box-shadow: 0 16px 30px -14px rgba(79, 70, 229, 0.85); animation: iconIn 0.9s var(--e-out) 0.4s backwards; }
.portal .lock-tile svg { width: 30px; height: 30px; fill: none; stroke: currentColor; stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round; overflow: visible; }
.portal .lock-tile .shackle { transform-box: fill-box; transform-origin: 88% 100%; animation: shackle 3.8s var(--e-soft) 1.4s infinite; }
@keyframes shackle { 0%, 55%, 100% { transform: none; } 65% { transform: translateY(-2.5px); } 74%, 84% { transform: translateY(-2.5px) rotate(-20deg); } 94% { transform: none; } }

.portal .account-grid > * { animation: pRise 0.8s var(--e-out) backwards; }
.portal .account-grid > :nth-child(2) { animation-delay: 0.1s; }
.portal .account-grid > :nth-child(3) { animation-delay: 0.2s; }
.portal .account-grid > :nth-child(4) { animation-delay: 0.3s; }
.portal .account-grid .account-card { transition: transform 0.45s var(--e-out), box-shadow 0.45s var(--e-out), border-color 0.45s; }
.portal .account-grid .account-card:hover { transform: translateY(-3px); border-color: var(--brand-200); }

.portal .account-kpis { grid-column: 1 / -1; display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.portal .kpi { position: relative; display: flex; align-items: center; gap: 14px; padding: 18px 20px; background: #fff; border: 1px solid var(--slate-200); border-radius: var(--radius-lg); overflow: hidden; animation: pPop 0.7s var(--e-out) backwards; transition: transform 0.45s var(--e-out), box-shadow 0.45s var(--e-out), border-color 0.45s; }
.portal .kpi:nth-child(2) { animation-delay: 0.08s; }
.portal .kpi:nth-child(3) { animation-delay: 0.16s; }
.portal .kpi:hover { transform: translateY(-3px); border-color: var(--brand-200); box-shadow: var(--shadow-lg); }
.portal .kpi::after { content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: 3px; background: var(--brand-600); transform: scaleX(0); transform-origin: left center; transition: transform 1.1s var(--e-out); }
.portal .kpi.is-live::after { transform: scaleX(1); }
.portal .kpi b { display: block; font-size: 28px; font-weight: 800; letter-spacing: -0.03em; line-height: 1.1; color: var(--slate-900); font-variant-numeric: tabular-nums; transition: color 0.4s; }
.portal .kpi b.is-counting { color: var(--brand-700); }
.portal .kpi div > span { font-size: 13px; font-weight: 500; color: var(--slate-500); }
.portal .kpi-ic { display: grid; place-items: center; width: 46px; height: 46px; flex-shrink: 0; border-radius: 13px; background: var(--brand-50); color: var(--brand-600); border: 1px solid var(--brand-100); transition: transform 0.5s var(--e-out); }
.portal .kpi:hover .kpi-ic { transform: rotate(-8deg) scale(1.08); }
.portal .kpi-ic .ic { width: 22px; height: 22px; vertical-align: 0; }

.portal .profile-top { display: flex; align-items: center; gap: 18px; margin-bottom: 22px; }
.portal .profile-id { min-width: 0; }
.portal .account-card .profile-id .badge { margin-bottom: 8px; }
.portal .profile-id h2 { margin-bottom: 2px; }
.portal .profile-id .auth-subtitle { margin-bottom: 0; overflow-wrap: anywhere; }
.portal .profile-avatar { position: relative; display: grid; place-items: center; width: 68px; height: 68px; flex-shrink: 0; border-radius: 50%; background: var(--brand-600); color: #fff; font-size: 22px; font-weight: 800; letter-spacing: -0.02em; box-shadow: 0 14px 28px -14px rgba(79, 70, 229, 0.85); }
.portal .profile-avatar i { position: absolute; inset: -6px; border-radius: 50%; background: conic-gradient(from var(--beam), var(--brand-600), var(--brand-200), var(--brand-600)); -webkit-mask: radial-gradient(farthest-side, transparent calc(100% - 3px), #000 calc(100% - 2.5px)); mask: radial-gradient(farthest-side, transparent calc(100% - 3px), #000 calc(100% - 2.5px)); animation: beam 3.6s linear infinite; }
.portal .profile-avatar b { position: relative; }
.portal .profile-avatar.is-updated b { animation: initialsIn 0.7s var(--e-out); }
@keyframes initialsIn { from { opacity: 0; transform: scale(0.4) rotate(-12deg); } }

.portal .skeleton-row { display: grid; grid-template-columns: 1fr 64px; align-items: center; gap: 14px; padding: 14px 0; border-bottom: 1px solid var(--slate-100); }
.portal .skeleton-row:last-of-type { border-bottom: 0; }
.portal .skeleton-row i { display: block; height: 12px; border-radius: 6px; background: linear-gradient(90deg, var(--slate-100) 0%, var(--slate-200) 20%, var(--slate-100) 40%); background-size: 300% 100%; animation: shimmer 1.6s linear infinite; }
.portal .skeleton-row i:first-child { width: 72%; }
.portal .skeleton-row i:last-child { height: 22px; border-radius: 999px; }
.portal .skeleton-license { grid-template-columns: 1fr 72px; }
.portal .skeleton-license i:nth-child(1) { width: 40%; height: 15px; }
.portal .skeleton-license i:nth-child(2) { grid-row: 2; width: 78%; }
.portal .skeleton-license i:nth-child(3) { grid-row: 1 / span 2; grid-column: 2; height: 24px; border-radius: 999px; }
@keyframes shimmer { from { background-position: 100% 0; } to { background-position: -50% 0; } }

.portal .account-message-row, .portal .license-row { animation: rowIn 0.7s var(--e-out) backwards; }
.portal .account-message-row:nth-child(2), .portal .license-row:nth-child(2) { animation-delay: 0.08s; }
.portal .account-message-row:nth-child(3), .portal .license-row:nth-child(3) { animation-delay: 0.16s; }
.portal .account-message-row:nth-child(4), .portal .license-row:nth-child(4) { animation-delay: 0.24s; }
.portal .account-message-row:nth-child(5), .portal .license-row:nth-child(5) { animation-delay: 0.32s; }
.portal .account-messages > p, .portal .account-licenses > p { animation: pRise 0.6s var(--e-out) backwards; }
.portal .license-key code { font-variant-ligatures: none; letter-spacing: 0.02em; transition: background-color 0.4s, border-color 0.4s, color 0.4s; }
.portal .license-key code.is-decoding { color: var(--brand-700); background: var(--brand-50); border-color: var(--brand-100); }
.portal .copy-license.is-copied { animation: pop 0.5s var(--e-out); background: var(--brand-50); border-color: var(--brand-200); color: var(--brand-700); }
@keyframes pop { 35% { transform: scale(0.92); } 70% { transform: scale(1.06); } 100% { transform: scale(1); } }

/* ── 11. Responsive ────────────────────────────────────────── */
@media (max-width: 1100px) {
    .portal .portal-chip.pc1 { right: -8px; }
    .portal .portal-chip.pc2 { left: -8px; }
}
@media (max-width: 900px) {
    .portal .auth-shell { grid-template-areas: "copy" "card" "graphic"; grid-template-rows: none; row-gap: 32px; }
    .portal .auth-shell > .auth-card { transform: none; }
    .portal .auth-shell > .portal-graphic { margin-top: 8px; }
}
@media (max-width: 640px) {
    .portal-orb.o1 { width: 420px; height: 420px; }
    .portal-orb.o2 { width: 460px; height: 460px; right: -220px; }
    .portal-orb.o3 { width: 380px; height: 380px; }
    .portal .portal-chip { display: none; }
    .portal .account-kpis { gap: 8px; }
    .portal .kpi { flex-direction: column; align-items: flex-start; gap: 10px; padding: 14px; }
    .portal .kpi-ic { width: 38px; height: 38px; border-radius: 11px; }
    .portal .kpi-ic .ic { width: 19px; height: 19px; }
    .portal .kpi b { font-size: 24px; }
    .portal .kpi div > span { font-size: 12px; line-height: 1.3; }
    .portal .profile-top { flex-direction: column; text-align: center; }
    .portal .auth-card-head { gap: 12px; }
    .portal .auth-card-icon { width: 44px; height: 44px; border-radius: 13px; }
}

/* ── 12. Reduced motion: keep it still ─────────────────────── */
@media (prefers-reduced-motion: reduce) {
    @view-transition { navigation: none; }
    .portal *, .portal *::before, .portal *::after, .portal-checking-card { animation: none !important; }
    .portal-dots, .portal .auth-shell > .auth-card::before, .portal .btn-portal::before { display: none; }
    .portal .auth-shell > .auth-card { transform: none !important; }
    .portal .field-ok path, .portal .row-check path, .portal .btn-done path { stroke-dashoffset: 0; }
}

/* ── 13. Dashboard quick links ─────────────────────────────── */
.portal .quick-links { display: grid; gap: 4px; margin-top: 22px; padding-top: 16px; border-top: 1px solid var(--slate-100); }
.portal .quick-links li { animation: rowIn 0.6s var(--e-out) 0.35s backwards; }
.portal .quick-links li:nth-child(2) { animation-delay: 0.45s; }
.portal .quick-links li:nth-child(3) { animation-delay: 0.55s; }
.portal .quick-links a { display: flex; align-items: center; gap: 12px; padding: 9px 12px; margin: 0 -12px; border-radius: 12px; color: var(--slate-900); transition: background-color 0.3s; }
.portal .quick-links a:hover { background: var(--brand-50); color: var(--slate-900); }
.portal .quick-links strong { display: block; font-size: 14.5px; font-weight: 600; }
.portal .quick-links small { display: block; font-size: 12.5px; color: var(--slate-500); }
.portal .ql-ic { display: grid; place-items: center; width: 38px; height: 38px; flex-shrink: 0; border-radius: 11px; background: var(--slate-50); border: 1px solid var(--slate-200); color: var(--slate-500); transition: background-color 0.35s, border-color 0.35s, color 0.35s, transform 0.5s var(--e-out); }
.portal .ql-ic .ic { width: 18px; height: 18px; vertical-align: 0; }
.portal .quick-links a:hover .ql-ic { background: var(--brand-600); border-color: var(--brand-600); color: #fff; transform: rotate(-6deg) scale(1.06); }
.portal .ql-arrow { margin-left: auto; color: var(--slate-300); transition: transform 0.4s var(--e-out), color 0.3s; }
.portal .quick-links a:hover .ql-arrow { transform: translateX(4px); color: var(--brand-600); }