/* ==========================================================
   Perla Dental · motion.css
   Tesis: "la sonrisa se enfoca". La web emerge como una perla que sale
   de su concha: suave, luminosa, sin rebotes.

   Reglas del sistema
   - Todas las entradas son animaciones con fill-mode "backwards": el estado
     final es el estado natural y no pelean con los hover de styles.css.
   - El contenido es visible por defecto. Solo se oculta lo que motion.js
     marca (data-rv) o, en el hero, mientras falta la clase .is-ready
     (que además se añade sola a los 3,5 s por si falla el script).
   - Todo se apoya en transform, opacity, clip-path y filter acotado.
   - "Reducir movimiento": solo fundidos suaves, sin desplazamientos.
   ========================================================== */

/* ---------- Scroll suave (Lenis) ---------- */
html.lenis,
html.lenis body {
  height: auto;
}

/* Con Lenis activo, el suavizado nativo se apaga: dos suavizados superpuestos se estorban */
html.lenis {
  scroll-behavior: auto !important;
}

.lenis [data-lenis-prevent] {
  overscroll-behavior: contain;
}

.lenis.lenis-stopped {
  overflow: hidden;
}

/* ---------- Máscaras de título (cada línea sube desde su "ranura") ---------- */
.mask {
  display: block;
  overflow: hidden;
  /* margen de seguridad para que no se corten los trazos descendentes (p, g, y) */
  padding-bottom: 0.14em;
  margin-bottom: -0.14em;
}

.mask__in {
  display: block;
}

/* ---------- Keyframes ---------- */
@keyframes rise-mask {
  from {
    translate: 0 105%;
  }
}

@keyframes rise-soft {
  from {
    opacity: 0;
    translate: 0 1.5rem;
  }
}

@keyframes drop-in {
  from {
    opacity: 0;
    translate: 0 -1rem;
  }
}

@keyframes appear {
  from {
    opacity: 0;
  }
}

/* la foto "se enfoca": de borrosa y ligeramente ampliada a nítida */
@keyframes focus-in {
  from {
    filter: blur(1.25rem) saturate(0.85);
    scale: 1.12;
  }
}

@keyframes curtain-l {
  from {
    clip-path: inset(0 100% 0 0 round var(--r-md));
  }
  to {
    clip-path: inset(0 0 0 0 round var(--r-md));
  }
}

@keyframes curtain-r {
  from {
    clip-path: inset(0 0 0 100% round var(--r-md));
  }
  to {
    clip-path: inset(0 0 0 0 round var(--r-md));
  }
}

@keyframes curtain-b {
  from {
    clip-path: inset(100% 0 0 0 round var(--r-md));
  }
  to {
    clip-path: inset(0 0 0 0 round var(--r-md));
  }
}

@keyframes wipe {
  from {
    clip-path: inset(0 100% 0 0);
  }
  to {
    clip-path: inset(0 0 0 0);
  }
}

@keyframes settle {
  from {
    transform: scale(1.18);
  }
}

@keyframes pop-in {
  from {
    opacity: 0;
    transform: scale(0.55) rotate(-22deg);
  }
  to {
    opacity: 1;
    transform: scale(1) rotate(9deg);
  }
}

@keyframes float {
  50% {
    translate: 0 -0.55rem;
  }
}

@keyframes wiggle {
  30% {
    rotate: -14deg;
  }
  60% {
    rotate: 8deg;
  }
  100% {
    rotate: 0deg;
  }
}

@keyframes ring {
  from {
    opacity: 0.55;
    scale: 1;
  }
  to {
    opacity: 0;
    scale: 1.45;
  }
}

@keyframes burst {
  from {
    opacity: 1;
    translate: 0 0;
    scale: 1;
  }
  to {
    opacity: 0;
    translate: var(--dx) var(--dy);
    scale: 0.35;
  }
}

/* ==========================================================
   ENTRADAS (con movimiento)
   ========================================================== */
