/* =============================================================================
   FREEZE TIME ANIMATION (Freeze Time Power Card)
   Complex sequence: pause → frost overlay → pulsing with cold air → cracking → shatter → clock burst
   ============================================================================= */

/* Freeze overlay - covers entire screen */
.freeze-time-overlay {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  width: 100vw;
  height: 100vh;
  z-index: 999999 !important;
  pointer-events: none;
  opacity: 0;
  visibility: hidden;
  display: block !important;
  
  /* Frost gradient background */
  background: linear-gradient(
    135deg,
    rgba(255, 255, 255, 0.9) 0%,
    rgba(220, 240, 255, 0.85) 25%,
    rgba(200, 230, 255, 0.9) 50%,
    rgba(230, 245, 255, 0.85) 75%,
    rgba(255, 255, 255, 0.9) 100%
  );
  
  /* Frost texture effect */
  background-image: 
    radial-gradient(circle at 20% 30%, rgba(255, 255, 255, 0.4) 0%, transparent 50%),
    radial-gradient(circle at 80% 70%, rgba(200, 220, 255, 0.3) 0%, transparent 50%),
    radial-gradient(circle at 40% 80%, rgba(180, 210, 255, 0.3) 0%, transparent 50%),
    radial-gradient(circle at 60% 20%, rgba(255, 255, 255, 0.4) 0%, transparent 50%);
  
  /* Glass/ice effect with blur */
  -webkit-backdrop-filter: blur(3px);
  backdrop-filter: blur(3px);
  
  /* Subtle frost pattern overlay */
  box-shadow: inset 0 0 100px rgba(200, 220, 255, 0.5);
  
  transition: opacity 0.5s ease-in;
}

.freeze-time-overlay.visible {
  opacity: 1 !important;
  visibility: visible !important;
}

/* Icicles container */
.freeze-icicles {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 150px;
  pointer-events: none;
  opacity: 0;
  z-index: 999990 !important;
}

.freeze-icicles.visible {
  opacity: 1;
  transition: opacity 0.3s ease-in;
}

/* Individual icicle */
.icicle {
  position: absolute;
  width: 0;
  height: 0;
  border-left: 8px solid transparent;
  border-right: 8px solid transparent;
  border-top: 0px solid rgba(200, 230, 255, 0.95); /* Start at 0 height */
  filter: drop-shadow(0 2px 4px rgba(100, 150, 200, 0.6));
  transform-origin: top center;
  transition: border-top-width 1.5s ease-out; /* Grow animation */
  z-index: 999991 !important;
}

/* Icicles jiggle/shake when overlay is pulsing */
.freeze-time-overlay.pulsing .icicle {
  animation: icicle-jiggle 0.3s ease-in-out infinite;
}

/* Icicles fall when they break off */
.icicle.falling {
  animation: icicle-fall 1.5s ease-in forwards !important;
}

@keyframes icicle-jiggle {
  0%, 100% { transform: rotate(0deg) translateX(0); }
  25% { transform: rotate(-2deg) translateX(-1px); }
  75% { transform: rotate(2deg) translateX(1px); }
}

@keyframes icicle-fall {
  0% {
    transform: translateY(0) rotate(0deg);
    opacity: 1;
  }
  100% {
    transform: translateY(calc(100vh + 200px)) rotate(720deg);
    opacity: 0;
  }
}

/* Icicle positions (highly varied lengths - from tiny to very long) */
/* When visible class is added, icicles grow to their target heights */
.icicle:nth-child(1) { left: 2%; border-left-width: 3px; border-right-width: 3px; }
.freeze-icicles.visible .icicle:nth-child(1) { border-top-width: 28px; }

.icicle:nth-child(2) { left: 7%; border-left-width: 11px; border-right-width: 11px; }
.freeze-icicles.visible .icicle:nth-child(2) { border-top-width: 95px; }

.icicle:nth-child(3) { left: 14%; border-left-width: 5px; border-right-width: 5px; }
.freeze-icicles.visible .icicle:nth-child(3) { border-top-width: 42px; }

