/* =====================================================================================
   FOTO XIA  ·  v1.0  ·  DIO (Gonzalo Valera-Corbalan Cerf) · 2026-08-13
   -------------------------------------------------------------------------------------
   Integra una fotografia en las webs XIA SIN romper el cielo estrellado ni tapar
   POLARIXIA.

   POR QUE EXISTE, y la leccion esta antes que el codigo:
   Estuve cuatro versiones peleandome con el generador de imagenes para que la foto no
   "rompiera el fondo". El revisor me suspendio las cuatro por lo mismo: madera clara,
   halo del flexo, pantallas encendidas. Y tenia razon las cuatro veces.
   El error era mio de planteamiento: una fotografia RECTANGULAR nunca se funde con un
   cielo por bien iluminada que este. No se arregla en el prompt, se arregla en el CSS.
   Las webs buenas no buscan la foto perfecta: DISUELVEN SUS BORDES.

   USO:
     <link rel="stylesheet" href="foto-xia.css">
     <figure class="foto-xia"><img src="softwarexia_hero_01.png" alt="..."></figure>

   Variantes:
     .foto-xia--suave   difuminado mas amplio (fotos con esquinas algo claras)
     .foto-xia--banda   solo funde arriba y abajo (utiles como franja ancha)
   ===================================================================================== */

.foto-xia {
  position: relative;
  margin: 0;
  overflow: hidden;
  /* El fondo del contenedor es transparente A PROPOSITO: debe verse el cielo detras. */
  background: transparent;
}

.foto-xia img {
  display: block;
  width: 100%;
  height: auto;

  /* EL NUCLEO: los bordes se desvanecen a nada, asi que no hay recorte que delate
     la foto sobre el cielo. Doble mascara -radial + lineal- para que las esquinas
     mueran antes que el centro. */
  -webkit-mask-image:
    radial-gradient(ellipse 78% 78% at 50% 50%, #000 42%, transparent 100%),
    linear-gradient(to bottom, transparent 0%, #000 14%, #000 86%, transparent 100%);
  mask-image:
    radial-gradient(ellipse 78% 78% at 50% 50%, #000 42%, transparent 100%),
    linear-gradient(to bottom, transparent 0%, #000 14%, #000 86%, transparent 100%);
  -webkit-mask-composite: source-in;
  mask-composite: intersect;

  /* Baja la luminancia general para que conviva con un fondo #12161D sin deslumbrar.
     No es un capricho estetico: es lo que el revisor pedia en cada pasada. */
  filter: brightness(0.82) saturate(0.9) contrast(1.05);
}

/* Velo del color de la casa: cose la foto a la paleta del mundo que la usa.
   Se tinta con --xia-tinte, que cada web define (violeta Magicandia, ambar Liryxia...). */
.foto-xia::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: linear-gradient(
    to bottom,
    color-mix(in srgb, var(--xia-tinte, #12161d) 55%, transparent) 0%,
    transparent 35%,
    transparent 65%,
    color-mix(in srgb, var(--xia-tinte, #12161d) 70%, transparent) 100%
  );
}

.foto-xia--suave img {
  -webkit-mask-image: radial-gradient(ellipse 70% 70% at 50% 50%, #000 25%, transparent 100%);
  mask-image: radial-gradient(ellipse 70% 70% at 50% 50%, #000 25%, transparent 100%);
  filter: brightness(0.72) saturate(0.85) contrast(1.05);
}

.foto-xia--banda img {
  -webkit-mask-image: linear-gradient(to bottom, transparent 0%, #000 22%, #000 78%, transparent 100%);
  mask-image: linear-gradient(to bottom, transparent 0%, #000 22%, #000 78%, transparent 100%);
}

/* TEXTO SOBRE LA FOTO — el motivo por el que el Presidente abrio este asunto.
   Canon de la casa segun la "Guia de Identidad Visual y Estilo ProSoftom" de la alumna
   Andrea Giovine Jimenez (P14, agosto 2025): Gris Hielo #F5F7FA como neutro claro,
   Montserrat 700 para titulares, Lato para cuerpo, interlineado 1.5.
   #F5F7FA sobre #12161D da 15:1 de contraste. La norma AA pide 4,5:1. */
.foto-xia figcaption,
.sobre-foto-xia {
  color: #F5F7FA;
  font-family: "Montserrat", "Segoe UI", system-ui, sans-serif;
  font-weight: 700;
  line-height: 1.5;
  /* La sombra no es decoracion: garantiza el contraste aunque la foto tenga
     una zona clara justo detras de la palabra. */
  text-shadow: 0 2px 12px rgba(0, 0, 0, .85), 0 0 3px rgba(0, 0, 0, .9);
}

/* Quien no quiera movimiento, no lo tendra. */
@media (prefers-reduced-motion: reduce) {
  .foto-xia img { transition: none; }
}