/* Optional local experience: vertical page input drives one uninterrupted horizontal product film. */
.has-horizontal-continuum .experience-horizontal .showcase-section {
  padding: 0;
  overflow: clip;
  border-top: 0;
}

.has-horizontal-continuum .experience-horizontal .showcase-section__intro {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  border: 0;
  white-space: nowrap;
}

.has-horizontal-continuum .experience-horizontal .showcase-shell {
  width: 100%;
  max-width: none;
  margin-top: 0;
}

.has-horizontal-continuum .experience-horizontal .showcase-horizontal-rail {
  position: relative;
  display: block;
  height: calc(var(--horizontal-travel, 0px) + 100svh);
}

.has-horizontal-continuum .experience-horizontal .showcase-horizontal-viewport {
  position: sticky;
  z-index: 5;
  top: var(--header-height);
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  grid-template-rows: auto minmax(0, 1fr);
  width: 100%;
  height: calc(100svh - var(--header-height));
  overflow: hidden;
  border-bottom: 1px solid var(--color-line);
  background: var(--color-ground);
  isolation: isolate;
}

.has-horizontal-continuum .experience-horizontal .continuum-overlay {
  position: absolute;
  z-index: 1;
  inset: 0;
  overflow: hidden;
  opacity: 0;
  pointer-events: none;
  transition: opacity var(--duration-micro) linear;
}

.has-horizontal-continuum .experience-horizontal [data-horizontal-ready] .continuum-overlay {
  opacity: 1;
}

.has-horizontal-continuum .experience-horizontal .continuum-frame,
.has-horizontal-continuum .experience-horizontal .continuum-seam {
  position: absolute;
  top: 0;
  left: 0;
  display: block;
  width: 1px;
  height: 1px;
  pointer-events: none;
  transform-origin: 0 0;
  will-change: transform;
}

.has-horizontal-continuum .experience-horizontal [data-web-story-phase="apps-focus"] .continuum-frame,
.has-horizontal-continuum .experience-horizontal [data-web-story-phase="apps-focus"] .continuum-seam,
.has-horizontal-continuum .experience-horizontal [data-web-story-phase="apps-to-web"] .continuum-frame,
.has-horizontal-continuum .experience-horizontal [data-web-story-phase="apps-to-web"] .continuum-seam,
.has-horizontal-continuum .experience-horizontal [data-web-story-phase^="web-"] .continuum-frame,
.has-horizontal-continuum .experience-horizontal [data-web-story-phase^="web-"] .continuum-seam,
.has-horizontal-continuum .experience-horizontal [data-web-story-phase="macos-turn"] .continuum-frame,
.has-horizontal-continuum .experience-horizontal [data-web-story-phase="macos-turn"] .continuum-seam {
  opacity: 0;
}

.has-horizontal-continuum .experience-horizontal .continuum-frame {
  transform: translate3d(
    var(--continuum-frame-x, 0),
    var(--continuum-frame-y, 0),
    0
  );
}

.has-horizontal-continuum .experience-horizontal .continuum-frame::before,
.has-horizontal-continuum .experience-horizontal .continuum-frame::after {
  position: absolute;
  top: 0;
  left: 0;
  width: 1px;
  height: 1px;
  background: linear-gradient(90deg, var(--color-cyan), var(--color-violet));
  box-shadow: 0 0.35rem 0.8rem color-mix(in srgb, var(--levitation-contact) 42%, transparent);
  content: "";
  transform-origin: 0 0;
}

.has-horizontal-continuum .experience-horizontal .continuum-frame::before {
  transform: scaleX(var(--continuum-frame-scale-x, 1));
}

.has-horizontal-continuum .experience-horizontal .continuum-frame::after {
  background: linear-gradient(180deg, var(--color-violet), var(--color-cyan));
  transform: translate3d(var(--continuum-frame-w, 1px), 0, 0)
    scaleY(var(--continuum-frame-scale-y, 1));
}

