/* Cloud authentication: warm, quiet forms alongside a single brand illustration.
   Motion: form entrance, signal draw, and existing focused/hovered controls. */
.cloud-auth { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr); background: var(--page); }
.cloud-auth-form-side { display: flex; flex-direction: column; min-height: 100svh; }
.cloud-auth .auth-header { padding: 36px clamp(24px, 4vw, 64px); }
.cloud-auth .brand { font-size: 30px; }
.cloud-auth .auth-main { width: min(100% - 48px, 390px); margin: auto; padding: 44px 0 56px; flex: none; animation: cloud-form-in 350ms ease-out both; }
.cloud-auth .auth-kicker { margin-bottom: 18px; letter-spacing: .14em; }
.cloud-auth .auth-main > h1 { font-size: clamp(30px, 3vw, 38px); line-height: 1.18; }
.cloud-auth .auth-description { margin: 14px 0 30px; font-size: 14px; }
.cloud-auth .auth-main .form-stack { gap: 20px; }
.cloud-auth input:not([type='checkbox'], [type='radio']) { min-height: 48px; border-radius: 7px; padding: 12px 14px; }
.cloud-auth .auth-main .button-primary { min-height: 48px; font-size: 14px; border-radius: 7px; }
.cloud-auth .auth-alternative { font-size: 13px; margin-top: 26px; }
.cloud-auth .auth-footer { padding: 24px clamp(24px, 4vw, 64px); font-size: 11px; flex-wrap: wrap; }
.cloud-auth-story { position: relative; display: flex; flex-direction: column; min-height: 100svh; overflow: hidden; padding: 42px clamp(32px, 4.5vw, 72px) 28px; background: #101827; color: #f4f3e9; }
.cloud-auth-story-top, .cloud-auth-story-bottom { display: flex; justify-content: space-between; align-items: center; gap: 20px; color: #acb8bf; font-size: 10px; letter-spacing: .12em; }
.cloud-auth-story-top > span:last-child { font-size: 24px; line-height: 1; color: #b6d68c; }
.cloud-auth-art { position: relative; width: calc(100% + 80px); max-width: 650px; min-height: 230px; aspect-ratio: 600 / 450; margin: auto -40px 0; }
.cloud-auth-orbits { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.cloud-auth-orbits ellipse { stroke: #748572; stroke-opacity: .25; stroke-width: 1; }
.cloud-auth-orbits .cloud-auth-signal { stroke: #b6d68c; stroke-width: 2; stroke-dasharray: 700; stroke-dashoffset: 700; animation: cloud-signal-in 900ms 180ms ease-out forwards; }
.cloud-auth-orbits circle { fill: #b6d68c; }
.cloud-auth-mark { position: absolute; left: 50%; top: 50%; width: 30%; height: auto; transform: translate(-50%, -50%); }
.cloud-auth-story-copy { position: relative; padding: 12px 0 52px; margin-bottom: auto; }
.cloud-auth-story-label { font-size: 10px; letter-spacing: .12em; color: #b6d68c; margin-bottom: 20px; }
.cloud-auth-story-copy h2 { font-size: clamp(31px, 3.5vw, 49px); line-height: 1.13; letter-spacing: -.045em; font-weight: 500; }
.cloud-auth-story-copy > p:last-child { color: #bcc6cc; max-width: 350px; font-size: 14px; line-height: 1.8; margin-top: 22px; }
.cloud-auth-story-bottom { padding-top: 20px; border-top: 1px solid #34424e; font-size: 10px; letter-spacing: 0; }
.cloud-auth-story-bottom > span:last-child { font-size: 18px; color: #f4f3e9; font-weight: 600; letter-spacing: -.04em; }
@keyframes cloud-form-in { from { opacity: 0; transform: translateY(7px); } to { opacity: 1; transform: none; } }
@keyframes cloud-signal-in { to { stroke-dashoffset: 0; } }
@media (min-width: 1500px) { .cloud-auth { grid-template-columns: 1fr 1fr; } .cloud-auth-story { padding-left: 96px; padding-right: 96px; } }
@media (max-width: 900px) { .cloud-auth { grid-template-columns: minmax(0, 1fr); } .cloud-auth-story { display: none; } .cloud-auth .auth-main { padding: 36px 0 48px; } }
@media (max-width: 480px) { .cloud-auth .auth-header { padding: 25px 24px; } .cloud-auth .auth-footer { gap: 12px; font-size: 10px; } .cloud-auth .auth-main { margin: auto; } }
@media (prefers-reduced-motion: reduce) { .cloud-auth .auth-main, .cloud-auth-orbits .cloud-auth-signal { animation: none; } .cloud-auth-orbits .cloud-auth-signal { stroke-dashoffset: 0; } }