/* ================================================
   RF CDE SHOP — extras puntuales
   La mayoría del theming vive en style.css (única fuente de verdad).
   Este archivo solo aporta piezas que no están en ningún otro lado:
   pantalla de intro y scrollbar personalizada.
   ================================================ */

:root {
  /* Se mantienen estos nombres porque site-sync.js los sobreescribe en
     runtime con el color que el admin elija — no renombrar. */
  --blue: #0088CC;
  --blue-bright: #33A6DD;
  --orange: #FF6600;
  --orange-bright: #ff8800;
}

::selection { background: rgba(0,136,204,.18); color: #16202B; }
::-webkit-scrollbar { width: 8px; }
::-webkit-scrollbar-track { background: #F7F9FB; }
::-webkit-scrollbar-thumb { background: #cbd5e1; border-radius: 4px; }
::-webkit-scrollbar-thumb:hover { background: #94a3b8; }

/* ---- INTRO SCREEN ---- */
#introScreen {
  position: fixed; inset: 0; background: #16202B;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  z-index: 9999; transition: opacity .5s ease, visibility .5s ease;
}
/* pointer-events:none va SIN esperar a que termine la transicion (a
   diferencia de opacity/visibility, que dependen de que el navegador
   efectivamente pinte la animacion) — si por lo que sea el fade no
   llega a completarse, la pantalla de intro nunca deja de tapar clics
   reales aunque ya se vea invisible. Bug real reportado: los botones
   de categoria de #herramientas "no hacian nada" porque este overlay
   fantasma se quedaba interceptandolos. */
#introScreen.hide { opacity: 0; visibility: hidden; pointer-events: none; }
.intro-logo {
  font-size: 2.6rem; font-weight: 800; color: #fff; letter-spacing: -1px;
  animation: introLogo .6s cubic-bezier(.4,0,.2,1) forwards;
  opacity: 0; transform: translateY(16px);
}
.intro-logo span { color: var(--blue-bright); }
.intro-tagline {
  font-size: .9rem; color: rgba(255,255,255,.5); margin-top: .5rem;
  animation: introLogo .6s .15s cubic-bezier(.4,0,.2,1) forwards;
  opacity: 0; transform: translateY(8px);
}
.intro-bar {
  width: 180px; height: 2px; background: rgba(255,255,255,.15);
  border-radius: 2px; margin-top: 1.8rem; overflow: hidden;
  animation: introLogo .6s .3s cubic-bezier(.4,0,.2,1) forwards; opacity: 0;
}
.intro-bar-fill {
  height: 100%; width: 0; background: var(--blue-bright);
  border-radius: 2px; animation: introFill 1.1s .45s cubic-bezier(.4,0,.2,1) forwards;
}
@keyframes introLogo { to { opacity:1; transform:translateY(0); } }
@keyframes introFill { to { width: 100%; } }