/* ==========================================================================
   XV Años de Aylin — Sistema de diseño "Rosé Lumière"
   ========================================================================== */

.material-symbols-outlined {
  font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 24;
}

/* Glassmorphism utility */
.glass-panel {
  background: rgba(255, 240, 238, 0.7);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border: 1px solid rgba(214, 194, 196, 0.3);
  box-shadow: 0 10px 40px rgba(137, 76, 89, 0.08);
}

/* Gold Gradient utility */
.text-gold-gradient {
  background: linear-gradient(to right, #e9c176, #fed488, #e9c176);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

/* Título Hero: degradado dorado animado con brillo en movimiento */
.shine-text {
  background: linear-gradient(100deg, #8a5a1f 0%, #d9a441 18%, #e9c176 32%, #fed488 50%, #e9c176 68%, #d9a441 82%, #8a5a1f 100%);
  background-size: 250% auto;
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
  animation: shineMove 6s linear infinite;
  filter: drop-shadow(0 2px 14px rgba(233, 193, 118, 0.5));
}

@keyframes shineMove {
  0%   { background-position: 0% 50%; }
  100% { background-position: 250% 50%; }
}

/* Scroll reveal animations */
.reveal {
  opacity: 0;
  transform: translateY(30px);
  transition: all 1s ease-out;
}

.reveal.active {
  opacity: 1;
  transform: translateY(0);
}

/* Polaroid effect */
.polaroid {
  background: #fff;
  padding: 12px 12px 40px 12px;
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.05);
  transition: transform 0.3s ease;
}

.polaroid:hover {
  transform: scale(1.03) rotate(0deg) !important;
  z-index: 10;
}

/* Floating emblem animation */
@keyframes float {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(-16px); }
}

.animate-float {
  animation: float 6s ease-in-out infinite;
}

/* Mariposas ambientales sobre la Galería y las tarjetas (ver js/card-butterflies.js) */
.card-butterflies-host {
  position: relative;
  isolation: isolate;
  overflow: hidden;
}

.card-butterflies-layer {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  transform: translateZ(0);
}

.card-butterflies-layer--back {
  z-index: -1;
}

.card-butterflies-layer--front {
  z-index: 5;
}

/* Mapa embebido en tonos rosados, a tono con la paleta del sitio
   (Google Maps sin API key no permite un estilo personalizado real,
   así que se logra con un filtro de color sobre el iframe). */
.map-rose-tint {
  filter: grayscale(0.2) sepia(0.75) hue-rotate(300deg) saturate(5) brightness(0.9) contrast(1.2);
}

/* Rosas decorativas en las esquinas */
.corner-rose {
  position: fixed;
  z-index: 1;
  pointer-events: none;
  opacity: 0.5;
  width: clamp(110px, 16vw, 200px);
  height: clamp(110px, 16vw, 200px);
}

.corner-rose img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.corner-rose--tl {
  top: 0;
  left: 0;
  -webkit-mask-image: radial-gradient(circle at top left, black 0%, transparent 72%);
  mask-image: radial-gradient(circle at top left, black 0%, transparent 72%);
}

.corner-rose--tr {
  top: 0;
  right: 0;
  -webkit-mask-image: radial-gradient(circle at top right, black 0%, transparent 72%);
  mask-image: radial-gradient(circle at top right, black 0%, transparent 72%);
}

.corner-rose--bl {
  bottom: 0;
  left: 0;
  -webkit-mask-image: radial-gradient(circle at bottom left, black 0%, transparent 72%);
  mask-image: radial-gradient(circle at bottom left, black 0%, transparent 72%);
}

.corner-rose--br {
  bottom: 0;
  right: 0;
  -webkit-mask-image: radial-gradient(circle at bottom right, black 0%, transparent 72%);
  mask-image: radial-gradient(circle at bottom right, black 0%, transparent 72%);
}

@media (max-width: 640px) {
  .corner-rose {
    opacity: 0.35;
  }
}

/* Back to top visibility */
.back-to-top {
  opacity: 0;
  visibility: hidden;
  transform: translateY(10px);
  transition: all 0.3s ease;
}

.back-to-top.visible {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}

.back-to-top:hover {
  transform: translateY(-4px);
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
    scroll-behavior: auto !important;
  }
}