/* Persona palettes shared by the BlueSpring journeys and provider portal. */
@property --bs-home-use-progress {
  syntax: "<number>";
  inherits: true;
  initial-value: 0;
}

:root {
  --bs-homeowner-color: #064b80;
  --bs-electrician-color: #007ac2;
  --bs-provider-color: #007f94;
  --bs-page: var(--bs-homeowner-color);
  --bs-surface: #003965;
  --bs-surface-deep: #002c50;
  --bs-surface-rgb: 0, 37, 66;
  --bs-shadow-rgb: 0, 21, 39;
  --bs-accent: #83e7ff;
  --bs-blue-ink: #003c71;
}

/* One interpolated palette keeps the page, glass cards and secondary surfaces
 * in step, including surfaces opened while the handover fade is running. */
body[data-bs-persona="homeowner"] {
  --bs-home-use-progress: 0;
  --bs-page: color-mix(in srgb, var(--bs-homeowner-color),
    var(--bs-electrician-color) calc(var(--bs-home-use-progress) * 100%));
  --bs-surface: color-mix(in srgb, #003965,
    #005f99 calc(var(--bs-home-use-progress) * 100%));
  --bs-surface-deep: color-mix(in srgb, #002c50,
    #003c71 calc(var(--bs-home-use-progress) * 100%));
  --bs-surface-rgb: 0,
    calc(37 + 20 * var(--bs-home-use-progress)),
    calc(66 + 37 * var(--bs-home-use-progress));
  --bs-shadow-rgb: 0,
    calc(21 + 18 * var(--bs-home-use-progress)),
    calc(39 + 31 * var(--bs-home-use-progress));
  transition: --bs-home-use-progress 1.5s ease-in-out;
}

body[data-bs-persona="homeowner"][data-bs-home-phase="use"] {
  --bs-home-use-progress: 1;
}

body[data-bs-persona="electrician"] {
  --bs-page: var(--bs-electrician-color);
  --bs-surface: #005f99;
  --bs-surface-deep: #003c71;
  --bs-surface-rgb: 0, 57, 103;
  --bs-shadow-rgb: 0, 39, 70;
}

body[data-bs-persona="energy-provider"] {
  --bs-page: var(--bs-provider-color);
  --bs-surface: #006373;
  --bs-surface-deep: #004a58;
  --bs-surface-rgb: 0, 67, 79;
  --bs-shadow-rgb: 0, 34, 42;
  --bs-accent: #a0f0ff;
  --bs-blue-ink: #004a58;
}

/* A shared entrance, before the account opens its own persona journey. */
body.bs-auth-entrance.bsx-hager-theme,
body.bs-auth-entrance[data-bs-persona="energy-provider"] {
  isolation: isolate;
}

body.bs-auth-entrance.bsx-hager-theme::before,
body.bs-auth-entrance[data-bs-persona="energy-provider"]::before {
  content: "";
  position: fixed;
  z-index: -1;
  inset: -35%;
  pointer-events: none;
  background:
    radial-gradient(ellipse at 18% 24%,
      var(--bs-homeowner-color) 0%, var(--bs-homeowner-color) 20%, transparent 48%),
    radial-gradient(ellipse at 82% 74%,
      var(--bs-provider-color) 0%, var(--bs-provider-color) 20%, transparent 48%),
    var(--bs-electrician-color);
  /* Start partway through the slow drift so the movement is visible on arrival. */
  animation: bs-entrance-flow 34s ease-in-out -9s infinite alternate;
  will-change: transform;
}

body.bs-auth-entrance.bsx-hager-theme .bsx-shell.is-hager-theme,
body.bs-auth-entrance .ep-login {
  background: transparent;
}

/* Let saved credentials blend into the moving entrance, like typed fields. */
body.bs-auth-entrance :is(
  .bsx-shell.is-hager-theme .bsx-login-input,
  .ep-login .ep-field input
):is(:-webkit-autofill, :autofill) {
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: #ffffff;
  caret-color: #ffffff;
  box-shadow: none;
}

@keyframes bs-entrance-flow {
  from { transform: translate(-10%, -8%) scale(1.08); }
  to { transform: translate(10%, 8%) scale(1.12); }
}

@media (prefers-reduced-motion: reduce) {
  body[data-bs-persona="homeowner"] {
    transition: none;
  }

  body.bs-auth-entrance.bsx-hager-theme::before,
  body.bs-auth-entrance[data-bs-persona="energy-provider"]::before {
    animation: none;
    will-change: auto;
  }
}