/* ═══════════════════════════════════════════════════════════
   Camiloh — effects.css
   Sunset interactivo, aves, animaciones de entrada, reduced-motion
   ───────────────────────────────────────────────────────────
   Cambia aquí: sol/atardecer, animaciones scroll, preferencias
═══════════════════════════════════════════════════════════ */

/* ─── Fondo sunset (JS pinta los gradientes del sol) ─── */
#sunsetBg {
  position: fixed;
  inset: 0;
  z-index: 0;
  overflow: hidden;
  pointer-events: none;
}
#sunsetBg > div {
  position: absolute;
  inset: 0;
  width: 100%; height: 100%;
  background-repeat: no-repeat;
  transition: opacity .18s ease-out;
  will-change: opacity, background;
}

#sbSky {
  z-index: 1;
  background: linear-gradient(to top,
    rgba(249,251,240,1) 10%,
    rgba(215,253,254,1) 20%,
    rgba(167,222,253,1) 40%,
    rgba(110,175,255,1) 100%
  );
}
#sbSunDay { z-index: 2; }
#sbSun    { z-index: 3; }
#sbSunSet { z-index: 4; }
#sbHorizon {
  z-index: 5;
  background: linear-gradient(to top,
    rgba(212,87,43,.9) 0%,
    rgba(246,149,52,.8) 20%,
    rgba(24,75,106,0) 100%
  );
}
#sbDarkness {
  z-index: 6;
  background: #000;
  opacity: 0;
}

/* Bloque blanco: arranca arriba de todo (detrás de la imagen del hero, que tiene alfa),
   contiene hero + marquee + showcase y se desvanece hacia el cielo al final del video */
.white-stage {
  --white-fade: clamp(140px, 20vw, 320px);
  position: relative;
  z-index: 5;
  background: linear-gradient(180deg,
    var(--paper) 0,
    var(--paper) calc(100% - var(--white-fade)),
    rgba(247,241,225,0) 100%);
}

/* Secciones transparentes para que se vea el fondo debajo */
.clients,
.clients-panel,
.clients .marquee-bar,
.stats-band,
.content,
.content::before,
.portfolio,
.obras,
.tools,
.prologue,
.obras-tools-row,
.banded-showcase {
  background: transparent !important;
  background-color: transparent !important;
}

/* ─── Aves por encima del contenido, debajo del hero ─── */
#birds {
  z-index: 3;
  opacity: .9;
  mix-blend-mode: multiply;
}

/* ─── Animaciones de entrada (disparadas por IntersectionObserver en JS) ─── */
[data-animate] { opacity: 0; }
[data-animate="panel"] {
  transform: translateY(28px) scale(.985);
  transition: opacity .9s cubic-bezier(.16,.8,.24,1), transform .9s cubic-bezier(.16,.8,.24,1);
}
[data-animate="card"] {
  transform: translateY(22px);
  transition:
    opacity .7s cubic-bezier(.16,.8,.24,1) var(--d, 0s),
    transform .7s cubic-bezier(.16,.8,.24,1) var(--d, 0s);
}
[data-animate="stats"] {
  transform: translateY(-14px) translateX(14px);
  transition: opacity 1s cubic-bezier(.16,.8,.24,1) .25s, transform 1s cubic-bezier(.16,.8,.24,1) .25s;
}
[data-animate].in-view {
  opacity: 1;
  transform: none;
}

/* ─── Reduced motion ─── */
@media (prefers-reduced-motion: reduce) {
  .clients .marquee-track { animation: none; }
  [data-animate] {
    opacity: 1;
    transform: none;
    transition: none;
  }
  #halation { animation: none; }
  .folio-card, .folio-meta, .obra-card, .tool-toggle { transition: none; }
  .folio-card:hover, .obra-card:hover { transform: none; }
  .pf-brand-spark { animation: none; }
}