/* =========================================================
   ALGOR — algor-fx.css
   Capa de efectos gráficos avanzados sobre styles.css + enhance.css.
   Cargar SIEMPRE en último lugar para que sus overrides ganen.
   ---------------------------------------------------------
   Contiene:
   1. Ajustes del hero (portada más arriba + reordenado móvil).
   2. Ilustración de la sección 01 (marco sci-fi).
   3. Spotlight de cursor sobre la imagen del extracto (sección 03).
   4. Efecto OLD FILM sobre la portada (index.html).
   5. Efecto SPLIT-IMAGE hover sobre la portada (index_3.html).
   6. Efecto PHOTO-PARTICLES sobre la portada (index_2.html).
   Cada efecto se activa solo si su markup existe en la página.
   ========================================================= */


/* =========================================================
   1. HERO — portada más arriba y menos espacio con el header
   ========================================================= */
.algor-v2 .algor-hero {
  padding-top: 88px;
}

/* La portada del hero se sube ligeramente respecto al centrado. */
.algor-hero-right {
  align-self: center;
}

/* --- Móvil: la portada va ENCIMA del texto ALGOR, pegada al header --- */
@media (max-width: 900px) {
  .algor-v2 .algor-hero {
    padding-top: 74px;
    padding-bottom: 56px;
  }
  .algor-hero-inner {
    min-height: auto;
    gap: 26px;
    align-items: center;
  }
  /* Reordenamos: la columna de la portada (hero-right) pasa a ser la primera. */
  .algor-hero-right { order: -1; }
  .algor-hero-left  { order: 0; }

  .algor-hero-cover-frame { width: min(300px, 74vw); }
}


/* =========================================================
   2. ILUSTRACIÓN — sección 01 (La historia)
   Marco sci-fi coherente con la portada del hero.
   ========================================================= */
