/* IMARA Group — CAPA DE EFECTOS (opcional)
   Todo lo "especial" vive aquí y en js/efectos.js. El diseño base está en estilos.css.
   Para quitar TODOS los efectos: borrar la línea de este archivo en index.html y la de js/efectos.js.
   Para quitar un efecto suelto: ver el REGISTRO DE EFECTOS en PROGRESO.md.
   Solo se animan transform y opacity (no pesan en el celular). */

/* ---------- EF-01 · Foto que sigue al mouse y "respira" (áreas de Inicio) ---------- */
@media (hover: hover) and (pointer: fine) {
  [data-efecto="area"] .area__marco {
    animation: respirar 16s ease-in-out infinite;
    transform-origin: 50% 50%;
  }
  [data-efecto="area"] .area__foto {
    transform: scale(1.12) translate3d(calc(var(--mx, 0) * -16px), calc(var(--my, 0) * -16px), 0);
    will-change: transform;
  }
}
@keyframes respirar {
  0%, 100% { transform: scale(1); }
  50%      { transform: scale(1.045); }
}

/* ---------- EF-02 · Resplandor suave que sigue al cursor ---------- */
@media (hover: hover) and (pointer: fine) {
  [data-efecto="area"] .area__luz {
    display: block;
    position: absolute; left: 0; top: 0; z-index: 1;
    width: 490px; height: 490px; margin: -245px 0 0 -245px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(255,255,255,.20) 0%, rgba(255,255,255,.08) 38%, rgba(255,255,255,0) 66%);
    pointer-events: none;
    opacity: 0;
    transform: translate3d(var(--gx, 50%), var(--gy, 50%), 0);
    transition: opacity .5s ease;
  }
  [data-efecto="area"].area--sobre .area__luz { opacity: 1; }
}

/* ---------- EF-03 · El título aparece palabra por palabra ---------- */
.efecto-listo .area__nombre .palabra {
  display: inline-block;
  opacity: 0; transform: translate3d(0, .5em, 0);
  transition: opacity .7s cubic-bezier(.22, 1, .36, 1), transform .7s cubic-bezier(.22, 1, .36, 1);
  transition-delay: calc(var(--i) * 70ms);
}
.efecto-listo.area--visible .area__nombre .palabra { opacity: 1; transform: none; }

.efecto-listo .area__tipo,
.efecto-listo .area__texto,
.efecto-listo .boton-claro {
  opacity: 0; transform: translate3d(0, 14px, 0);
  transition: opacity .7s ease, transform .7s cubic-bezier(.22, 1, .36, 1), background .25s ease, color .25s ease, border-color .25s ease;
}
.efecto-listo .area__tipo   { transition-delay: 0ms; }
.efecto-listo .area__texto  { transition-delay: 320ms; }
.efecto-listo .boton-claro  { transition-delay: 460ms, 460ms, 0s, 0s, 0s; }
.efecto-listo.area--visible .area__tipo,
.efecto-listo.area--visible .area__texto,
.efecto-listo.area--visible .boton-claro { opacity: 1; transform: none; }
/* una vez entrado, el botón vuelve a reaccionar al instante al pasar el mouse */
.efecto-listo.area--visible .boton-claro:hover,
.efecto-listo.area--visible .boton-claro:focus-visible { transform: scale(1.05); transition-delay: 0s; }

/* ---------- EF-04 · La otra área se oscurece cuando miras una ---------- */
@media (hover: hover) and (pointer: fine) {
  [data-efecto="area"]::before {
    content: ""; position: absolute; inset: 0; z-index: 0;
    background: #000; opacity: 0; pointer-events: none;
    transition: opacity .6s ease;
  }
  .areas__rejilla:has(.area--sobre) [data-efecto="area"]:not(.area--sobre)::before { opacity: .38; }
}

/* ---------- EF-05 · Los elementos de una lista suben y aparecen uno tras otro (Por qué IMARA) ---------- */
.aparece-listo {
  opacity: 0; transform: translate3d(0, 22px, 0);
  transition: opacity .8s ease, transform .8s cubic-bezier(.22, 1, .36, 1);
  transition-delay: calc(var(--orden, 0) * 110ms);
}
.aparece-listo.aparece--visible { opacity: 1; transform: none; }

/* ---------- EF-06 · La foto se "revela": entra desde el fondo con un acercamiento lento (Nuestra historia) ---------- */
.revelar-listo img {
  opacity: 0; transform: scale(1.14);
  transition: opacity 1.2s ease, transform 1.8s cubic-bezier(.22, 1, .36, 1);
}
.revelar-listo.aparece--visible img { opacity: 1; transform: scale(1); }

