/* ==========================================================================
   Efectos (inspirados en React Bits, hechos sin React)
   Entrada por el ojo · cara que aparece · texto que rota · texto
   letra a letra · chispas al clic · botones imán · rastro de imágenes
   ========================================================================== */

/* ===== Cara que aparece =====
   Fundido suave: llega desde transparente, algo desenfocada y pequeña. */
.draw-mark{
  opacity:0;
  transform:scale(.9);
  filter:blur(8px);
  transition:opacity 1.1s ease, transform 1.3s cubic-bezier(.2,.7,.2,1), filter 1.1s ease;
}
.draw-mark.is-drawn{opacity:1;transform:none;filter:none}

/* ===== Entrada: la cara se dibuja y entras por el ojo =====
   Fondo azul con un agujero (máscara) en el ojo. El agujero y el logo
   crecen a la vez desde js/effects.js hasta que la web ocupa la pantalla. */
html.intro-on, html.intro-on body{overflow:hidden}
#intro{
  position:fixed;inset:0;z-index:9999;
  display:grid;place-items:center;
  background:var(--blue);
}
.intro-stage{
  position:relative;
  width:min(36vmin,230px);aspect-ratio:1;
  transform-origin:37.53% 37.79%;          /* centro del ojo */
  will-change:transform;
}
.intro-mark{position:absolute;inset:0;width:100%;height:100%}
.intro-mark.draw-mark{transition-duration:.9s,1.1s,.9s}

/* ===== Texto que rota (Inicio) ===== */
.rotator{
  display:inline-flex;
  vertical-align:top;
  overflow:hidden;
  background:var(--blue);color:var(--white);
  border-radius:var(--radius-btn);
  padding:0 .14em .06em;
  margin-top:.06em;
  transition:width .55s cubic-bezier(.4,0,.2,1);
  white-space:nowrap;
}
.rotator-word{display:inline-flex}
.rotator .rc{
  display:inline-block;
  transform:translateY(0);
  transition:transform .5s cubic-bezier(.6,0,.2,1);
  transition-delay:calc(var(--i) * 25ms);
}
.rotator .rc.out{transform:translateY(-115%)}
.rotator .rc.in{transform:translateY(115%);transition:none}
.rotator-measure{position:absolute;visibility:hidden;white-space:nowrap;pointer-events:none}

/* ===== Titulares letra a letra ===== */
.split .sw{display:inline-block;white-space:nowrap}
.split .sc{
  display:inline-block;
  opacity:0;
  transform:translateY(.45em);
  transition:opacity .5s ease, transform .6s cubic-bezier(.2,.7,.2,1);
  transition-delay:calc(var(--i) * 22ms);
}
.split.is-in .sc{opacity:1;transform:none}

/* ===== Chispas al hacer clic ===== */
.spark{
  position:fixed;z-index:9998;pointer-events:none;
  width:3px;height:12px;margin:-6px 0 0 -1.5px;
  border-radius:999px;
  background:var(--blue);
  animation:spark .5s cubic-bezier(.2,.7,.3,1) forwards;
}
.spark.on-blue{background:var(--orange)}
@keyframes spark{
  from{transform:rotate(var(--a)) translateY(-6px) scaleY(1);opacity:1}
  to{transform:rotate(var(--a)) translateY(-30px) scaleY(.2);opacity:0}
}

/* ===== Botones imán ===== */
.btn,.cta,.ov-cta{transform:translate(var(--mx,0px),var(--my,0px))}
.btn:hover{transform:translate(var(--mx,0px),calc(var(--my,0px) - 2px))}
.is-magnet{transition:transform .35s cubic-bezier(.2,.7,.2,1),background .25s ease,color .25s ease}

/* ===== Rastro de imágenes (Portfolio) ===== */
.trail-zone{position:relative;overflow:hidden}
.trail-zone > .wrap{position:relative;z-index:2;pointer-events:none}
.trail-zone > .wrap a,.trail-zone > .wrap button{pointer-events:auto}
.trail-layer{position:absolute;inset:0;z-index:1;pointer-events:none}
.trail-img{
  position:absolute;
  width:clamp(120px,16vw,220px);aspect-ratio:4/5;
  margin:calc(clamp(120px,16vw,220px) * -0.625) 0 0 calc(clamp(120px,16vw,220px) * -0.5);
  border-radius:4px;overflow:hidden;
  object-fit:cover;
  animation:trailIn .9s cubic-bezier(.2,.7,.2,1) forwards;
}
/* tarjetas provisionales hasta que haya fotos */
.trail-img.is-ph{display:grid;place-items:center;background:var(--blue)}
.trail-img.is-ph.alt{background:#e4e8f6}
.trail-img.is-ph img{width:34%;height:auto}
@keyframes trailIn{
  0%{opacity:0;transform:scale(.6) rotate(var(--r))}
  18%{opacity:1;transform:scale(1) rotate(var(--r))}
  70%{opacity:1}
  100%{opacity:0;transform:scale(.92) rotate(var(--r))}
}

@media (prefers-reduced-motion:reduce){
  .split .sc{opacity:1;transform:none;transition:none}
  .draw-mark{opacity:1;transform:none;filter:none;transition:none}
}

/* zona del rastro en la cabecera de Portfolio: más alta para que haya sitio */
.p-hero.trail-zone{min-height:72vh;display:flex;align-items:center}
.p-hero.trail-zone > .wrap{width:100%}