/* The Ritual in Motion: photo layers, native scroll and a static fallback. */
.hero-slide--collection { background: #101010; overflow: clip; }
.product-stage { position: relative; width: 100%; height: 100%; isolation: isolate; overflow: clip; background: radial-gradient(ellipse at 65% 38%, #686868 0%, #292929 43%, #101010 78%); color: white; pointer-events: none; }
.hero-slide--collection > .product-stage { position: absolute; inset-block: 0; inset-inline-end: 0; width: 61%; }
.stage-halo { position: absolute; width: 60%; aspect-ratio: 1; border: 1px solid #ffffff18; border-radius: 50%; left: 27%; top: 4%; box-shadow: 0 0 90px #ffffff06, inset 0 0 90px #ffffff06; }
.stage-word { position: absolute; top: 7%; left: 8%; width: 90%; font: 400 clamp(55px, 7vw, 110px)/1 var(--font-display); letter-spacing: -.06em; color: #ffffff12; white-space: nowrap; }
.stage-ground { position: absolute; inset: 76% -20% -30%; background: linear-gradient(#74747455, #1d1d1d); transform: rotate(-6deg); border-top: 1px solid #ffffff0a; }
.stage-light { position: absolute; inset: -60% -10%; background: linear-gradient(115deg, transparent 36%, #ffffff12 47%, #ffffff24 50%, transparent 60%); transform: translateX(20%); opacity: .45; }
.scene-object { position: absolute; transform-origin: 50% 90%; }
.scene-object img { width: 100%; height: 100%; object-fit: contain; filter: none; }
.scene-serum { left: 0; bottom: 14%; width: 75%; height: 82%; z-index: 2; }
.scene-cream { left: 48%; bottom: 11%; width: 44%; height: 49%; z-index: 3; }
.stage-shadow { position: absolute; height: 5%; border-radius: 50%; background: #0009; filter: blur(10px); transform: rotate(-6deg); }
.stage-shadow--serum { left: 26%; bottom: 13%; width: 27%; }
.stage-shadow--cream { left: 49%; bottom: 13%; width: 43%; }
.stage-signature { position: absolute; inset: auto 8% 6%; display: flex; justify-content: space-between; font-size: 8px; letter-spacing: .22em; color: #bcbcbc; }
.hero-slide--collection .hero-inner { z-index: 4; }
.hero-slide--collection .hero-copy { width: 43%; }
.hero-slide--collection .hero-feature { z-index: 4; inset-inline-end: 6%; inset-block-start: 88px; inset-block-end: auto; background: transparent; color: white; width: 195px; min-height: 54px; border-top: 1px solid #ffffff40; padding: 12px 0 0; }
.hero-slide--collection .hero-feature > img { display: none; }
.hero-slide--collection .hero-feature-tag { color: #bcbcbc; }
.hero-slide--collection .hero-feature-name { font-family: var(--font-display); font-size: 23px; }
.hero-slide--collection .stage-signature { bottom: auto; top: 6%; }
.hero-bottom { z-index: 5; }
.texture-visual { position: relative; isolation: isolate; }
.dialog--product[open] { animation: none !important; }
.texture-visual::after { content: ''; position: absolute; inset: 0; pointer-events: none; background: linear-gradient(115deg, transparent 20%, #ffffff40 48%, transparent 72%); opacity: .5; }
@media (max-width: 760px) {
  .hero { height: auto; min-height: 690px; }
  .hero-slide--collection > .product-stage { width: 100%; height: 340px; }
  .hero-slide--collection::after { display: none; }
  .hero-slide--collection .hero-inner { align-items: flex-end; padding-bottom: 84px; background: linear-gradient(0deg, #101010 44%, transparent 55%); }
  .hero-slide--collection .hero-copy { width: 100%; max-width: 450px; }
  .hero-slide--collection .hero-edition { display: none; }
  .hero-slide--collection .hero-feature { display: none; }
  .hero-slide--collection .stage-signature { top: 8%; }
  .hero h1, .hero h2 { font-size: clamp(48px, 12vw, 66px); margin-block: 13px; }
  .hero-description { max-width: 32ch; margin-block-end: 18px; }
  .stage-word { font-size: 60px; top: 13%; }
  .hero .scene-serum { height: 83%; bottom: 8%; left: -2%; }
  .hero .scene-cream { bottom: 7%; left: 48%; }
  .hero .stage-shadow { bottom: 7%; }
  [dir=rtl] .hero { min-height: 740px; }
  [dir=rtl] .hero-slide--collection .hero-inner { background: linear-gradient(0deg, #101010 48%, transparent 60%); }
}
@media (max-width: 375px) {
  .hero { min-height: 705px; }
}