/* Login only. The form remains opaque and never participates in animation. */
body.portal-workspace.login-ocean-page {
  background: #061d3c;
  color: #fff;
}
.login-ocean-page .workspace-body { margin: 0; min-height: 100vh; }
.login-ocean-page main.wrap {
  width: 100%; max-width: none; margin: 0; padding: 0;
  display: flex; flex-direction: column;
}
.login-ocean-page main > .messages,
.login-ocean-page main > .msg {
  position: relative; z-index: 2; margin: 16px 24px 0;
}
.login-ocean {
  position: relative; isolation: isolate; flex: 1; display: flex;
  min-height: 100vh; min-height: 100svh;
  background: #061d3c;
}
.login-ocean-backdrop {
  position: absolute; inset: 0; z-index: -1;
  overflow: hidden; pointer-events: none; background: #061d3c;
}
.login-ocean-scene {
  position: absolute; inset: 0; transform: scale(1.035);
}
.login-ocean-image {
  display: block; width: 100%; height: 100%; object-fit: cover;
  object-position: 42% center;
}
.login-ocean-surf {
  position: absolute; inset: 0; width: 100%; height: 100%;
  visibility: hidden; pointer-events: none; overflow: visible;
}
.login-ocean-surf svg {
  display: block; width: 100%; height: 100%; overflow: visible;
  fill: none; stroke: #e7f9fa; stroke-width: 2;
  stroke-linecap: round;
}
.login-ocean-surf path { vector-effect: non-scaling-stroke; }
.login-ocean-surf path + path { stroke-width: 5; stroke-opacity: .22; }
.login-ocean-foam { position: absolute; inset: 0; --surf-travel: 12px; opacity: 0; }
.login-ocean-foam-follow { --surf-travel: 15px; }
.login-ocean-backdrop::after {
  content: ""; position: absolute; inset: 0;
  /* Broad coastal light across the whole welcome region, then ocean on the right. */
  background: linear-gradient(90deg, rgb(211 230 239 / 92%) 0%, rgb(220 236 243 / 87%) 52%, rgb(122 166 192 / 45%) 68%, rgb(0 20 48 / 72%) 100%);
}
.login-ocean-layout {
  width: min(1240px, 100%); margin: auto; padding: 64px 48px calc(88px + env(safe-area-inset-bottom, 0px));
  display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr);
  column-gap: clamp(32px, 7vw, 112px); row-gap: 24px; align-items: center;
}
.login-ocean-welcome { min-width: 0; padding-block: 8px; }
.login-ocean-brand {
  position: relative; width: 176px; height: 176px;
  /* The supplied SVG is transparent: keep it free of any badge or card. */
  background: transparent; isolation: isolate;
}
.login-ocean-logo {
  display: block; width: 176px; height: 176px; object-fit: contain;
  /* The original mark sits directly on the broad light region, without a halo. */
  filter: none;
}
.login-ocean-brand::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(110deg, transparent 35%, rgb(207 177 103 / 0%) 42%, rgb(207 177 103 / 28%) 50%, rgb(255 244 213 / 42%) 53%, transparent 61%);
  background-size: 250% 100%; background-position: 100% 0; background-repeat: no-repeat;
  /* Keep the one-time sheen inside the unchanged external SVG silhouette. */
  -webkit-mask: url("brand/trident.0831ad9aa155.svg") center / contain no-repeat;
  mask: url("brand/trident.0831ad9aa155.svg") center / contain no-repeat;
  opacity: 0;
}
.login-ocean-kicker {
  margin: 36px 0 18px; color: #002561; font-size: 12px;
  font-weight: 650; letter-spacing: .14em; text-transform: uppercase;
}
.login-ocean-headline {
  color: #002561; font-size: clamp(32px, 4.2vw, 56px); line-height: 1.08;
  font-weight: 600; letter-spacing: -.045em; margin: 0 0 22px;
}
.login-ocean-intro { max-width: 350px; color: #002561; font-size: 16px; line-height: 1.7; margin: 0; }
.login-ocean-rule { display: block; width: 64px; height: 2px; margin-top: 30px; background: #9a7b43; }
.login-ocean-page .login-ocean-auth {
  width: 100%; max-width: 450px; margin: 0; justify-self: end; min-width: 0;
}
.login-ocean-page .login-ocean-auth .auth-card {
  padding: clamp(26px, 3.2vw, 42px); background: #fffdf9;
  border: 1px solid #e2d8c3; border-top: 3px solid #b89b5e;
  border-radius: 18px; box-shadow: 0 24px 72px rgb(0 10 30 / 26%);
  color: #152e4b; overflow-wrap: anywhere;
}
.login-ocean-page .login-ocean-auth .eyebrow {
  color: #586a7a; font-size: 11px; font-weight: 650;
  letter-spacing: .12em; text-transform: uppercase; margin: 0 0 14px;
}
.login-ocean-page .login-ocean-auth h1 { font-size: 36px; margin: 0 0 12px; }
.login-ocean-page .login-ocean-auth .lead { font-size: 14px; color: #506077; margin: 0 0 28px; }
.login-ocean-auth label { font-size: 14px; margin-bottom: 7px; }
.login-ocean-auth input[type="text"],
.login-ocean-auth input[type="password"] {
  min-height: 50px; padding: 12px 14px; font-size: 16px;
  color: #152e4b; background: #fff; border: 1px solid #7b8da3;
}
.login-ocean-page .login-ocean-auth .btn {
  min-height: 50px; background: #002561; border-color: #002561;
  color: #fff; font-size: 15px;
}
.login-ocean-auth .auth-actions { gap: 12px; margin-top: 25px; }
.login-ocean-auth .auth-actions a {
  color: #002561; font-size: 14px; min-height: 44px;
  display: inline-flex; align-items: center; text-underline-offset: 3px;
}
.login-ocean-private {
  margin: 21px 0 0; padding-top: 20px; border-top: 1px solid #e3ded4;
  color: #506077; font-size: 12px;
}
.login-ocean-motion-slot {
  /* Anchor to the page, not the viewport, so scrolling/zoom cannot cover fields. */
  position: absolute; right: max(16px, env(safe-area-inset-right, 0px));
  bottom: max(12px, env(safe-area-inset-bottom, 0px));
  max-width: calc(100% - 32px); min-height: 44px;
  display: flex; justify-content: flex-end; align-items: center;
}
.login-ocean-motion {
  min-height: 44px; max-width: 100%; padding: 8px 12px;
  border: 1px solid #8495ac; border-radius: 24px; background: rgb(10 37 73 / 88%);
  color: #fff; font: inherit; font-size: 11px; line-height: 1.4; cursor: pointer;
}
.login-ocean-motion[hidden] { display: none; }
.login-ocean-motion[aria-disabled="true"] { cursor: default; }
.login-ocean-motion:hover { background: #163559; }
.login-ocean :is(a, button, input):focus-visible { outline: 3px solid #0074b8; outline-offset: 4px; }
.login-ocean-motion:focus-visible { outline-color: #f0cd7f; }

@media screen and (prefers-reduced-motion: no-preference) {
  .login-ocean[data-enhanced="true"] .login-ocean-scene {
    /* A steady start makes the gentle camera movement perceptible immediately. */
    animation: login-ocean-drift 24s linear infinite alternate;
    animation-play-state: paused;
  }
  .login-ocean[data-enhanced="true"][data-ocean-ready="true"] .login-ocean-surf { visibility: visible; }
  .login-ocean[data-enhanced="true"] .login-ocean-foam {
    animation: login-ocean-surf 10s -2s linear infinite;
    animation-play-state: paused;
  }
  .login-ocean[data-enhanced="true"] .login-ocean-foam-follow { animation-delay: -7s; }
  .login-ocean[data-motion="running"] :is(.login-ocean-scene, .login-ocean-foam) { animation-play-state: running; }
  /* Shimmer only: the original mark never moves or fades beneath focused fields. */
  .login-ocean-brand.is-entering::after { animation: login-ocean-logo-sheen 1200ms ease-in-out 1; }
  @keyframes login-ocean-drift {
    from { transform: scale(1.035) translate3d(-.4%, 0, 0); }
    to { transform: scale(1.065) translate3d(.4%, -.45%, 0); }
  }
  @keyframes login-ocean-surf {
    0% { opacity: 0; transform: translate(var(--surf-travel), calc(-1 * var(--surf-travel))); }
    20%, 75% { opacity: .45; }
    100% { opacity: 0; transform: translate(calc(-1 * var(--surf-travel)), var(--surf-travel)); }
  }
  @keyframes login-ocean-logo-sheen {
    0% { opacity: 0; background-position: 100% 0; }
    25% { opacity: .8; }
    75% { opacity: .8; }
    100% { opacity: 0; background-position: 0% 0; }
  }
}
@media (max-width: 760px) {
  .login-ocean-backdrop::after {
    /* Full-width sky wash; its long fade sits behind the opaque form, not the logo. */
    background: linear-gradient(180deg, rgb(219 234 242 / 94%) 0, rgb(219 234 242 / 90%) 13rem, rgb(103 151 181 / 35%) 24rem, rgb(0 20 48 / 72%) 36rem);
  }
  .login-ocean-layout { grid-template-columns: minmax(0, 1fr); padding: 28px 22px calc(88px + env(safe-area-inset-bottom, 0px)); gap: 22px; max-width: 500px; margin: 0 auto; align-self: flex-start; }
  .login-ocean-welcome { display: grid; grid-template-columns: 110px minmax(0, 1fr); gap: 0 20px; align-items: center; padding: 0; }
  .login-ocean-brand, .login-ocean-logo { width: 110px; height: 110px; }
  .login-ocean-brand { grid-row: 1 / 3; }
  .login-ocean-kicker { font-size: 10px; margin: 0 0 8px; align-self: end; }
  .login-ocean-headline { font-size: 25px; margin: 0; align-self: start; letter-spacing: -.035em; }
  .login-ocean-intro, .login-ocean-rule { display: none; }
  .login-ocean-page .login-ocean-auth { justify-self: center; }
  .login-ocean-page .login-ocean-auth .auth-card { padding: 26px; }
  .login-ocean-page .login-ocean-auth h1 { font-size: 30px; }
  .login-ocean-image { object-position: 28% center; }
  .login-ocean-foam { --surf-travel: 8px; }
  .login-ocean-foam-follow { --surf-travel: 10px; }
}
@media (max-width: 360px) {
  .login-ocean-layout { padding-inline: 16px; }
  .login-ocean-page .login-ocean-auth .auth-card { padding: 22px; }
  .login-ocean-headline { font-size: 23px; }
  .login-ocean-welcome { column-gap: 16px; }
}
@media (prefers-reduced-motion: reduce) {
  .login-ocean-scene, .login-ocean-foam, .login-ocean-brand, .login-ocean-brand::after { animation: none; }
  .login-ocean-surf { visibility: hidden; }
}
@media (forced-colors: active) {
  .login-ocean-backdrop, .login-ocean-brand::after, .login-ocean-rule { display: none; }
  .login-ocean, .login-ocean-page .login-ocean-auth .auth-card { background: Canvas; color: CanvasText; }
  .login-ocean :is(p, h1, label) { color: CanvasText; }
  .login-ocean-brand { border: 1px solid CanvasText; }
  .login-ocean-logo { filter: none; }
  .login-ocean-motion { border-color: ButtonText; }
}
@media print {
  .login-ocean-backdrop, .login-ocean-motion-slot { display: none; }
  .login-ocean { min-height: auto; background: #fff; color: #111; }
  .login-ocean :is(p, h1) { color: #111; }
  .login-ocean-logo { filter: none; }
}