/* =========================================================
   Mizunara Studio
   Experience Engine
   Version 1.0
========================================================= */


/*=========================================================
  ACTIVE SECTION
=========================================================*/

.ms-section-active {
  position: relative;
}

/*=========================================================
  MICRO INTERACTIONS
=========================================================*/

.ms-pressed {
  transform: scale(0.97);

  transition: transform 0.15s ease;
}

/*=========================================================
  BUTTON HOVER
=========================================================*/

.ms-btn {
  transition:
    transform 0.35s,
    box-shadow 0.35s,
    background 0.35s;
}

.ms-btn:hover {
  transform: translateY(-4px);
}

.ms-btn:active {
  transform: scale(0.97);
}

/*=========================================================
  CARD HOVER
=========================================================*/

.ms-card,
.ms-event-card,
.ms-gallery-item,
.ms-rsvp-card,
.ms-map-card,
.ms-timeline-card {
  transition:
    transform 0.4s,
    box-shadow 0.4s;
}

.ms-card:hover,
.ms-event-card:hover,
.ms-gallery-item:hover,
.ms-rsvp-card:hover,
.ms-map-card:hover,
.ms-timeline-card:hover {
  transform: translateY(-8px);

  box-shadow: 0 25px 70px rgba(0, 0, 0, 0.18);
}

/*=========================================================
  IMAGE PARALLAX
=========================================================*/

.ms-gallery-item img,
.ms-lightbox-image {
  transition: transform 0.6s ease;
}

.ms-gallery-item:hover img {
  transform: scale(1.08);
}

/*=========================================================
  ICON ANIMATION
=========================================================*/

.ms-event-icon,
.ms-timeline-icon {
  transition:
    transform 0.35s,
    background 0.35s;
}

.ms-event-card:hover .ms-event-icon,
.ms-timeline-card:hover .ms-timeline-icon {
  transform: rotate(-8deg) scale(1.1);
}

/*=========================================================
  FLOATING
=========================================================*/

@keyframes msFloating {
  0% {
    transform: translateY(0px);
  }

  50% {
    transform: translateY(-8px);
  }

  100% {
    transform: translateY(0px);
  }
}

.ms-floating {
  animation: msFloating 5s ease-in-out infinite;
}

/*=========================================================
  SOFT GLOW
=========================================================*/

@keyframes msGlow {
  0% {
    box-shadow: 0 0 0 rgba(200, 164, 107, 0.15);
  }

  50% {
    box-shadow: 0 0 25px rgba(200, 164, 107, 0.35);
  }

  100% {
    box-shadow: 0 0 0 rgba(200, 164, 107, 0.15);
  }
}

.ms-glow {
  animation: msGlow 4s ease infinite;
}

/*=========================================================
  SCROLLBAR
=========================================================*/

::-webkit-scrollbar {
  width: 10px;
}

::-webkit-scrollbar-track {
  background: transparent;
}

::-webkit-scrollbar-thumb {
  background: rgba(200, 164, 107, 0.35);

  border-radius: 999px;
}

::-webkit-scrollbar-thumb:hover {
  background: rgba(200, 164, 107, 0.55);
}

/*=========================================================
  REDUCED MOTION
=========================================================*/

@media (prefers-reduced-motion: reduce) {
  * {
    animation: none !important;

    transition: none !important;

    scroll-behavior: auto !important;
  }
}

/* Fix: no aplicar reveal global a módulos con animaciones propias */

.ms-music,
.ms-music.ms-component,
.ms-gallery,
.ms-timeline {
  opacity: 1 !important;
  transform: none !important;
  filter: none !important;
}

/* Fix: botón música siempre flotante */

.ms-music {
  position: fixed !important;
  right: 24px !important;
  bottom: 24px !important;
  z-index: 9999 !important;
}