/*
  Movimiento compartido de NazAleart.
  Esta capa solo mejora transiciones visuales; no cambia datos ni funciones.
*/

:root {
  --motion-ease: cubic-bezier(.22, 1, .36, 1);
  --motion-duration: 720ms;
}

/* Entrada de la portada */
html.motion-ready body:has(.navbar) .hero-slider-wrap#inicio .hero-badge,
html.motion-ready body:has(.navbar) .hero-slider-wrap#inicio .hero h1,
html.motion-ready body:has(.navbar) .hero-slider-wrap#inicio .hero p,
html.motion-ready body:has(.navbar) .hero-slider-wrap#inicio .hero-buttons,
html.motion-ready body:has(.navbar) .hero-slider-wrap#inicio .hero-trust {
  opacity: 0;
}

html.motion-running body:has(.navbar) .hero-slider-wrap#inicio .hero-badge {
  animation: motionFadeUp .58s var(--motion-ease) .05s both;
}

html.motion-running body:has(.navbar) .hero-slider-wrap#inicio .hero h1 {
  opacity: 1;
}

html.motion-running body:has(.navbar) .hero-slider-wrap#inicio .hero p {
  animation: motionFadeUp .68s var(--motion-ease) .48s both;
}

html.motion-running body:has(.navbar) .hero-slider-wrap#inicio .hero-buttons {
  animation: motionButtonIn .72s var(--motion-ease) .64s both !important;
}

html.motion-running body:has(.navbar) .hero-slider-wrap#inicio .hero-trust {
  animation: motionFadeUp .58s var(--motion-ease) .8s both;
}

.motion-char {
  display: inline-block;
  opacity: 0;
  transform: translateY(.38em);
  animation: motionLetterIn .38s var(--motion-ease) forwards;
  animation-delay: calc(45ms + (var(--char-index, 0) * 10ms));
}

.motion-word {
  display: inline-block;
  white-space: nowrap;
}

.motion-char-space {
  width: .25em;
}

html.motion-running body:has(.navbar) .hero-slider-wrap#inicio .slide.active img.slide-artwork {
  animation: motionHeroImageIn 1.2s var(--motion-ease) both !important;
}

html.motion-running body:has(.navbar) .hero-slider-wrap#inicio .slide.active img.slide-backdrop {
  animation: motionHeroBackdropIn 1.2s var(--motion-ease) both !important;
}

/* El logo entra como una pincelada breve, sin alterar el archivo de imagen. */
html.motion-running body:has(.navbar) .navbar .brand-logo img {
  animation: motionLogoPaint .86s var(--motion-ease) .08s both;
}

html.motion-running body:has(.navbar) .navbar .brand-text {
  animation: motionLogoText .72s var(--motion-ease) .18s both;
}

/* Revelado al desplazarse */
.motion-reveal {
  opacity: 0;
  transform: translate3d(0, 22px, 0);
  transition:
    opacity var(--motion-duration) var(--motion-ease),
    transform var(--motion-duration) var(--motion-ease);
  transition-delay: var(--motion-delay, 0ms);
}

.motion-reveal[data-motion="left"] {
  transform: translate3d(-24px, 0, 0);
}

.motion-reveal[data-motion="right"] {
  transform: translate3d(24px, 0, 0);
}

.motion-reveal[data-motion="zoom"] {
  transform: scale(.975);
}

.motion-reveal.is-visible {
  opacity: 1;
  transform: none;
}