.has-horizontal-continuum .experience-horizontal .continuum-seam {
  width: clamp(1px, 0.1vw, 2px);
  background: linear-gradient(180deg, var(--color-cyan), var(--color-violet) 54%, var(--color-cyan));
  box-shadow: 0 0 0 1px color-mix(in srgb, var(--color-ground) 54%, transparent);
  transform: translate3d(
      var(--continuum-seam-x, 0),
      var(--continuum-seam-y, 0),
      0
    )
    scaleY(var(--continuum-seam-scale-y, 1));
}

.has-horizontal-continuum .experience-horizontal .continuum-seam::after {
  position: absolute;
  top: 0;
  left: 50%;
  display: none;
  width: 2.75rem;
  height: 1px;
  background: linear-gradient(90deg, transparent, color-mix(in srgb, var(--color-cyan) 18%, transparent), transparent);
  content: "";
  opacity: 0.7;
  transform: translateX(-50%);
}

.has-horizontal-continuum .experience-horizontal .continuum-turn-edge {
  position: absolute;
  z-index: 3;
  top: 14%;
  bottom: 14%;
  left: 66%;
  width: clamp(3px, 0.42vw, 6px);
  border-radius: 999px;
  background: linear-gradient(180deg, transparent, var(--color-cyan) 12%, var(--color-violet) 54%, var(--color-cyan) 88%, transparent);
  box-shadow:
    0 0 1.1rem color-mix(in srgb, var(--color-cyan) 68%, transparent),
    0 0 3.2rem color-mix(in srgb, var(--color-violet) 48%, transparent);
  opacity: clamp(0, calc((var(--web-turn-edge, 0) - 0.68) * 3.125), 1);
  isolation: isolate;
  transform: translateX(-50%) scaleY(calc(0.72 + (var(--web-turn-edge, 0) * 0.28)));
  transform-origin: 50% 50%;
}

.has-horizontal-continuum .experience-horizontal .continuum-turn-edge::before {
  position: absolute;
  z-index: -1;
  top: -14%;
  bottom: -14%;
  left: 50%;
  width: min(32vw, 28rem);
  background:
    radial-gradient(ellipse at center, color-mix(in srgb, var(--color-violet) 24%, transparent) 0, transparent 68%),
    linear-gradient(90deg, transparent, color-mix(in srgb, var(--color-cyan) 14%, transparent) 48%, transparent);
  content: "";
  filter: blur(0.45rem) saturate(1.16);
  opacity: calc(var(--web-turn-edge, 0) * 0.72);
  transform: translateX(-50%) scaleX(calc(0.08 + (var(--web-turn-edge, 0) * 0.92)));
  transform-origin: 50% 50%;
}

:root[data-theme="dark"].has-horizontal-continuum .experience-horizontal .continuum-seam::after {
  display: block;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]).has-horizontal-continuum .experience-horizontal .continuum-seam::after {
    display: block;
  }
}

.has-horizontal-continuum .experience-horizontal .platform-tabs {
  position: relative;
  z-index: 30;
  width: 100%;
  min-width: 0;
  background: color-mix(in srgb, var(--color-ground) 94%, transparent);
}

.has-horizontal-continuum .experience-horizontal .showcase-stage {
  position: relative;
  z-index: 2;
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: 100vw;
  width: max-content;
  min-width: max-content;
  height: 100%;
  min-height: 0;
  gap: 0;
  padding: 0;
  transform: translate3d(calc(-1 * var(--horizontal-offset, 0px)), 0, 0);
  will-change: transform;
}

.has-horizontal-continuum .experience-horizontal .showcase-panel--web .smart-hr-native-scene__caption span,
.has-horizontal-continuum .experience-horizontal .showcase-panel--macos .verified-product-view__caption span {
  left: 0;
}

.has-horizontal-continuum .experience-horizontal .showcase-panel--macos .verified-product-view__caption strong {
  right: 0;
}