/* ---------- EF-07 · Relieve 3D: la tarjeta se inclina hacia el mouse y el texto "flota" por delante (Proyectos destacados) ---------- */
@media (hover: hover) and (pointer: fine) {
  .proy__tarjeta[data-efecto="inclinar"] {
    transform-style: preserve-3d;
    transform: perspective(900px) rotateX(calc(var(--rx, 0) * 1deg)) rotateY(calc(var(--ry, 0) * 1deg));
    will-change: transform;
  }
  .proy__tarjeta[data-efecto="inclinar"] .proy__texto { transform: translateZ(64px); }
  .proy__tarjeta[data-efecto="inclinar"] .proy__marco { box-shadow: 0 28px 60px rgba(0, 0, 0, .55); }
  .proy__tarjeta[data-efecto="inclinar"] .proy__foto {
    transform: scale(1.1) translate3d(calc(var(--px, 0) * -12px), calc(var(--py, 0) * -12px), 0);
  }
}

/* ---------- EF-08 · Franjas con "cortina" (Proyectos destacados de Inicio) ----------
   Cada franja está cubierta por una cortina del color del fondo. La franja que queda en el centro de la pantalla abre su cortina
   (sube y muestra la foto); al irse, la cortina vuelve a bajar. Reemplaza al efecto 3D (EF-07) en Inicio. */
.franja--lista { border-top: 0; }   /* sin línea: la cortina se abre del fondo (Robin, 22-oct-2026) */
.franja--lista .franja__enlace { background: var(--fondo); color: var(--tinta); transition: color .6s ease; }
.franja--lista.franja--activa .franja__enlace { color: #fff; transition-delay: .25s; }
.franja--lista .franja__desc { color: inherit; opacity: .9; }
.franja--lista .franja__velo {
  display: block; position: absolute; inset: 0; z-index: 1;
  background: var(--fondo);
  transform: translate3d(0, 0, 0);
  transition: transform .34s cubic-bezier(.6, 0, .3, 1);   /* al cerrarse (bajar) es más rápida que al abrirse */
}
.franja--lista.franja--activa .franja__velo { transform: translate3d(0, -101%, 0); transition: transform .95s cubic-bezier(.77, 0, .18, 1); }   /* apertura: velocidad que le gustó a Robin */
.franja--lista .franja__foto { transform: scale(1.1); transition: transform 1.6s cubic-bezier(.22, 1, .36, 1); }
.franja--lista.franja--activa .franja__foto { transform: scale(1); }

/* ---------- EF-10 · Fotos estáticas que siguen al mouse y "respiran" (sin resplandor) ----------
   Se aplica a las fotos donde no hay nada para hacer clic: Nuestra historia, fotos de obras, ficha de proyecto, unidades, producto.
   Y el resplandor del cursor solo queda en las fotos que tienen botones o enlaces encima. */
[data-efecto="area"].area--sin-luz .area__luz { display: none; }
@media (hover: hover) and (pointer: fine) {
  .fv-caja { display: block; position: relative; overflow: hidden; }
  .fv-respira { display: block; width: 100%; height: 100%; animation: respirar 16s ease-in-out infinite; transform-origin: 50% 50%; }
  .fv-mueve {
    display: block; width: 100%; height: 100%;
    transform: scale(1.1) translate3d(calc(var(--mx, 0) * -14px), calc(var(--my, 0) * -14px), 0);
    will-change: transform;
  }
}

/* ---------- Quien pide menos movimiento: sin efectos ---------- */
/* (Con ?efectos=ver en la dirección, el prototipo ignora este bloque, solo para que Robin pueda ver los efectos.) */
@media (prefers-reduced-motion: reduce) {
  html:not(.ver-efectos) [data-efecto="area"] .area__marco { animation: none; }
  html:not(.ver-efectos) [data-efecto="area"] .area__foto { transform: none; }
  html:not(.ver-efectos) [data-efecto="area"] .area__luz { display: none; }
  html:not(.ver-efectos) .proy__tarjeta[data-efecto="inclinar"] { transform: none; }
  html:not(.ver-efectos) .proy__tarjeta[data-efecto="inclinar"] .proy__texto { transform: none; }
  html:not(.ver-efectos) .proy__tarjeta[data-efecto="inclinar"] .proy__marco { box-shadow: none; }
  html:not(.ver-efectos) .proy__tarjeta[data-efecto="inclinar"] .proy__foto { transform: none; }
  html:not(.ver-efectos) .franja--lista .franja__velo { transition: none; }
  html:not(.ver-efectos) .franja--lista .franja__foto { transform: none; transition: none; }
  html:not(.ver-efectos) .fv-respira { animation: none; }
  html:not(.ver-efectos) .fv-mueve { transform: none; }
  html:not(.ver-efectos) .aparece-listo { opacity: 1; transform: none; transition: none; }
  html:not(.ver-efectos) .revelar-listo img { opacity: 1; transform: none; transition: none; }
  html:not(.ver-efectos) .efecto-listo .palabra,
  html:not(.ver-efectos) .efecto-listo .area__tipo,
  html:not(.ver-efectos) .efecto-listo .area__texto,
  html:not(.ver-efectos) .efecto-listo .boton-claro {
    opacity: 1; transform: none; transition: none;
  }
}