/* The panels travel vertically. The page keeps its normal layout and scroll. */
.site-opening, .site-opening-skip { display: none; }
html[data-site-opening] .vertical-opening .site-opening {
  display: block;
  position: fixed; inset: 0; z-index: 50;
  overflow: hidden;
  pointer-events: auto;
  animation: opening-fail-open 1ms 3400ms forwards;
}
.vertical-opening .opening-panel {
  position: absolute; left: 0; width: 100%; height: calc(50% + 1px);
  overflow: hidden;
  background: #123d37;
  will-change: transform;
}
.vertical-opening .opening-panel-top { top: 0; }
.vertical-opening .opening-panel-bottom { bottom: 0; }
.vertical-opening .opening-panel img {
  position: absolute; left: 50%;
  width: clamp(220px, 28vw, 370px); height: auto; max-width: 70vw;
  transform: translate(-50%, -50%);
}
.vertical-opening .opening-panel-top img { top: calc(100% - 1px); }
.vertical-opening .opening-panel-bottom img { top: 1px; }
.vertical-opening .opening-seam {
  position: absolute; top: 50%; left: 0; width: 100%; height: 1px;
  background: #ecf3e529; pointer-events: none;
}
html[data-site-opening] .vertical-opening .site-opening-skip {
  display: inline-flex; align-items: center; gap: 24px;
  position: fixed; left: max(24px, env(safe-area-inset-left));
  bottom: max(28px, env(safe-area-inset-bottom)); z-index: 55;
  min-height: 44px; padding: 10px 18px;
  border: 1px solid #e2edda70; border-radius: 26px;
  background: #123d37; color: #f8f6f1;
  font: 12px Inter, sans-serif;
  animation: opening-fail-open 1ms 3400ms forwards;
}
.vertical-opening .site-opening-skip:hover { background: #23594e; }
.vertical-opening .site-opening-skip:focus-visible { outline: 2px solid #f8f6f1; outline-offset: 4px; }
html[data-site-opening=playing] .vertical-opening .opening-panel-top {
  animation: opening-top-away 2200ms cubic-bezier(.76, 0, .24, 1) both;
}
html[data-site-opening=playing] .vertical-opening .opening-panel-bottom {
  animation: opening-bottom-away 2200ms cubic-bezier(.76, 0, .24, 1) both;
}
html[data-site-opening=playing] .vertical-opening .opening-seam {
  animation: opening-seam-away 650ms 300ms ease both;
}
html[data-site-opening=playing] .vertical-opening .opening-panel img {
  animation: opening-mark-in 250ms ease-out both;
}
html[data-site-opening=playing] .vertical-opening .personal-hero-copy {
  animation: opening-copy-in 1150ms 650ms cubic-bezier(.16, 1, .3, 1) both;
}
@keyframes opening-top-away {
  0%, 12% { transform: translateY(0); }
  100% { transform: translateY(-101%); }
}
@keyframes opening-bottom-away {
  0%, 12% { transform: translateY(0); }
  100% { transform: translateY(101%); }
}
@keyframes opening-mark-in { from { opacity: 0; } to { opacity: 1; } }
@keyframes opening-seam-away { from { opacity: 1; } to { opacity: 0; } }
@keyframes opening-copy-in {
  from { transform: translateY(20px); opacity: .25; }
  to { transform: none; opacity: 1; }
}
@keyframes opening-fail-open { to { visibility: hidden; pointer-events: none; } }

/* Let the photo settle just after the curtains have cleared. */
html[data-portrait-intro=playing] .personal-refined.vertical-opening .portrait-window,
html[data-portrait-intro=playing] .personal-refined.vertical-opening .portrait-entrance-layer { animation-delay: 450ms; }
html[data-portrait-intro=playing] .personal-refined.vertical-opening .personal-portrait figcaption { animation-delay: 1300ms; }
html[data-portrait-intro=playing] .personal-refined.vertical-opening[data-motion=subtle] .portrait-window { animation-delay: 0ms; }
html[data-portrait-intro=playing] .personal-refined.vertical-opening[data-motion=subtle] .personal-portrait figcaption { animation-delay: 150ms; }
html[data-site-opening] .vertical-opening[data-motion=off] .site-opening,
html[data-site-opening] .vertical-opening[data-motion=off] .site-opening-skip,
html[data-site-opening] .vertical-opening[data-motion=subtle] .site-opening,
html[data-site-opening] .vertical-opening[data-motion=subtle] .site-opening-skip,
html[data-site-opening] .vertical-opening.mini .site-opening,
html[data-site-opening] .vertical-opening.mini .site-opening-skip { display: none; }
@media (max-width: 650px) {
  html[data-site-opening] .vertical-opening .site-opening-skip { left: 12px; bottom: max(17px, env(safe-area-inset-bottom)); gap: 15px; padding: 10px 14px; }
}
@media (prefers-reduced-motion: reduce) {
  html[data-site-opening] .vertical-opening .site-opening,
  html[data-site-opening] .vertical-opening .site-opening-skip { display: none; }
  html[data-site-opening] .vertical-opening .personal-hero-copy { animation: none; }
}