.has-horizontal-continuum .experience-horizontal .showcase-panel,
.has-showcase-motion.has-horizontal-continuum .experience-horizontal .showcase-panel[data-motion-scene],
.has-showcase-motion.has-horizontal-continuum .experience-horizontal .showcase-panel--android {
  position: relative;
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  align-items: center;
  width: 100vw;
  height: 100%;
  min-height: 0;
  padding: clamp(1.25rem, 2.2vw, 2.5rem) var(--page-gutter);
  overflow: hidden;
  border: 0;
  gap: var(--grid-gap);
  isolation: isolate;
}

.has-horizontal-continuum .experience-horizontal .showcase-panel::before {
  inset: 0;
  background:
    radial-gradient(circle at var(--spotlight-x) var(--spotlight-y), color-mix(in srgb, var(--color-violet) 22%, transparent) 0, transparent 24rem),
    radial-gradient(circle at calc(var(--spotlight-x) - 14%) calc(var(--spotlight-y) + 18%), color-mix(in srgb, var(--color-cyan) 12%, transparent) 0, transparent 18rem);
  opacity: calc(var(--horizontal-presence, 0) * 0.3);
  transition: none;
}

:root[data-theme="dark"].has-horizontal-continuum .experience-horizontal .showcase-panel::before {
  opacity: calc(var(--horizontal-presence, 0) * 0.86);
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]).has-horizontal-continuum .experience-horizontal .showcase-panel::before {
    opacity: calc(var(--horizontal-presence, 0) * 0.86);
  }
}

.has-horizontal-continuum .experience-horizontal .showcase-panel__copy,
.has-showcase-motion.has-horizontal-continuum .experience-horizontal .showcase-panel[data-motion-scene] .showcase-panel__copy {
  position: relative;
  top: auto;
  grid-column: 1 / span 3;
  align-self: center;
  padding: 0;
  opacity: calc(0.18 + (var(--horizontal-presence, 0) * 0.82));
  transform: translate3d(
    calc((var(--horizontal-enter, 0) * 4rem) - (var(--horizontal-exit, 0) * 2.5rem)),
    calc((var(--horizontal-enter, 0) - var(--horizontal-exit, 0)) * 1.2rem),
    0
  );
}

.has-horizontal-continuum .experience-horizontal .showcase-panel__copy h3 {
  font-size: clamp(2.2rem, 4.2vw, 5.2rem);
}

.has-horizontal-continuum .experience-horizontal .showcase-panel[data-motion-mode="web"] .showcase-panel__copy,
.has-showcase-motion.has-horizontal-continuum .experience-horizontal .showcase-panel[data-motion-scene][data-motion-mode="web"] .showcase-panel__copy {
  grid-column: 1 / span 4;
  padding-inline-end: clamp(0.75rem, 1.2vw, 1.25rem);
}

.has-horizontal-continuum .experience-horizontal .showcase-panel[data-motion-mode="web"] .showcase-surface,
.has-showcase-motion.has-horizontal-continuum .experience-horizontal .showcase-panel[data-motion-scene][data-motion-mode="web"] .showcase-surface {
  grid-column: 5 / -1;
}

.has-horizontal-continuum .experience-horizontal .showcase-panel__heading--web {
  max-inline-size: min(100%, 29rem);
  font-size: clamp(2.35rem, 3.65vw, 4.6rem);
  font-stretch: 76%;
  font-variation-settings: "wdth" 76, "wght" 670;
}

.has-horizontal-continuum .experience-horizontal .showcase-panel__title-line {
  display: block;
  width: fit-content;
  max-width: 100%;
  white-space: nowrap;
}

