/* One fly curtain: hem light -> rising curtain -> expanding glow -> key visual. */
.opening-scene {
  display: none;
  position: absolute;
  inset: 0 0 auto;
  height: min(100%, calc(100svh - var(--header-h) - var(--dock-h)));
  overflow: hidden;
  isolation: isolate;
  z-index: 6;
  pointer-events: none;
  --opening-duration: 3s; /* Default; configured by site-config.js opening.durationSeconds. */
}
.js[data-motion="on"][data-opening="playing"] .opening-scene { display: block; }
/* Let the curtain reveal a settled image, instead of also fading the image in. */
.js[data-motion="on"] .hero-copy,
.js[data-motion="on"] .hero-picture { animation: none; }
.js[data-opening="playing"] .hero-inner { pointer-events: none; }
.opening-shade,
.opening-bloom,
.opening-flare,
.opening-curtain { position: absolute; }
.opening-shade {
  inset: 0;
  background: #080615;
  will-change: opacity;
  animation: opening-shade var(--opening-duration) cubic-bezier(.42, 0, .58, 1) both;
}
.opening-bloom {
  inset: -15% -25% -14%;
  transform-origin: 50% 90%;
  background: radial-gradient(ellipse at 50% 90%,
    #fffff8 0%, #fffde6f5 8%, #ffe9b3c9 20%, #ffc7777a 37%, #f3ab3e2b 53%, transparent 73%);
  will-change: transform, opacity;
  animation:
    opening-bloom-expand var(--opening-duration) cubic-bezier(.35, 0, .4, 1) both,
    opening-bloom-fade var(--opening-duration) cubic-bezier(.42, 0, .58, 1) both;
}
.opening-flare {
  left: -15%; right: -15%; bottom: 0; height: 100px;
  transform-origin: 50% 90%;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 26%, #000 74%, transparent);
  mask-image: linear-gradient(90deg, transparent, #000 26%, #000 74%, transparent);
  background:
    radial-gradient(ellipse at 50% 94%, #fffff9 0%, #fff9dfea 9%, #ffd78783 27%, transparent 63%),
    linear-gradient(transparent 85%, #ffd68a50 92%, #ffffecca 95%, #eeba6340 97%, transparent);
  will-change: transform, opacity;
  animation:
    opening-flare-expand var(--opening-duration) cubic-bezier(.35, 0, .4, 1) both,
    opening-light-fade var(--opening-duration) cubic-bezier(.42, 0, .58, 1) both;
}
.opening-curtain {
  inset: 0;
  background:
    linear-gradient(90deg, #1c0312b0, transparent 14%, transparent 86%, #1c0312b0),
    linear-gradient(180deg, #1f051159, transparent 24%, #b8474820 78%, #23051355),
    repeating-linear-gradient(90deg,
      #240712 0, #4c0b20 14px, #7a1830 32px, #a62c42 46px,
      #862035 61px, #4a0c1f 80px, #220611 97px, #340819 110px);
  border-bottom: 3px solid #d6a15b;
  box-shadow: 0 8px 26px #16030b88, inset 0 -13px 22px #29071566;
  will-change: transform;
  animation: opening-curtain-rise var(--opening-duration) cubic-bezier(.32, 0, .32, 1) both;
}
.opening-curtain::before {
  content: "";
  position: absolute;
  inset: 0;
  opacity: .14;
  background: repeating-linear-gradient(90deg, #ffd6a818 0 1px, transparent 1px 3px);
}
.opening-curtain::after {
  content: "";
  position: absolute;
  left: -8%; right: -8%; bottom: -31px; height: 62px;
  background: radial-gradient(ellipse, #ffffee 0%, #fff1bfe0 12%, #ffd88985 32%, #e6a44820 57%, transparent 73%);
  transform-origin: center;
  will-change: transform, opacity;
  animation:
    opening-hem-expand var(--opening-duration) cubic-bezier(.35, 0, .4, 1) both,
    opening-light-fade var(--opening-duration) cubic-bezier(.42, 0, .58, 1) both;
}
@keyframes opening-curtain-rise {
  /* A single easing curve avoids braking and restarting at intermediate keyframes. */
  from { transform: translate3d(0, 0, 0); }
  to { transform: translate3d(0, -112%, 0); }
}
/* Expansion never stops at intermediate keyframes. Opacity fades independently,
   with zero velocity at its single peak; all layers share the configured duration. */
@keyframes opening-hem-expand {
  from { transform: translateZ(0) scale3d(.16, .25, 1); }
  to { transform: translateZ(0) scale3d(1.2, 3, 1); }
}
@keyframes opening-bloom-expand {
  from { transform: translateZ(0) scale3d(.2, .025, 1); }
  to { transform: translateZ(0) scale3d(1.35, 1.28, 1); }
}
@keyframes opening-flare-expand {
  from { transform: translateZ(0) scale3d(.2, 1, 1); }
  to { transform: translateZ(0) scale3d(1.1, 1, 1); }
}
@keyframes opening-bloom-fade {
  0%, 100% { opacity: 0; }
  55% { opacity: .95; }
}
@keyframes opening-light-fade {
  0%, 100% { opacity: 0; }
  45% { opacity: 1; }
}
@keyframes opening-shade {
  from { opacity: 1; }
  to { opacity: 0; }
}
@media (max-width: 767px) {
  .opening-scene {
    height: auto;
    aspect-ratio: var(--main-ratio, .707);
    max-height: min(100%, calc(100svh - var(--header-h) - var(--dock-h)));
  }
  .opening-curtain { background-size: auto, auto, 82px 100%; }
}
@media (prefers-reduced-motion: reduce) {
  .opening-scene { display: none !important; }
}
@media print { .opening-scene { display: none !important; } }