/* Hero fotográfico. API de hero-isla.js: --island-photo-y, --island-far-y,
   --island-near-y y --island-drift-y se suman al scroll del documento.
   El banco grande posterior recorta únicamente
   el fondo fotográfico: debajo se revela la web, y las nubes externas
   conservan su propio alfa y recorrido sin una máscara común. */
:root:has(body.landing){
  --island-photo-source:url('imagenes/portada/hipatia-isla-dia-20261110.jpg');
  --island-cloud-matte:url('imagenes/portada/nubes-prueba-dia-20261110-corte.svg');
  --island-mask-ink:var(--cream);
}
/* La identidad de la isla vive en tema.css para compartirla con el sitio.
   Aquí sólo quedan los tratamientos que dependen de la fotografía. */
@media screen and (forced-colors:none){
  :root:has(body.landing){
    --home-photo-ink:var(--ui-day-ink);
    --home-photo-sky:#EED6B2;
    --home-photo-shadow:none;
    --home-keyword-reading-filter:drop-shadow(0 1px 1px color-mix(in srgb,var(--home-photo-sky) 90%,transparent)) drop-shadow(0 0 6px color-mix(in srgb,var(--home-photo-sky) 75%,transparent));
  }
  :root[data-theme="dark"]:has(body.landing){
    --home-photo-ink:var(--champagne);
    --home-photo-sky:var(--palette-night);
    --home-photo-shadow-color:var(--palette-night);
    --home-keyword-reading-filter:none;
    --home-photo-shadow:0 2px 3px color-mix(in srgb,var(--home-photo-shadow-color) 85%,transparent),0 0 16px color-mix(in srgb,var(--home-photo-shadow-color) 45%,transparent);
  }
  .landing .home-hero__title{color:var(--home-photo-ink)}
  .landing .home-hero__copy{text-shadow:var(--home-photo-shadow)}
  .landing .home-orbit__hint.home-wordroll{color:var(--home-photo-ink)}
  .landing .brand-text,.landing .home-wordroll__line{filter:var(--home-keyword-reading-filter)}
  .landing #intro .pre .ring{stroke:var(--home-photo-ink)}
  .landing #intro .solid circle{fill:var(--home-photo-ink)}
  .landing #intro::before{background:color-mix(in srgb,var(--home-photo-sky) 72%,transparent)}
  /* Sólo texto sobre el fondo: los paneles, etiquetas de proyectos y
     círculos de los nodos conservan sus propias combinaciones de color. */
  :root[data-theme="dark"] .landing :is(
    .home-work__title,.home-orbit__heading,.home-orbit__intro,
    .home-orbit__node>span:not(.home-orbit__node-icon),.home-orbit__hint,
    .home-faq__heading,.home-faq__intro,.home-faq__group>h3
  ){color:var(--home-photo-ink)}
}
.home-island{
  --island-photo-y:0px;--island-far-y:0px;--island-near-y:0px;
  --island-drift-y:0px;
  --island-far-orbit-x:0px;--island-far-orbit-y:0px;
  --island-far-offset:0px;
  --island-cloud-height:clamp(280px,35vw,560px);
  /* Las dimensiones preservan las proporciones de los PNG y de su corte. */
  --island-cloud-width:max(120%,1080px);
  --island-far-height:max(40vw,360px);
  --island-barrier-width:max(90vw,700px);
  --island-barrier-height:max(45vw,350px);
  --island-tail:calc(var(--island-cloud-height) / 2);
  position:absolute;z-index:0;
  top:calc(-1 * var(--home-hero-top,0px));left:0;right:0;
  height:calc(100% + var(--home-hero-top,0px) + var(--island-tail));
  overflow-x:clip;overflow-y:visible;isolation:isolate;pointer-events:none;
}
.home-island__backdrop{
  position:absolute;z-index:1;inset:0;
  /* La salida de la foto queda dentro de la masa opaca del banco posterior.
     Las dos piezas comparten tamaño, posición y desplazamiento exactos;
     el recorte no alcanza a los otros bancos ni a los cúmulos delanteros. */
  -webkit-mask-image:linear-gradient(var(--island-mask-ink),var(--island-mask-ink)),var(--island-cloud-matte);
  mask-image:linear-gradient(var(--island-mask-ink),var(--island-mask-ink)),var(--island-cloud-matte);
  /* Un pequeño solape evita rendijas por redondeo al desplazar el corte. */
  -webkit-mask-size:100% max(0px,calc(100% - var(--island-far-height) + var(--island-far-y) + var(--island-far-orbit-y) + var(--island-far-offset) + 2px)),var(--island-cloud-width) var(--island-far-height);
  mask-size:100% max(0px,calc(100% - var(--island-far-height) + var(--island-far-y) + var(--island-far-orbit-y) + var(--island-far-offset) + 2px)),var(--island-cloud-width) var(--island-far-height);
  -webkit-mask-position:center top,calc(50% + var(--island-far-orbit-x)) calc(100% + var(--island-far-y) + var(--island-far-orbit-y) + var(--island-far-offset));
  mask-position:center top,calc(50% + var(--island-far-orbit-x)) calc(100% + var(--island-far-y) + var(--island-far-orbit-y) + var(--island-far-offset));
  -webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;
  -webkit-mask-composite:source-over;mask-composite:add;
  mask-mode:alpha,alpha;
}
.home-island__sky{
  position:absolute;z-index:0;inset:-6px;
  background-color:var(--home-photo-sky,var(--cream));
  background-image:var(--island-photo-source);
  background-repeat:no-repeat;background-position:center top;
  /* Sólo cielo del mismo original: no se repite la isla en el móvil. */
  background-size:auto 220%;
}
.home-island__photo-plane{
  position:absolute;z-index:1;top:0;left:0;right:0;
  height:calc(100% - var(--island-tail));overflow:visible;
  transform:translate3d(0,var(--island-photo-y),0);
  will-change:transform;
}
.home-island__photo{
  position:absolute;display:block;left:0;top:0;
  width:100%;height:100%;max-width:none;
  object-fit:cover;object-position:center bottom;
  user-select:none;
}
/* Prolonga la última franja de la fotografía por debajo de su borde mientras
   llegan las nubes. El reflejo coincide en el corte y no altera el encuadre
   original; la máscara existente lo oculta en cuanto pasa el banco. */
