/* Motion from “start page - animated (2).svg”. Loaded by index.html only.
   Positions remain in roles.css; keyframes use offsets from the final layout.
   Individual translate/scale properties preserve the existing hover transform. */
.role-page {
  --role-cycle: 20.025932s;
  isolation: isolate;
  background-image: none;
  overflow-x: clip;
}
.role-page .role-backdrop {
  position: fixed;
  inset: 0;
  z-index: -1;
  overflow: hidden;
  pointer-events: none;
}
.role-page .role-scene {
  position: absolute;
  left: 50%;
  top: 50%;
  width: max(100vw, 160svh);
  height: max(100svh, 62.5vw);
  transform: translate(-50%, -50%);
  background: radial-gradient(ellipse 50% 50% at center, #c7e0e8, #95cde5);
}
.role-page .role-scene img { position: absolute; display: block; }
.role-page .motion-cloud-left { left: 14.722222%; top: 1.222222%; width: 30.069444%; height: 26.333333%; }
.role-page .motion-cloud-right { left: 47.291667%; top: -1.777778%; width: 29.791667%; height: 32.222222%; }
/* Layer bounds include the original 4 px blurred shadows. */
.role-page .motion-landscape-left { left: -.555556%; top: -.666667%; width: 41.666667%; height: 101.777778%; }
.role-page .motion-landscape-right { left: 52.013889%; top: -.444444%; width: 48.680556%; height: 101.777778%; }
.role-page .motion-glow { inset: 0; width: 100%; height: 100%; }
.role-page .role-main { overflow: clip; }
.role-page .role-header { z-index: 4; }

@media (prefers-reduced-motion: no-preference) {
  .role-page .motion-cloud-left { animation: role-cloud-left-drift var(--role-cycle) linear infinite alternate, role-cloud-left-fade var(--role-cycle) linear both; }
  .role-page .motion-cloud-right { animation: role-cloud-right-drift var(--role-cycle) linear infinite alternate, role-cloud-right-fade var(--role-cycle) linear both; }
  .role-page .motion-landscape-left { animation: role-landscape-left-in var(--role-cycle) linear both; }
  .role-page .motion-landscape-right { animation: role-landscape-right-in var(--role-cycle) linear both; }
  .role-page .motion-glow { animation: role-glow-in var(--role-cycle) linear both; }
  .role-page .role-brand { transform-origin: 50% 75px; animation: role-brand-in var(--role-cycle) linear both; }
  .role-page .role-main > h1, .role-page .role-intro { animation: role-copy-in var(--role-cycle) linear both; }
  .role-page .specialist { animation: role-specialist-in var(--role-cycle) linear both; }
  .role-page .employer { animation: role-employer-in var(--role-cycle) linear both; }
  .role-page .benefits { animation: role-benefits-in var(--role-cycle) linear both; }
}

@keyframes role-cloud-left-drift {
  from { translate: 0 0; }
  to { translate: 73.927252% -.841350%; }
}
@keyframes role-cloud-right-drift {
  from { translate: 0 0; }
  to { translate: 74.616550% -.687586%; }
}
@keyframes role-cloud-left-fade {
  0% { opacity: 0; animation-timing-function: cubic-bezier(.5,0,.5,1); }
  33.67%, 100% { opacity: 1; }
}
@keyframes role-cloud-right-fade {
  0% { opacity: 0; animation-timing-function: cubic-bezier(.5,0,.5,1); }
  23.82%, 100% { opacity: 1; }
}
@keyframes role-landscape-left-in {
  0%, 5.82% { translate: -97.333333% 0; animation-timing-function: cubic-bezier(0,.966,1,1); }
  7.17%, 100% { translate: 0 0; }
}
@keyframes role-landscape-right-in {
  0%, 6.27% { translate: 97.717546% 0; animation-timing-function: cubic-bezier(0,.879,.983,1.017); }
  7.65%, 100% { translate: 0 0; }
}
@keyframes role-glow-in {
  0%, 6.87% { opacity: 0; animation-timing-function: cubic-bezier(.5,0,.5,1); }
  9.76%, 100% { opacity: 1; }
}
@keyframes role-brand-in {
  0% { translate: 0 293px; scale: var(--role-brand-start-scale, 2.5); animation-timing-function: cubic-bezier(.474,-1.647,.491,1.897); }
  5.63%, 100% { translate: 0 0; scale: 1; }
}
@keyframes role-copy-in {
  0%, 3.06% { opacity: 0; animation-timing-function: cubic-bezier(.5,0,.5,1); }
  7.03%, 100% { opacity: 1; }
}
@keyframes role-specialist-in {
  0%, 6.87% { translate: 0 -690px; scale: .5; animation-timing-function: cubic-bezier(1,-.264,0,1.379); }
  9.76%, 100% { translate: 0 0; scale: 1; }
}
@keyframes role-employer-in {
  0%, 7.48% { translate: -803.052px -821.197px; scale: .5; animation-timing-function: cubic-bezier(.42,0,.526,1.674); }
  10.46%, 100% { translate: 0 0; scale: 1; }
}
@keyframes role-benefits-in {
  0%, 8.44% { translate: 0 168.75px; scale: .5; }
  10% { translate: 0 90.848px; scale: .648; }
  11.67% { translate: 0 7.453px; scale: .972; }
  12.41% { translate: 0 -29.5px; scale: 1; }
  12.99%, 100% { translate: 0 0; scale: 1; }
}

/* Keep the accessible controls at rest once the user starts interacting.
   The decorative background continues its independent source timeline. */
.role-page.role-motion-settled .role-brand,
.role-page.role-motion-settled .role-main > h1,
.role-page.role-motion-settled .role-intro,
.role-page.role-motion-settled .role-card,
.role-page.role-motion-settled .benefits { animation: none; }

@media (max-width: 640px) {
  /* The source has only a desktop frame: keep the enlarged name inside phones. */
  .role-page .role-brand { --role-brand-start-scale: 1.35; }
}