@media (prefers-reduced-motion: no-preference) {
  /* ----- Momento estrella: carga del hero ----- */
  .js:not(.is-ready) .header,
  .js:not(.is-ready) .hero__media,
  .js:not(.is-ready) .hero__actions,
  .js:not(.is-ready) .hero__card,
  .js:not(.is-ready) .chat__toggle {
    opacity: 0;
  }

  .js:not(.is-ready) .hero__title .mask__in {
    translate: 0 105%;
  }

  .js.is-ready .header {
    animation: drop-in 0.9s var(--ease-out) backwards;
  }

  .js.is-ready .hero__media {
    animation: appear 0.9s ease-out backwards;
  }

  .js.is-ready .hero__photo {
    animation: focus-in 2.4s var(--ease-out) backwards;
  }

  .js.is-ready .hero__title > span:nth-child(1) .mask__in {
    animation: rise-mask 1.15s var(--ease-out) 0.4s backwards;
  }

  .js.is-ready .hero__title > span:nth-child(2) .mask__in {
    animation: rise-mask 1.15s var(--ease-out) 0.52s backwards;
  }

  .js.is-ready .hero__title > span:nth-child(3) .mask__in {
    animation: rise-mask 1.15s var(--ease-out) 0.64s backwards;
  }

  .js.is-ready .hero__actions {
    animation: rise-soft 1s var(--ease-out) 0.95s backwards;
  }

  .js.is-ready .hero__card {
    animation: rise-soft 1s var(--ease-out) 1.1s backwards;
  }

  .js.is-ready .chat__toggle {
    animation: rise-soft 0.9s var(--ease-out) 2s backwards;
  }

  /* ----- Entradas al hacer scroll (las marca motion.js con data-rv) ----- */
  .js [data-rv]:not(.is-in) {
    opacity: 0;
  }

  /* títulos: el contenedor es visible, las líneas esperan tras su máscara */
  .js [data-rv="title"]:not(.is-in) {
    opacity: 1;
  }

  .js [data-rv="title"]:not(.is-in) .mask__in {
    translate: 0 105%;
  }

  .js [data-rv="title"].is-in .mask__in {
    animation: rise-mask 1.05s var(--ease-out) backwards;
  }

  .js [data-rv="title"].is-in > span:nth-child(2) .mask__in {
    animation-delay: 0.12s;
  }

  /* textos sueltos */
  .js [data-rv="fade"].is-in {
    animation: rise-soft 0.95s var(--ease-out) 0.15s backwards;
  }

  /* listas que aparecen como lista: cascada corta (el retardo lo fija motion.js con --i) */
  .js [data-rv="stagger"]:not(.is-in) {
    opacity: 1;
  }

  .js [data-rv="stagger"]:not(.is-in) > * {
    opacity: 0;
  }

  .js [data-rv="stagger"].is-in > * {
    animation: rise-soft 0.95s var(--ease-out) backwards;
    animation-delay: calc(var(--i, 0) * 90ms);
  }

  /* fotos: cortina que se abre + la imagen se asienta desde un zoom */
  .js [data-rv="curtain-l"].is-in {
    animation: curtain-l 1.25s var(--ease-out) backwards;
  }

  .js [data-rv="curtain-r"].is-in {
    animation: curtain-r 1.25s var(--ease-out) backwards;
  }

  .js [data-rv="curtain-b"].is-in {
    animation: curtain-b 1.25s var(--ease-out) backwards;
  }

  .js [data-rv^="curtain"].is-in img {
    animation: settle 1.8s var(--ease-out) backwards;
  }

  /* mascota: aparece girando y luego flota (se pausa fuera de pantalla) */
  .js [data-rv="pop"].is-in {
    animation:
      pop-in 1.3s var(--ease-out) 0.2s backwards,
      float 6s ease-in-out 1.6s infinite;
  }

  .js [data-rv="pop"]:not(.is-visible) {
    animation-play-state: paused, paused;
  }

  /* nombre gigante del footer: se descubre de izquierda a derecha */
  .js [data-rv="wipe"].is-in {
    animation: wipe 1.6s var(--ease-out) backwards;
  }

  /* ----- Acordeón: al abrirse un panel, su contenido entra en orden ----- */
  .svc__item.is-active .svc__checks li {
    animation: rise-soft 0.7s var(--ease-out) backwards;
  }

  .svc__item.is-active .svc__checks li:nth-child(1) {
    animation-delay: 0.3s;
  }

  .svc__item.is-active .svc__checks li:nth-child(2) {
    animation-delay: 0.37s;
  }

  .svc__item.is-active .svc__checks li:nth-child(3) {
    animation-delay: 0.44s;
  }

  .svc__item.is-active .svc__checks li:nth-child(4) {
    animation-delay: 0.51s;
  }

  .svc__item.is-active .svc__icon-wrap .icon {
    animation: wiggle 0.9s var(--ease-out) 0.15s;
  }
}

/* ==========================================================
   ENTRADAS (reducir movimiento): solo fundidos, sin desplazamientos
   ========================================================== */
@media (prefers-reduced-motion: reduce) {
  .js [data-rv]:not(.is-in) {
    opacity: 0;
  }

  .js [data-rv="stagger"]:not(.is-in) {
    opacity: 1;
  }

  .js [data-rv="stagger"]:not(.is-in) > * {
    opacity: 0;
  }

  .js [data-rv].is-in,
  .js [data-rv="stagger"].is-in > * {
    animation: appear 0.5s ease-out backwards;
  }
}

/* ==========================================================
   MICRO-INTERACCIONES
   ========================================================== */

/* ----- Barra de progreso de lectura, en el borde inferior de la cabecera ----- */
.header::after {
  content: "";
  position: absolute;
  inset: auto 0 0 0;
  height: 0.1875rem;
  background: linear-gradient(90deg, var(--blue-500), var(--orange-600));
  transform: scaleX(var(--progress, 0));
  transform-origin: left;
  pointer-events: none;
}

/* ----- Logo: el diente se inclina al pasar ----- */
.logo__mark {
  transition:
    rotate 0.6s var(--ease-out),
    scale 0.6s var(--ease-out);
}

.logo:hover .logo__mark {
  rotate: -14deg;
  scale: 1.12;
}

/* ----- Menú: una perla marca la sección (sustituye al subrayado) ----- */
.nav__list a {
  position: relative;
}

