/*------------------------------------------------------------------
  Alice in Wonderland - Animated Elements
  Cartas cayendo, brillos, pétalos, relojes, mariposas
------------------------------------------------------------------*/

/* ══════════════════════════════════════
   Container general de partículas
   ══════════════════════════════════════ */
.wonderland-particles {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  overflow: hidden;
  pointer-events: none;
  z-index: 3;
}

/* ══════════════════════════════════════
   1. CARTAS CAYENDO (Playing Cards)
   ══════════════════════════════════════ */
.falling-card {
  position: absolute;
  top: -80px;
  font-size: 38px;
  opacity: 0;
  animation: fallAndSpin linear infinite;
  pointer-events: none;
  filter: drop-shadow(0 2px 6px rgba(0,0,0,0.2));
  color: var(--wonderland-gold, #c5a55a);
  font-family: 'Segoe UI Symbol', 'Apple Symbols', serif;
  -webkit-text-stroke: 0;
  text-rendering: geometricPrecision;
}

.falling-card::before {
  display: block;
}

/* Cartas individuales con distintos delays y posiciones */
.falling-card:nth-child(1) { left: 5%;  animation-duration: 8s;  animation-delay: 0s;   font-size: 34px; }
.falling-card:nth-child(2) { left: 15%; animation-duration: 10s; animation-delay: 2s;   font-size: 28px; }
.falling-card:nth-child(3) { left: 25%; animation-duration: 12s; animation-delay: 4s;   font-size: 38px; }
.falling-card:nth-child(4) { left: 40%; animation-duration: 9s;  animation-delay: 1s;   font-size: 30px; }
.falling-card:nth-child(5) { left: 55%; animation-duration: 11s; animation-delay: 3s;   font-size: 32px; }
.falling-card:nth-child(6) { left: 70%; animation-duration: 8.5s; animation-delay: 5s;  font-size: 26px; }
.falling-card:nth-child(7) { left: 85%; animation-duration: 10.5s; animation-delay: 1.5s; font-size: 36px; }
.falling-card:nth-child(8) { left: 92%; animation-duration: 9.5s; animation-delay: 6s;  font-size: 28px; }

@keyframes fallAndSpin {
  0% {
    transform: translateY(0) rotate(0deg) scale(0.8);
    opacity: 0;
  }
  5% {
    opacity: 0.85;
  }
  50% {
    opacity: 0.7;
  }
  95% {
    opacity: 0.3;
  }
  100% {
    transform: translateY(calc(100vh + 80px)) rotate(720deg) scale(0.5);
    opacity: 0;
  }
}

/* ══════════════════════════════════════
   2. BRILLOS / SPARKLES
   ══════════════════════════════════════ */
.sparkle {
  position: absolute;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: radial-gradient(circle, #dbc88e 0%, rgba(219,200,142,0.4) 50%, transparent 70%);
  animation: sparkleFloat ease-in-out infinite;
  pointer-events: none;
  opacity: 0;
}

.sparkle:nth-child(1)  { left: 8%;  top: 20%; animation-duration: 3s;   animation-delay: 0s;   width: 5px; height: 5px; }
.sparkle:nth-child(2)  { left: 20%; top: 40%; animation-duration: 4s;   animation-delay: 0.5s; width: 4px; height: 4px; }
.sparkle:nth-child(3)  { left: 35%; top: 15%; animation-duration: 3.5s; animation-delay: 1s;   width: 6px; height: 6px; }
.sparkle:nth-child(4)  { left: 50%; top: 60%; animation-duration: 4.5s; animation-delay: 1.5s; width: 3px; height: 3px; }
.sparkle:nth-child(5)  { left: 65%; top: 30%; animation-duration: 3.8s; animation-delay: 2s;   width: 5px; height: 5px; }
.sparkle:nth-child(6)  { left: 78%; top: 50%; animation-duration: 3.2s; animation-delay: 0.8s; width: 4px; height: 4px; }
.sparkle:nth-child(7)  { left: 90%; top: 25%; animation-duration: 4.2s; animation-delay: 2.5s; width: 6px; height: 6px; }
.sparkle:nth-child(8)  { left: 45%; top: 70%; animation-duration: 3.6s; animation-delay: 3s;   width: 3px; height: 3px; }
.sparkle:nth-child(9)  { left: 12%; top: 55%; animation-duration: 4.8s; animation-delay: 1.2s; width: 5px; height: 5px; }
.sparkle:nth-child(10) { left: 82%; top: 65%; animation-duration: 3.4s; animation-delay: 0.3s; width: 4px; height: 4px; }

/* Brillos con forma de estrella (+) */
.sparkle.star {
  background: none;
  width: auto;
  height: auto;
}
.sparkle.star::before {
  content: "\2726";
  color: #dbc88e;
  font-size: 20px;
  text-shadow: 0 0 6px rgba(219,200,142,0.5);
}

@keyframes sparkleFloat {
  0%, 100% {
    transform: translateY(0) scale(0.5);
    opacity: 0;
  }
  25% {
    opacity: 1;
    transform: translateY(-15px) scale(1.3);
  }
  50% {
    opacity: 0.6;
    transform: translateY(-30px) scale(0.9);
  }
  75% {
    opacity: 1;
    transform: translateY(-10px) scale(1.4);
  }
}

/* ══════════════════════════════════════
   3. PÉTALOS DE ROSA CAYENDO
   ══════════════════════════════════════ */
.petal {
  position: absolute;
  top: -30px;
  width: 16px;
  height: 20px;
  background: var(--wonderland-rose, #e8b4c8);
  border-radius: 50% 0 50% 50%;
  opacity: 0;
  animation: petalFall linear infinite;
  pointer-events: none;
  filter: drop-shadow(0 2px 4px rgba(0,0,0,0.12));
}

.petal:nth-child(1)  { left: 3%;  animation-duration: 9s;  animation-delay: 0s;   width: 10px; height: 14px; background: #e8b4c8; }
.petal:nth-child(2)  { left: 12%; animation-duration: 11s; animation-delay: 2s;   width: 8px;  height: 11px; background: #f0c8d8; }
.petal:nth-child(3)  { left: 22%; animation-duration: 10s; animation-delay: 4s;   width: 12px; height: 16px; background: #e8b4c8; }
.petal:nth-child(4)  { left: 33%; animation-duration: 12s; animation-delay: 1s;   width: 9px;  height: 12px; background: #dda8be; }
.petal:nth-child(5)  { left: 48%; animation-duration: 9.5s; animation-delay: 3s;  width: 11px; height: 15px; background: #f0c8d8; }
.petal:nth-child(6)  { left: 58%; animation-duration: 11.5s; animation-delay: 5s; width: 7px;  height: 10px; background: #e8b4c8; }
.petal:nth-child(7)  { left: 68%; animation-duration: 10.5s; animation-delay: 2.5s; width: 10px; height: 13px; background: #f5d5e3; }
.petal:nth-child(8)  { left: 78%; animation-duration: 8.5s; animation-delay: 6s;  width: 8px;  height: 11px; background: #dda8be; }
.petal:nth-child(9)  { left: 88%; animation-duration: 12.5s; animation-delay: 1.5s; width: 12px; height: 16px; background: #e8b4c8; }
.petal:nth-child(10) { left: 95%; animation-duration: 10s; animation-delay: 4.5s; width: 9px;  height: 12px; background: #f0c8d8; }

@keyframes petalFall {
  0% {
    transform: translateY(0) rotate(0deg) translateX(0);
    opacity: 0;
  }
  5% {
    opacity: 0.9;
  }
  25% {
    transform: translateY(25vh) rotate(90deg) translateX(30px);
    opacity: 0.8;
  }
  50% {
    transform: translateY(50vh) rotate(180deg) translateX(-20px);
    opacity: 0.7;
  }
  75% {
    transform: translateY(75vh) rotate(270deg) translateX(25px);
    opacity: 0.5;
  }
  100% {
    transform: translateY(105vh) rotate(360deg) translateX(-10px);
    opacity: 0;
  }
}

/* ══════════════════════════════════════
   4. RELOJ FLOTANTE (Pocket Watch)
   ══════════════════════════════════════ */
.floating-clock {
  position: absolute;
  font-size: 42px;
  opacity: 0.55;
  animation: clockFloat 6s ease-in-out infinite;
  pointer-events: none;
  z-index: 1;
  filter: drop-shadow(0 3px 8px rgba(0,0,0,0.2));
}

.floating-clock::before {
  content: "\1F570"; /* clock emoji - mantle clock */
  display: block;
}

/* Fallback con icono CSS si el emoji no se ve bien */
.floating-clock.css-clock::before {
  content: "";
  display: block;
  width: 40px;
  height: 40px;
  border: 3px solid var(--wonderland-gold, #c5a55a);
  border-radius: 50%;
  position: relative;
}

.floating-clock.css-clock::after {
  content: "";
  display: block;
  position: absolute;
  top: 50%;
  left: 50%;
  width: 2px;
  height: 14px;
  background: var(--wonderland-gold, #c5a55a);
  transform-origin: bottom center;
  animation: clockHand 4s linear infinite;
}

@keyframes clockFloat {
  0%, 100% {
    transform: translateY(0) rotate(-5deg);
    opacity: 0.5;
  }
  50% {
    transform: translateY(-20px) rotate(5deg);
    opacity: 0.75;
  }
}

@keyframes clockHand {
  from { transform: translate(-50%, -100%) rotate(0deg); }
  to   { transform: translate(-50%, -100%) rotate(360deg); }
}

/* ══════════════════════════════════════
   5. MARIPOSAS VOLANDO
   ══════════════════════════════════════ */
.butterfly {
  position: absolute;
  pointer-events: none;
  opacity: 0;
  animation: butterflyPath ease-in-out infinite;
  z-index: 2;
}

.butterfly .wing-left,
.butterfly .wing-right {
  position: absolute;
  width: 18px;
  height: 26px;
  border-radius: 50% 50% 10% 50%;
  top: 0;
}

.butterfly .wing-left {
  background: linear-gradient(135deg, var(--wonderland-blue, #9ec5d6), rgba(158, 197, 214, 0.4));
  left: 0;
  transform-origin: right center;
  animation: flapLeft 0.3s ease-in-out infinite alternate;
}

.butterfly .wing-right {
  background: linear-gradient(225deg, var(--wonderland-rose, #e8b4c8), rgba(232, 180, 200, 0.4));
  left: 18px;
  border-radius: 50% 50% 50% 10%;
  transform-origin: left center;
  animation: flapRight 0.3s ease-in-out infinite alternate;
}

.butterfly .body-b {
  position: absolute;
  width: 3px;
  height: 16px;
  background: var(--wonderland-gold, #c5a55a);
  left: 16.5px;
  top: 2px;
  border-radius: 2px;
}

/* Variantes de mariposas */
.butterfly:nth-child(1) { left: 10%; top: 30%; animation-duration: 12s; animation-delay: 0s; }
.butterfly:nth-child(2) { left: 70%; top: 20%; animation-duration: 15s; animation-delay: 3s; }
.butterfly:nth-child(3) { left: 40%; top: 50%; animation-duration: 13s; animation-delay: 6s; }
.butterfly:nth-child(4) { left: 85%; top: 40%; animation-duration: 14s; animation-delay: 2s; }

.butterfly:nth-child(2) .wing-left,
.butterfly:nth-child(4) .wing-left {
  background: linear-gradient(135deg, var(--wonderland-rose, #e8b4c8), rgba(232, 180, 200, 0.3));
}

.butterfly:nth-child(2) .wing-right,
.butterfly:nth-child(4) .wing-right {
  background: linear-gradient(225deg, var(--wonderland-blue, #9ec5d6), rgba(158, 197, 214, 0.3));
}

@keyframes flapLeft {
  0%   { transform: rotateY(0deg); }
  100% { transform: rotateY(60deg); }
}

@keyframes flapRight {
  0%   { transform: rotateY(0deg); }
  100% { transform: rotateY(-60deg); }
}

@keyframes butterflyPath {
  0% {
    transform: translate(0, 0) rotate(0deg) scale(0.7);
    opacity: 0;
  }
  10% {
    opacity: 0.85;
  }
  25% {
    transform: translate(60px, -40px) rotate(10deg) scale(1);
    opacity: 0.9;
  }
  50% {
    transform: translate(-30px, -80px) rotate(-5deg) scale(1.1);
    opacity: 0.8;
  }
  75% {
    transform: translate(80px, -30px) rotate(8deg) scale(1);
    opacity: 0.7;
  }
  90% {
    opacity: 0.4;
  }
  100% {
    transform: translate(120px, -100px) rotate(0deg) scale(0.8);
    opacity: 0;
  }
}

/* ══════════════════════════════════════
   6. LLAVES DORADAS FLOTANTES
   ══════════════════════════════════════ */
.floating-key {
  position: absolute;
  pointer-events: none;
  opacity: 0;
  animation: keyFloat ease-in-out infinite;
  z-index: 1;
  color: var(--wonderland-gold, #c5a55a);
  filter: drop-shadow(0 2px 4px rgba(0,0,0,0.15));
}

.floating-key::before {
  content: "\1F511"; /* key emoji */
  font-size: 30px;
}

.floating-key:nth-child(1) { right: 8%;  top: 25%; animation-duration: 7s;  animation-delay: 0s; }
.floating-key:nth-child(2) { left: 5%;   top: 60%; animation-duration: 9s;  animation-delay: 3s; font-size: 18px; }
.floating-key:nth-child(3) { right: 15%; top: 70%; animation-duration: 8s;  animation-delay: 5s; }

@keyframes keyFloat {
  0%, 100% {
    transform: translateY(0) rotate(-10deg);
    opacity: 0;
  }
  15% {
    opacity: 0.65;
  }
  50% {
    transform: translateY(-25px) rotate(15deg);
    opacity: 0.8;
  }
  85% {
    opacity: 0.55;
  }
}

/* ══════════════════════════════════════
   7. TAZAS DE TÉ (Tea Party)
   ══════════════════════════════════════ */
.floating-teacup {
  position: absolute;
  pointer-events: none;
  opacity: 0;
  animation: teacupBob ease-in-out infinite;
  z-index: 1;
  filter: drop-shadow(0 2px 4px rgba(0,0,0,0.1));
}

.floating-teacup::before {
  content: "\2615"; /* hot beverage */
  font-size: 34px;
}

.floating-teacup:nth-child(1) { left: 6%;  bottom: 30%; animation-duration: 5s; animation-delay: 0s; }
.floating-teacup:nth-child(2) { right: 10%; bottom: 20%; animation-duration: 6s; animation-delay: 2s; font-size: 22px; }

@keyframes teacupBob {
  0%, 100% {
    transform: translateY(0) rotate(-3deg);
    opacity: 0;
  }
  20% {
    opacity: 0.6;
  }
  50% {
    transform: translateY(-15px) rotate(3deg);
    opacity: 0.75;
  }
  80% {
    opacity: 0.5;
  }
}

/* ══════════════════════════════════════
   RESPONSIVE - reducir animaciones en mobile
   ══════════════════════════════════════ */
@media (max-width: 767px) {
  .falling-card { font-size: 18px !important; }
  .falling-card:nth-child(n+6) { display: none; }

  .petal:nth-child(n+7) { display: none; }
  .petal { width: 8px !important; height: 11px !important; }

  .sparkle:nth-child(n+7) { display: none; }

  .butterfly:nth-child(n+3) { display: none; }
  .butterfly .wing-left,
  .butterfly .wing-right { width: 10px; height: 14px; }

  .floating-key:nth-child(n+3) { display: none; }
  .floating-teacup:nth-child(2) { display: none; }
  .floating-clock { font-size: 28px; }
}

/* Respetar preferencia de movimiento reducido */
@media (prefers-reduced-motion: reduce) {
  .falling-card,
  .sparkle,
  .petal,
  .butterfly,
  .floating-key,
  .floating-teacup,
  .floating-clock {
    animation: none !important;
    display: none !important;
  }
}