/* ═══════════════════════════════════════════════════════════
   CREA — INTRO CINEMÁTICA (compartida: home · recursos · landing)
   Telón paper-white → revela logo (mask-rise + sheen) → línea roja
   → tagline → cortina sube con borde rojo de escaneo.
   Marca: Navy #1B2F6E · Paper #F6F4F0 · Rojo #CC2233
═══════════════════════════════════════════════════════════ */

.crea-intro {
  position: fixed; inset: 0; z-index: 99999;
  display: grid; place-items: center;
  background: #FBFAF7;
  overflow: hidden;
  will-change: transform;
  transition: transform 1.05s cubic-bezier(0.76, 0, 0.24, 1);
}
/* borde rojo que escanea hacia arriba mientras sube la cortina */
.crea-intro::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: -1px; height: 3px;
  background: linear-gradient(90deg, transparent, #CC2233 16%, #CC2233 84%, transparent);
  box-shadow: 0 0 26px 2px rgba(204, 34, 51, 0.55);
  opacity: 0; transition: opacity .35s ease;
}
.crea-intro.is-leaving { transform: translateY(-101%); }
.crea-intro.is-leaving::after { opacity: 1; }
.crea-intro.is-gone { display: none; }

/* halo navy, casi imperceptible — da profundidad sin "decorar" */
.crea-intro__aurora {
  position: absolute; inset: -12%; pointer-events: none;
  background:
    radial-gradient(46% 40% at 50% 44%, rgba(27, 47, 110, 0.07), transparent 72%);
  opacity: 0; transform: scale(1.04);
  transition: opacity 1.2s ease, transform 7s cubic-bezier(0.16, 1, 0.3, 1);
}
.crea-intro.is-playing .crea-intro__aurora { opacity: 1; transform: scale(1); }

/* grano editorial muy sutil (papel) */
.crea-intro__grain {
  position: absolute; inset: 0; pointer-events: none; opacity: 0.22; mix-blend-mode: multiply;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.05'/%3E%3C/svg%3E");
}

.crea-intro__inner {
  position: relative; text-align: center; padding: 0 24px;
  transition: opacity .42s ease, transform .42s ease;
}
.crea-intro.is-leaving .crea-intro__inner {
  opacity: 0; transform: translateY(-22px) scale(0.975);
  transition: opacity .42s ease, transform .55s cubic-bezier(0.76, 0, 0.24, 1);
}

/* logo con reveal "mask-rise" + barrido de luz */
.crea-intro__logo-wrap { position: relative; display: inline-block; overflow: hidden; line-height: 0; }
.crea-intro__logo {
  width: min(360px, 60vw); height: auto; display: block; margin: 0 auto;
  opacity: 0; transform: translateY(12px); filter: blur(4px);
  -webkit-clip-path: inset(0 0 100% 0); clip-path: inset(0 0 100% 0);
}
.crea-intro.is-playing .crea-intro__logo {
  animation: ci-logo 1.15s cubic-bezier(0.16, 1, 0.3, 1) 0.16s forwards;
}
@keyframes ci-logo {
  0%   { opacity: 0; transform: translateY(12px); filter: blur(4px); -webkit-clip-path: inset(0 0 100% 0); clip-path: inset(0 0 100% 0); }
  60%  { opacity: 1; filter: blur(0); }
  100% { opacity: 1; transform: translateY(0); filter: blur(0); -webkit-clip-path: inset(0 0 0 0); clip-path: inset(0 0 0 0); }
}
.crea-intro__logo-wrap::after {
  content: ""; position: absolute; top: -10%; bottom: -10%; left: -70%; width: 42%;
  background: linear-gradient(100deg, transparent, rgba(255, 255, 255, 0.65), transparent);
  transform: skewX(-16deg); opacity: 0; pointer-events: none;
}
.crea-intro.is-playing .crea-intro__logo-wrap::after { animation: ci-sheen 1.25s ease 1.0s forwards; }
@keyframes ci-sheen {
  0%   { left: -70%; opacity: 0; }
  30%  { opacity: 0.55; }
  100% { left: 130%; opacity: 0; }
}

/* línea roja que se dibuja */
.crea-intro__line {
  width: 0; height: 3px; margin: 28px auto 20px; border-radius: 2px;
  background: #CC2233;
  transition: width .72s cubic-bezier(0.76, 0, 0.24, 1) 0.72s;
}
.crea-intro.is-playing .crea-intro__line { width: min(200px, 32vw); }

/* tagline */
.crea-intro__tag {
  font-family: 'JetBrains Mono', monospace; font-size: clamp(11px, 1.4vw, 14px);
  letter-spacing: 0.34em; text-transform: uppercase; color: rgba(13, 20, 48, 0.66);
  display: inline-flex; align-items: center; gap: 12px;
  opacity: 0; transform: translateY(10px);
  transition: opacity .7s ease 0.98s, transform .7s ease 0.98s;
}
.crea-intro.is-playing .crea-intro__tag { opacity: 1; transform: none; }
.crea-intro__star { color: #CC2233; }

/* skip */
.crea-intro__skip {
  position: absolute; bottom: 30px; left: 50%; transform: translateX(-50%);
  font-family: 'JetBrains Mono', monospace; font-size: 10px; letter-spacing: 0.22em;
  text-transform: uppercase; color: rgba(13, 20, 48, 0.4);
  background: none; border: 0; cursor: pointer;
  opacity: 0; transition: opacity .5s ease 1.25s, color .2s;
}
.crea-intro.is-playing .crea-intro__skip { opacity: 1; }
.crea-intro__skip:hover { color: rgba(13, 20, 48, 0.85); }

body.crea-intro-lock { overflow: hidden; }

@media (prefers-reduced-motion: reduce) {
  .crea-intro { display: none !important; }
}