.has-horizontal-continuum .experience-horizontal .showcase-surface,
.has-showcase-motion.has-horizontal-continuum .experience-horizontal .showcase-panel[data-motion-scene] .showcase-surface {
  position: relative;
  top: auto;
  grid-column: 4 / -1;
  align-self: center;
  width: 100%;
  height: min(39rem, calc(100svh - var(--header-height) - 7rem));
  min-height: 28rem;
  opacity: calc(0.28 + (var(--horizontal-presence, 0) * 0.72));
  transform: perspective(100rem)
    translate3d(
      calc((var(--horizontal-enter, 0) * 5rem) - (var(--horizontal-exit, 0) * 3rem)),
      calc((var(--horizontal-enter, 0) - var(--horizontal-exit, 0)) * 1.4rem),
      0
    )
    rotateY(calc((var(--horizontal-enter, 0) * -7deg) + (var(--horizontal-exit, 0) * 5deg)))
    scale(calc(0.92 + (var(--horizontal-presence, 0) * 0.08)));
  transform-origin: 50% 58%;
}

.has-horizontal-continuum .experience-horizontal .showcase-panel[data-continuum-current] .showcase-panel__copy,
.has-horizontal-continuum .experience-horizontal .showcase-panel[data-continuum-current] .showcase-surface,
.has-horizontal-continuum .experience-horizontal .showcase-panel[data-continuum-next] .showcase-panel__copy,
.has-horizontal-continuum .experience-horizontal .showcase-panel[data-continuum-next] .showcase-surface {
  will-change: opacity, transform;
}

.has-horizontal-continuum .experience-horizontal .showcase-panel:not([data-continuum-current]):not([data-continuum-next]) *,
.has-horizontal-continuum .experience-horizontal .showcase-panel:not([data-continuum-current]):not([data-continuum-next]) *::before,
.has-horizontal-continuum .experience-horizontal .showcase-panel:not([data-continuum-current]):not([data-continuum-next]) *::after {
  will-change: auto !important;
}

.has-horizontal-continuum .experience-horizontal .showcase-surface--apps,
.has-horizontal-continuum .experience-horizontal .smart-hr-native,
.has-horizontal-continuum .experience-horizontal .mobile-native-scene,
.has-horizontal-continuum .experience-horizontal .lohnhelfer-stage,
.has-horizontal-continuum .experience-horizontal .beste-fold-stage {
  min-height: 100%;
}

.has-horizontal-continuum .experience-horizontal .showcase-panel--apps .showcase-surface--apps {
  clip-path: inset(
    calc((1 - var(--hero-handoff-progress, 0)) * 8%)
    calc((1 - var(--hero-handoff-progress, 0)) * 11%)
  );
  opacity: calc(0.22 + (var(--hero-handoff-progress, 0) * 0.78));
}

