/* ============================================================================
   ambient.css — Detalle atmosférico del sitio público (CHDCLM)
   ----------------------------------------------------------------------------
   · Capa de partículas (burbujas + destellos) dentro de los heros.
   · El arco-sonrisa de los separadores (.arc-divider) se "dibuja" al entrar
     en viewport.
   Todo es decorativo, no interactivo y respeta prefers-reduced-motion.
   El motor vive en js/ambient.js; aquí solo el apilado y los estilos.
   ============================================================================ */

/* ── Capa de partículas dentro del hero ──────────────────────────────────── */
.hero-frame,
.page-hero {
  position: relative;   /* ancla del canvas absoluto (ya suelen serlo) */
}

.hero-particles {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
  pointer-events: none;
  z-index: 0;                 /* detrás del contenido del hero */
  border-radius: inherit;     /* recorta las burbujas a la caja redondeada */
}

/* El contenido del hero queda por encima del canvas (solo apila; no cambia
   el aspecto). Cubrimos el hero del home y los heros interiores. */
.hero-frame > .hero,
.hero--asym > .hero__copy,
.hero--asym > .hero__media,
.page-hero > .container {
  position: relative;
  z-index: 1;
}

/* ── Separador arco-sonrisa: se "dibuja" al revelarse ─────────────────────── */
.arc-divider {
  position: relative;
  /* Se "dibuja" de izquierda a derecha al añadir .is-drawn.
     Usamos transform (no clip-path) porque IntersectionObserver SÍ tiene en
     cuenta clip-path: un arco recortado a 0 nunca se considera visible y el
     observer no llegaría a dispararse. transform lo ignora. */
  transform: scaleX(0);
  transform-origin: left center;
  opacity: 0;
  /* Retardo + duración mayor para que el "dibujado" se aprecie. */
  transition: transform 1s cubic-bezier(0.16, 1, 0.3, 1) 0.25s, opacity 0.5s ease 0.25s;
}
.arc-divider.is-drawn {
  transform: scaleX(1);
  opacity: 1;
}

/* Destello que aparece al terminar de "dibujarse" el arco, en el centro */
.arc-divider::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 14px;
  height: 14px;
  transform: translate(-50%, -50%) scale(0.4);
  opacity: 0;
  pointer-events: none;
  background:
    radial-gradient(circle, rgba(255,255,255,0.95) 0%, rgba(110,199,205,0.0) 60%),
    conic-gradient(from 0deg,
      transparent 0deg, rgba(110,199,205,0.0) 40deg,
      rgba(110,199,205,0.85) 45deg, rgba(110,199,205,0.0) 50deg,
      transparent 130deg, rgba(110,199,205,0.0) 175deg,
      rgba(110,199,205,0.85) 180deg, rgba(110,199,205,0.0) 185deg,
      transparent 310deg);
}
.arc-divider.is-drawn::after {
  animation: arcSparkle 1.1s ease-out 1.05s 1;   /* tras terminar el "dibujado" */
}
@keyframes arcSparkle {
  0%   { opacity: 0;   transform: translate(-50%, -50%) scale(0.3) rotate(0deg); }
  45%  { opacity: 1;   transform: translate(-50%, -50%) scale(1)   rotate(35deg); }
  100% { opacity: 0;   transform: translate(-50%, -50%) scale(0.6) rotate(70deg); }
}

/* ── CUERPO · arco-sonrisa bajo los encabezados de sección ───────────────── */
/* El motivo de arco ya existe en la marca pero era "opt-in"; aquí se aplica
   automáticamente a cada .section-head y se "dibuja" al entrar en viewport. */
.section-head { position: relative; }
.section-head::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: -20px;            /* en el hueco bajo el encabezado, sin descolocar nada */
  width: 116px;
  height: 14px;
  background: var(--arc-underline) left center / contain no-repeat;
  transform: scaleX(0);
  transform-origin: left center;
  opacity: 0;
  /* Retardo + duración mayor para que el "dibujado" se aprecie. */
  transition: transform 1s cubic-bezier(0.16, 1, 0.3, 1) 0.3s, opacity 0.5s ease 0.3s;
}
.section-head.head-center::after {
  left: 50%;
  margin-left: -58px;       /* mitad del ancho → centrado */
  transform-origin: center;
  background-position: center;
}
.section-head.is-inview::after { transform: scaleX(1); opacity: 1; }

/* ── CUERPO · brillo al pasar el ratón por las tarjetas ──────────────────── */
.card { position: relative; }
.card::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: linear-gradient(105deg, transparent 32%, rgba(255,255,255,0.50) 50%, transparent 68%);
  transform: translateX(-130%);
  opacity: 0;
  pointer-events: none;
  z-index: 3;
  transition: transform 0.7s ease, opacity 0.6s ease;
}
.card:hover::after { transform: translateX(130%); opacity: 1; }

/* Tarjetas de personas (Junta): leve elevación al pasar el ratón */
.person-card { transition: transform var(--transition), box-shadow var(--transition); }
.person-card:hover { transform: translateY(-4px); box-shadow: var(--shadow-lg); }

/* ── Accesibilidad: sin movimiento ───────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  .arc-divider {
    transform: none;
    opacity: 1;
    transition: none;
  }
  .arc-divider::after,
  .arc-divider.is-drawn::after {
    animation: none;
    opacity: 0;
  }
  .section-head::after { transform: scaleX(1); opacity: 1; transition: none; }
  .card::after { display: none; }
  .person-card { transition: none; }
  .person-card:hover { transform: none; }
  /* El canvas de partículas se neutraliza desde js (fotograma estático). */
}