[data-tour-hero] {
  --hero-night: var(--paper);
  background: var(--paper);
  --tour-aspect: 1.77777778;
  --tour-height: min(clamp(620px, calc(100svh - 201px), 1230px), calc(56.25vw + 24px));
  block-size: var(--tour-height);
}

[data-tour-hero] .tour-media {
  --tour-edge-feather: clamp(12px, 1vw, 20px);
  
  position: absolute;
  inset-block-start: 0;
  left: 50%;
  inline-size: min(100%, calc(var(--tour-height) * var(--tour-aspect)));
  aspect-ratio: var(--tour-aspect);
  transform: translateX(-50%);
  background: var(--hero-night);
  pointer-events: none;
  opacity: 0;
  transition: opacity 1600ms cubic-bezier(.22,.61,.36,1);
  
  
  mask-image:linear-gradient(90deg,transparent 0,#00000080 calc(var(--tour-edge-feather)*.2),#000000d9 calc(var(--tour-edge-feather)*.45),#000000f7 calc(var(--tour-edge-feather)*.7),#000 var(--tour-edge-feather),#000 calc(100% - var(--tour-edge-feather)),#000000f7 calc(100% - var(--tour-edge-feather)*.7),#000000d9 calc(100% - var(--tour-edge-feather)*.45),#00000080 calc(100% - var(--tour-edge-feather)*.2),transparent 100%),linear-gradient(180deg,transparent 0,#00000080 calc(var(--tour-edge-feather)*.2),#000000d9 calc(var(--tour-edge-feather)*.45),#000000f7 calc(var(--tour-edge-feather)*.7),#000 var(--tour-edge-feather),#000 calc(100% - var(--tour-edge-feather)),#000000f7 calc(100% - var(--tour-edge-feather)*.7),#000000d9 calc(100% - var(--tour-edge-feather)*.45),#00000080 calc(100% - var(--tour-edge-feather)*.2),transparent 100%);
  mask-composite:intersect;
}

[data-tour-hero] .tour-poster,
[data-tour-hero] .tour-media video {
  position: absolute;
  inset: 0;
  display: block;
  inline-size: 100%;
  block-size: 100%;
}

[data-tour-hero] .tour-poster {
  background: var(--hero-night);
}

[data-tour-hero] .tour-poster img,
[data-tour-hero] .tour-media video {
  display: block;
  inline-size: 100%;
  block-size: 100%;
  object-fit: contain;
}

[data-tour-hero][data-tour-frame] .tour-poster {
  opacity: 0;
  transition: opacity 360ms ease;
}

[data-tour-hero] .hero-guide {
  grid-template-columns: 1fr 1fr;
  grid-template-areas: 'entry controls';
  align-items: end;
  pointer-events: none;
}

[data-tour-hero] .hero-identity {
  grid-area: auto;
  justify-self: auto;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 2;
  margin: 0;
  padding: 0;
}

[data-tour-hero] .hero-identity h1 {
  width: clamp(230px, 25vw, 460px);
  max-width: 74vw;
}
[data-tour-hero] .hero-wordmark {
  filter: url(#tour-logo-density);
}
[data-tour-hero] .hero-identity h1 {
  overflow: visible;
  filter: drop-shadow(0 2px 8px #160e07b3) drop-shadow(0 0 24px #160e0780);
}

[data-tour-hero] .hero-actions {
  grid-area: entry;
  justify-content: flex-start;
}

[data-tour-hero] .hero-motion-controls {
  grid-area: controls;
  justify-self: end;
}

[data-tour-hero] .hero-enter,
[data-tour-hero] .hero-motion-controls button {
  pointer-events: auto;
}

@media (max-width: 740px) and (orientation: portrait) {
  [data-tour-hero] {
    --tour-aspect: .5625;
    --tour-height: min(clamp(560px, calc(100svh - 225px), 940px), calc(177.78vw + 24px));
  }

  [data-tour-hero] .tour-media {
    --tour-edge-feather: 10px;
    inline-size: 100%;
    block-size: 100%;
    aspect-ratio: auto;
  }

  [data-tour-hero] .tour-poster img,
  [data-tour-hero] .tour-media video { object-fit: cover; }

  [data-tour-hero] .hero-guide {
    grid-template-columns: 1fr 1fr;
    grid-template-areas: 'entry controls';
    padding-block-end: 10px;
  }
}

@media (max-height: 540px) and (orientation: landscape) {
  [data-tour-hero] {
    --tour-height: min(max(335px, calc(100svh - 100px)), calc(56.25vw + 24px));
  }
}




[data-tour-hero][data-tour-frame] .tour-media,
[data-tour-hero][data-tour-still] .tour-media { opacity: 1; }
[data-tour-hero] .hero-identity h1 {
  transform: scale(1.12);
  transition: transform 1600ms cubic-bezier(.22,.61,.36,1);
}
[data-tour-hero][data-tour-frame] .hero-identity h1,
[data-tour-hero][data-tour-still] .hero-identity h1 { transform: scale(1); }



[data-tour-hero] .hero-curator-name{font-size:clamp(12px,1vw,17px);line-height:1.5;text-align:center;color:#f6eee2;margin:12px 0 0;text-shadow:0 2px 10px #1b1a19;}