/* =========================================================
   INTRO DE ABERTURA — logo + fotos do catálogo
   Inspirado em outfit.hellohello.is: fundo escuro, fotos das
   peças surgindo empilhadas em ângulos diferentes atrás da
   logo, contador 000→100 e cortina revelando o site.
   Lógica em js/intro.js. Para desligar: remover #intro do
   index.html (ou a tag <script src="js/intro.js">).
   ========================================================= */
#intro{
  position:fixed;inset:0;z-index:2000;
  background:#141414;color:#f2f2f0;
  display:flex;align-items:center;justify-content:center;
  overflow:hidden;
}
/* Trava o scroll da página enquanto a intro está na tela */
html.intro-ativa,html.intro-ativa body{overflow:hidden}

/* Pilha de fotos: todas centralizadas, cada uma com seu ângulo
   (transform aplicado pelo JS). A última do HTML fica por cima. */
.intro-fotos{position:absolute;inset:0;display:flex;align-items:center;justify-content:center}
.intro-fotos img{
  position:absolute;
  width:min(32vw,160px);aspect-ratio:3/4;object-fit:cover;
  transform:scale(0);will-change:transform;
  user-select:none;-webkit-user-drag:none;pointer-events:none;
  background:#1e1e1e;
}
@media(min-width:768px){
  .intro-fotos img{width:clamp(160px,12vw,230px)}
}

/* Logo igual à do header (Cormorant + "casual" espaçado), só maior.
   mix-blend-mode:difference inverte as cores da logo onde ela
   cruza as fotos — é o que dá o efeito "recortado" do site de referência. */
.intro-logo{
  position:relative;display:flex;flex-direction:column;align-items:center;gap:8px;
  mix-blend-mode:difference;color:#fff;pointer-events:none;
}
.intro-clip{overflow:hidden;padding:.06em .15em 0}
.intro-nome{
  display:block;font-family:'Cormorant Garamond',serif;font-weight:400;
  font-size:clamp(3rem,11vw,7.5rem);line-height:1;letter-spacing:.02em;
  white-space:nowrap;transform:translateY(110%);will-change:transform;
}
.intro-sub{
  font-family:'Archivo',sans-serif;font-size:clamp(.62rem,1.3vw,.95rem);
  letter-spacing:.5em;padding-left:.5em;text-transform:uppercase;
  opacity:0;will-change:opacity,transform;
}

/* Contador 000 → 100 (canto superior direito da logo) */
.intro-contador{
  position:absolute;right:-1.6em;top:-1.4em;
  font-family:'Archivo',sans-serif;font-size:.85rem;letter-spacing:.06em;
  font-variant-numeric:tabular-nums;color:#f2f2f0;
}
@media(max-width:767px){
  .intro-contador{right:-.4em;top:-1.8em;font-size:.75rem}
}