/* INTRO — presentación estilo apps de Roke OS (orden del dueño 2026-10-08).
   Pantalla en negro, palabras rápidas, marca dorada, y degrada a la web.
   Se muestra una vez por sesión (lo decide el script inline en index.html). */
.intro {
  position: fixed; inset: 0; z-index: 10000;
  background: #000;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 16px; overflow: hidden;
  animation: introOut .45s ease 2.15s forwards;
}
html.intro-seen .intro { display: none; }

.intro-words {
  position: relative; height: 54px; width: 100%; text-align: center;
  font-family: var(--font-display, 'Oswald', sans-serif);
  font-weight: 600; letter-spacing: .45em; text-indent: .45em;
  font-size: clamp(17px, 3.6vw, 26px); color: var(--gold-soft);
}
.intro-words span {
  position: absolute; inset: 0; opacity: 0;
  animation: introWord .45s ease forwards;
}
.intro-words .w1 { animation-delay: .05s; }
.intro-words .w2 { animation-delay: .5s; }
.intro-words .w3 { animation-delay: .95s; }
@keyframes introWord {
  0% { opacity: 0; transform: translateY(26px) scale(.94); }
  55% { opacity: 1; }
  100% { opacity: 0; transform: translateY(-18px) scale(1.03); }
}

.intro-brand {
  font-family: var(--font-display, 'Oswald', sans-serif);
  font-weight: 700; letter-spacing: .04em; line-height: 1;
  font-size: clamp(52px, 13vw, 116px);
  opacity: 0; transform: scale(.84);
  background: linear-gradient(180deg, #fff7e6 15%, var(--gold-soft) 55%, var(--gold) 100%);
  -webkit-background-clip: text; background-clip: text; color: transparent;
  filter: drop-shadow(0 0 34px rgba(217, 164, 65, .38));
  animation: introBrand .55s cubic-bezier(.2,.9,.25,1.25) 1.3s forwards;
}
.intro-brand em { font-style: normal; }
@keyframes introBrand { to { opacity: 1; transform: scale(1); } }

.intro-sub {
  letter-spacing: .6em; text-indent: .6em;
  font-size: 12px; font-weight: 600; color: #8a8a8a;
  opacity: 0; animation: introBrand .5s ease 1.58s forwards;
}
.intro-tag {
  margin-top: 6px; font-size: 11px; letter-spacing: .22em;
  color: #5c5c5c; opacity: 0; animation: introBrand .5s ease 1.72s forwards;
}

@keyframes introOut { to { opacity: 0; visibility: hidden; } }

@media (prefers-reduced-motion: reduce) {
  .intro { animation-duration: .01s; animation-delay: .1s; }
  .intro-words span, .intro-brand, .intro-sub, .intro-tag {
    animation-duration: .01s; animation-delay: 0s;
  }
}