/* ============================================================================
   RISK+  —  intro / preloader
   Tela preta com o logo R+ se revelando (traço diagonal passando da
   esquerda pra direita), depois abre pro site.
   ========================================================================== */

.intro {
  position: fixed;
  inset: 0;
  z-index: 9999;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--bg, #070708);
}

.intro__logo-wrap {
  position: relative;
  width: clamp(200px, 34vw, 380px);
}

.intro__logo {
  display: block;
  width: 100%;
  height: auto;
  /* Escondido por padrão (traço ainda não passou) — o JS anima a partir
     daqui. Fica assim mesmo sem JS/antes dele rodar, pra nunca "piscar"
     o logo inteiro revelado de uma vez. */
  clip-path: polygon(0% 0%, 0% 0%, -12% 100%, 0% 100%);
  will-change: clip-path;
}

.intro__pen {
  position: absolute;
  top: -6%;
  bottom: -6%;
  left: 0;
  width: 3px;
  background: linear-gradient(180deg, transparent, var(--ink, #f5f5f6) 35%, var(--ink, #f5f5f6) 65%, transparent);
  filter: blur(1.5px) drop-shadow(0 0 10px rgba(245,245,246,0.65));
  opacity: 0;
  transform: translateX(-9999px);
  pointer-events: none;
}

body.intro-lock {
  overflow: hidden;
  height: 100vh;
}

/* Quem decide se a intro aparece é o assets/js/intro.js (ele respeita
   reduced-motion, e também sabe ler ?motion=1 pra forçar a animação na
   hora de testar — um @media aqui não saberia disso e sempre desligaria
   a intro). */