body.revealed .intro { position:absolute; inset:0 0 auto; z-index:2; pointer-events:none; }
body.revealed #details { min-height:100dvh; box-sizing:border-box; }
@property --reveal-radius {
  syntax:"<percentage>";
  inherits:false;
  initial-value:0%;
}
.intro.opening {
  mask-image:radial-gradient(circle at center, transparent calc(var(--reveal-radius) - 24%), #000 var(--reveal-radius));
}
.reveal-light { position:fixed; inset:0; z-index:3; pointer-events:none; opacity:0; }
.reveal-light::before { content:""; position:absolute; inset:0; background:radial-gradient(ellipse at center, #fff7dfaa, #ffe9b744 24%, transparent 55%); transform:scale(.35); }
body.revealed .reveal-light { animation:light-opacity .85s ease both; }
body.revealed .reveal-light::before { animation:light-spread .85s ease-out both; }
@keyframes light-opacity { 0%, 100% { opacity:0; } 32% { opacity:.28; } }
@keyframes light-spread { to { transform:scale(1.3); } }
@media (prefers-reduced-motion:reduce) {
  body.revealed .reveal-light, body.revealed .reveal-light::before { animation:none; }
}
.intro { position:relative; height:100vh; height:100dvh; overflow:hidden; background:var(--envelope-background, #ba9389); }
.intro[hidden] { display:none; }
.intro video { display:block; width:100%; height:100%; object-fit:cover; filter:var(--envelope-filter, none); }
.intro::after { content:""; position:absolute; inset:0; pointer-events:none; box-shadow:var(--envelope-shadow, none); }
#open { position:absolute; z-index:2; inset:0; display:block; width:100%; padding:0; border:0; border-radius:0; background:transparent; cursor:pointer; }
#open[hidden] { display:none; }
#open:focus-visible { outline-offset:-5px; }
@media (min-width: 700px) {
  .intro video { width:min(100%, calc(var(--envelope-aspect, .625) * 100vh)); width:min(100%, calc(var(--envelope-aspect, .625) * 100dvh)); margin-inline:auto; }
}