/* The first letter: hold → lift the flap → slide the envelope away. */
.brand-intro{
  --intro-duration:4000ms;
  --intro-fold:34%;
  display:none;position:fixed;inset:0;z-index:1000;
  overflow:hidden;isolation:isolate;color:var(--mg-black);
  pointer-events:none;
}
.brand-intro.is-active{display:block}
.brand-intro__envelope{
  position:absolute;inset:0;perspective:1400px;perspective-origin:50% 0;
}
.brand-intro__pocket{
  position:absolute;inset:0;
  filter:drop-shadow(0 -8px 18px rgba(23,20,15,.12));
}
.brand-intro__paper{
  position:absolute;inset:0;background:var(--mg-cream);
  clip-path:polygon(0 0,50% var(--intro-fold),100% 0,100% 100%,0 100%);
}
.brand-intro__stage{
  position:absolute;left:50%;top:54%;transform:translate(-50%,-50%);
  display:flex;flex-direction:column;align-items:center;gap:clamp(12px,2vh,20px);
  font-family:var(--display);font-weight:400;background:var(--mg-cream);
}
.brand-intro__word{
  white-space:nowrap;font-size:clamp(52px,14vw,88px);
  letter-spacing:-.035em;line-height:1.15;
}
.brand-intro__word i{font-style:italic}
.brand-intro__mark{
  display:block;width:clamp(72px,10vw,100px);height:auto;
  /* Remove the reference screenshot's paper tint when blending its ink. */
  filter:grayscale(1) contrast(2);mix-blend-mode:multiply;
}
.brand-intro__flap{
  position:absolute;top:0;left:0;width:100%;height:var(--intro-fold);
  transform-origin:50% 0;backface-visibility:hidden;
  filter:drop-shadow(0 2px 2px rgba(23,20,15,.12));
}
.brand-intro__flap-paper{
  position:absolute;inset:0;
  /* A single change in light distinguishes folded paper from a flat wipe. */
  background:linear-gradient(180deg,var(--mg-white),var(--mg-cream));
  clip-path:polygon(0 0,100% 0,50% 100%);
}
.brand-intro__flap-paper::after{
  content:"";position:absolute;inset:0;
  background:linear-gradient(180deg,transparent,rgba(23,20,15,.16));opacity:0;
}
.brand-intro.is-playing{animation:intro-exit var(--intro-duration) linear forwards}
.brand-intro.is-playing .brand-intro__flap{
  animation:intro-open var(--intro-duration) cubic-bezier(.45,0,.2,1) forwards;
}
.brand-intro.is-playing .brand-intro__flap-paper::after{
  animation:intro-fold-light var(--intro-duration) linear forwards;
}
.brand-intro.is-playing .brand-intro__pocket{
  animation:intro-paper-away var(--intro-duration) cubic-bezier(.65,0,.2,1) forwards;
}
@keyframes intro-open{
  0%,27%{transform:rotateX(0deg)}
  58%,100%{transform:rotateX(-165deg)}
}
@keyframes intro-fold-light{
  0%,27%{opacity:0}
  44%{opacity:1}
  58%,100%{opacity:0}
}
@keyframes intro-paper-away{
  0%,49%{transform:translateY(0)}
  94%,100%{transform:translateY(105%)}
}
/* Visibility is only a fallback; the page is revealed by moving real layers. */
@keyframes intro-exit{0%,99%{visibility:visible}100%{visibility:hidden}}
@media(max-height:500px){
  .brand-intro__stage{gap:8px}
  .brand-intro__mark{width:52px}
  .brand-intro__word{font-size:clamp(40px,8vw,64px)}
}
@media(prefers-reduced-motion:reduce){.brand-intro.is-active{display:none}}