.icicle:nth-child(4) { left: 19%; border-left-width: 13px; border-right-width: 13px; }
.freeze-icicles.visible .icicle:nth-child(4) { border-top-width: 110px; }

.icicle:nth-child(5) { left: 26%; border-left-width: 3px; border-right-width: 3px; }
.freeze-icicles.visible .icicle:nth-child(5) { border-top-width: 22px; }

.icicle:nth-child(6) { left: 33%; border-left-width: 9px; border-right-width: 9px; }
.freeze-icicles.visible .icicle:nth-child(6) { border-top-width: 78px; }

.icicle:nth-child(7) { left: 41%; border-left-width: 12px; border-right-width: 12px; }
.freeze-icicles.visible .icicle:nth-child(7) { border-top-width: 102px; }

.icicle:nth-child(8) { left: 48%; border-left-width: 4px; border-right-width: 4px; }
.freeze-icicles.visible .icicle:nth-child(8) { border-top-width: 35px; }

.icicle:nth-child(9) { left: 53%; border-left-width: 10px; border-right-width: 10px; }
.freeze-icicles.visible .icicle:nth-child(9) { border-top-width: 88px; }

.icicle:nth-child(10) { left: 59%; border-left-width: 14px; border-right-width: 14px; }
.freeze-icicles.visible .icicle:nth-child(10) { border-top-width: 118px; }

.icicle:nth-child(11) { left: 67%; border-left-width: 3px; border-right-width: 3px; }
.freeze-icicles.visible .icicle:nth-child(11) { border-top-width: 30px; }

.icicle:nth-child(12) { left: 74%; border-left-width: 11px; border-right-width: 11px; }
.freeze-icicles.visible .icicle:nth-child(12) { border-top-width: 92px; }

.icicle:nth-child(13) { left: 81%; border-left-width: 3px; border-right-width: 3px; }
.freeze-icicles.visible .icicle:nth-child(13) { border-top-width: 25px; }

.icicle:nth-child(14) { left: 11%; border-left-width: 8px; border-right-width: 8px; }
.freeze-icicles.visible .icicle:nth-child(14) { border-top-width: 68px; }

.icicle:nth-child(15) { left: 22%; border-left-width: 4px; border-right-width: 4px; }
.freeze-icicles.visible .icicle:nth-child(15) { border-top-width: 38px; }

.icicle:nth-child(16) { left: 37%; border-left-width: 10px; border-right-width: 10px; }
.freeze-icicles.visible .icicle:nth-child(16) { border-top-width: 85px; }

.icicle:nth-child(17) { left: 56%; border-left-width: 12px; border-right-width: 12px; }
.freeze-icicles.visible .icicle:nth-child(17) { border-top-width: 105px; }

.icicle:nth-child(18) { left: 71%; border-left-width: 4px; border-right-width: 4px; }
.freeze-icicles.visible .icicle:nth-child(18) { border-top-width: 32px; }

.icicle:nth-child(19) { left: 86%; border-left-width: 9px; border-right-width: 9px; }
.freeze-icicles.visible .icicle:nth-child(19) { border-top-width: 75px; }

.icicle:nth-child(20) { left: 93%; border-left-width: 5px; border-right-width: 5px; }
.freeze-icicles.visible .icicle:nth-child(20) { border-top-width: 45px; }


/* Cold air puffs container */
.freeze-cold-air {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  pointer-events: none;
  opacity: 0;
}

.freeze-cold-air.visible {
  opacity: 1;
}

/* Individual cold air puff */
.cold-puff {
  position: absolute;
  width: 60px;
  height: 60px;
  background: radial-gradient(circle, rgba(200, 230, 255, 0.6) 0%, rgba(200, 230, 255, 0) 70%);
  border-radius: 50%;
  opacity: 0;
  filter: blur(8px);
}

