/* ==========================================================
   ENTRY FILM - the envelope opens, then zooms into the first-page
   photo; the overlay cross-fades out over that photo (entry.js).
   Nothing else on the site changes. Removed from the DOM afterwards.
   ========================================================== */
.envelope-intro{
  position:fixed;inset:0;
  width:100vw;height:100vh;height:100dvh;
  z-index:99999;overflow:hidden;
  background:#120b08;
  opacity:1;visibility:visible;
  transition:opacity 650ms cubic-bezier(.22,1,.36,1),visibility 650ms linear;
  touch-action:none;overscroll-behavior:contain;
}
.envelope-intro.is-leaving{opacity:0;visibility:hidden;pointer-events:none}
.envelope-intro video{
  display:block;width:100%;height:100%;
  object-fit:cover;object-position:center center;
  background:#120b08;
  /* the film ends on the first-page photo at cover scale 1.00; the page holds
     that photo at 1.02, so the film is shown at 1.02 too and the two line up
     exactly under the cross-fade */
  transform:scale(1.02);transform-origin:center center;
}
/* the page underneath stays put while the film plays, and the first page's
   slow drift waits for the hand-over so the photo has not moved on */
body.entering #pages{overflow:hidden}
body.entering .page--art.live .kb{animation-play-state:paused}

/* the only controls: Skip (after 1.5s) and Tap to Enter (autoplay blocked) */
.entry__btn{
  position:absolute;left:50%;transform:translateX(-50%);
  bottom:calc(30px + env(safe-area-inset-bottom));
  margin:0;font:500 11px/1 var(--sans,Jost,sans-serif);
  letter-spacing:.3em;text-transform:uppercase;
  color:rgba(246,239,228,.92);
  background:rgba(18,8,6,.36);
  border:1px solid rgba(246,239,228,.32);border-radius:999px;
  padding:13px 24px 12px;
  -webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);
  cursor:pointer;-webkit-tap-highlight-color:transparent;
  opacity:0;transition:opacity .6s ease;
}
.entry__btn.show{opacity:1}
.entry__btn[hidden]{display:none}
.entry__btn--enter{
  bottom:auto;top:50%;transform:translate(-50%,-50%);
  padding:16px 32px 15px;font-size:12px;
  background:rgba(18,8,6,.5);border-color:rgba(232,200,126,.6);color:#E8C87E;
}
@media (prefers-reduced-motion:reduce){
  .envelope-intro{transition-duration:300ms!important}
}