/* Exact Figma workshop photograph and cut chip; only its contents cycle. */
.employer-branding-page .eb-motion-workshop-chip {
  animation:eb-workshop-pulse 1.5s ease-in-out infinite;
  animation-play-state:paused;
}
.employer-branding-page .eb-motion-workshop-color {
  animation:eb-workshop-color 4.5s linear infinite;
  animation-play-state:paused;
}
.employer-branding-page .eb-motion-workshop-icon {
  animation:eb-workshop-icon 4.5s ease-in-out var(--icon-phase,0s) infinite;
  animation-play-state:paused;
}
.employer-branding-page .eb-motion-workshop-users { --icon-phase:-3s; opacity:0; }
.employer-branding-page .eb-motion-workshop-idea { --icon-phase:-1.5s; opacity:0; }
.employer-branding-page .eb-motion-workshop-bar {
  transform-origin:center bottom;
  animation:eb-workshop-chart 4.5s ease-in-out infinite;
  animation-play-state:paused;
}
.employer-branding-page .eb-motion-workshop-bar:nth-child(2) { animation-delay:.06s; }
.employer-branding-page .eb-motion-workshop-bar:nth-child(3) { animation-delay:.12s; }
@keyframes eb-workshop-pulse {
  0%,100% { transform:scale(1); }
  60% { transform:scale(1.045); }
  90% { transform:scale(.89); }
}
@keyframes eb-workshop-color {
  0%,29%,100% { fill:#8C82FF; }
  33.333%,62% { fill:#37AFFF; }
  66.667%,95% { fill:#FFD344; }
}
@keyframes eb-workshop-icon {
  0%,26%,100% { opacity:1; transform:scale(1); }
  31%,95% { opacity:0; transform:scale(.82); }
}
@keyframes eb-workshop-chart {
  0%,100% { transform:scaleY(.22); }
  12%,26% { transform:scaleY(1); }
  32%,95% { transform:scaleY(.22); }
}

/* Four real media slides follow the source gallery's framing and blue backdrop. */
.employer-branding-page .eb-gallery {
  position:relative;
  width:100%;
  aspect-ratio:1;
  overflow:hidden;
  isolation:isolate;
  container-type:inline-size;
}
.eb-gallery-backdrop { position:absolute; inset:0; width:100%; height:100%; }
.employer-branding-page .eb-gallery-card {
  position:absolute;
  left:6.60714%;
  top:24.46429%;
  width:86.80643%;
  aspect-ratio:486.116 / 333;
  border:clamp(3px,1.42857cqw,8px) solid #FFFFFF;
  border-radius:clamp(12px,5.35714cqw,30px);
  background:#FFFFFF;
  transform-origin:center top;
  transform-box:border-box;
  animation:eb-gallery-cycle 16s cubic-bezier(.4,0,.2,1) var(--gallery-phase,0s) infinite,
    eb-gallery-depth 16s steps(1,end) var(--gallery-phase,0s) infinite;
  animation-play-state:paused;
}
.eb-gallery-card:nth-of-type(2) { --gallery-phase:-12s; transform:translateY(-7.2072%) scale(.934); z-index:3; }
.eb-gallery-card:nth-of-type(3) { --gallery-phase:-8s; transform:translateY(-14.1141%) scale(.838); z-index:2; }
.eb-gallery-card:nth-of-type(4) { --gallery-phase:-4s; transform:translateY(-20.12%) scale(.745); z-index:1; }
.eb-gallery-card img,.eb-gallery-card video {
  position:absolute; inset:0;
  display:block; width:100%; height:100%;
  object-fit:cover; border-radius:inherit;
}
.eb-gallery-card:first-of-type { z-index:4; }
.eb-gallery-badge {
  position:absolute; left:5.14%; bottom:7.21%;
  width:14.81%; aspect-ratio:1;
  display:grid; place-items:center;
  background:#37AFFF; color:#FFFFFF;
  clip-path:polygon(0 0,77.75% 0,100% 22.27%,100% 100%,0 100%);
}
.eb-gallery-badge svg { width:44.444%; height:44.444%; }
@keyframes eb-gallery-cycle {
  0%,20% { transform:translateY(0) scale(1); }
  /* Match the next frame before handing it the foreground. */
  22.5% { transform:translateY(-7.2072%) scale(.934); }
  25%,45% { transform:translateY(-20.12%) scale(.745); }
  50%,70% { transform:translateY(-14.1141%) scale(.838); }
  75%,97.5% { transform:translateY(-7.2072%) scale(.934); }
  100% { transform:translateY(0) scale(1); }
}
@keyframes eb-gallery-depth {
  0%,100% { z-index:4; }
  22.5% { z-index:1; }
  47.5% { z-index:2; }
  72.5% { z-index:3; }
  97.5% { z-index:4; }
}
.employer-branding-page .eb-offer-scene.is-loop-visible .eb-gallery-card,
.employer-branding-page .eb-offer-scene.is-loop-visible [class*="eb-motion-workshop-"] { animation-play-state:running; }

/* Figma career page: four vacancies travel through the original card window. */
.employer-branding-page .eb-motion-careers-vacancies {
  transform-box:view-box;
  transform-origin:0 0;
  animation:eb-careers-vacancies 16s cubic-bezier(.4,0,.2,1) infinite;
  animation-play-state:paused;
}
.employer-branding-page .eb-motion-careers-highlight {
  animation:eb-careers-highlight 16s cubic-bezier(.4,0,.2,1) infinite;
  animation-play-state:paused;
}
@keyframes eb-careers-vacancies {
  0%,20% { transform:translateY(0); }
  25%,45% { transform:translateY(-229px); }
  50%,70% { transform:translateY(-458px); }
  75%,95% { transform:translateY(-687px); }
  100% { transform:translateY(-916px); }
}
@keyframes eb-careers-highlight {
  0%,20%,100% { fill:#37AFFF; }
  25%,45% { fill:#FFD344; }
  50%,70% { fill:#8C82FF; }
  75%,95% { fill:#47CB56; }
}

/* Four original channel blocks advance together, then rest in the next slot. */
.employer-branding-page .eb-offer-illustration--visibility { --eb-channel-duration:12s; }
.employer-branding-page :is(.eb-motion-channel-orbit,.eb-motion-channel-radius,.eb-motion-channel-upright) {
  transform-box:view-box;
  transform-origin:0 0;
  animation-duration:var(--eb-channel-duration);
  animation-timing-function:ease-in-out;
  animation-iteration-count:infinite;
  animation-play-state:paused;
}
.employer-branding-page .eb-motion-channel-orbit { animation-name:eb-channel-orbit; }
.employer-branding-page .eb-motion-channel-radius { animation-name:eb-channel-radius; }
.employer-branding-page .eb-motion-channel-upright { animation-name:eb-channel-upright; }
@keyframes eb-channel-orbit {
  0%,18.333333% { transform:rotate(var(--eb-channel-angle)); }
  25%,43.333333% { transform:rotate(calc(var(--eb-channel-angle) + 90deg)); }
  50%,68.333333% { transform:rotate(calc(var(--eb-channel-angle) + 180deg)); }
  75%,93.333333% { transform:rotate(calc(var(--eb-channel-angle) + 270deg)); }
  100% { transform:rotate(calc(var(--eb-channel-angle) + 360deg)); }
}
@keyframes eb-channel-upright {
  0%,18.333333% { transform:rotate(calc(-1 * var(--eb-channel-angle))); }
  25%,43.333333% { transform:rotate(calc(-1 * var(--eb-channel-angle) - 90deg)); }
  50%,68.333333% { transform:rotate(calc(-1 * var(--eb-channel-angle) - 180deg)); }
  75%,93.333333% { transform:rotate(calc(-1 * var(--eb-channel-angle) - 270deg)); }
  100% { transform:rotate(calc(-1 * var(--eb-channel-angle) - 360deg)); }
}
@keyframes eb-channel-radius {
  0%,18.333333%,25%,43.333333%,50%,68.333333%,75%,93.333333%,100% { transform:translateY(-147.785317268px); }
  21.666667%,46.666667%,71.666667%,96.666667% { transform:translateY(-186.5px); }
}
@media(prefers-reduced-motion:reduce) {
  .employer-branding-page .eb-offer-scene [class*="eb-motion-workshop-"],
  .employer-branding-page .eb-offer-scene [class*="eb-motion-careers-"],
  .employer-branding-page .eb-offer-scene [class*="eb-motion-channel-"],
  .employer-branding-page .eb-gallery-card { animation:none; }
  .employer-branding-page .eb-motion-workshop-users,
  .employer-branding-page .eb-motion-workshop-idea { opacity:0; }
  .employer-branding-page .eb-motion-workshop-chart { opacity:1; }
}
