/* Public login: shared form geometry, isolated split composition. */
.login-page { margin:0; color:var(--text); background:var(--surface); font-family:var(--font-ui); }
.login-page *, .login-page *::before, .login-page *::after { box-sizing:border-box; }
.login-page [hidden] { display:none !important; }
.login-page a { color:var(--blue); text-underline-offset:4px; }
.login-page button, .login-page input { font-family:inherit; }
.login-page :focus-visible { outline:3px solid var(--focus-color); outline-offset:4px; }
.login-skip { position:fixed; z-index:10; top:12px; left:12px; padding:12px 20px; background:var(--surface); border:1px solid var(--line); border-radius:var(--control-radius); transform:translateY(-180%); }
.login-skip:focus { transform:translateY(0); }
.login-layout { display:grid; grid-template-columns:minmax(380px, 38%) minmax(0, 1fr); min-height:100svh; }
.login-access { position:relative; display:flex; flex-direction:column; justify-content:center; align-items:center; padding:36px clamp(28px,4.6vw,88px); border-right:1px solid var(--line); background:var(--surface); z-index:1; }
.login-identity { text-align:center; margin-bottom:clamp(32px,5vh,64px); }
.login-identity__logo { display:block; width:132px; height:auto; margin-inline:auto; }
.login-identity__rule { display:block; width:40px; height:2px; margin:18px auto 14px; background:var(--blue); }
.login-product { margin:0; font-size:20px; letter-spacing:.13em; font-weight:700; color:var(--navy); }

