/* Ingelmec v4 — intro de llegada «INGELMEC loading».
   Técnica portada de wireframe-portal-title (HyperFrames): un portal de
   anillos en wireframe que se abre en profundidad, viaje de cámara con
   niebla de profundidad y estela radial, y el título que «atraviesa» el
   portal letra por letra en Z. Aquí: anillos hexagonales en canvas 2D
   (sin WebGL ni dependencias) y letras en CSS 3D. Solo transform/opacity
   en DOM; el canvas se pinta con rAF y se detiene al terminar. */
.ix-intro { display: none; }
.ix-intro-on .ix-intro {
  display: block;
  position: fixed;
  inset: 0;
  z-index: 10000;
  cursor: pointer;
  pointer-events: auto;
}
.ix-intro-on body { overflow: hidden; }
.ix-intro-panel {
  position: absolute;
  left: 0;
  right: 0;
  height: 50.2%;
  background:
    linear-gradient(90deg, rgba(5,103,173,.05) 1px, transparent 1px) 0 0 / 80px 80px,
    linear-gradient(rgba(5,103,173,.05) 1px, transparent 1px) 0 0 / 80px 80px,
    #f8f7f3;
  will-change: transform;
  transition: transform .72s cubic-bezier(.76, 0, .24, 1);
}
.ix-intro-panel--top { top: 0; box-shadow: inset 0 -1px 0 #0567AD; background-position: 0 0, 0 0, 0 0; }
.ix-intro-panel--bottom { bottom: 0; box-shadow: inset 0 1px 0 #0567AD; background-position: 0 -40px, 0 -40px, 0 0; }
.ix-intro-portal { position: absolute; inset: 0; overflow: hidden; transition: opacity .4s ease; }
.ix-intro-portal canvas { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
/* Respaldo sin canvas: anillos CSS que viajan en Z (perspectiva real). */
.ix-intro-tunnel { position: absolute; inset: 0; perspective: 520px; perspective-origin: 50% 50%; }
.ix-intro-tunnel i {
  position: absolute; left: 50%; top: 50%; width: 360px; height: 312px; margin: -156px 0 0 -180px;
  clip-path: polygon(25% 0, 75% 0, 100% 50%, 75% 100%, 25% 100%, 0 50%, .5% 50%, 25.3% 99.3%, 74.7% 99.3%, 99.5% 50%, 74.7% .7%, 25.3% .7%, .5% 50%, 0 50%);
  background: #0567AD;
  opacity: 0;
  transform: translateZ(-1400px);
  animation: ixRing 1.9s cubic-bezier(.5, 0, .75, .4) calc(var(--r) * .17s) both;
}
.ix-intro-portal.has-canvas .ix-intro-tunnel { display: none; }
@keyframes ixRing {
  0% { opacity: 0; transform: translateZ(-1400px) rotate(0deg); }
  25% { opacity: .55; }
  100% { opacity: 0; transform: translateZ(480px) rotate(30deg); }
}

.ix-intro-stage {
  position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 18px; padding: 24px; text-align: center; transition: opacity .35s ease, transform .5s cubic-bezier(.55, 0, .45, 1);
}
.ix-intro-mark { width: 84px; height: auto; overflow: visible; }
.ix-intro-hex-line { fill: none; stroke: #0567AD; stroke-width: 2.4; stroke-dasharray: 1; stroke-dashoffset: 1; animation: ixDraw .9s cubic-bezier(.65, 0, .35, 1) .05s forwards; }
.ix-intro-hex-fill { fill: #0567AD; transform-box: fill-box; transform-origin: center; transform: scale(0) rotate(-60deg); animation: ixHexIn .55s cubic-bezier(.34, 1.4, .64, 1) .7s forwards; }
.ix-intro-dot { fill: #FAAF2C; opacity: 0; transform-box: fill-box; transform-origin: center; animation: ixPop .3s ease-out .92s forwards; }
@keyframes ixDraw { to { stroke-dashoffset: 0; } }
@keyframes ixHexIn { to { transform: scale(1) rotate(0deg); } }
@keyframes ixPop { 0% { opacity: 0; transform: scale(0); } 70% { opacity: 1; transform: scale(1.6); } 100% { opacity: 1; transform: scale(1); } }

.ix-intro-word { perspective: 700px; perspective-origin: 50% 40%; }
.ix-intro-letters { display: inline-flex; font: 800 clamp(46px, 9vw, 118px)/1 'Saira', system-ui, sans-serif; letter-spacing: .06em; color: #17282f; text-transform: uppercase; transform-style: preserve-3d; }
.ix-intro-letters span {
  display: inline-block; opacity: 0;
  transform: translate3d(0, 0, -900px) rotateX(38deg);
  animation: ixLetter .7s cubic-bezier(.16, 1, .3, 1) calc(.38s + var(--l) * .06s) forwards;
}
.ix-intro-letters span:nth-child(n+6) { color: #0567AD; }
@keyframes ixLetter {
  0% { opacity: 0; transform: translate3d(0, 0, -900px) rotateX(38deg); }
  55% { opacity: 1; }
  78% { transform: translate3d(0, 0, 24px) rotateX(-4deg); }
  88% { transform: translate3d(2px, 0, 0) rotateX(0); }
  100% { opacity: 1; transform: none; }
}
.ix-intro-rule { display: flex; width: min(520px, 78vw); height: 1px; }
.ix-intro-rule i { flex: 1; background: #17282f; transform: scaleX(0); animation: ixRule .7s cubic-bezier(.65, 0, .35, 1) .78s forwards; }
.ix-intro-rule i:first-child { transform-origin: right center; }
.ix-intro-rule i:last-child { transform-origin: left center; }
@keyframes ixRule { to { transform: scaleX(1); } }
.ix-intro-meta { display: flex; justify-content: space-between; gap: 22px; width: min(520px, 78vw); color: #54646b; font: 500 10px/1.4 'IBM Plex Mono', ui-monospace, monospace; letter-spacing: .14em; opacity: 0; animation: ixFade .4s ease .9s forwards; }
.ix-intro-meta b { color: #0567AD; font-weight: 500; font-variant-numeric: tabular-nums; }
.ix-intro-bar { width: min(520px, 78vw); height: 2px; background: #e0ded6; overflow: hidden; }
.ix-intro-bar i { display: block; height: 100%; background: #0567AD; transform-origin: left center; transform: scaleX(0); }
.ix-intro-skip { margin: 4px 0 0; color: #8a958f; font: 400 8.5px 'IBM Plex Mono', ui-monospace, monospace; letter-spacing: .16em; opacity: 0; animation: ixFade .4s ease 1.2s forwards; }
@keyframes ixFade { to { opacity: 1; } }

/* Salida: el portal empuja hacia la cámara, el lockup se aleja y los dos
   paneles se abren como filetes; debajo ya está la página real. */
.ix-intro.is-leaving { pointer-events: none; }
.ix-intro.is-leaving .ix-intro-stage { opacity: 0; transform: scale(1.06); }
.ix-intro.is-leaving .ix-intro-portal { opacity: 0; }
.ix-intro.is-leaving .ix-intro-panel--top { transform: translate3d(0, -101%, 0); }
.ix-intro.is-leaving .ix-intro-panel--bottom { transform: translate3d(0, 101%, 0); }

@media (max-width: 480px) {
  .ix-intro-meta { flex-direction: column; align-items: center; gap: 6px; font-size: 8.5px; }
  .ix-intro-mark { width: 68px; }
}
@media (prefers-reduced-motion: reduce) { .ix-intro { display: none !important; } }