/* ============================================================
   scroll-effects.css — Municipalidad de Las Varillas
   Capa de estilos para animaciones GSAP cinematográficas.
   ============================================================ */

/* ── 1. HERO: video + overlay ── */
.hero-slider { overflow: hidden; }

.hero-slider .slide-video {
  will-change: transform;
  transform-origin: 50% 50%;
}

.hero-slider .slide-overlay.fx-hero-ready {
  perspective: 1600px;
  transform-style: preserve-3d;
}

/* Capa de color extra sobre el video */
.hero-slider .slide-overlay.fx-hero-ready::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(
    165deg,
    rgba(6,14,36,.72)  0%,
    rgba(6,14,36,.28)  48%,
    rgba(6,14,36,.58) 100%
  );
  pointer-events: none;
  z-index: -1;
  transition: opacity .6s ease;
}

/* Destello de luz superior (cine) */
.hero-slider .slide-overlay.fx-hero-ready::after {
  content: '';
  position: absolute;
  top: -20%;
  left: -15%;
  width: 70%;
  height: 60%;
  background: radial-gradient(
    ellipse at 30% 20%,
    rgba(31,111,224,.18) 0%,
    transparent 70%
  );
  pointer-events: none;
  z-index: -1;
}

.slide-overlay.fx-hero-ready p,
.slide-overlay.fx-hero-ready h1 {
  transform-origin: 50% 100%;
  backface-visibility: hidden;
  will-change: transform, opacity;
}

/* ── 2. SPLIT TEXT: palabras animadas ── */
.fx-word {
  display: inline-block;
  overflow: hidden;
  vertical-align: bottom;
  line-height: 1.05;
  padding-bottom: .09em;
}

.fx-word-inner {
  display: inline-block;
  will-change: transform, opacity;
  transform-origin: 50% 100%;
}

.fx-word-gap {
  display: inline-block;
  width: .28em;
}