@media (min-width: 48.0625rem) and (min-height: 42rem) and (prefers-reduced-motion: no-preference) {
  .has-horizontal-continuum .experience-horizontal .showcase-panel--web .smart-hr-native-scene,
  .has-showcase-motion.has-horizontal-continuum .experience-horizontal .showcase-panel[data-motion-scene].showcase-panel--web .smart-hr-native-scene {
    clip-path: inset(0 calc((1 - var(--web-entry-reveal, 0)) * 100%) 0 0 round 1.2rem);
    opacity: 1;
    transform: perspective(100rem)
      translate3d(
        calc(((1 - var(--apps-to-web, 0)) * -100vw) + (var(--web-macos-turn, 0) * 100vw)),
        0,
        0
      )
      rotateY(calc(var(--web-edge-out, 0) * 90deg))
      scale(calc(1 - (var(--web-turn-edge, 0) * 0.1)));
    transform-origin: 50% 52%;
  }

  .has-horizontal-continuum .experience-horizontal .showcase-panel--web .smart-hr-native-scene__presentation {
    transform: none;
  }

  .has-showcase-motion.has-horizontal-continuum .experience-horizontal .showcase-panel[data-motion-scene].showcase-panel--web .showcase-panel__copy {
    clip-path: inset(0 0 0 calc((1 - var(--web-copy-in, 0)) * 100%));
    opacity: var(--web-copy-in, 0);
    transform: translate3d(calc((1 - var(--web-copy-in, 0)) * 2.25rem), 0, 0);
  }

  .has-horizontal-continuum .experience-horizontal .showcase-panel--macos [data-macos-turnaround],
  .has-showcase-motion.has-horizontal-continuum .experience-horizontal .showcase-panel[data-motion-scene].showcase-panel--macos [data-macos-turnaround] {
    clip-path: inset(0 0 0 calc((1 - var(--macos-edge-in, 0)) * 100%) round 1.1rem);
    opacity: clamp(0, calc(var(--macos-edge-in, 0) * 20), 1);
    transform: perspective(100rem)
      translate3d(calc((1 - var(--macos-edge-swap, 0)) * -100vw), 0, 0)
      rotateY(calc((1 - var(--macos-edge-in, 0)) * -90deg))
      scale(calc(1 - (var(--web-turn-edge, 0) * 0.1)));
    transform-origin: 50% 52%;
  }

  .has-showcase-motion.has-horizontal-continuum .experience-horizontal .showcase-panel[data-motion-scene].showcase-panel--macos .showcase-panel__copy {
    clip-path: inset(0 0 0 calc((1 - var(--macos-copy-in, 0)) * 100%));
    opacity: var(--macos-copy-in, 0);
    transform: translate3d(calc((1 - var(--macos-copy-in, 0)) * 2.4rem), 0, 0);
  }

  .has-horizontal-continuum .experience-horizontal .showcase-panel--macos [data-macos-edge-swap] {
    height: 100%;
    min-height: 0;
    transform: translateZ(0) scale(calc(0.985 + (var(--macos-edge-in, 0) * 0.015)));
    transform-origin: 0 50%;
  }

  .has-horizontal-continuum .experience-horizontal .showcase-panel--macos [data-macos-edge-swap] img {
    position: absolute;
    inset: 0;
    width: 100%;
    max-width: 100%;
    height: 100%;
    max-height: 100%;
    object-fit: contain;
  }

  .has-horizontal-continuum .experience-horizontal .macos-source-crops[hidden] {
    position: absolute;
    z-index: 5;
    top: clamp(2.5rem, 5vw, 4.75rem);
    bottom: clamp(2.75rem, 5vw, 4.5rem);
    left: 50%;
    display: block !important;
    width: auto;
    max-width: 100%;
    aspect-ratio: 800 / 520;
    overflow: visible;
    opacity: var(--macos-crop-lift, 0);
    pointer-events: none;
    transform: translateX(-50%);
  }

  .has-horizontal-continuum .experience-horizontal .macos-source-crop {
    position: absolute;
    inset: 0;
    display: block;
    overflow: hidden;
    filter: drop-shadow(0 1.5rem 1.5rem var(--levitation-shadow));
  }

  .has-horizontal-continuum .experience-horizontal .macos-source-crop img {
    display: block;
    width: 100%;
    height: 100%;
    border-radius: clamp(0.35rem, 0.8vw, 0.75rem);
    object-fit: contain;
  }

  .has-horizontal-continuum .experience-horizontal .macos-source-crop--controls {
    clip-path: inset(15% 48% 53% 10% round 0.55rem);
    transform: translate3d(
      calc(var(--macos-crop-lift, 0) * -1.15rem),
      calc(var(--macos-crop-lift, 0) * -2.4rem),
      calc(var(--macos-crop-lift, 0) * 2.2rem)
    );
  }

  .has-horizontal-continuum .experience-horizontal .macos-source-crop--palette {
    clip-path: inset(51% 8% 16% 48% round 0.55rem);
    transform: translate3d(
      calc(var(--macos-crop-lift, 0) * 1.35rem),
      calc(var(--macos-crop-lift, 0) * -1.65rem),
      calc(var(--macos-crop-lift, 0) * 2.8rem)
    );
  }
}

.has-horizontal-continuum .experience-horizontal .showcase-panel[data-horizontal-active] .showcase-panel__number {
  color: var(--color-violet-text);
}