.nav__list a::after {
  content: "";
  position: absolute;
  left: 50%;
  bottom: -0.1rem;
  width: 0.45rem;
  height: 0.45rem;
  border-radius: 50%;
  background: radial-gradient(circle at 34% 30%, #fff 0 16%, var(--sky-200) 46%, var(--blue-600) 100%);
  box-shadow: 0 0.1rem 0.25rem rgba(10, 111, 232, 0.4);
  opacity: 0;
  scale: 0;
  translate: -50% 0.35rem;
  transition:
    opacity 0.3s var(--ease),
    scale 0.5s var(--ease-out),
    translate 0.5s var(--ease-out);
}

.nav__list a:hover::after,
.nav__list a[aria-current="location"]::after {
  opacity: 1;
  scale: 1;
  translate: -50% 0;
}

.nav__list a[aria-current="location"]::after {
  background: radial-gradient(circle at 34% 30%, #fff 0 16%, #ffd3b8 46%, var(--orange-600) 100%);
  box-shadow: 0 0.1rem 0.25rem rgba(194, 65, 12, 0.4);
}

@media (max-width: 56em) {
  /* en el menú desplegable la perla va a la izquierda del texto */
  .nav__list a {
    padding-left: 1.5rem;
  }

  .nav__list a::after {
    left: 0.35rem;
    bottom: auto;
    top: 50%;
    translate: -0.5rem -50%;
  }

  .nav__list a:hover::after,
  .nav__list a[aria-current="location"]::after {
    translate: 0 -50%;
  }
}

/* ----- Botones: la flecha se intercambia, ligera atracción magnética y pulsación ----- */
.btn {
  translate: var(--mx, 0rem) var(--my, 0rem);
  transition:
    background-color 0.2s var(--ease),
    translate 0.35s var(--ease-out),
    scale 0.2s var(--ease);
}

.btn:active {
  scale: 0.97;
}

/* la segunda flecha (la crea motion.js) espera abajo a la izquierda */
.btn__icon svg:nth-child(2) {
  position: absolute;
  inset: 0;
  margin: auto;
  translate: -170% 170%;
}

.btn:hover .btn__icon svg:nth-child(1) {
  translate: 170% -170%;
}

.btn:hover .btn__icon svg:nth-child(2) {
  translate: 0 0;
}

/* ----- Flechas redondas de los carruseles ----- */
.round-btn svg {
  transition: translate 0.35s var(--ease-out);
}

.round-btn:hover svg {
  translate: 0.25rem 0;
}

.round-btn[data-svc-dir="-1"]:hover svg,
.round-btn[data-team-dir="-1"]:hover svg {
  translate: -0.25rem 0;
}

/* ----- Formulario: el campo activo se enciende ----- */
.field label {
  transition: color 0.25s var(--ease);
}

.field:focus-within label {
  color: var(--blue-700);
}

.field input {
  transition:
    border-color 0.25s var(--ease),
    box-shadow 0.4s var(--ease-out),
    background-color 0.25s var(--ease);
}

.field input:focus-visible {
  background-color: var(--white);
  box-shadow: 0 0 0 0.3rem rgba(10, 111, 232, 0.16);
}

/* ----- Chat: pulsa suave dos veces para llamar la atención y reacciona al tacto ----- */
.chat__toggle {
  position: relative;
  transition:
    background-color 0.2s var(--ease),
    scale 0.3s var(--ease-out);
}

.chat__toggle:hover {
  scale: 1.04;
}

.chat__toggle:active {
  scale: 0.97;
}

.chat__toggle svg {
  transition: rotate 0.5s var(--ease-out);
}

.chat__toggle:hover svg {
  rotate: -12deg;
}

@media (prefers-reduced-motion: no-preference) {
  .chat__toggle::after {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: inherit;
    border: 0.125rem solid var(--orange-600);
    opacity: 0;
    pointer-events: none;
    animation: ring 1.8s var(--ease-out) 6s 2;
  }
}

/* ----- Ráfaga de perlas al enviar la cita (la dispara motion.js) ----- */
.burst {
  position: fixed;
  z-index: 130;
  width: 0;
  height: 0;
  pointer-events: none;
}

.burst__p {
  position: absolute;
  left: -0.5rem;
  top: -0.5rem;
  width: 1rem;
  height: 1rem;
  border-radius: 50%;
  background: radial-gradient(circle at 34% 30%, #fff 0 16%, var(--sky-200) 44%, var(--blue-600) 100%);
  box-shadow: 0 0.15rem 0.5rem rgba(10, 111, 232, 0.5);
  animation: burst 1.1s var(--ease-out) forwards;
}

.burst__p:nth-child(3n) {
  background: radial-gradient(circle at 34% 30%, #fff 0 16%, #ffd3b8 44%, var(--orange-600) 100%);
  box-shadow: 0 0.15rem 0.5rem rgba(194, 65, 12, 0.45);
}

.burst__p:nth-child(4n) {
  width: 0.65rem;
  height: 0.65rem;
  left: -0.325rem;
  top: -0.325rem;
}