/* Long optical dissolves; the scene remains visible through the outline title. */
.hero-experience {
  --hero-header:78px;
  position:relative; min-height:calc(100svh - var(--hero-header));
  padding:0; margin:0; overflow:visible; background:var(--paper); isolation:isolate;
}
.hero-experience:before,.hero-experience:after {display:none;}
.experience-stage {
  position:relative; width:100%; height:calc(100svh - var(--hero-header));
  min-height:360px; overflow:hidden; isolation:isolate; background:#15151c;
}
.experience-scenes,.hero-slide {position:absolute; inset:0; width:100%; height:100%;}
.experience-scenes {overflow:hidden; z-index:0; isolation:isolate;}
.hero-slide {--photo-focus:50% 50%; --camera-x:.5%; --camera-y:.15%; display:block; opacity:0; z-index:0; transition:opacity 1100ms cubic-bezier(.33,0,.67,1); pointer-events:none;}
.hero-slide.is-current {opacity:1; z-index:2;}
.hero-slide.is-departing {opacity:1; z-index:1;}
.hero-transition-supported .hero-slide,.hero-sequence-paused .hero-slide {transition:none;}
.hero-slide img {
  display:block; width:100%; height:100%; object-fit:cover; object-position:var(--photo-focus);
  transform:scale(1.02);
}

.hero-sequence-running:not(.hero-camera-supported) .hero-slide.is-current img,
.hero-sequence-running:not(.hero-camera-supported) .hero-slide.is-departing img {
  animation:heroCameraFlow var(--camera-duration,8s) linear both;
}
.hero-sequence-paused .hero-slide.is-current img,
.hero-sequence-paused .hero-slide.is-departing img {animation-play-state:paused;}
/* The outgoing camera keeps moving until its photo is fully covered. */
.hero-identity {
  position:absolute; z-index:3; left:50%; bottom:55px;
  width:min(640px,88vw,calc((100svh - var(--hero-header)) * .65));
  transform:translateX(-50%); text-align:center;
}
.hero-cumbre-label {
  position:absolute; z-index:3; left:50%; top:clamp(24px,4svh,48px);
  transform:translateX(-50%); text-align:center;
  margin:0; padding:0; width:min(640px,90vw); background:none;
  font:800 clamp(40px,6vw,76px)/.94 var(--sans); letter-spacing:.025em;
  text-transform:uppercase; color:#fbf5ea;
}
.hero-cumbre-label span {display:block; margin-top:8px; font-size:.5em; line-height:1.05; letter-spacing:.035em;}
@supports (-webkit-text-stroke:1px white) {
  .hero-cumbre-label {
    color:transparent; -webkit-text-fill-color:transparent;
    -webkit-text-stroke:1.25px #fff5e6;
    filter:drop-shadow(0 1px 1px #211918a6);
  }
}
.experience-logo {position:relative; width:min(540px,100%); padding:0; margin:0 auto; line-height:1;}
.experience-logo img {width:100%; height:auto; display:block; filter:drop-shadow(0 0 1.5px #fff1da) drop-shadow(0 0 16px #fff1da99);}
.hero-scene-controls {
  position:absolute; z-index:4; left:50%; bottom:6px; display:flex;
  transform:translateX(-50%); gap:0;
}
.hero-scene-controls button {width:36px; height:40px; border:0; background:none; display:grid; place-items:center; padding:0; cursor:pointer;}
.hero-scene-controls span {position:relative; display:block; overflow:hidden; width:18px; height:2px; background:#ffefce88; transition:transform .25s;}
.hero-scene-controls [aria-pressed="true"] span {transform:scaleY(2);}
.hero-scene-controls [aria-pressed="true"] span:after {content:""; position:absolute; inset:0; background:#fff4e1; transform-origin:left;}
.hero-sequence-running .hero-scene-controls [aria-pressed="true"] span:after {animation:heroSceneTime var(--scene-duration,6s) linear both;}
.hero-sequence-paused .hero-scene-controls [aria-pressed="true"] span:after {animation-play-state:paused;}
.hero-sequence-toggle,.hero-next {
  position:absolute; z-index:4; bottom:14px; width:44px; height:44px;
  display:grid; place-items:center; border:1px solid #eee1c980; background:#15131a66;
  color:#fff4e1; border-radius:50%; padding:0; text-decoration:none;
}
.hero-sequence-toggle {right:24px; font-size:18px;}
.hero-next {left:24px;}
.hero-next svg {width:19px; height:19px; transform:rotate(90deg);}
.hero-scene-controls button:focus-visible,.hero-sequence-toggle:focus-visible,.hero-next:focus-visible {outline:2px solid #fff4e1; outline-offset:2px;}
.hero-experience.hero-art-unavailable .experience-logo .sr-only {position:static; width:auto; height:auto; clip:auto; overflow:visible; white-space:normal; display:block; text-align:center; font:400 42px/1 var(--serif); color:#fff4e1;}
.hero-experience:not(.hero-initialized) .hero-scene-controls,
.hero-experience:not(.hero-initialized) .hero-sequence-toggle {display:none;}
@keyframes heroCameraFlow {from {transform:scale(1.02) translate3d(-.5%,-.15%,0);} to {transform:scale(1.06) translate3d(var(--camera-x),var(--camera-y),0);}}
@keyframes heroSceneTime {from {transform:scaleX(0);} to {transform:scaleX(1);}}
@media(max-width:800px) {
  .hero-experience {--hero-header:72px;}
  .hero-identity {width:min(600px,90vw,calc((100svh - var(--hero-header)) * .65));}
}
@media(max-width:600px) {
  .hero-experience {--hero-header:66px;}
  .hero-scene-controls button {width:24px; height:44px;}
  .hero-scene-controls span {width:14px;}
  .hero-identity {width:min(90vw,calc((100svh - var(--hero-header)) * .56)); bottom:64px;}
  .hero-cumbre-label {font-size:clamp(38px,10.5vw,60px); letter-spacing:.015em;}
  .hero-cumbre-label span {font-size:.49em; letter-spacing:.02em; margin-top:6px;}
  .hero-sequence-toggle {right:8px; bottom:8px;}
  .hero-next {left:8px; bottom:8px;}
}
@media(orientation:landscape) and (max-height:550px) {
  .experience-stage {min-height:240px;}
  .hero-identity {bottom:50px; width:min(380px,70vw);}
  .hero-cumbre-label {top:12px; font-size:36px;}
  .experience-logo {width:220px;}
}
@media(prefers-reduced-motion:reduce) {
  .hero-slide,.hero-scene-controls span {transition:none;}
  .hero-slide img {transform:none; animation:none!important;}
  .hero-scene-controls span:after {animation:none!important;}
}

@media(min-width:801px) {
  .hero-cumbre-label {width:min(1150px,94vw);font-size:clamp(30px,4vw,60px);white-space:nowrap;}
  .hero-cumbre-label span {display:inline;font-size:inherit;letter-spacing:inherit;margin:0;}
}