/* ============================================================================
   uc-intro.css — ÛNI·CO · animación de ingreso a la web (autónoma)
   ----------------------------------------------------------------------------
   Pieza: LA LUZ RASANTE. Placa de tinta con el lockup grabado en relieve; una
   banda de luz especular lo descubre en dos pasadas y la placa se enciende.
   Dos tratamientos: .uci--placa (telón pesado) · .uci--filo (sobreexposición).

   No depende de NADA de la página: root propio, position:fixed, se autodestruye.
   Sólo transform / opacity / mask-position. Cero rAF, cero box-shadow animado.
   Requiere Poppins 300/400 cargada por la página (cae a system-ui si no está).
   ========================================================================== */

.uci{
  position:fixed; inset:0; z-index:2147483000;
  overflow:hidden; isolation:isolate; pointer-events:auto;
  /* ---- Curva y paleta: mismos valores que el design system ---- */
  --uci-ease:cubic-bezier(.76,0,.24,1);
  /* Las pasadas de luz usan una variante glide de la misma familia (no rebota,
     no oscila): sin el tirón del medio de la curva firma, la banda deriva. */
  --uci-ease-sweep:cubic-bezier(.34,.02,.22,1);
  --uci-ink:#180B11;          /* tinta profunda de la placa */
  --uci-ink-lit:#2E1723;      /* centro de la placa, apenas más cálido */
  --uci-on:#2A1520;           /* --uc-ink: color final de las letras (placa) */
  --uci-light:#FFF4EF;        /* blanco cálido de la luz */
  --uci-red:#FF0000;          /* --uc-red-on-dark */
  --uci-red-lit:#E01B2C;      /* --uc-red-600, cuando el campo ya es claro */
  /* ---- Tiempos (los reescribe el JS desde las opciones) ---- */
  --uci-arm:60ms; --uci-s1:1280ms; --uci-gap:150ms;
  --uci-s2:820ms; --uci-ig:400ms; --uci-out:600ms;
  --uci-lock-size:clamp(56px,11.4vw,188px);
  --uci-edge:clamp(20px,4.4vw,64px);
}
.uci,.uci *{box-sizing:border-box; margin:0}