.login-content { width:100%; max-width:var(--form-width-access); }
.login-heading { margin-bottom:var(--space-6); }
.login-eyebrow { margin:0 0 6px; color:var(--blue); font-size:var(--type-small); font-weight:600; letter-spacing:.07em; text-transform:uppercase; }
.login-heading h1 { margin:0 0 6px; color:var(--navy); font-size:var(--form-title-size); line-height:1.2; letter-spacing:-.035em; font-weight:700; }
.login-heading > p:last-child { margin:0; color:var(--muted); font-size:var(--type-body); line-height:1.55; }
.login-form { display:grid; gap:var(--space-4); }
.login-field { display:grid; gap:var(--space-2); }
.login-field label { color:var(--text); font-weight:500; }
.login-field input { width:100%; min-height:var(--form-control-height); padding:12px 14px; border:1px solid var(--control-border); border-radius:var(--form-control-radius); color:var(--text); background:var(--surface); transition:border-color var(--motion-fast), box-shadow var(--motion-fast); }
.login-field input::placeholder { color:var(--muted); opacity:.85; }
.login-field input:focus { border-color:var(--blue); box-shadow:0 0 0 3px color-mix(in srgb,var(--blue) 12%,transparent); outline:0; }
.login-field input[aria-invalid="true"] { border-color:var(--error-text); }
.login-submit svg { width:21px; height:21px; stroke:currentColor; stroke-width:1.6; fill:none; }
.login-recovery { justify-self:end; font-size:var(--type-small); text-decoration:none; min-height:28px; display:flex; align-items:center; margin-top:-6px; }
.login-recovery:hover { text-decoration:underline; }
.login-submit { display:flex; justify-content:center; align-items:center; gap:14px; min-height:48px; margin-top:8px; padding:12px 20px; background:var(--blue); color:white; border:0; border-radius:var(--form-control-radius); font-weight:600; cursor:pointer; transition:background var(--motion-standard), box-shadow var(--motion-standard), transform var(--motion-standard); }
.login-submit svg { transition:transform var(--motion-standard); }
.login-submit:hover:not(:disabled) { background:var(--navy-2); box-shadow:0 5px 15px #0d2a5020; transform:translateY(-1px); }
.login-submit:hover:not(:disabled) svg { transform:translateX(3px); }
.login-submit:active:not(:disabled) { transform:none; }
.login-submit:disabled { cursor:not-allowed; opacity:.72; }
.login-submitting { margin:0; color:var(--muted); font-size:var(--type-small); }
.login-submitting:empty { display:none; }
.login-error { background:var(--error-surface); border:1px solid color-mix(in srgb,var(--error-text) 25%,white); border-radius:var(--control-radius); padding:12px 14px; margin-bottom:20px; color:var(--error-text); font-size:var(--type-small); line-height:1.5; }
.login-support { display:flex; gap:16px; align-items:flex-start; border-top:1px solid var(--line); padding-top:24px; margin-top:32px; font-size:var(--type-small); }
.login-support__icon { width:29px; height:29px; flex:none; fill:none; stroke:var(--blue); stroke-width:1.5; }
.login-support summary { cursor:pointer; list-style:none; min-height:44px; }
.login-support summary::-webkit-details-marker { display:none; }
.login-support summary strong { display:block; font-weight:600; }
.login-support summary span { display:block; margin-top:3px; color:var(--muted); }
.login-support summary:hover span { color:var(--blue); text-decoration:underline; }
.login-support details p { margin:12px 0 0; color:var(--muted); line-height:1.6; }
.login-preview-note { font-size:var(--type-small); color:var(--muted); line-height:1.5; margin:16px 0 0; }
.login-story { --story-ink:#d6e8f6; position:relative; min-height:100svh; overflow:hidden; isolation:isolate; background:#0c2848; color:white; }
.login-story__photo { position:absolute; z-index:-2; width:100%; height:67%; bottom:0; mask-image:linear-gradient(transparent,black 35%); }
.login-vessel__name { font-family:var(--font-ui); font-size:34px; font-weight:750; letter-spacing:1.2px; fill:#c4d6e1; opacity:.86; }
.login-story::after { content:""; position:absolute; z-index:-1; inset:0; pointer-events:none; background:linear-gradient(180deg,#0d2a5000 60%,#051c3620 85%,#051c3680); }
.login-story__map { position:absolute; z-index:-1; top:2%; right:0; width:60%; height:auto; opacity:.85; }
.login-story__heading { position:relative; z-index:2; padding:clamp(48px,8vh,96px) clamp(40px,5.5vw,110px) 0; }
.login-story__heading h2 { font-size:clamp(32px,3.45vw,58px); line-height:1.1; letter-spacing:-.035em; font-weight:650; margin:0 0 16px; }
.login-story__heading p { color:#b0cbe2; margin:0; font-size:clamp(17px,1.45vw,23px); line-height:1.5; }
.login-network { position:absolute; z-index:2; top:34%; left:14%; width:61%; max-width:610px; aspect-ratio:2; }
.login-flow { width:100%; height:100%; overflow:visible; }
.login-flow__lines { stroke:#71c4ef; stroke-width:.8; opacity:.55; }
.login-flow__signals { stroke:#d2f0ff; stroke-width:1.7; stroke-linecap:round; }
.login-flow__signals use { stroke-dasharray:.05 .95; stroke-dashoffset:1; opacity:0; }
.login-page.has-login-signals .login-flow__signals use { animation:login-signal 4s linear 600ms 3; }
.login-page.has-login-signals .login-flow__signals use:nth-child(2) { animation-delay:1100ms; }
.login-page.has-login-signals .login-flow__signals use:nth-child(3) { animation-delay:1600ms; }
.login-page.has-login-signals .login-flow__signals use:nth-child(4) { animation-delay:2100ms; }
.login-flow__nodes { fill:#a4e2ff; }
.login-map-beacons { opacity:0; }
.login-beacon { --beacon-phase:0s; }
.login-beacon:nth-child(3n+2) { --beacon-phase:-1.05s; }
.login-beacon:nth-child(3n) { --beacon-phase:-2.1s; }
.login-beacon__halo, .login-beacon__core { transform-box:fill-box; transform-origin:center; pointer-events:none; }
.login-beacon__halo { opacity:0; }
.login-beacon__core { fill:#c1f1ff; }
.login-page.has-login-pulse .login-map-beacons { opacity:1; }
/* Explicitly requested ambient light, confined to points; pause/reduce below
   also govern these cycles. No movement of the map, lines, logo or photograph. */
.login-page.has-login-pulse .login-beacon__halo { animation:login-beacon-halo 3200ms ease-in-out var(--beacon-phase) infinite; }
.login-page.has-login-pulse .login-beacon__core { animation:login-beacon-core 3200ms ease-in-out var(--beacon-phase) infinite; }
@keyframes login-beacon-halo { 0%,100% { opacity:.12; transform:scale(.6); } 50% { opacity:.95; transform:scale(1.25); } }
@keyframes login-beacon-core { 0%,100% { opacity:.65; transform:scale(1); } 50% { opacity:1; transform:scale(1.45); } }
.login-flow__icons { stroke:#d0e4f4; stroke-width:1.5; }
.login-network__brand { position:absolute; left:46%; top:43%; width:11%; height:auto; }
.login-story__areas { position:absolute; left:83%; top:43%; list-style:none; padding:0; margin:0; display:grid; gap:15px; font-size:10px; font-weight:500; letter-spacing:.2em; text-transform:uppercase; color:#b0cbe2; }
.login-story__signature { position:absolute; bottom:32px; left:32px; margin:0; font-size:11px; letter-spacing:.2em; line-height:1.9; text-transform:uppercase; color:var(--story-ink); }
.login-motion { position:fixed; z-index:5; right:24px; bottom:28px; min-height:44px; padding:8px 12px; display:flex; gap:8px; align-items:center; color:var(--story-ink); background:#0d2a5070; border:1px solid #aecce233; border-radius:var(--control-radius); cursor:pointer; }
.login-motion svg { width:16px; height:16px; fill:none; stroke:currentColor; stroke-width:1.5; }
.login-motion__play { display:none; }
.login-motion[aria-pressed="true"] .login-motion__play { display:block; }
.login-motion[aria-pressed="true"] .login-motion__pause { display:none; }
.login-motion[data-motion-action="finished"] .login-motion__play { display:block; }
.login-motion[data-motion-action="finished"] .login-motion__pause { display:none; }
.login-motion[data-motion-action="reduced"] .login-motion__play { display:block; }
.login-motion[data-motion-action="reduced"] .login-motion__pause { display:none; }
.login-motion:hover { background:#174a77; }
.login-page.has-login-entrance :is(.login-identity, .login-content, .login-story__heading, .login-network) { animation:login-arrive var(--motion-enter) var(--motion-ease-enter, ease-out) backwards; }
.login-page.has-login-entrance .login-content { animation-delay:90ms; }
.login-page.has-login-entrance .login-story__heading { animation-delay:160ms; }
.login-page.has-login-entrance .login-network { animation-delay:280ms; }
.login-page.is-motion-paused *,
.login-page.is-motion-paused *::before,
.login-page.is-motion-paused *::after,
.login-page.is-document-hidden *,
.login-page.is-document-hidden *::before,
.login-page.is-document-hidden *::after { animation-play-state:paused !important; }
@keyframes login-arrive { from { opacity:0; transform:translateY(8px); } to { opacity:1; transform:translateY(0); } }
@keyframes login-signal { 0% { opacity:0; stroke-dashoffset:1; } 12%,75% { opacity:.9; } 90%,100% { opacity:0; stroke-dashoffset:0; } }
@media (min-width:1700px) { .login-identity__logo { width:156px; } .login-access { padding-block:48px; } .login-heading { margin-bottom:32px; } .login-form { gap:22px; } }
@media (max-height:760px) and (min-width:901px) { .login-access { padding-block:24px; } .login-identity { margin-bottom:26px; } .login-identity__logo { width:105px; } .login-identity__rule { margin:10px auto; } .login-heading { margin-bottom:20px; } .login-support { margin-top:24px; padding-top:20px; } }
@media (max-width:1100px) and (min-width:901px) { .login-access { padding-inline:32px; } .login-story__heading { padding-inline:36px; } .login-story__areas { display:none; } .login-network { width:78%; left:8%; } }
@media (max-width:900px) {
  .login-layout { grid-template-columns:1fr; }
  .login-access { min-height:100svh; padding:32px 24px; border:0; }
  .login-identity { position:relative; isolation:isolate; margin-bottom:32px; }
  .login-identity::before { position:absolute; z-index:-1; top:-17px; left:50%; width:146px; height:146px; transform:translateX(-50%) scale(.92); border:1px solid color-mix(in srgb,var(--blue) 18%,transparent); border-radius:50%; background:radial-gradient(circle,color-mix(in srgb,var(--blue) 9%,transparent),transparent 66%); opacity:.24; content:""; pointer-events:none; }
  .login-identity__logo { position:relative; width:112px; }
  .login-identity__rule { position:relative; overflow:hidden; }
  .login-identity__rule::after { position:absolute; inset:0 auto 0 -45%; width:45%; background:linear-gradient(90deg,transparent,#9ce6ff,transparent); content:""; opacity:0; }
  .login-page.has-login-pulse .login-identity::before { animation:login-compact-halo 3600ms ease-in-out infinite; }
  .login-page.has-login-pulse .login-identity__rule::after { animation:login-compact-signal 3600ms ease-in-out 350ms infinite; }
  .login-story { display:none; }
  .login-motion { right:12px; bottom:12px; min-width:44px; justify-content:center; padding:8px; border-color:color-mix(in srgb,var(--navy) 16%,transparent); background:color-mix(in srgb,var(--surface) 92%,transparent); color:var(--navy-2); box-shadow:0 4px 14px rgba(18,48,81,.1); }
  .login-motion:hover { background:var(--surface); }
  .login-motion span { position:absolute; width:1px; height:1px; overflow:hidden; clip-path:inset(50%); white-space:nowrap; }
}
@keyframes login-compact-halo { 0%,100% { opacity:.18; transform:translateX(-50%) scale(.92); } 50% { opacity:.55; transform:translateX(-50%) scale(1.03); } }
@keyframes login-compact-signal { 0%,18% { left:-45%; opacity:0; } 32%,58% { opacity:.9; } 72%,100% { left:100%; opacity:0; } }
@media (max-width:400px) { .login-access { padding:24px 20px; } .login-identity { margin-bottom:26px; } .login-identity__logo { width:96px; } .login-product { font-size:18px; } }
@media (prefers-reduced-motion:reduce) {
  .login-page:not(.allows-motion) .login-map-beacons { opacity:0 !important; }
  .login-page:not(.allows-motion) *,
  .login-page:not(.allows-motion) *::before,
  .login-page:not(.allows-motion) *::after { animation:none !important; transition:none !important; scroll-behavior:auto !important; }
  .login-page:not(.allows-motion) .login-submit:hover:not(:disabled),
  .login-page:not(.allows-motion) .login-submit:hover:not(:disabled) svg { transform:none; }
}