.algor-story-illus {
  position: relative;
  float: right;
  width: min(360px, 42%);
  margin: 4px 0 22px 40px;
  padding: 10px;
  border: 1px solid var(--algor-line-strong, rgba(255, 255, 255, 0.2));
  background: var(--algor-ink-soft, #0a1a22);
  box-shadow:
    0 26px 64px oklch(0% 0 0 / 0.5),
    0 0 48px oklch(78% 0.18 195 / 0.14),
    inset 0 0 0 1px oklch(0% 0 0 / 0.4);
}
.algor-story-illus img {
  display: block;
  width: 100%;
  height: auto;
  filter: contrast(1.03) saturate(0.98);
}
/* Corner brackets cian, como en la portada del hero */
.algor-story-illus::before,
.algor-story-illus::after {
  content: "";
  position: absolute;
  width: 14px;
  height: 14px;
  border: 1px solid var(--cyan-bright, #0ff5f0);
  pointer-events: none;
}
.algor-story-illus::before { top: -6px; left: -6px; border-bottom: 0; border-right: 0; }
.algor-story-illus::after  { bottom: -6px; right: -6px; border-top: 0; border-left: 0; }

.algor-story-illus figcaption {
  margin-top: 8px;
  font-size: 9.5px;
  letter-spacing: 0.36em;
  text-transform: uppercase;
  color: var(--cyan-bright, #0ff5f0);
  text-align: right;
  opacity: 0.8;
}

.algor-story-illus a {
  display: block;
  position: relative;
  cursor: zoom-in;
}
/* Indicador de ampliar */
.algor-illus-zoom {
  position: absolute;
  right: 10px;
  bottom: 10px;
  width: 34px;
  height: 34px;
  display: grid;
  place-items: center;
  font-size: 16px;
  color: #fff;
  background: color-mix(in oklab, var(--cyan-bright, #0ff5f0) 16%, rgba(0, 0, 0, 0.55));
  border: 1px solid var(--cyan-bright, #0ff5f0);
  border-radius: 50%;
  box-shadow: 0 0 18px color-mix(in oklab, var(--cyan-bright, #0ff5f0) 45%, transparent);
  opacity: 0;
  transform: translateY(6px) scale(0.9);
  transition: opacity 0.3s ease, transform 0.3s ease;
  pointer-events: none;
}
.algor-story-illus a:hover .algor-illus-zoom {
  opacity: 1;
  transform: translateY(0) scale(1);
}

@media (max-width: 720px) {
  .algor-story-illus {
    float: none;
    width: min(340px, 88%);
    margin: 0 auto 28px;
  }
  .algor-story-illus figcaption { text-align: center; }
}


/* =========================================================
   FANCYBOX — overlay rojo oscuro + blur (lightbox ilustración)
   ========================================================= */
.fancybox__backdrop {
  background: rgba(46, 4, 12, 0.78);
  backdrop-filter: blur(12px) saturate(1.05);
  -webkit-backdrop-filter: blur(12px) saturate(1.05);
}
.fancybox__container { cursor: zoom-out; }
.fancybox__content { cursor: default; }
.fancybox__content img { box-shadow: 0 30px 90px rgba(0, 0, 0, 0.6); }


/* =========================================================
   3. SPOTLIGHT DE CURSOR — imagen del extracto (sección 03)
   La imagen chapter-bg se aclara un poco de base y, bajo el
   cursor, se ilumina y satura con una lente de backdrop-filter.
   ========================================================= */

/* Aclarado base moderado (reducido ~35% + otro 10%). */
.algor-excerpt-band .algor-excerpt-bg-img {
  filter: brightness(0.675) saturate(0.95) contrast(1.02) !important;
}

/* Reducimos drásticamente la capa oscura que tapaba la foto,
   dejando solo un ligero oscurecido en los bordes para leer el texto. */
.algor-excerpt-band::before {
  background:
    radial-gradient(oklch(0% 0 0 / 0.02) 0%, oklch(0% 0 0 / 0.12) 60%, oklch(0% 0 0 / 0.4) 100%),
    linear-gradient(oklch(0% 0 0 / 0.3) 0%, oklch(6% 0.026 225 / 0.08) 30%, oklch(5% 0.024 225 / 0.1) 70%, oklch(0% 0 0 / 0.4) 100%) !important;
}

/* Texto del extracto siempre por encima de la lente + sombra para legibilidad. */
.algor-excerpt-inner {
  position: relative;
  z-index: 3;
  text-shadow: 0 2px 20px rgba(0, 0, 0, 0.72), 0 0 4px rgba(0, 0, 0, 0.5);
}

.algor-excerpt-spot {
  position: absolute;
  inset: 0;
  z-index: 2;
  pointer-events: none;
  overflow: hidden;
}
/* Lente de cursor: revela la foto casi al 100% (más brillo, saturación y tamaño). */
.algor-excerpt-lens {
  position: absolute;
  left: 0;
  top: 0;
  width: 560px;
  height: 560px;
  transform: translate3d(calc(var(--mx, 50%) - 280px), calc(var(--my, 50%) - 280px), 0);
  border-radius: 50%;
  opacity: 0;
  transition: opacity 0.4s ease;
  will-change: transform, opacity;
  backdrop-filter: brightness(1.4) saturate(1.12) contrast(1.02);
  -webkit-backdrop-filter: brightness(1.4) saturate(1.12) contrast(1.02);
  -webkit-mask: radial-gradient(circle at center, #000 46%, transparent 72%);
  mask: radial-gradient(circle at center, #000 46%, transparent 72%);
}
.algor-excerpt-band.is-spot .algor-excerpt-lens { opacity: 1; }

@media (hover: none) and (pointer: coarse) {
  .algor-excerpt-spot { display: none; }
  /* En táctil, sin cursor, dejamos la foto un poco más visible. */
  .algor-excerpt-band .algor-excerpt-bg-img {
    filter: brightness(0.765) saturate(0.98) contrast(1.02) !important;
  }
}


/* =========================================================
   ILUSTRACIÓN APAISADA — sección 03 (The Object), encima del texto
   ========================================================= */
.algor-book-grid.algor-book-stacked {
  grid-template-columns: 1fr !important;
  gap: 40px;
  justify-items: center;
}
.algor-book-illus {
  position: relative;
  margin: 0 auto;
  padding: 10px;
  width: 100%;
  max-width: 860px;
  border: 1px solid var(--algor-line-strong, rgba(255, 255, 255, 0.2));
  background: var(--algor-ink-soft, #0a1a22);
  box-shadow:
    0 30px 70px oklch(0% 0 0 / 0.5),
    0 0 56px oklch(78% 0.18 195 / 0.16),
    inset 0 0 0 1px oklch(0% 0 0 / 0.4);
}
.algor-book-illus a {
  display: block;
  position: relative;
  cursor: zoom-in;
}
.algor-book-illus img {
  display: block;
  width: 100%;
  height: auto;
}
.algor-book-illus::before,
.algor-book-illus::after {
  content: "";
  position: absolute;
  width: 16px;
  height: 16px;
  border: 1px solid var(--cyan-bright, #0ff5f0);
  pointer-events: none;
}
.algor-book-illus::before { top: -6px; left: -6px; border-bottom: 0; border-right: 0; }
.algor-book-illus::after  { bottom: -6px; right: -6px; border-top: 0; border-left: 0; }
/* El indicador de zoom también sobre esta ilustración */
.algor-book-illus a:hover .algor-illus-zoom {
  opacity: 1;
  transform: translateY(0) scale(1);
}


/* =========================================================
   4. EFECTO OLD FILM — portada del hero (index.html)
   Overlay de grano + rayas verticales + viñeta negra en esquinas.
   Adaptado de "Old Film Effect – Pure CSS Animation".
   ========================================================= */
.algor-hero-cover-frame.is-oldfilm img {
  filter: contrast(1.06) saturate(0.9) sepia(0.08);
}
.algor-oldfilm {
  position: absolute;
  inset: 10px;
  overflow: hidden;
  pointer-events: none;
  z-index: 4;
}
.algor-oldfilm-film,
.algor-oldfilm-effect,
.algor-oldfilm-grain {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}
.algor-oldfilm-film { filter: blur(0.3px); }

.algor-oldfilm-film::after,
.algor-oldfilm-effect::after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 120%;
  height: 100%;
  opacity: 0.5;
  background: repeating-linear-gradient(90deg, #0002 0 2px, transparent 4px 180px);
  animation: algor-film-scratch 0.45s steps(1) infinite;
}
.algor-oldfilm-effect::after {
  left: 30%;
  animation: algor-effect-scratch 2s infinite;
}
.algor-oldfilm-grain::after {
  content: "";
  position: absolute;
  top: -5%;
  left: -5%;
  width: 110%;
  height: 110%;
  opacity: 0.22;
  background-image:
    repeating-conic-gradient(#000 0%, transparent 0.00003%, transparent 0.0005%, transparent 0.00095%),
    repeating-conic-gradient(#000 0%, transparent 0.00005%, transparent 0.00015%, transparent 0.0009%);
  animation: algor-grain 0.5s steps(1) infinite;
  filter: drop-shadow(0 0 1px #000);
}
/* Viñeta negra en las esquinas (shade) */
.algor-oldfilm-vignette {
  position: absolute;
  inset: 0;
  pointer-events: none;
  box-shadow:
    inset 0 0 62px 6px #000,
    inset 0 0 20px 3px #000;
}

@keyframes algor-grain {
  0%, 100% { transform: translate(0, 0); }
  10% { transform: translate(-1%, -1%); }
  20% { transform: translate(1%, 1%); }
  30% { transform: translate(-2%, -2%); }
  40% { transform: translate(3%, 3%); }
  50% { transform: translate(-3%, -3%); }
  60% { transform: translate(4%, 4%); }
  70% { transform: translate(-4%, -4%); }
  80% { transform: translate(2%, 2%); }
  90% { transform: translate(-3%, -3%); }
}
@keyframes algor-film-scratch {
  0%, 100% { transform: translateX(0); opacity: 0.5; }
  10% { transform: translateX(-1%); }
  20% { transform: translateX(1%); }
  30% { transform: translateX(-2%); opacity: 0.75; }
  40% { transform: translateX(3%); }
  50% { transform: translateX(-3%); opacity: 0.5; }
  60% { transform: translateX(8%); }
  70% { transform: translateX(-3%); }
  80% { transform: translateX(10%); opacity: 0.25; }
  90% { transform: translateX(-2%); }
}
@keyframes algor-effect-scratch {
  0%   { transform: translateX(0); opacity: 0.75; }
  10%  { transform: translateX(-1%); }
  20%  { transform: translateX(1%); }
  30%  { transform: translateX(-2%); }
  40%  { transform: translateX(3%); }
  50%  { transform: translateX(-3%); opacity: 0.5; }
  60%  { transform: translateX(8%); }
  70%  { transform: translateX(-3%); }
  80%  { transform: translateX(10%); opacity: 0.25; }
  90%  { transform: translateX(20%); }
  100% { transform: translateX(30%); }
}


/* =========================================================
   5. EFECTO SPLIT-IMAGE HOVER — portada del hero (index_3.html)
   Rejilla de teselas que se recomponen al pasar el cursor.
   Adaptado de "Split Image | Hover Effect" (GSAP TweenMax).
   ========================================================= */
.algor-split {
  position: absolute;
  inset: 10px;
  overflow: hidden;
  z-index: 3;
}
.algor-split .gridTile {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center;
}
/* Ocultamos la imagen base cuando el efecto está montado */
.algor-hero-cover-frame.is-split img { visibility: hidden; }


/* =========================================================
   6. EFECTO PHOTO-PARTICLES — portada del hero (index_2.html)
   La portada se reconstruye con partículas que huyen del cursor.
   Adaptado de "Hwang Yeji Interactive Photo Particles" (canvas).
   ========================================================= */
.algor-cover-canvas {
  position: absolute;
  inset: 10px;
  width: calc(100% - 20px);
  height: calc(100% - 20px);
  display: block;
  z-index: 3;
  background: #05070a;
}
/* En móvil/touch mostramos la imagen estática (mejor rendimiento y scroll) */
.algor-hero-cover-frame.is-particles img { visibility: hidden; }
@media (hover: none) and (pointer: coarse) {
  .algor-cover-canvas { display: none; }
  .algor-hero-cover-frame.is-particles img { visibility: visible; }
}