/* ---------- El campo: la placa de tinta ---------- */
.uci-field{
  position:absolute; inset:-2px; z-index:0;
  background:
    radial-gradient(128% 96% at 50% 44%, var(--uci-ink-lit) 0%, var(--uci-ink) 58%, #100710 100%);
}
/* Viñeta estática (no se anima: sería un repaint de pantalla completa por frame) */
.uci-vig{
  position:absolute; inset:0; z-index:1; pointer-events:none;
  background:radial-gradient(112% 86% at 50% 46%, rgba(0,0,0,0) 42%, rgba(0,0,0,.42) 100%);
}
/* Grano fino, estático */
.uci-grain{
  position:absolute; inset:0; z-index:2; pointer-events:none; opacity:.05;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.86' numOctaves='3'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23g)'/%3E%3C/svg%3E");
  background-size:160px 160px;
}
.uci[data-grano="false"] .uci-grain{display:none}

/* ---------- Bloom: la luz que crece detrás del lockup al encenderse ---------- */
.uci-bloom{
  position:absolute; left:50%; top:50%; z-index:3; pointer-events:none;
  width:min(150vw,1500px); aspect-ratio:1; margin:-0.5px 0 0 -0.5px;
  transform:translate3d(-50%,-50%,0) scale(.42); opacity:0;
  background:radial-gradient(circle at 50% 50%, rgba(255,242,236,.92) 0%, rgba(255,214,200,.30) 34%, rgba(255,150,130,0) 66%);
  transition:opacity var(--uci-ig) var(--uci-ease), transform var(--uci-ig) var(--uci-ease);
}
.uci.is-ignite .uci-bloom{opacity:.95; transform:translate3d(-50%,-50%,0) scale(1)}

/* ---------- Inundación de luz: la placa revelada ---------- */
.uci-flood{
  position:absolute; inset:0; z-index:4; opacity:0;
  background:radial-gradient(126% 94% at 50% 46%, #FFFFFF 0%, #FFF8F5 52%, #F8F3F4 100%);
  transition:opacity var(--uci-ig) var(--uci-ease);
}
.uci.is-ignite .uci-flood{opacity:1}

/* ---------- El lockup, cuatro capas apiladas ---------- */
.uci-stage{
  position:absolute; inset:0; z-index:5;
  display:grid; place-items:center; padding:0 var(--uci-edge);
}
.uci-lock{
  grid-area:1/1;
  display:flex; align-items:baseline;
  font:300 var(--uci-lock-size)/0.86 'Poppins','Poppins Fallback',system-ui,sans-serif;
  letter-spacing:.02em; white-space:nowrap; user-select:none;
  transform:translate3d(0,0,0);
}
.uci-u{position:relative; display:inline-block}
/* El techo del isologo: misma receta que la firma del footer */
.uci-caret{
  position:absolute; left:50%; bottom:calc(100% - .126em);
  width:.42em; height:.42em; transform:translateX(-50%) rotate(45deg);
  border-top:.052em solid currentColor; border-left:.052em solid currentColor;
}
.uci-n{display:inline-block; transform:scaleX(-1)}

/* 1 · grabado: siempre presente, casi invisible. El relieve son dos sombras. */
.uci-lock--deep{
  color:rgba(255,244,239,.052);
  filter:drop-shadow(0 .014em 0 rgba(0,0,0,.78)) drop-shadow(0 -.010em 0 rgba(255,235,228,.075));
  opacity:0; transition:opacity var(--uci-arm) linear;
}
.uci.is-arm .uci-lock--deep,.uci.is-s1 .uci-lock--deep,.uci.is-s2 .uci-lock--deep{opacity:1}
.uci.is-ignite .uci-lock--deep{opacity:0; transition:opacity calc(var(--uci-ig) * .5) linear}

/* 2 y 3 · las dos pasadas de luz. La luz es una máscara que viaja. */
.uci-lock--p1,.uci-lock--p2{
  color:var(--uci-light); opacity:0;
  -webkit-mask-repeat:no-repeat; mask-repeat:no-repeat;
}
.uci-lock--p1{
  /* Banda asimétrica: borde caliente adelante y cola larga atrás — así lee como
     luz rasante y no como un brillo general. El ancho lo fija mask-size. */
  -webkit-mask-image:linear-gradient(105deg,transparent 22%,rgba(0,0,0,.10) 36%,rgba(0,0,0,.34) 45%,rgba(0,0,0,.72) 49.4%,#000 50%,rgba(0,0,0,.30) 52.4%,transparent 60%);
          mask-image:linear-gradient(105deg,transparent 22%,rgba(0,0,0,.10) 36%,rgba(0,0,0,.34) 45%,rgba(0,0,0,.72) 49.4%,#000 50%,rgba(0,0,0,.30) 52.4%,transparent 60%);
  -webkit-mask-size:172% 300%; mask-size:172% 300%;
  -webkit-mask-position:134% 50%; mask-position:134% 50%;
}
.uci-lock--p2{
  color:#FFFFFF;
  -webkit-mask-image:linear-gradient(105deg,transparent 40%,rgba(0,0,0,.34) 47.4%,rgba(0,0,0,.86) 49.5%,#000 50%,rgba(0,0,0,.46) 51.4%,rgba(0,0,0,.12) 55%,transparent 62%);
          mask-image:linear-gradient(105deg,transparent 40%,rgba(0,0,0,.34) 47.4%,rgba(0,0,0,.86) 49.5%,#000 50%,rgba(0,0,0,.46) 51.4%,rgba(0,0,0,.12) 55%,transparent 62%);
  -webkit-mask-size:138% 300%; mask-size:138% 300%;
  -webkit-mask-position:132% 50%; mask-position:132% 50%;
}
.uci.is-s1 .uci-lock--p1{opacity:1; animation:uciSweepH var(--uci-s1) var(--uci-ease-sweep) forwards}
.uci.is-s2 .uci-lock--p1{opacity:0; transition:opacity 160ms linear}
.uci.is-s2 .uci-lock--p2{opacity:1; animation:uciSweepH var(--uci-s2) var(--uci-ease-sweep) forwards}
.uci.is-ignite .uci-lock--p1,.uci.is-ignite .uci-lock--p2{opacity:0; transition:opacity 200ms linear}

@keyframes uciSweepH{
  from{-webkit-mask-position:134% 50%; mask-position:134% 50%}
  to  {-webkit-mask-position:-36% 50%; mask-position:-36% 50%}
}
@keyframes uciSweepV{
  from{-webkit-mask-position:50% 148%; mask-position:50% 148%}
  to  {-webkit-mask-position:50% -48%; mask-position:50% -48%}
}

/* 4 · encendida: la capa que queda. En 'placa' cruza a tinta con el campo. */
.uci-lock--on{
  color:var(--uci-light); opacity:0;
  transition:opacity var(--uci-ig) var(--uci-ease), color var(--uci-ig) var(--uci-ease),
             transform var(--uci-ig) var(--uci-ease), filter var(--uci-ig) var(--uci-ease);
}
.uci.is-ignite .uci-lock--on{opacity:1}
.uci-dot{color:var(--uci-red)}
.uci-lock--on .uci-dot{transition:color var(--uci-ig) var(--uci-ease)}

/* ---------- Micro-tipografía de marca ---------- */
.uci-micro{
  position:absolute; z-index:6; pointer-events:none;
  font:400 clamp(8.5px,.66vw,11px)/1.5 'Poppins',system-ui,sans-serif;
  letter-spacing:.16em; text-transform:uppercase;
  color:rgba(255,244,239,.34); font-variant-numeric:tabular-nums;
  opacity:0; transform:translate3d(0,6px,0);
  transition:opacity 620ms var(--uci-ease), transform 620ms var(--uci-ease);
}
.uci-micro--tl{left:var(--uci-edge); top:var(--uci-edge)}
.uci-micro--br{right:var(--uci-edge); bottom:var(--uci-edge); text-align:right}
.uci.is-s1 .uci-micro,.uci.is-s2 .uci-micro{opacity:1; transform:translate3d(0,0,0)}
.uci.is-ignite .uci-micro{opacity:0; transform:translate3d(0,-4px,0); transition-duration:280ms}
.uci[data-micro="false"] .uci-micro{display:none}

/* Sobreexposición (sólo 'filo'). Falloff muy ancho: un radial cerrado dibuja un
   óvalo visible sobre el blanco. */
.uci-hot{
  position:absolute; inset:0; z-index:7; pointer-events:none; opacity:0;
  background:radial-gradient(160% 130% at 50% 50%, #FFFFFF 0%, #FFFFFF 58%, rgba(255,250,247,.88) 100%);
  transition:opacity calc(var(--uci-ig) * .8) var(--uci-ease);
}

/* ============================ TRATAMIENTO · PLACA ==========================
   La luz barre en diagonal, la placa se enciende, las letras cruzan a tinta
   y el telón se levanta entero. El peso está en la salida.
   ========================================================================= */
.uci--placa.is-ignite .uci-lock--on{color:var(--uci-on)}
.uci--placa.is-ignite .uci-lock--on .uci-dot{color:var(--uci-red-lit)}
.uci--placa.is-out{
  transform:translate3d(0,-101%,0);
  transition:transform var(--uci-out) var(--uci-ease);
  /* La sombra que el telón proyecta sobre la página. Va en box-shadow porque
     pinta FUERA de la caja: el overflow:hidden del root recorta cualquier hijo.
     Estática sobre un elemento que sólo mueve transform → no repinta. */
  box-shadow:0 34px 74px rgba(24,11,17,.30), 0 4px 12px rgba(24,11,17,.16);
}
/* Oclusión interna: apenas ensombrece el borde inferior del telón para que el
   canto tenga cuerpo. Muy sutil: la sombra real la hace el box-shadow. */
.uci .uci-seam{
  position:absolute; left:0; right:0; bottom:0; height:96px; z-index:8; pointer-events:none;
  opacity:0; transition:opacity 200ms linear;
  background:linear-gradient(0deg,rgba(24,11,17,.13) 0%,rgba(24,11,17,0) 100%);
}
.uci--placa.is-out .uci-seam{opacity:1}
/* Las letras se quedan un instante mientras el telón sube: el objeto pesa. */
.uci--placa.is-out .uci-lock--on{transform:translate3d(0,26px,0)}

/* ============================ TRATAMIENTO · FILO ==========================
   Un filo horizontal muy angosto barre de arriba a abajo, la letra queda
   encendida y la pantalla se sobreexpone hasta borrarla.
   ========================================================================= */
.uci--filo .uci-lock--p1{
  -webkit-mask-image:linear-gradient(180deg,transparent 30%,rgba(0,0,0,.12) 42%,rgba(0,0,0,.40) 48%,rgba(0,0,0,.80) 49.5%,#000 50%,rgba(0,0,0,.26) 52%,transparent 60%);
          mask-image:linear-gradient(180deg,transparent 30%,rgba(0,0,0,.12) 42%,rgba(0,0,0,.40) 48%,rgba(0,0,0,.80) 49.5%,#000 50%,rgba(0,0,0,.26) 52%,transparent 60%);
  -webkit-mask-size:300% 260%; mask-size:300% 260%;
  -webkit-mask-position:50% 148%; mask-position:50% 148%;
}
.uci--filo .uci-lock--p2{
  -webkit-mask-image:linear-gradient(180deg,transparent 45%,rgba(0,0,0,.50) 49%,#000 50%,rgba(0,0,0,.34) 51.4%,transparent 56%);
          mask-image:linear-gradient(180deg,transparent 45%,rgba(0,0,0,.50) 49%,#000 50%,rgba(0,0,0,.34) 51.4%,transparent 56%);
  -webkit-mask-size:300% 200%; mask-size:300% 200%;
  -webkit-mask-position:50% 148%; mask-position:50% 148%;
}
.uci--filo.is-s1 .uci-lock--p1{animation-name:uciSweepV}
.uci--filo.is-s2 .uci-lock--p2{animation-name:uciSweepV}
/* El arco propio del filo: la luz LEVANTA el campo (no lo lleva a blanco), la
   letra sigue leída, y la sobreexposición la borra recién en la salida. */
.uci--filo.is-ignite .uci-flood{opacity:.24}
.uci--filo.is-out .uci-flood{opacity:1; transition:opacity calc(var(--uci-out) * .6) var(--uci-ease)}
.uci--filo.is-ignite .uci-hot{opacity:.62}
.uci--filo.is-out .uci-hot{opacity:1; transition:opacity calc(var(--uci-out) * .7) var(--uci-ease)}
.uci--filo.is-ignite .uci-lock--on{
  transform:translate3d(0,0,0) scale(1.014);
  filter:blur(.5px) brightness(1.22);
}
.uci--filo.is-out{
  opacity:0;
  transition:opacity var(--uci-out) var(--uci-ease);
}
.uci--filo.is-out .uci-lock--on{transform:translate3d(0,0,0) scale(1.05); filter:blur(5px) brightness(1.9)}

/* ---------- Salteada: todo se comprime, nada se corta de golpe ---------- */
.uci.is-fast,.uci.is-fast *{
  animation-duration:200ms !important;
  transition-duration:220ms !important;
}

/* ---------- Reencuadre mobile: misma idea, otra composición ----------
   El bloque va duplicado a propósito: la media query es la que manda en
   producción, y [data-encuadre="mobile"] existe para poder verlo en el lab
   sin angostar la ventana (usa px fijos porque ahí el vw sigue siendo grande). */
.uci[data-encuadre="mobile"]{--uci-lock-size:76px; --uci-edge:20px}
.uci[data-encuadre="mobile"] .uci-lock{letter-spacing:.012em}
.uci[data-encuadre="mobile"] .uci-micro{font-size:9px; letter-spacing:.14em}
.uci[data-encuadre="mobile"] .uci-micro--br{max-width:52vw}
.uci[data-encuadre="mobile"] .uci-bloom{width:min(210vw,900px)}
.uci--placa[data-encuadre="mobile"] .uci-lock--p1{
  -webkit-mask-image:linear-gradient(128deg,transparent 30%,rgba(0,0,0,.20) 42%,rgba(0,0,0,.62) 50%,rgba(0,0,0,.20) 58%,transparent 70%);
          mask-image:linear-gradient(128deg,transparent 30%,rgba(0,0,0,.20) 42%,rgba(0,0,0,.62) 50%,rgba(0,0,0,.20) 58%,transparent 70%);
}
.uci--placa[data-encuadre="mobile"] .uci-lock--p2{
  -webkit-mask-image:linear-gradient(128deg,transparent 41%,rgba(0,0,0,.55) 47.8%,#000 50%,rgba(0,0,0,.55) 52.2%,transparent 59%);
          mask-image:linear-gradient(128deg,transparent 41%,rgba(0,0,0,.55) 47.8%,#000 50%,rgba(0,0,0,.55) 52.2%,transparent 59%);
}

@media (max-width:640px){
  .uci{--uci-lock-size:clamp(46px,17.6vw,104px); --uci-edge:20px}
  .uci-lock{letter-spacing:.012em}
  .uci-micro{font-size:9px; letter-spacing:.14em}
  .uci-micro--tl{top:calc(20px + env(safe-area-inset-top))}
  .uci-micro--br{bottom:calc(20px + env(safe-area-inset-bottom)); max-width:52vw}
  /* En vertical la diagonal se ve casi horizontal: se empina para que lea igual */
  .uci--placa .uci-lock--p1{
    -webkit-mask-image:linear-gradient(128deg,transparent 30%,rgba(0,0,0,.20) 42%,rgba(0,0,0,.62) 50%,rgba(0,0,0,.20) 58%,transparent 70%);
            mask-image:linear-gradient(128deg,transparent 30%,rgba(0,0,0,.20) 42%,rgba(0,0,0,.62) 50%,rgba(0,0,0,.20) 58%,transparent 70%);
  }
  .uci--placa .uci-lock--p2{
    -webkit-mask-image:linear-gradient(128deg,transparent 41%,rgba(0,0,0,.55) 47.8%,#000 50%,rgba(0,0,0,.55) 52.2%,transparent 59%);
            mask-image:linear-gradient(128deg,transparent 41%,rgba(0,0,0,.55) 47.8%,#000 50%,rgba(0,0,0,.55) 52.2%,transparent 59%);
  }
  .uci-bloom{width:min(210vw,900px)}
}

/* ---------- Accesibilidad ---------- */
@media (prefers-reduced-motion:reduce){
  .uci-lock--p1,.uci-lock--p2,.uci-lock--deep,.uci-micro,.uci-bloom{display:none}
  .uci-lock--on{transition-duration:240ms}
  .uci.is-ignite .uci-flood{transition-duration:240ms}
  .uci.is-out{transition-duration:280ms !important}
}