/* Cold puffs positioned around edges */
/* Top edge */
.cold-puff.top-1 { top: 0; left: 10%; }
.cold-puff.top-2 { top: 0; left: 30%; }
.cold-puff.top-3 { top: 0; left: 50%; }
.cold-puff.top-4 { top: 0; left: 70%; }
.cold-puff.top-5 { top: 0; left: 90%; }

/* Right edge */
.cold-puff.right-1 { top: 20%; right: 0; }
.cold-puff.right-2 { top: 40%; right: 0; }
.cold-puff.right-3 { top: 60%; right: 0; }
.cold-puff.right-4 { top: 80%; right: 0; }

/* Bottom edge */
.cold-puff.bottom-1 { bottom: 0; left: 15%; }
.cold-puff.bottom-2 { bottom: 0; left: 35%; }
.cold-puff.bottom-3 { bottom: 0; left: 55%; }
.cold-puff.bottom-4 { bottom: 0; left: 75%; }
.cold-puff.bottom-5 { bottom: 0; left: 95%; }

/* Left edge */
.cold-puff.left-1 { top: 15%; left: 0; }
.cold-puff.left-2 { top: 35%; left: 0; }
.cold-puff.left-3 { top: 55%; left: 0; }
.cold-puff.left-4 { top: 75%; left: 0; }

/* Ice shards container - random sharp pieces */
.freeze-cracks {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  pointer-events: none;
  opacity: 0;
  z-index: 999999;
}

.freeze-cracks.visible {
  opacity: 1;
}

/* Individual ice shard */
.ice-shard {
  position: absolute;
  background: linear-gradient(135deg, 
    rgba(200, 230, 255, 0.95) 0%, 
    rgba(150, 200, 255, 0.9) 50%, 
    rgba(100, 150, 200, 0.85) 100%);
  border: 2px solid rgba(255, 255, 255, 0.8);
  box-shadow: 
    inset 0 0 20px rgba(255, 255, 255, 0.7),
    0 0 25px rgba(100, 150, 255, 0.5),
    0 0 50px rgba(200, 230, 255, 0.3);
  opacity: 0;
  transform: scale(0);
  clip-path: polygon(50% 0%, 100% 100%, 0% 100%); /* Default triangle */
  z-index: 999999;
}

/* Shards appear and then fly away on shatter */
.freeze-cracks.visible .ice-shard {
  animation: shard-appear 0.8s ease-out forwards;
}

.freeze-time-overlay.shattering .ice-shard {
  animation: shard-fly 1.2s ease-out forwards !important;
}

/* Random shard positions and shapes */
.ice-shard:nth-child(1) { 
  left: 15%; top: 10%; width: 80px; height: 100px; 
  clip-path: polygon(30% 0%, 100% 20%, 80% 100%, 0% 90%);
}
.ice-shard:nth-child(2) { 
  left: 45%; top: 5%; width: 120px; height: 90px; 
  clip-path: polygon(50% 0%, 100% 80%, 60% 100%, 0% 60%);
}
.ice-shard:nth-child(3) { 
  left: 75%; top: 15%; width: 70px; height: 110px; 
  clip-path: polygon(20% 0%, 100% 30%, 90% 100%, 10% 80%);
}
.ice-shard:nth-child(4) { 
  left: 8%; top: 35%; width: 95px; height: 85px; 
  clip-path: polygon(40% 0%, 100% 40%, 70% 100%, 0% 70%);
}
.ice-shard:nth-child(5) { 
  left: 38%; top: 30%; width: 110px; height: 120px; 
  clip-path: polygon(50% 0%, 100% 50%, 80% 100%, 20% 100%, 0% 50%);
}
.ice-shard:nth-child(6) { 
  left: 68%; top: 38%; width: 85px; height: 75px; 
  clip-path: polygon(60% 0%, 100% 60%, 50% 100%, 0% 40%);
}
.ice-shard:nth-child(7) { 
  left: 12%; top: 58%; width: 100px; height: 95px; 
  clip-path: polygon(30% 0%, 100% 30%, 90% 100%, 0% 90%);
}
.ice-shard:nth-child(8) { 
  left: 42%; top: 62%; width: 90px; height: 105px; 
  clip-path: polygon(50% 0%, 100% 70%, 60% 100%, 0% 50%);
}
.ice-shard:nth-child(9) { 
  left: 72%; top: 65%; width: 115px; height: 80px; 
  clip-path: polygon(40% 0%, 100% 20%, 80% 100%, 10% 100%, 0% 60%);
}
.ice-shard:nth-child(10) { 
  left: 25%; top: 82%; width: 75px; height: 90px; 
  clip-path: polygon(20% 0%, 100% 40%, 70% 100%, 0% 80%);
}
.ice-shard:nth-child(11) { 
  left: 58%; top: 88%; width: 105px; height: 70px; 
  clip-path: polygon(50% 0%, 100% 50%, 90% 100%, 0% 100%);
}
.ice-shard:nth-child(12) { 
  left: 88%; top: 85%; width: 65px; height: 85px; 
  clip-path: polygon(30% 0%, 100% 60%, 80% 100%, 0% 70%);
}
@keyframes shard-appear {
  0% {
    opacity: 0;
    transform: scale(0) rotate(0deg);
  }
  100% {
    opacity: 1;
    transform: scale(1) rotate(var(--shard-rotation, 0deg));
  }
}

