/* Each world stays inside a region around the real, intrinsic text and CTA. */
.opening .opening-stage{
  display:grid;grid-template-columns:minmax(0,1fr) minmax(300px,min(34vw,450px)) minmax(0,1fr);
  grid-template-rows:minmax(0,1.06fr) auto minmax(0,.94fr);
  grid-template-areas:"north north north" "west copy east" "south south south";
  gap:14px;height:clamp(720px,calc(100svh - 185px),1040px);
  width:calc(100% + var(--gutter)*2);margin-inline:calc(var(--gutter)*-1);
}
.opening .opening-collage{display:contents;position:static}
.opening .opening-copy{
  grid-area:copy;position:relative;left:auto;top:auto;transform:none;
  align-self:center;justify-self:center;width:100%;max-width:450px;z-index:30;
}
.opening .opening-copy h1{font-size:clamp(40px,4.1vw,65px);line-height:1.03}
.opening .opening-copy p{font-size:clamp(17px,1.45vw,21px);line-height:1.4;max-width:360px;margin:21px auto 0}
.opening .opening-cta{margin-top:26px}
.opening-region{position:relative;min-width:0;min-height:0;overflow:clip;isolation:isolate;pointer-events:none}
.opening-north{grid-area:north}.opening-west{grid-area:west}.opening-east{grid-area:east}.opening-south{grid-area:south}
.opening .opening-shot{
  display:block;left:calc(var(--card-x) + 6px);top:calc(var(--card-y) + 6px);
  width:calc(var(--card-width) - 12px);height:calc(var(--card-height) - 12px);aspect-ratio:auto;
  transform:translate(var(--float-x,0px),var(--float-y,0px));
  transition:transform .38s cubic-bezier(.2,.75,.25,1),border-color .3s;
  border:1px solid #be9e656b;box-shadow:0 8px 22px #0005;pointer-events:auto;
}
.opening .opening-shot img,.opening .opening-shot:hover img{
  transform:translate(var(--pan-x,0px),var(--pan-y,0px)) scale(1.055);
  transition:transform .55s cubic-bezier(.2,.75,.25,1),filter .3s;
}
.opening .opening-shot:hover,.opening .opening-shot:focus-visible{border-color:var(--gold)}
.opening .opening-shot:hover img{filter:brightness(1.07)}
.opening .opening-shot:focus-visible{outline:1px solid var(--gold);outline-offset:-4px;z-index:50}
.opening .opening-shot>span{
  font-size:clamp(6px,.58vw,9px);line-height:1.3;letter-spacing:.075em;
  left:9px;bottom:8px;max-width:calc(100% - 18px);padding:6px 7px;background:#141414b8;
}
/* Staggered edges and unequal overlaps; every card remains in its own region. */
.opening .shot-7{--card-x:0%;--card-y:18%;--card-width:25%;--card-height:76%}
.opening .shot-2{--card-x:18%;--card-y:0%;--card-width:20%;--card-height:88%}
.opening .shot-13{--card-x:34%;--card-y:12%;--card-width:30%;--card-height:88%}
.opening .shot-10{--card-x:58%;--card-y:26%;--card-width:24%;--card-height:68%}
.opening .shot-12{--card-x:77%;--card-y:4%;--card-width:23%;--card-height:83%}
.opening .shot-1{--card-x:0%;--card-y:12%;--card-width:63%;--card-height:66%}
.opening .shot-15{--card-x:34%;--card-y:0%;--card-width:66%;--card-height:52%}
.opening .shot-16{--card-x:3%;--card-y:43%;--card-width:48%;--card-height:57%}
.opening .shot-9{--card-x:44%;--card-y:55%;--card-width:56%;--card-height:41%}
.opening .shot-3{--card-x:5%;--card-y:0%;--card-width:95%;--card-height:64%;z-index:18}
.opening .shot-5{--card-x:0%;--card-y:40%;--card-width:58%;--card-height:57%}
.opening .shot-14{--card-x:56%;--card-y:53%;--card-width:44%;--card-height:47%}
.opening .shot-11{--card-x:0%;--card-y:8%;--card-width:31%;--card-height:92%}
.opening .shot-6{--card-x:24%;--card-y:0%;--card-width:27%;--card-height:77%}
.opening .shot-4{--card-x:45%;--card-y:15%;--card-width:35%;--card-height:85%}
.opening .shot-8{--card-x:75%;--card-y:3%;--card-width:25%;--card-height:80%}
@media(max-width:700px){
  .opening .opening-stage{
    grid-template-columns:minmax(0,1fr) minmax(0,min(64vw,300px)) minmax(0,1fr);
    grid-template-rows:minmax(0,1fr) auto minmax(0,1fr);
    grid-template-areas:"north north north" "west copy east" "south south south";gap:8px;
    height:clamp(680px,calc(100svh - 152px),920px);
  }
  .opening .opening-copy{width:100%;max-width:none}
  .opening .opening-copy h1{font-size:clamp(26px,8.3vw,38px)}
  .opening .opening-copy p{font-size:16px;line-height:1.4;margin-top:18px;max-width:300px}
  .opening .opening-cta{margin-top:22px;min-height:46px;max-width:100%;gap:16px}
  .opening-west,.opening-east{display:block}
  .opening-west .opening-shot>span,.opening-east .opening-shot>span{display:none}
  .opening .opening-west .opening-shot,.opening .opening-east .opening-shot{
    left:calc(var(--card-x) + 3px);top:calc(var(--card-y) + 3px);
    width:calc(var(--card-width) - 6px);height:calc(var(--card-height) - 6px);
  }
  .opening .shot-12{display:none}
  .opening .shot-7{--card-x:0%;--card-y:3%;--card-width:59%;--card-height:64%}
  .opening .shot-2{--card-x:56%;--card-y:0%;--card-width:44%;--card-height:77%}
  .opening .shot-13{--card-x:0%;--card-y:46%;--card-width:57%;--card-height:54%}
  .opening .shot-10{--card-x:49%;--card-y:55%;--card-width:51%;--card-height:39%}
  .opening .shot-11{--card-x:0%;--card-y:4%;--card-width:58%;--card-height:65%}
  .opening .shot-6{--card-x:53%;--card-y:0%;--card-width:47%;--card-height:61%}
  .opening .shot-4{--card-x:37%;--card-y:38%;--card-width:63%;--card-height:62%}
  .opening .shot-8{--card-x:0%;--card-y:56%;--card-width:49%;--card-height:44%}
  /* The compact collage surrounds the protected copy on all four sides. */
  .opening[data-compact-worlds="true"] .opening-shot{display:none}
  .opening[data-compact-worlds="true"] .opening-shot.is-compact-world{display:block}
  .opening[data-compact-worlds="true"] .shot-9{--card-x:0%;--card-y:3%;--card-width:59%;--card-height:64%}
  .opening[data-compact-worlds="true"] .shot-14{--card-x:56%;--card-y:0%;--card-width:44%;--card-height:77%}
  .opening[data-compact-worlds="true"] .shot-15{--card-x:0%;--card-y:46%;--card-width:57%;--card-height:54%}
  .opening[data-compact-worlds="true"] .shot-13{--card-x:49%;--card-y:55%;--card-width:51%;--card-height:45%}
  .opening[data-compact-worlds="true"] .shot-1{--card-x:0%;--card-y:5%;--card-width:100%;--card-height:88%}
  .opening[data-compact-worlds="true"] .shot-5{--card-x:0%;--card-y:13%;--card-width:100%;--card-height:83%}
  .opening[data-compact-worlds="true"] .shot-4{--card-x:0%;--card-y:4%;--card-width:58%;--card-height:65%}
  .opening[data-compact-worlds="true"] .shot-3{--card-x:53%;--card-y:0%;--card-width:47%;--card-height:61%}
  .opening[data-compact-worlds="true"] .shot-16{--card-x:0%;--card-y:56%;--card-width:49%;--card-height:44%}
  .opening[data-compact-worlds="true"] .shot-6{--card-x:37%;--card-y:38%;--card-width:63%;--card-height:62%}
  .opening .opening-shot>span{font-size:6px;left:6px;bottom:5px;padding:4px 5px;max-width:calc(100% - 12px)}
}
@media(prefers-reduced-motion:reduce){
  .opening .opening-shot{transform:none;transition:none}
  .opening .opening-shot img,.opening .opening-shot:hover img{transform:none;transition:none}
}