:root {
  --world-intro-progress: 1;
}

[data-world-intro-reveal] {
  clip-path: inset(0);
  opacity: 1;
  transform: none;
}

html[data-world-intro="first"] [data-world-intro-reveal],
html[data-world-intro="repeat"] [data-world-intro-reveal] {
  clip-path: inset(0 calc(100% - (var(--world-intro-progress, 0) * 100%)) 0 0);
  opacity: clamp(0, calc((var(--world-intro-progress, 0) * 1.6) - 0.12), 1);
  transform: translateY(calc(18px - (var(--world-intro-progress, 0) * 18px)));
  will-change: clip-path, opacity, transform;
}

html[data-world-intro="settled"] [data-world-intro-reveal],
html[data-world-intro="skipped"] [data-world-intro-reveal] {
  clip-path: inset(0);
  opacity: 1;
  transform: none;
  will-change: auto;
}

[data-world-intro-title] {
  overflow: visible;
}

[data-world-intro-skip] {
  touch-action: manipulation;
}

#collection[tabindex="-1"]:focus {
  outline: none;
}

[data-jewelry-world] {
  position: relative;
  min-height: 100svh;
  isolation: isolate;
  z-index: 0;
}

[data-jewelry-world-poster],
[data-jewelry-world-canvas] {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}

[data-jewelry-world-poster] {
  z-index: 0;
  object-fit: cover;
}

[data-jewelry-world-poster] > img {
  height: 100%;
  object-fit: cover;
  width: 100%;
}

[data-jewelry-world-canvas] {
  z-index: 1;
  display: block;
  opacity: 0;
  pointer-events: none;
  transition: opacity 700ms cubic-bezier(0.16, 1, 0.3, 1);
}

[data-world-fallback],
[data-world-copy] {
  transition: opacity 220ms ease;
}

[data-world-fallback] {
  display: none;
  margin: 0;
}

.world-fallback-status,
[data-world-fallback-kind] {
  display: none;
}

[data-jewelry-world][data-world-state="static"]
  [data-world-fallback-kind="static"],
[data-jewelry-world][data-world-state="failed"]
  [data-world-fallback-kind="failed"] {
  display: block;
}

[data-jewelry-world][data-world-state="ready"] [data-jewelry-world-canvas] {
  opacity: 1;
}

[data-jewelry-world-chapter] {
  position: sticky;
  top: 0;
  min-height: 100svh;
}

[data-jewelry-world][data-world-settled="true"] [data-world-copy] {
  pointer-events: auto;
}

[data-jewelry-world][data-world-state="static"] [data-jewelry-world-canvas],
[data-jewelry-world][data-world-state="failed"] [data-jewelry-world-canvas] {
  opacity: 0;
  visibility: hidden;
}

[data-jewelry-world][data-world-state="static"] [data-world-fallback],
[data-jewelry-world][data-world-state="failed"] [data-world-fallback] {
  display: grid;
  opacity: 1;
  transform: none;
}

[data-jewelry-world][data-world-state="static"] .world-fallback-status,
[data-jewelry-world][data-world-state="failed"] .world-fallback-status {
  display: block;
}

@media (max-width: 48rem) {
  [data-jewelry-world-chapter] {
    min-height: auto;
  }

  [data-world-controls] {
    min-height: 44px;
    position: relative;
  }
}

@media (prefers-reduced-motion: reduce) {
  [data-world-intro-reveal] {
    clip-path: inset(0) !important;
    opacity: 1 !important;
    transform: none !important;
    will-change: auto !important;
  }

  [data-jewelry-world-canvas] {
    display: none;
    pointer-events: none;
    transition-duration: 0.22s;
  }

  [data-jewelry-world-chapter],
  [data-world-fallback] {
    perspective: none;
    transform: none !important;
  }

  [data-jewelry-world-chapter] {
    min-height: auto;
    position: relative;
    top: auto;
  }

  [data-world-fallback] {
    display: grid;
    opacity: 1;
    transition-duration: 0.22s;
  }

  [data-jewelry-world] .world-fallback-status {
    display: block;
  }
}