@keyframes shard-fly {
  0% {
    opacity: 1;
    transform: translate(0, 0) rotate(var(--shard-rotation, 0deg)) scale(1);
  }
  100% {
    opacity: 0;
    transform: 
      translate(var(--fly-x, 0px), var(--fly-y, 0px)) 
      rotate(calc(var(--shard-rotation, 0deg) + var(--fly-rotation, 0deg))) 
      scale(0.5);
  }
}

/* Shard fly directions - radiate outward from center */
.ice-shard:nth-child(1) { --fly-x: -300px; --fly-y: -200px; --fly-rotation: -180deg; --shard-rotation: 15deg; }
.ice-shard:nth-child(2) { --fly-x: 0px; --fly-y: -350px; --fly-rotation: 120deg; --shard-rotation: -25deg; }
.ice-shard:nth-child(3) { --fly-x: 300px; --fly-y: -250px; --fly-rotation: -220deg; --shard-rotation: 42deg; }
.ice-shard:nth-child(4) { --fly-x: -400px; --fly-y: 0px; --fly-rotation: 160deg; --shard-rotation: -12deg; }
.ice-shard:nth-child(5) { --fly-x: -100px; --fly-y: -100px; --fly-rotation: -140deg; --shard-rotation: 8deg; }
.ice-shard:nth-child(6) { --fly-x: 350px; --fly-y: -50px; --fly-rotation: 200deg; --shard-rotation: -33deg; }
.ice-shard:nth-child(7) { --fly-x: -350px; --fly-y: 150px; --fly-rotation: -190deg; --shard-rotation: 22deg; }
.ice-shard:nth-child(8) { --fly-x: -50px; --fly-y: 100px; --fly-rotation: 150deg; --shard-rotation: -18deg; }
.ice-shard:nth-child(9) { --fly-x: 380px; --fly-y: 200px; --fly-rotation: -240deg; --shard-rotation: 38deg; }
.ice-shard:nth-child(10) { --fly-x: -250px; --fly-y: 300px; --fly-rotation: 170deg; --shard-rotation: -28deg; }
.ice-shard:nth-child(11) { --fly-x: 100px; --fly-y: 350px; --fly-rotation: -160deg; --shard-rotation: 12deg; }
.ice-shard:nth-child(12) { --fly-x: 400px; --fly-y: 250px; --fly-rotation: 210deg; --shard-rotation: -42deg; }

/* Clock icon in center */
.freeze-clock {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%) scale(0);
  font-size: 180px; /* Even larger for better visibility */
  z-index: 1000000 !important;
  pointer-events: none;
  opacity: 0;
  filter: drop-shadow(0 0 30px rgba(50, 150, 255, 1));
  text-shadow: 0 0 40px rgba(50, 150, 255, 1);
}

