/* Hold the viewport until playback lands, then restore ordinary page scroll. */
.entrance-watch, .entrance-atmosphere, .entrance-cue { display: none; }
.has-entrance { scrollbar-gutter: stable; }
.entrance-locked { height: 100%; overflow: hidden; overscroll-behavior: none; scroll-behavior: auto; }
.entrance-locked body { position: fixed; inset: 0; width: 100%; overflow: hidden; overscroll-behavior: none; }
.entrance-locked .entrance { touch-action: pinch-zoom; }
.has-entrance {
  --landing: 0;
  --scene-light: 0;
  --watch-opacity: 0;
  --watch-scale: .8;
  --watch-tilt: -9deg;
  --title-opacity: 0;
  --title-offset: 65px;
  --eyebrow-opacity: 0;
  --description-opacity: 0;
  --actions-opacity: 0;
  --chrome-opacity: 0;
  --cue-opacity: 1;
}
.has-entrance .entrance {
  position: relative;
  height: var(--entrance-height);
  background: #030303;
  overflow-anchor: none;
}
.has-entrance .hero {
  position: relative;
  top: 0;
  height: var(--entrance-height);
  min-height: 0;
  max-height: none;
  padding-top: 140px;
  padding-bottom: 115px;
  background: #030303;
}
.has-entrance .hero-art { visibility: hidden; animation: none; }
.has-entrance:not(.entrance-ready) .site-header,
.has-entrance:not(.entrance-ready) .hero-content,
.has-entrance:not(.entrance-ready) .hero-footer,
.has-entrance:not(.entrance-ready) .hero-side { visibility: hidden; }
.has-entrance .hero-shade {
  z-index: 1;
  opacity: var(--landing);
  pointer-events: none;
  background: linear-gradient(90deg, #10110ff2 0%, #10110fa8 32%, #10110f10 61%, transparent 85%),
              linear-gradient(0deg, #10110f 0%, transparent 25%, transparent 83%, #10110f55 100%);
}
.has-entrance .entrance-atmosphere {
  display: block;
  position: absolute;
  inset: 0;
  opacity: var(--scene-light);
  pointer-events: none;
  background: radial-gradient(ellipse at 66% 43%, #85704720, transparent 57%),
              radial-gradient(ellipse at 38% 80%, #a7916310, transparent 50%);
}
.has-entrance .entrance-watch {
  display: block;
  position: absolute;
  z-index: 0;
  left: 50%;
  top: 50%;
  width: min(90vw, 1200px);
  height: calc(var(--entrance-height) * .9);
  opacity: var(--watch-opacity);
  transform: translate(-50%, -50%) translateX(calc(var(--landing) * 24vw)) scale(var(--watch-scale)) rotate(var(--watch-tilt));
  pointer-events: none;
  touch-action: auto;
  will-change: transform, opacity;
}
.entrance-watch model-viewer {
  display: block;
  width: 100%;
  height: 100%;
  pointer-events: none;
  touch-action: auto;
  opacity: 0;
  transition: opacity .55s ease;
  --poster-color: transparent;
}
.entrance-ready .entrance-watch model-viewer { opacity: 1; }
.entrance-watch model-viewer::part(default-progress-bar),
.entrance-watch model-viewer::part(default-ar-button),
.entrance-watch model-viewer::part(default-interaction-prompt) { display: none; }
.has-entrance .entrance-cue {
  position: absolute;
  z-index: 3;
  display: flex;
  align-items: center;
  flex-direction: column;
  gap: 20px;
  bottom: 40px;
  left: 50%;
  transform: translateX(-50%);
  white-space: nowrap;
  color: #c3ad7f;
  font-size: .625rem;
  letter-spacing: .23em;
  opacity: var(--cue-opacity);
  pointer-events: none;
}
.entrance-loading .entrance-cue { opacity: 1; }
.entrance-line {
  display: block;
  position: relative;
  overflow: hidden;
  width: 1px;
  height: 44px;
  background: #d6bd8626;
}
.entrance-line::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(transparent, #d6bd86, transparent);
  animation: entrance-guide 2.2s ease-in-out infinite;
}
@keyframes entrance-guide {
  0% { transform: translateY(-100%); }
  70%, 100% { transform: translateY(100%); }
}
.has-entrance .hero-content, .has-entrance .hero-footer, .has-entrance .hero-side { z-index: 2; }
.has-entrance .hero-intro,
.has-entrance .title-line > span,
.has-entrance .hero-description,
.has-entrance .hero-actions,
.has-entrance .hero-footer,
.has-entrance .hero-side { animation: none; }
.has-entrance .hero-intro { opacity: var(--eyebrow-opacity); }
.has-entrance .title-line > span { opacity: var(--title-opacity); transform: translateY(var(--title-offset)); }
.has-entrance .hero-description { opacity: var(--description-opacity); }
.has-entrance .hero-actions { opacity: var(--actions-opacity); }
.has-entrance .hero-footer, .has-entrance .hero-side { opacity: var(--chrome-opacity); }
.has-entrance .site-header { opacity: var(--chrome-opacity); }
.has-entrance .reading-progress { opacity: var(--chrome-opacity); }
.has-entrance:not(.entrance-landed) .site-header.scrolled {
  background: transparent;
  backdrop-filter: none;
  border-color: transparent;
}
.has-entrance [data-entrance-gated] { pointer-events: none; }
.has-entrance .hero-content { padding-top: 0; }

@media (max-width: 800px) and (orientation: portrait) {
  .has-entrance .hero-content {
    position: absolute;
    width: 86%;
    max-width: none;
    left: 7%;
    bottom: max(85px, calc(var(--entrance-height) * .105));
  }
  .has-entrance .entrance-watch {
    width: 110vw;
    height: calc(var(--entrance-height) * .78);
    transform: translate(-50%, -50%) translate(calc(var(--landing) * 19vw), calc(var(--landing) * var(--entrance-height) * -.22)) scale(var(--watch-scale)) rotate(var(--watch-tilt));
  }
  .has-entrance .hero-shade {
    background: linear-gradient(0deg, #10110f 0%, #10110ff5 17%, #10110fcb 36%, #10110f44 60%, transparent 80%),
                linear-gradient(90deg, #10110f55, transparent 75%);
  }
  .has-entrance .hero h1 {
    font-size: clamp(3.4rem, 15.6vw, 6rem);
    line-height: .97;
    margin: 19px 0 0;
  }
  .has-entrance .hero-description { margin: 20px 0 24px; font-size: .875rem; line-height: 1.8; }
  .has-entrance .hero-intro { font-size: .625rem; letter-spacing: .15em; }
  .has-entrance .hero-actions { gap: 14px; }
  .has-entrance .hero-actions .button { padding: 13px 16px; min-height: 47px; font-size: .75rem; gap: 15px; }
  .has-entrance .hero-actions .text-link { font-size: .75rem; gap: 9px; }
  .has-entrance .entrance-cue { bottom: 30px; gap: 16px; }
}
@media (max-width: 380px) and (orientation: portrait) {
  .has-entrance .hero h1 { font-size: 3.25rem; }
  .has-entrance .hero-content { bottom: 75px; }
  .has-entrance .hero-description { margin: 15px 0 18px; font-size: .8125rem; }
  .has-entrance .hero-actions { gap: 10px 14px; }
}
@media (max-height: 700px) and (min-aspect-ratio: 1/1) {
  .has-entrance .hero { padding: 95px 7% 80px; }
  .has-entrance .hero h1 { font-size: clamp(3rem, 11vh, 5.5rem); margin: 15px 0; }
  .has-entrance .hero-description { font-size: .8125rem; margin: 16px 0 20px; }
  .has-entrance .hero-intro { font-size: .625rem; }
  .has-entrance .hero-actions .button { min-height: 45px; padding: 10px 18px; }
  .has-entrance .hero-footer { bottom: 22px; }
}