@media (max-width: 64rem) {
  .has-horizontal-continuum .experience-horizontal .showcase-panel__copy,
  .has-showcase-motion.has-horizontal-continuum .experience-horizontal .showcase-panel[data-motion-scene] .showcase-panel__copy {
    grid-column: 1 / span 4;
  }

  .has-horizontal-continuum .experience-horizontal .showcase-surface,
  .has-showcase-motion.has-horizontal-continuum .experience-horizontal .showcase-panel[data-motion-scene] .showcase-surface {
    grid-column: 5 / -1;
  }

  .has-horizontal-continuum .experience-horizontal .showcase-panel__heading--web {
    font-size: clamp(2.15rem, 4.2vw, 3.15rem);
    font-stretch: 72%;
    font-variation-settings: "wdth" 72, "wght" 670;
  }
}

@media (max-width: 48rem) {
  .has-horizontal-continuum .experience-horizontal .showcase-horizontal-rail {
    height: auto !important;
  }

  .has-horizontal-continuum .experience-horizontal .showcase-horizontal-viewport {
    position: relative;
    top: auto;
    display: block;
    height: auto;
    overflow: visible;
  }

  .has-horizontal-continuum .experience-horizontal .continuum-overlay {
    display: none;
  }

  .has-horizontal-continuum .experience-horizontal .platform-tabs {
    position: sticky;
    top: var(--header-height);
  }

  .has-horizontal-continuum .experience-horizontal .showcase-stage {
    display: flex;
    width: 100%;
    min-width: 0;
    height: auto;
    padding: 1.5rem 0 2.5rem;
    overflow-x: auto;
    transform: none !important;
    will-change: auto;
  }

  .has-horizontal-continuum .experience-horizontal .showcase-panel,
  .has-showcase-motion.has-horizontal-continuum .experience-horizontal .showcase-panel[data-motion-scene],
  .has-showcase-motion.has-horizontal-continuum .experience-horizontal .showcase-panel--android {
    flex: 0 0 min(92vw, 44rem);
    display: block;
    width: auto;
    height: auto;
    min-height: 0;
    padding: 1rem 0.875rem 2rem;
    overflow: visible;
  }

  .has-horizontal-continuum .experience-horizontal .showcase-panel__copy,
  .has-showcase-motion.has-horizontal-continuum .experience-horizontal .showcase-panel[data-motion-scene] .showcase-panel__copy,
  .has-horizontal-continuum .experience-horizontal .showcase-surface,
  .has-showcase-motion.has-horizontal-continuum .experience-horizontal .showcase-panel[data-motion-scene] .showcase-surface {
    position: relative;
    top: auto;
    width: 100%;
    height: auto;
    min-height: 0;
    opacity: 1;
    transform: none;
    will-change: auto;
  }

  .has-horizontal-continuum .experience-horizontal .showcase-panel__copy {
    min-height: 14rem;
  }
}

@media (prefers-reduced-motion: reduce) {
  .has-horizontal-continuum .experience-horizontal .showcase-horizontal-rail {
    height: auto !important;
  }

  .has-horizontal-continuum .experience-horizontal .showcase-horizontal-viewport {
    position: relative;
    top: auto;
    display: block;
    height: auto;
    overflow: visible;
  }

  .has-horizontal-continuum .experience-horizontal .continuum-overlay {
    display: none;
  }

  .has-horizontal-continuum .experience-horizontal .showcase-stage {
    display: block;
    width: 100%;
    min-width: 0;
    height: auto;
    transform: none !important;
    will-change: auto;
  }

  .has-horizontal-continuum .experience-horizontal .showcase-panel,
  .has-showcase-motion.has-horizontal-continuum .experience-horizontal .showcase-panel[data-motion-scene],
  .has-showcase-motion.has-horizontal-continuum .experience-horizontal .showcase-panel--android {
    width: 100%;
    height: auto;
    min-height: 0;
  }

  .has-horizontal-continuum .experience-horizontal .showcase-panel__copy,
  .has-horizontal-continuum .experience-horizontal .showcase-surface {
    opacity: 1 !important;
    transform: none !important;
  }
}