.freeze-clock.winding {
  animation: clock-winding 4s cubic-bezier(0.34, 1.56, 0.64, 1) forwards;
}

@keyframes clock-winding {
  0% {
    transform: translate(-50%, -50%) scale(0) rotate(0deg);
    opacity: 0;
  }
  10% {
    transform: translate(-50%, -50%) scale(1.5) rotate(720deg); /* Fast rotation - 2 full spins */
    opacity: 1;
    filter: drop-shadow(0 0 50px rgba(100, 200, 255, 1));
  }
  25% {
    transform: translate(-50%, -50%) scale(1.8) rotate(1440deg); /* 4 full spins */
    opacity: 1;
    filter: drop-shadow(0 0 60px rgba(50, 150, 255, 1));
  }
  45% {
    transform: translate(-50%, -50%) scale(2.0) rotate(1800deg); /* 5 full spins - slowing down */
    opacity: 1;
    filter: drop-shadow(0 0 70px rgba(50, 150, 255, 1));
  }
  65% {
    transform: translate(-50%, -50%) scale(2.2) rotate(2040deg); /* Slower rotation */
    opacity: 1;
    filter: drop-shadow(0 0 80px rgba(50, 150, 255, 1));
  }
  85% {
    transform: translate(-50%, -50%) scale(2.3) rotate(2160deg); /* Very slow - 6 full spins total */
    opacity: 1;
    filter: drop-shadow(0 0 90px rgba(100, 200, 255, 1));
  }
  100% {
    transform: translate(-50%, -50%) scale(2.3) rotate(2160deg); /* STOPPED - stays visible */
    opacity: 1;
    filter: drop-shadow(0 0 100px rgba(100, 200, 255, 1));
  }
}

/* Clock shattering animation - disappears with the ice */
.freeze-clock.shattering {
  animation: clock-shatter 0.8s ease-out forwards;
}

@keyframes clock-shatter {
  0% {
    transform: translate(-50%, -50%) scale(2.3) rotate(2160deg);
    opacity: 1;
    filter: drop-shadow(0 0 100px rgba(100, 200, 255, 1));
  }
  50% {
    transform: translate(-50%, -50%) scale(2.5) rotate(2200deg);
    opacity: 0.7;
    filter: drop-shadow(0 0 80px rgba(100, 200, 255, 0.7)) blur(3px);
  }
  100% {
    transform: translate(-50%, -50%) scale(3) rotate(2250deg);
    opacity: 0;
    filter: drop-shadow(0 0 0px rgba(100, 200, 255, 0)) blur(10px);
  }
}

/* Pulsing animation - overlay shrinks and expands */
.freeze-time-overlay.pulsing {
  animation: freeze-pulse 3.0s ease-in-out;
}

@keyframes freeze-pulse {
  0% {
    transform: scale(1);
  }
  8.33% { /* After 1st pulse */
    transform: scale(0.98);
  }
  16.66% {
    transform: scale(1.02);
  }
  25% { /* After 2nd pulse */
    transform: scale(0.96);
  }
  33.33% {
    transform: scale(1.04);
  }
  41.66% { /* After 3rd pulse */
    transform: scale(0.94);
  }
  50% {
    transform: scale(1.06);
  }
  58.33% { /* After 4th pulse */
    transform: scale(0.92);
  }
  66.66% {
    transform: scale(1.08);
  }
  75% { /* After 5th pulse */
    transform: scale(0.90);
  }
  83.33% {
    transform: scale(1.10);
  }
  91.66% { /* After 6th pulse */
    transform: scale(0.88);
  }
  100% {
    transform: scale(1.12);
  }
}

/* Cold air puff animations - timed with pulses */
@keyframes puff-burst {
  0% {
    opacity: 0;
    transform: scale(0.5);
  }
  50% {
    opacity: 0.8;
    transform: scale(1.2);
  }
  100% {
    opacity: 0;
    transform: scale(2);
  }
}