.home-island__photo-plane::after{
  content:"";position:absolute;left:0;top:100%;width:100%;height:100%;
  background:var(--island-photo-source) center bottom / cover no-repeat;
  transform:scaleY(-1);pointer-events:none;
}
.home-island__photo-plane.has-image-reflection::after{display:none}
.home-island__photo-plane .home-island__photo--reflection{
  top:100%;transform:scaleY(-1);pointer-events:none;
}
.home-island__cloud{
  --cloud-orbit-x:0px;--cloud-orbit-y:0px;
  position:absolute;display:block;left:50%;max-width:none;
  isolation:isolate;user-select:none;
  will-change:transform;
  overflow:visible;
}
.home-island__cloud>img{
  position:absolute;z-index:0;inset:0;display:block;
  width:100%;height:100%;max-width:none;object-fit:fill;
}
.home-island__cloud--far{
  z-index:2;bottom:0;
  width:var(--island-cloud-width);height:var(--island-far-height);
  transform:translate3d(calc(-50% + var(--island-far-orbit-x)),calc(var(--island-far-y) + var(--island-far-orbit-y) + var(--island-far-offset)),0);
}
.home-island__cloud--near{
  z-index:3;bottom:calc(var(--island-cloud-height) * -.5);
  width:var(--island-barrier-width);height:var(--island-barrier-height);
  transform:translate3d(calc(-50% + var(--cloud-orbit-x)),calc(var(--island-near-y) + var(--cloud-orbit-y)),0);
}
.home-island__foreground{
  position:absolute;z-index:4;inset:0;overflow:visible;pointer-events:none;
}
/* Cada cúmulo conserva sus coordenadas de composición --cloud-x/top/w. */
.home-island__cloud--drift{
  z-index:0;left:var(--cloud-x,50%);top:var(--cloud-top,80%);bottom:auto;
  width:clamp(280px,var(--cloud-w,35vw),1000px);height:auto;aspect-ratio:3/2;
  transform:translate3d(calc(-50% + var(--cloud-orbit-x)),calc(var(--island-drift-y) + var(--cloud-orbit-y)),0);
}
/* Los dos juegos conservan su transparencia y llevan un suave desenfoque. */
:root .home-island{--island-far-offset:clamp(140px,19vw,260px)}
:root .home-island__cloud{filter:blur(2px)}
:root .home-island__cloud--near{
  width:max(118%,1000px);height:max(39.333vw,333.333px);
  bottom:calc(var(--island-cloud-height) * -.8);
}
:root .home-island__cloud--drift:not(:nth-child(2)){display:none}
:root .home-island__cloud--drift:nth-child(2){left:107%;top:55%;width:28vw}
:root[data-theme="dark"]:has(body.landing){
  --island-photo-source:url('imagenes/portada/hipatia-isla-noche-20261110-alta-calidad.png');
}
@media (max-width:650px){
  .home-island{--island-cloud-height:300px}
  .home-island__photo-plane{
    inset:auto;top:0;left:50%;
    width:auto;height:calc(100% - var(--island-tail));aspect-ratio:1672/941;
    transform:translate3d(-50%,var(--island-photo-y),0);
    -webkit-mask-image:none;mask-image:none;
  }
  .home-island__photo{top:0}
  .home-island__cloud--drift{width:clamp(280px,82vw,340px)}
  .home-island__cloud--drift:nth-child(1){left:-20%;top:6%}
  .home-island__cloud--drift:nth-child(2){left:120%;top:38%}
  .home-island__cloud--drift:nth-child(3),
  .home-island__cloud--drift:nth-child(4){display:none}
  .home-island__cloud--drift:nth-child(5){left:54%;top:82%;width:460px}
}
@media (prefers-reduced-motion:reduce){
  .home-island{
    --island-photo-y:0px!important;
    --island-far-y:0px!important;
    --island-near-y:0px!important;
    --island-drift-y:0px!important;
    --island-far-orbit-x:0px!important;
    --island-far-orbit-y:0px!important;
  }
  .home-island__cloud{--cloud-orbit-x:0px!important;--cloud-orbit-y:0px!important}
  .home-island__photo-plane,.home-island__cloud{will-change:auto}
}
:is(.portfolio-preview,.preview-estatica) .home-island{
  --island-photo-y:0px!important;
  --island-far-y:0px!important;
  --island-near-y:0px!important;
  --island-drift-y:0px!important;
  --island-far-orbit-x:0px!important;
  --island-far-orbit-y:0px!important;
}
:is(.portfolio-preview,.preview-estatica) .home-island__cloud{--cloud-orbit-x:0px!important;--cloud-orbit-y:0px!important}
:is(.portfolio-preview,.preview-estatica) .home-island__photo-plane,
:is(.portfolio-preview,.preview-estatica) .home-island__cloud{will-change:auto}
@media print,(forced-colors:active){
  .home-island{display:none}
}