.block {
  animation: fadeIn 0.3s;  -webkit-animation: fadeIn 0.3s;  -moz-animation: fadeIn 0.3s; -o-animation: fadeIn 0.3s;  -ms-animation: fadeIn 0.3s;}

/* modal open fade */
.ui-widget {  animation: fadeIn 0.3s; -webkit-animation: fadeIn 0.3s; -moz-animation: fadeIn 0.3s; -o-animation: fadeIn 0.3s;
  -ms-animation: fadeIn 0.3s;
}
@keyframes fadeIn {
  0% {opacity:0;}
  100% {opacity:1;}
}

@-moz-keyframes fadeIn {
  0% {opacity:0;}
  100% {opacity:1;}
}

@-webkit-keyframes fadeIn { 0% {opacity:0;} 100% {opacity:1;}}
@-o-keyframes fadeIn {  0% {opacity:0;} 100% {opacity:1;}}
@-ms-keyframes fadeIn {
  0% {opacity:0;}
  100% {opacity:1;}
}
/* =========================================================
 * FLAG EXPLOSION – Fireworks Effect (1.8s) - Using CSS Variables
 * ========================================================= */

:root {
  /* Spark Core Properties (UNCHANGED) */
  --spark-main-color-1: #ff0055; /* Pink-Red */
  --spark-main-color-2: #ffaa00; /* Orange */
  --spark-main-color-3: #ffcccc; /* Light Pink */
  --spark-main-color-4: #ffee33; /* Yellow */

  /* Spark Size Reduction Factor (0.5 for 50% smaller) */
  --spark-scale-factor: 0.5;

  /* Animation Duration */
  --animation-duration: 1.8s;
}

/* Base flag link (UNCHANGED) */
.flag-like {
  position: relative;
  display: inline-block;
}

.flag-like a {
  position: relative;
  display: inline-flex;
  align-items: center;
  padding-left: 1.6em;
  text-decoration: none;
}

.flag-like a::before {
  content: "\f004";
  font-family: "Font Awesome 5 Free";
  font-size: 1.1em;
  transition: all 0.2s ease;
}

.flag-like.action-flag a::before {
  color: #888;
  font-weight: 400;
}

.flag-like.action-unflag a::before {
  color: var(--spark-main-color-1);
  font-weight: 900;
}

/* Floating explosion element (UNCHANGED) */
.flag-explosion {
  position: absolute;
  pointer-events: none;
  z-index: 99999;
}

/* --- Smaller, Rotating, Round Sparks (::before) (UNCHANGED) --- */
.flag-explosion::before {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  width: calc(4px * var(--spark-scale-factor)); /* 2px */
  height: calc(4px * var(--spark-scale-factor)); /* 2px */
  transform: translate(-50%, -50%) scale(0);
  opacity: 0;
  border-radius: 50%; 
  
  box-shadow:
    3.5px 3.5px 0 0 var(--spark-main-color-2), -3.5px -3.5px 0 0 var(--spark-main-color-2),
    -3.5px 3.5px 0 0 var(--spark-main-color-2), 3.5px -3.5px 0 0 var(--spark-main-color-2),
    6px 0 0 -1px var(--spark-main-color-1), -6px 0 0 -1px var(--spark-main-color-1),
    0 6px 0 -1px var(--spark-main-color-1), 0 -6px 0 -1px var(--spark-main-color-1),
    7.5px 2.5px 0 -2px var(--spark-main-color-3), -7.5px -2.5px 0 -2px var(--spark-main-color-3),
    2.5px 7.5px 0 -2px var(--spark-main-color-4), -2.5px -7.5px 0 -2px var(--spark-main-color-4);
}

/* --- Main Expanding, Round Sparks (::after) (UNCHANGED) --- */
.flag-explosion::after {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  width: calc(6px * var(--spark-scale-factor)); /* 3px */
  height: calc(6px * var(--spark-scale-factor)); /* 3px */
  transform: translate(-50%, -50%) scale(0.3);
  opacity: 0;

  border-radius: 50%; 

  box-shadow:
    0 0 var(--spark-main-color-1),
    5px 0 var(--spark-main-color-1), -5px 0 var(--spark-main-color-1),
    0 5px var(--spark-main-color-1), 0 -5px var(--spark-main-color-1),
    7.5px 7.5px var(--spark-main-color-2), -7.5px -7.5px var(--spark-main-color-2),
    -7.5px 7.5px var(--spark-main-color-2), 7.5px -7.5px var(--spark-main-color-2),
    
    10px 2.5px var(--spark-main-color-3), -10px -2.5px var(--spark-main-color-3),
    2.5px 10px var(--spark-main-color-3), -2.5px -10px var(--spark-main-color-3),
    6px 4px var(--spark-main-color-4), -6px -4px var(--spark-main-color-4),
    4px 6px var(--spark-main-color-4), -4px -6px var(--spark-main-color-4),
    
    12.5px 0 var(--spark-main-color-1), -12.5px 0 var(--spark-main-color-1),
    0 12.5px var(--spark-main-color-2), 0 -12.5px var(--spark-main-color-2),
    11px 5px var(--spark-main-color-3), -11px -5px var(--spark-main-color-3),
    5px 11px var(--spark-main-color-4), -5px -11px var(--spark-main-color-4),
    
    2px 2px var(--spark-main-color-1), -2px -2px var(--spark-main-color-1),
    2px -2px var(--spark-main-color-2), -2px 2px var(--spark-main-color-2);
}

/* Trigger animation (UNCHANGED) */
.flag-explosion.explode-now::before {
  animation: flag-rotation var(--animation-duration) ease-out forwards;
}

.flag-explosion.explode-now::after {
  animation: flag-supernova var(--animation-duration) ease-out forwards;
}

/* --- UPDATED Keyframes for Smooth Fade --- */
/* The main change is moving the start of the opacity reduction later in the timeline. */

/* Main Expanding Sparks (::after) */
@keyframes flag-supernova {
  0% {
    opacity: 1;
    transform: translate(-50%, -50%) scale(0.3);
    filter: brightness(1);
  }
  75% { 
    /* Maintain full opacity until 75% of the animation */
    opacity: 1; 
    transform: translate(-50%, -60%) scale(2.5); 
    filter: brightness(3);
  }
  100% {
    /* Fade rapidly from 75% to 100% */
    opacity: 0;
    transform: translate(-50%, 0%) scale(2.75); 
    filter: brightness(3);
  }
}

/* Rotating Sparks (::before) */
@keyframes flag-rotation {
  0% {
    opacity: 1;
    transform: translate(-50%, -50%) scale(0.3) rotate(0deg);
  }
  75% {
    /* Maintain full opacity until 75% of the animation */
    opacity: 1;
    transform: translate(-50%, -60%) scale(1.25) rotate(720deg);
  }
  100% {
    /* Fade rapidly from 75% to 100% */
    opacity: 0;
    transform: translate(-50%, 0%) scale(1.5) rotate(1080deg);
  }
}