/* Tarjetas con inclinacion y brillo solo cuando hay mouse preciso. */
@media (hover: hover) and (pointer: fine) {
  .motion-tilt {
    position: relative;
    isolation: isolate;
    transform:
      perspective(900px)
      rotateX(var(--motion-rx, 0deg))
      rotateY(var(--motion-ry, 0deg))
      scale(var(--motion-scale, 1));
    transform-style: preserve-3d;
    transition:
      transform 250ms var(--motion-ease),
      box-shadow 250ms ease,
      border-color 250ms ease;
    will-change: transform;
  }

  .motion-pointer-glow {
    position: absolute;
    inset: 0;
    z-index: 5;
    border-radius: inherit;
    pointer-events: none;
    opacity: 0;
    background: radial-gradient(
      circle at var(--motion-shine-x, 50%) var(--motion-shine-y, 50%),
      rgba(255, 255, 255, .34),
      transparent 42%
    );
    transition: opacity 220ms ease;
  }

  .motion-tilt:hover {
    --motion-scale: 1.012;
    border-color: color-mix(in srgb, var(--store-primary, var(--kc-admin-green, #e85d9b)) 38%, #ffffff) !important;
    box-shadow: 0 24px 56px color-mix(in srgb, var(--store-primary, var(--kc-admin-green, #e85d9b)) 14%, transparent) !important;
  }

  .motion-tilt:hover > .motion-pointer-glow {
    opacity: 1;
  }

  body:has(.navbar) #galeria .gallery-card img {
    transition: transform 320ms var(--motion-ease), filter 320ms ease !important;
  }

  body:has(.navbar) #galeria .gallery-card:hover img {
    transform: scale(1.075) !important;
    filter: saturate(1.04) contrast(1.02);
  }

  body:has(.navbar) #galeria .gallery-card-body {
    transition: transform 280ms var(--motion-ease), opacity 280ms ease;
  }

  body:has(.navbar) #galeria .gallery-card:hover .gallery-card-body {
    transform: translateY(-4px);
  }
}

/* WhatsApp respira una sola vez cada ocho segundos. */
body:has(.navbar) #contactWhatsappCard .whatsapp-logo-img,
body:has(.navbar) #contactWhatsappCard .cc-icon {
  transform-origin: center;
  animation: motionWhatsappBreath 8s ease-in-out infinite;
}

/* Panel: aparicion ordenada y numeros que se sienten vivos. */
body:has(.app-shell) .stat-tile,
body:has(.app-shell) .overview-card,
body:has(.app-shell) .category-group {
  transition:
    opacity .58s var(--motion-ease),
    transform .58s var(--motion-ease),
    box-shadow .22s ease,
    border-color .22s ease;
}

body:has(.app-shell) .motion-counting {
  color: var(--kc-admin-green, var(--rose, #e85d9b));
  font-variant-numeric: tabular-nums;
}

@keyframes motionFadeUp {
  from { opacity: 0; transform: translateY(18px); }
  to { opacity: 1; transform: translateY(0); }
}

@keyframes motionButtonIn {
  0% { opacity: 0; transform: translateY(18px) scale(.96); }
  72% { opacity: 1; transform: translateY(-3px) scale(1.012); }
  100% { opacity: 1; transform: translateY(0) scale(1); }
}

@keyframes motionLetterIn {
  to { opacity: 1; transform: translateY(0); }
}

@keyframes motionHeroImageIn {
  from { transform: scale(1.05); }
  to { transform: scale(1); }
}

@keyframes motionHeroBackdropIn {
  from { transform: scale(1.09); opacity: .72; }
  to { transform: scale(1.04); opacity: .9; }
}

@keyframes motionLogoPaint {
  from { opacity: 0; clip-path: inset(0 100% 0 0); transform: translateX(-5px); }
  to { opacity: 1; clip-path: inset(0 0 0 0); transform: translateX(0); }
}

@keyframes motionLogoText {
  from { opacity: 0; filter: blur(3px); transform: translateX(-6px); }
  to { opacity: 1; filter: blur(0); transform: translateX(0); }
}

@keyframes motionWhatsappBreath {
  0%, 5%, 100% { transform: scale(1); }
  2.5% { transform: scale(1.07); }
}

@media (max-width: 760px) {
  .motion-reveal,
  .motion-reveal[data-motion="left"],
  .motion-reveal[data-motion="right"] {
    transform: translate3d(0, 16px, 0);
  }

  html.motion-running body:has(.navbar) .hero-slider-wrap#inicio .hero-buttons {
    animation-delay: .54s !important;
  }
}

@media (max-width: 420px) {
  body:has(.navbar) .hero-slider-wrap#inicio .hero h1 {
    max-width: 100% !important;
    font-size: clamp(2.35rem, 10.4vw, 2.7rem) !important;
  }
}

@media (prefers-reduced-motion: reduce) {
  html.motion-ready body:has(.navbar) .hero-slider-wrap#inicio .hero-badge,
  html.motion-ready body:has(.navbar) .hero-slider-wrap#inicio .hero h1,
  html.motion-ready body:has(.navbar) .hero-slider-wrap#inicio .hero p,
  html.motion-ready body:has(.navbar) .hero-slider-wrap#inicio .hero-buttons,
  html.motion-ready body:has(.navbar) .hero-slider-wrap#inicio .hero-trust,
  .motion-char,
  .motion-reveal {
    opacity: 1 !important;
    transform: none !important;
  }

  *,
  *::before,
  *::after {
    scroll-behavior: auto !important;
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
  }
}