/* Responsive hero photographs and dedicated thumbnail crops. */
.cinema-photo { position:absolute; inset:0; display:block; }
.cinema-slide .cinema-photo > img { object-position:var(--hero-focus,center); }
@media(max-width:750px) { .cinema-slide .cinema-photo > img { object-position:center; } }
/* A continuous camera dissolve. Moving photographs never change layout size. */
html[data-motion="dissolve"] .cinema-slides { perspective: none; }
html[data-motion="dissolve"] .cinema-slide,
html[data-motion="dissolve"] .cinema-slide.is-current {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border-radius: 0;
  box-shadow: none;
  transform: none;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity 1600ms cubic-bezier(.22,.61,.36,1);
}
html[data-motion="dissolve"] .cinema-slide.is-current { opacity: 1; visibility: visible; pointer-events: auto; }
html[data-motion="dissolve"] .cinema-slide.is-leaving { opacity: 1; visibility: visible; will-change: opacity; }
html[data-motion="dissolve"] .cinema-slide > .cinema-photo > img { opacity: 0; transform: scale(1.06); transition: opacity 1000ms ease; animation: none; }
html[data-motion="dissolve"] .cinema.is-ready .cinema-slide > .cinema-photo > img { opacity: 1; }
html[data-motion="dissolve"] .cinema-slide.is-current > .cinema-photo > img,
html[data-motion="dissolve"] .cinema-slide.is-leaving > .cinema-photo > img {
  animation: countryCameraDrift 11s cubic-bezier(.2,.4,.4,1) both;
  will-change: transform;
}
@keyframes countryCameraDrift {
  from { transform: translate3d(var(--drift-start,.6%),0,0) scale(1.065); }
  to { transform: translate3d(var(--drift-end,-.6%),0,0) scale(1.025); }
}
html[data-motion="dissolve"] .cinema-overlay,
html[data-motion="dissolve"] .cinema-slide.is-current .cinema-overlay {
  background: linear-gradient(90deg,#110e0bd1 0%,#110e0b75 43%,#110e0b0a 83%),linear-gradient(0deg,var(--bark),transparent 32%),linear-gradient(180deg,#110e0b38,transparent 23%);
}
html[data-motion="dissolve"] .cinema-content,
html[data-motion="dissolve"] .cinema-slide.is-current .cinema-content {
  top: max(168px,28%);
  width: 44%;
  opacity: 1;
  transform: none;
  transition: none;
  pointer-events: none;
}
html[data-motion="dissolve"] .cinema-slide.is-current .cinema-content { pointer-events: auto; }
html[data-motion="dissolve"] .cinema-content .cinema-title { font-size: clamp(3.6rem,min(6.4vw,10svh),7.2rem); margin: 20px 0; }
html[data-motion="dissolve"] .cinema-content > * { opacity: 0; }
html[data-motion="dissolve"] .cinema-slide.is-current .cinema-content > * { animation: countryCopyIn 900ms cubic-bezier(.22,.61,.36,1) both; }
html[data-motion="dissolve"] .cinema-slide.is-current .cinema-content > .eyebrow { animation-delay: 120ms; }
html[data-motion="dissolve"] .cinema-slide.is-current .cinema-content > .cinema-title { animation-delay: 260ms; }
html[data-motion="dissolve"] .cinema-slide.is-current .cinema-content > p:not(.eyebrow) { animation-delay: 400ms; }
html[data-motion="dissolve"] .cinema-slide.is-current .cinema-content > .button { animation-delay: 520ms; }
html[data-motion="dissolve"] .cinema-slide.is-leaving .cinema-content > * { animation: countryCopyOut 320ms ease-out both; }
@keyframes countryCopyIn { from { opacity: 0; transform: translate3d(0,24px,0); } to { opacity: 1; transform: none; } }
@keyframes countryCopyOut { from { opacity: 1; transform: none; } to { opacity: 0; transform: translate3d(0,-12px,0); } }

.cinema-rail {
  position: absolute;
  right: 6vw;
  top: 49%;
  width: min(42vw,560px);
  height: 260px;
  z-index: 7;
  --preview-width: 150px;
  --preview-step: 170px;
  overflow: hidden;
  mask-image: linear-gradient(90deg,transparent,#000 2%,#000 94%,transparent);
}
.cinema-rail .scene-pick {
  position: absolute;
  inset: 14px auto auto 10px;
  width: var(--preview-width);
  height: 222px;
  display: block;
  overflow: hidden;
  padding: 0;
  border: 1px solid #f6e8ce55;
  border-radius: 0;
  background: #21190f;
  box-shadow: 0 12px 25px #0003;
  opacity: .65;
  transform: translate3d(calc(var(--preview-slot,0) * var(--preview-step)),0,0) rotate(var(--preview-turn,0deg)) scale(.96);
  transition: transform 1100ms cubic-bezier(.22,.61,.36,1),opacity 700ms ease,border-color 500ms ease,visibility 0s;
  visibility: visible;
}
.cinema-rail .scene-pick > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.cinema-rail .scene-pick:after { content: ''; position: absolute; inset: 0; background: linear-gradient(0deg,#100d09e8,transparent 65%); pointer-events: none; }
.cinema-rail .scene-pick[aria-pressed="true"] { opacity: 1; border-color: var(--gold); transform: translate3d(calc(var(--preview-slot,0) * var(--preview-step)),0,0) scale(1); }
.cinema-rail .scene-pick:hover { opacity: 1; }
.cinema-rail .scene-pick.is-parked { opacity: 0; pointer-events: none; visibility: hidden; transition-delay: 0s,0s,0s,1100ms; }
.cinema-rail .scene-pick-label { position: absolute; inset: auto 15px 18px; z-index: 1; font: 400 1.45rem/1.12 var(--serif); color: #fff1d7; letter-spacing: 0; }
.cinema-rail .scene-pick-label > span { display: block; margin-bottom: 10px; font: 500 .63rem/1.3 var(--sans); letter-spacing: .12em; color: var(--honey); }
.cinema-rail .scene-pick:focus-visible { outline: 2px solid var(--gold); outline-offset: -5px; }
html[data-motion="dissolve"] .cinema:not(.is-ready) .cinema-slide > .cinema-photo > img,
.cinema--dissolve:not(.is-in-view) .cinema-slide > .cinema-photo > img,
.cinema--dissolve:has(> .playback-toggle[aria-pressed="false"]) .cinema-slide > .cinema-photo > img,
.motion-paused .cinema--dissolve .cinema-slide > .cinema-photo > img { animation-play-state: paused; }
@media(max-width:1050px) {
  html[data-motion="dissolve"] .cinema-content { width: 47%; }
  .cinema-rail { right: 4vw; width: 43vw; --preview-width: 126px; --preview-step: 145px; }
  .cinema-rail .scene-pick { height: 205px; }
}
@media(max-width:750px) {
  html[data-motion="dissolve"] .cinema { min-height: 860px; }
  html[data-motion="dissolve"] .cinema-content,
  html[data-motion="dissolve"] .cinema-slide.is-current .cinema-content { left: 24px; top: 176px; width: calc(100% - 48px); }
  html[data-motion="dissolve"] .cinema-content .cinema-title { font-size: clamp(3rem,7vw,3.8rem); max-width: 480px; margin: 20px 0; }
  html[data-motion="dissolve"] .cinema-content > p:not(.eyebrow) { font-size: .94rem; max-width: 320px; margin: 20px 0 23px; }
  html[data-motion="dissolve"] .cinema-content .eyebrow { font-size: .64rem; }
  .cinema-rail { top: auto; bottom: 117px; left: 14px; right: 14px; width: auto; height: 166px; --preview-width: 112px; --preview-step: 132px; }
  .cinema-rail .scene-pick { height: 140px; }
  .cinema-rail .scene-pick-label { inset: auto 11px 12px; font-size: 1.14rem; }
  .cinema-rail .scene-pick-label > span { margin-bottom: 7px; font-size: .57rem; }
  html[data-motion="dissolve"] .cinema-bottom { left: 24px; right: 24px; bottom: 30px; }
  html[data-motion="dissolve"] .cinema-bottom > span { display: none; }
  html[data-motion="dissolve"] .cinema-controls { width: 100%; justify-content: space-between; gap: 15px; }
}
@media(max-width:380px) { .cinema-rail { --preview-width: 100px; --preview-step: 116px; } }
@media(prefers-reduced-motion:reduce) {
  html[data-motion="dissolve"] .cinema-slide,
  html[data-motion="dissolve"] .cinema-slide > .cinema-photo > img,
  html[data-motion="dissolve"] .cinema-content > *,
  .cinema-rail .scene-pick { animation: none !important; transition: none !important; transform: none; }
  html[data-motion="dissolve"] .cinema-slide.is-current .cinema-content > * { opacity: 1; }
  html[data-motion="dissolve"] .cinema-slide.is-leaving .cinema-content > * { opacity: 0; }
  .cinema-rail .scene-pick,
  .cinema-rail .scene-pick[aria-pressed="true"] { transform: translateX(calc(var(--preview-slot,0) * var(--preview-step))); }
}