/* Apply puff animation at different timings (adjusted for slower pulse) */
.cold-puff.pulse-1 { animation: puff-burst 0.5s ease-out 0.25s; }
.cold-puff.pulse-2 { animation: puff-burst 0.5s ease-out 0.75s; }
.cold-puff.pulse-3 { animation: puff-burst 0.5s ease-out 1.25s; }
.cold-puff.pulse-4 { animation: puff-burst 0.5s ease-out 1.75s; }
.cold-puff.pulse-5 { animation: puff-burst 0.5s ease-out 2.25s; }
.cold-puff.pulse-6 { animation: puff-burst 0.5s ease-out 2.75s; }

/* Shatter animation - overlay breaks into pieces */
.freeze-time-overlay.shattering {
  animation: shatter 1.0s ease-out forwards;
}

@keyframes shatter {
  0% {
    opacity: 1;
    transform: scale(1.12);
  }
  50% {
    opacity: 0.7;
    transform: scale(1.15);
    filter: brightness(1.5);
  }
  100% {
    opacity: 0;
    transform: scale(1.3);
    filter: brightness(2) blur(10px);
  }
}

/* Shatter particles - icicle shards flying outward */
.shatter-particle {
  position: absolute;
  width: 0;
  height: 0;
  border-left: 6px solid transparent;
  border-right: 6px solid transparent;
  border-top: 40px solid rgba(200, 230, 255, 0.9);
  filter: drop-shadow(0 2px 4px rgba(100, 150, 200, 0.4));
  opacity: 0;
  transform-origin: center;
}

.shatter-particle.flying {
  animation: shard-fly 1.0s ease-out forwards;
}

@keyframes shard-fly {
  0% {
    opacity: 1;
    transform: translate(0, 0) rotate(0deg) scale(1);
  }
  100% {
    opacity: 0;
    transform: translate(var(--fly-x), var(--fly-y)) rotate(var(--fly-rotation)) scale(0.3);
  }
}

/* Position shatter particles in a circle around center */
.shatter-particle:nth-child(1) { top: 50%; left: 50%; --fly-x: -300px; --fly-y: -300px; --fly-rotation: 45deg; }
.shatter-particle:nth-child(2) { top: 50%; left: 50%; --fly-x: 0px; --fly-y: -350px; --fly-rotation: 90deg; }
.shatter-particle:nth-child(3) { top: 50%; left: 50%; --fly-x: 300px; --fly-y: -300px; --fly-rotation: 135deg; }
.shatter-particle:nth-child(4) { top: 50%; left: 50%; --fly-x: 350px; --fly-y: 0px; --fly-rotation: 180deg; }
.shatter-particle:nth-child(5) { top: 50%; left: 50%; --fly-x: 300px; --fly-y: 300px; --fly-rotation: 225deg; }
.shatter-particle:nth-child(6) { top: 50%; left: 50%; --fly-x: 0px; --fly-y: 350px; --fly-rotation: 270deg; }
.shatter-particle:nth-child(7) { top: 50%; left: 50%; --fly-x: -300px; --fly-y: 300px; --fly-rotation: 315deg; }
.shatter-particle:nth-child(8) { top: 50%; left: 50%; --fly-x: -350px; --fly-y: 0px; --fly-rotation: 0deg; }
.shatter-particle:nth-child(9) { top: 50%; left: 50%; --fly-x: -200px; --fly-y: -200px; --fly-rotation: 60deg; }
.shatter-particle:nth-child(10) { top: 50%; left: 50%; --fly-x: 200px; --fly-y: -200px; --fly-rotation: 120deg; }
.shatter-particle:nth-child(11) { top: 50%; left: 50%; --fly-x: 250px; --fly-y: 150px; --fly-rotation: 200deg; }
.shatter-particle:nth-child(12) { top: 50%; left: 50%; --fly-x: -250px; --fly-y: 150px; --fly-rotation: 340deg; }