/* ---------- Abertura: as portas se abrem a partir do monograma ---------- */

.intro { display: none; }
.js .intro { display: block; position: fixed; inset: 0; z-index: 200; overflow: hidden; cursor: pointer; }
.js:not(.ready) body { overflow: hidden; }

.intro__half {
  position: absolute; top: 0; bottom: 0; width: 50.1%; background: var(--ink);
  animation: .9s cubic-bezier(.7, 0, .2, 1) 2s both;
}
.intro__half--l { left: 0; animation-name: openL; border-right: 1px solid var(--gold); }
.intro__half--r {
  right: 0; animation-name: openR;
  background: radial-gradient(90% 60% at 100% 0%, var(--glow) 0%, var(--glow-soft) 40%, transparent 70%), var(--ink);
}

.intro__mark {
  position: absolute; left: 50%; top: 50%; width: min(56vw, 300px); transform: translate(-50%, -58%);
  animation: mark 2.1s var(--ease) .1s both;
}
.intro__mark img { width: 100%; height: auto; }
.intro__line {
  position: absolute; left: 50%; top: 0; bottom: 0; width: 1px; background: var(--gold);
  transform-origin: top; animation: line .9s var(--ease) .2s both;
}
.intro__burst {
  position: absolute; left: 50%; top: 50%; width: 46vmin; height: 46vmin; margin: -23vmin 0 0 -23vmin;
  border: 1px solid var(--gold); border-radius: 50%; animation: burst .9s ease-out 1.1s both; pointer-events: none;
}
.intro__tag {
  position: absolute; left: 0; right: 0; bottom: 12vh; text-align: center; padding-inline: 20px;
  font-family: var(--f-thin); font-weight: 300; font-size: clamp(.7rem, 1.6vw, .95rem);
  letter-spacing: .34em; text-transform: uppercase; color: var(--mute);
  animation: tag 1.4s ease .7s both;
}
.intro__tag b { font-weight: 600; margin-inline: .5em; color: var(--gold); }
.intro:not(.go) * { animation-play-state: paused; }

@keyframes mark { 0% { opacity: 0; transform: translate(-50%, -50%) scale(.86); filter: blur(6px); } 35% { opacity: 1; transform: translate(-50%, -58%) scale(1); filter: none; } 85% { opacity: 1; } 100% { opacity: 0; transform: translate(-50%, -58%) scale(1.06); } }
@keyframes line { from { transform: scaleY(0); } to { transform: scaleY(1); } }
@keyframes burst { 0% { transform: scale(0); opacity: .9; } 100% { transform: scale(1.6); opacity: 0; } }
@keyframes tag { 0% { opacity: 0; transform: translateY(10px); } 25%, 75% { opacity: 1; transform: none; } 100% { opacity: 0; } }
@keyframes openL { to { transform: translateX(-101%); } }
@keyframes openR { to { transform: translateX(101%); } }