/* Gradiente en palabras del hero */
.slide-overlay.fx-hero-ready h1 .fx-word-inner {
  background: linear-gradient(118deg, #ffffff 30%, #c7dfff 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  filter: drop-shadow(0 2px 12px rgba(0,0,0,.35));
}

/* ── 3. TÍTULOS DE SECCIÓN (banners) ── */
.baner-content.fx-reveal h2 {
  perspective: 1000px;
  transform-style: preserve-3d;
}

.baner-content.fx-reveal h2 .fx-word-inner {
  will-change: transform;
}

/* ── 4. CONTENEDOR TRÁMITES ── */
body.home-page .fx-tramites-wrap {
  overflow: hidden;
  max-width: 100%;
  margin: 12px auto 40px;
  padding: 10px 0 14px;
  box-sizing: border-box;
}

body.home-page .fx-tramites-wrap .botones-container {
  overflow-x: auto;
  overflow-y: hidden !important;
  margin: 0 auto;
  scrollbar-width: thin;
  scrollbar-color: rgba(16,64,132,.3) transparent;
}

body.home-page .fx-tramites-wrap .botones-container::-webkit-scrollbar { height: 5px; }
body.home-page .fx-tramites-wrap .botones-container::-webkit-scrollbar:vertical { display: none; width: 0; }
body.home-page .fx-tramites-wrap .botones-container::-webkit-scrollbar-thumb {
  background: rgba(16,64,132,.35);
  border-radius: 4px;
}

/* Stage 3D para el tilt magnético */
.fx-tramites-wrap.fx-3d-stage,
.botones-container.fx-3d-stage {
  perspective: 1200px;
  perspective-origin: 50% 45%;
}

.botones-container.fx-3d-stage .boton {
  transform-style: preserve-3d;
  backface-visibility: hidden;
  transition: box-shadow .3s ease;
}

/* Cancelar el hover CSS original cuando GSAP está activo */
body.home-page.fx-gsap-active .botones-container .boton:hover {
  transform: none;
}

/* Carta magnética */
.fx-magnetic-card {
  transition: box-shadow .35s ease;
}

/* Brillo interno en hover */
.fx-magnetic-card::after {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: radial-gradient(
    circle at var(--mx, 50%) var(--my, 50%),
    rgba(255,255,255,.12) 0%,
    transparent 65%
  );
  opacity: 0;
  transition: opacity .3s ease;
  pointer-events: none;
}

.fx-magnetic-card:hover::after { opacity: 1; }

/* ── 5. BANNERS (parallax) ── */
.muni-banner-card {
  overflow: hidden;
  transform-style: preserve-3d;
  will-change: transform;
}

.muni-banner-card .fx-parallax-media {
  display: block;
  width: 100%;
  overflow: hidden;
  line-height: 0;
  will-change: transform;
}

.muni-banner-card .fx-parallax-media img {
  display: block;
  width: 100%;
  height: clamp(240px, 30vw, 360px);
  object-fit: cover;
  will-change: transform;
  transform-origin: 50% 50%;
}

/* ── 6. DIRECTORIO: entrada desde los costados ── */
.directorio-col {
  will-change: transform, opacity;
}

/* ── 7. RESIDUOS: tarjetas ── */
.res-card {
  will-change: transform, opacity;
}

/* ── 8. AVISO OFICIAL ── */
.aviso-oficial {
  will-change: transform, opacity;
}

/* ── 9. FX-REVEAL genérico: sin doble animación ── */
body.home-page.fx-gsap-active .fx-reveal {
  transition: none !important;
}

body.home-page.fx-gsap-active .fx-reveal.fx-reveal-visible {
  opacity: 1;
  transform: none;
  filter: none;
}

/* ── 10. CURSOR DE SEGUIMIENTO (partícula) ── */
.fx-cursor-dot {
  position: fixed;
  top: 0; left: 0;
  width: 8px; height: 8px;
  background: #1f6fe0;
  border-radius: 50%;
  pointer-events: none;
  z-index: 99999;
  transform: translate(-50%, -50%);
  mix-blend-mode: multiply;
  transition: background .2s ease, transform .15s ease;
}

.fx-cursor-ring {
  position: fixed;
  top: 0; left: 0;
  width: 36px; height: 36px;
  border: 2px solid rgba(31,111,224,.55);
  border-radius: 50%;
  pointer-events: none;
  z-index: 99998;
  transform: translate(-50%, -50%);
  transition: width .25s ease, height .25s ease, border-color .25s ease, opacity .25s ease;
}

/* Expansión del ring al hacer hover en links */
body:has(a:hover) .fx-cursor-ring,
body:has(button:hover) .fx-cursor-ring {
  width: 54px; height: 54px;
  border-color: rgba(232,124,0,.7);
}

/* ── 11. SCROLL PROGRESS BAR ── */
.fx-scroll-progress {
  position: fixed;
  top: 0; left: 0;
  height: 3px;
  background: linear-gradient(90deg, #1f6fe0, #e87c00, #1f6fe0);
  background-size: 200% 100%;
  z-index: 10000;
  transform-origin: 0 50%;
  transform: scaleX(0);
  pointer-events: none;
  will-change: transform;
  animation: progressGradient 3s linear infinite;
}

@keyframes progressGradient {
  0%   { background-position: 0% 50%; }
  100% { background-position: 200% 50%; }
}

/* ── 12. SECCIÓN RESIDUOS: partículas decorativas ── */
.fx-particles-host {
  position: absolute;
  inset: 0;
  overflow: hidden;
  pointer-events: none;
  z-index: 0;
}

.fx-particle {
  position: absolute;
  border-radius: 50%;
  opacity: 0;
  will-change: transform, opacity;
}

/* ── 13. COUNTER: números animados ── */
.fx-counter {
  display: inline-block;
  font-variant-numeric: tabular-nums;
  will-change: contents;
}

/* ── 14. STAGGER ITEMS ── */
.fx-stagger-child {
  will-change: transform, opacity;
}

/* ── Responsive ── */
@media (max-width: 900px) {
  .muni-banner-card .fx-parallax-media img {
    height: clamp(220px, 42vw, 320px);
  }
}

@media (max-width: 768px) {
  .botones-container.fx-3d-stage .boton { will-change: auto; }
  .hero-slider .slide-video { will-change: auto; }
  .fx-cursor-dot, .fx-cursor-ring { display: none; }
}

/* ── Accesibilidad ── */
@media (prefers-reduced-motion: reduce) {
  .fx-word-inner,
  .muni-banner-card .fx-parallax-media img,
  .botones-container.fx-3d-stage .boton,
  .hero-slider .slide-video,
  .fx-cursor-dot,
  .fx-cursor-ring,
  .fx-scroll-progress { will-change: auto; }

  .fx-scroll-progress { animation: none; }
}