/* Refined 10-second opener: keep the cinematic feel without expensive full-screen blur. */
.opening-photo-layer {
  animation: openerKenBurnsSlow 10s ease-in-out both !important;
  transition: opacity 1.05s ease, transform 1.15s cubic-bezier(.22,.61,.36,1) !important;
}

.opening-progress span {
  animation: openerProgress 10s linear forwards !important;
}

/* Always cover the full screen on every device and orientation. */
.opening-photo,
.opening-photo-backdrop {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
}

.opening-photo {
  object-position: 50% 42% !important;
}

/* The optimized opener now renders one photo layer, so the old blurred duplicate is unnecessary. */
.opening-photo-backdrop {
  display: none !important;
}

/* Remove the previous panel/portal transition so the exit is calm and lightweight. */
.opening-wipes,
.opening-portal {
  display: none !important;
}

.opening-sequence {
  width: 100vw;
  height: 100svh;
  height: 100dvh;
  min-height: 100%;
  transition: opacity 1.15s cubic-bezier(.22,.61,.36,1) !important;
  will-change: opacity;
}

.opening-sequence.is-leaving {
  opacity: 0 !important;
  pointer-events: none;
}

.opening-sequence.is-leaving .opening-photo-layer {
  opacity: .72 !important;
  transform: scale(1.09) translate3d(0,-.35%,0) !important;
}

.opening-sequence.is-leaving .opening-vignette {
  opacity: .5 !important;
  transition: opacity 1s ease !important;
}

.opening-sequence.is-leaving .opening-copy {
  opacity: 0 !important;
  transform: translateY(-8px) scale(.992) !important;
  filter: none !important;
  transition: opacity .72s ease, transform .9s cubic-bezier(.22,.61,.36,1) !important;
}

.opening-sequence.is-leaving .opening-frame {
  animation: none !important;
  opacity: 0 !important;
  transform: scale(1.012) !important;
  transition: opacity .72s ease, transform 1s ease !important;
}

@keyframes openerKenBurnsSlow {
  from { transform: scale(1.015) translate3d(0,0,0); }
  to { transform: scale(1.07) translate3d(0,-.55%,0); }
}

/* Wide desktop screens: fill edge-to-edge without black side bars. */
@media (min-aspect-ratio: 16/10) {
  .opening-photo {
    object-position: 50% 38% !important;
  }
}

/* Phones and tablets held sideways: keep the photo full-screen and text compact. */
@media (orientation: landscape) and (max-height: 700px) {
  .opening-photo,
  .opening-photo-backdrop {
    object-position: 50% 38% !important;
  }

  .opening-frame {
    inset: 8px !important;
  }

  .opening-copy {
    width: min(760px, calc(100% - 34px)) !important;
    margin-bottom: max(14px, env(safe-area-inset-bottom)) !important;
  }

  .opening-kicker {
    margin-bottom: 4px !important;
    font-size: 5.5px !important;
    letter-spacing: .25em !important;
  }

  .opening-names {
    flex-direction: row !important;
    gap: 10px !important;
    font-size: clamp(42px, 8.6vw, 86px) !important;
    line-height: .78 !important;
  }

  .opening-names i {
    margin: 0 !important;
    font-size: .30em !important;
  }

  .opening-divider {
    width: min(260px, 38vw) !important;
    margin: 8px auto 7px !important;
  }

  .opening-date {
    font-size: 7px !important;
    letter-spacing: .30em !important;
  }

  .opening-enter {
    margin-top: 9px !important;
    font-size: 5.5px !important;
  }

  .opening-progress {
    margin-top: 8px !important;
    width: min(190px, 32vw) !important;
  }
}

@media (orientation: landscape) and (max-height: 450px) {
  .opening-copy {
    margin-bottom: 8px !important;
  }

  .opening-kicker,
  .opening-divider {
    display: none !important;
  }

  .opening-names {
    font-size: clamp(36px, 7.8vw, 68px) !important;
  }

  .opening-enter {
    margin-top: 6px !important;
  }
}

/* Mobile Safari: avoid turbulence + large filter layers while retaining the same look. */
@media (max-width: 767px), (hover: none) and (pointer: coarse) {
  .opening-grain {
    display: none !important;
  }

  .opening-photo-layer {
    will-change: transform, opacity;
  }

  .opening-photo {
    filter: grayscale(1) contrast(1.02) brightness(.92) !important;
  }

  .opening-sequence {
    will-change: opacity;
  }
}

@media (prefers-reduced-motion: reduce) {
  .opening-photo-layer {
    animation: none !important;
    transform: scale(1.025) !important;
  }

  .opening-progress span {
    animation-duration: 10s !important;
  }

  .opening-sequence.is-leaving {
    transition: opacity .3s ease !important;
  }
}