/* animation.css */

.badge-container {
  transition: transform var(--duration, 0.3s) ease-out, var(--duration, 0.3s) ease-out;
}

/* Animation: Slide In */
.badge-animation.slide_in {
  animation: slideIn var(--duration, 0.5s) ease-out forwards;
}

.custom-tooltip p{
  margin: 0; 
  padding: 0; 
}

.fblink-separator{
  position: relative;
}
.fblink-separator::after {
  content: '';
  position: absolute;
  top: 50%;
  right: 0;
  transform: translateY(-50%);
  height: var(--separator-size, 40px);
  width: 1px;
  background: var(--separator-color, #000);
}


.futureblink-default-badge {
  display: flex;
  gap: 10px;
  align-items: center;
  justify-content: center;
  background-color: #ffb800;
  padding: 10px;
  z-index: 10;
  flex-wrap: wrap;
  text-align: center;
}

.futureblink-default-badge p {
  margin: 0;
}

@keyframes slideIn {
  0% {
    transform: translateX(100%);
    opacity: 0;
  }

  50% {
    transform: translateX(10%);
    opacity: 1;
  }

  100% {
    transform: translateX(0);
    opacity: 1;
  }
}

/* Animation: Pop */
.badge-animation.pop {
  animation: pop var(--duration, 0.5s) ease-out forwards;
}

@keyframes pop {
  0% {
    transform: scale(0.8);
    opacity: 0;
  }

  50% {
    transform: scale(1.05);
    opacity: 1;
  }

  100% {
    transform: scale(1);
    opacity: 1;
  }
}

/* Animation: Groove */
.badge-animation.groove {
  animation: groove var(--duration, 0.5s) ease-in-out forwards;
}

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

  25% {
    transform: translateY(-5px);
  }

  50% {
    transform: translateY(0);
  }

  75% {
    transform: translateY(5px);
  }

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

/* Animation: Fly */
.badge-animation.fly {
  animation: fly var(--duration, 0.6s) ease-out forwards;
}

@keyframes fly {
  0% {
    transform: translateY(100%);
    opacity: 0;
  }

  50% {
    transform: translateY(-20%);
    opacity: 1;
  }

  100% {
    transform: translateY(0);
    opacity: 1;
  }
}

/* Animation: Swerve */
.badge-animation.swerve {
  animation: swerve var(--duration, 0.6s) ease-in-out forwards;
}

@keyframes swerve {
  0% {
    transform: translateX(-20%);
  }

  25% {
    transform: translateX(10%);
  }

  50% {
    transform: translateX(0);
  }

  75% {
    transform: translateX(-10%);
  }

  100% {
    transform: translateX(0);
  }
}


/* Background patterns */
.fblink-pattern-tiny_square {
  --s: 8px;
  /* the size */
  --c1: #c6f0f9;
  --c2: #f3b90d;

  background:
    conic-gradient(at 60% 60%, var(--c1) 75%, #0000 0) 0 0/calc(5*var(--s)/2) calc(5*var(--s)/2),
    repeating-conic-gradient(var(--c1) 0 25%, #0000 0 50%) 0 0/calc(5*var(--s)) calc(5*var(--s)),
    repeating-conic-gradient(var(--c2) 0 25%, var(--c1) 0 50%) 0 0/var(--s) var(--s) !important;
}

.fblink-pattern-random_grain {
  --s: 4px;
  --g: repeating-conic-gradient(#774F38 0 25%, #ECE5CE 0 50%) 0/;
  background:
    var(--g) calc(1*var(--s)) calc(7*var(--s)),
    var(--g) calc(2*var(--s)) calc(5*var(--s)),
    var(--g) calc(3*var(--s)) calc(3*var(--s)),
    var(--g) calc(5*var(--s)) calc(2*var(--s)),
    var(--g) calc(7*var(--s)) calc(1*var(--s));
  background-blend-mode: darken;
}

.fblink-pattern-puzzle {
  --sz: 5px;
  --c1: #4b2889;
  --c2: #673ab7;
  --c3: #401c81;
  --c4: #2d125d;
  --ts: 50% / calc(var(--sz) * 10) calc(var(--sz) * 10);
  --pz: calc(var(--sz) * 0.65), #fff0 calc((var(--sz) * 0.65) + 1px);
  background: radial-gradient(circle at 53% 25%, var(--c4) var(--pz)) var(--ts),
    radial-gradient(circle at 75% 47%, var(--c2) var(--pz)) var(--ts),
    radial-gradient(circle at 3% 75%, var(--c2) var(--pz)) var(--ts),
    radial-gradient(circle at 25% 53%, var(--c4) var(--pz)) var(--ts),
    radial-gradient(circle at 53% 75%, var(--c3) var(--pz)) var(--ts),
    radial-gradient(circle at 75% 97%, var(--c1) var(--pz)) var(--ts),
    radial-gradient(circle at 3% 25%, var(--c1) var(--pz)) var(--ts),
    radial-gradient(circle at 25% 3%, var(--c3) var(--pz)) var(--ts),
    conic-gradient(from 0deg at 50% 50%,
      var(--c1) 0 25%,
      var(--c2) 0 50%,
      var(--c3) 0 75%,
      var(--c4) 0 100%) var(--ts);
}


.fblink-pattern-flowers {
  --color-primary: rgb(255, 220, 156);
  --color-secondary: rgb(145, 255, 123);
  --color-accent1: rgb(248, 144, 227);
  --color-accent2: rgb(191, 171, 251);
  --color-bg: #98f3f8;

  background:
    radial-gradient(circle at 82px 82px, var(--color-primary) 10px, transparent 11px),
    radial-gradient(circle at 97px 82px, var(--color-secondary) 10px, transparent 11px),
    radial-gradient(circle at 82px 97px, var(--color-secondary) 10px, transparent 11px),
    radial-gradient(circle at 67px 82px, var(--color-secondary) 10px, transparent 11px),
    radial-gradient(circle at 82px 67px, var(--color-secondary) 10px, transparent 11px),

    radial-gradient(circle at 27px 82px, var(--color-secondary) 12px, transparent 13px),
    radial-gradient(circle at 41px 69px, var(--color-primary) 12px, transparent 13px),
    radial-gradient(circle at 41px 95px, var(--color-primary) 12px, transparent 13px),
    radial-gradient(circle at 15px 95px, var(--color-primary) 12px, transparent 13px),
    radial-gradient(circle at 15px 69px, var(--color-primary) 12px, transparent 13px),

    radial-gradient(circle at 82px 27px, var(--color-secondary) 12px, transparent 13px),
    radial-gradient(circle at 95px 15px, var(--color-accent1) 12px, transparent 13px),
    radial-gradient(circle at 95px 41px, var(--color-accent1) 12px, transparent 13px),
    radial-gradient(circle at 69px 41px, var(--color-accent1) 12px, transparent 13px),
    radial-gradient(circle at 69px 15px, var(--color-accent1) 12px, transparent 13px),

    radial-gradient(circle at 27px 27px, var(--color-primary) 10px, transparent 11px),
    radial-gradient(circle at 42px 27px, var(--color-accent2) 10px, transparent 11px),
    radial-gradient(circle at 27px 42px, var(--color-accent2) 10px, transparent 11px),
    radial-gradient(circle at 12px 27px, var(--color-accent2) 10px, transparent 11px),
    radial-gradient(circle at 27px 12px, var(--color-accent2) 10px, transparent 11px);

  background-color: var(--color-bg);
  background-size: 110px 110px;
}

.fblink-pattern-radial {
  --size: 50px;
  --yellow: #ffce80;
  --dark-blue: #a4e1ff;
  --teal: #c0fff9;
  position: relative;
  background: radial-gradient(transparent 43%,
      var(--dark-blue) 44%,
      var(--dark-blue) 50%,
      transparent 51%,
      transparent 75%,
      var(--yellow) 76%,
      var(--yellow) 82%,
      var(--dark-blue) 83%),
    radial-gradient(transparent 43%,
      var(--dark-blue) 44%,
      var(--dark-blue) 50%,
      var(--teal) 51%,
      var(--teal) 67%,
      transparent 68%,
      transparent 75%,
      var(--yellow) 76%,
      var(--yellow) 82%,
      var(--teal) 83%);
  background-size: var(--size) var(--size);
  background-position: 0 0, calc(var(--size) / 2) calc(var(--size) / 2);
}

.fblink-pattern-upholstery {
  background:
    radial-gradient(rgba(76, 76, 76, 1) 4%, rgba(61, 61, 61, 1) 9%, rgba(61, 61, 61, 0) 9%) 0 0,
    radial-gradient(rgba(76, 76, 76, 1) 4%, rgba(61, 61, 61, 1) 8%, rgba(61, 61, 61, 0) 10%) 25px 25px,
    radial-gradient(rgba(76, 76, 76, 0.8) 20%, rgba(61, 61, 61, 0)) 25px 0,
    radial-gradient(rgba(76, 76, 76, 0.8) 20%, rgba(61, 61, 61, 0)) 0 25px,
    radial-gradient(rgba(61, 61, 61, 1) 35%, rgba(61, 61, 61, 0) 60%) 25px 0,
    radial-gradient(rgba(61, 61, 61, 1) 35%, rgba(61, 61, 61, 0) 60%) 50px 25px,
    radial-gradient(rgba(53, 53, 53, 0.7), rgba(61, 61, 61, 0)) 0 0,
    radial-gradient(rgba(53, 53, 53, 0.7), rgba(61, 61, 61, 0)) 25px 25px,
    linear-gradient(45deg, rgba(61, 61, 61, 0) 49%, rgba(0, 0, 0, 1) 50%, rgba(61, 61, 61, 0) 70%) 0 0,
    linear-gradient(-45deg, rgba(61, 61, 61, 0) 49%, rgba(0, 0, 0, 1) 50%, rgba(61, 61, 61, 0) 70%) 0 0;

  background-color: rgba(61, 61, 61, 1);
  background-size: 50px 50px;
  /* Reduced size for a denser fblink-pattern */
}

.fblink-pattern-cheese {
  --cheese-size: 50px;
  background:
    radial-gradient(circle at 20% 30%, #d6a801 10%, transparent 12%),
    radial-gradient(circle at 70% 50%, #c49000 8%, transparent 10%),
    radial-gradient(circle at 40% 80%, #b78300 6%, transparent 8%),
    radial-gradient(circle at 85% 20%, #e0b000 7%, transparent 9%),
    conic-gradient(from 180deg at 50% 50%, #f5c518, #f1c40f, #e0b000);
  background-size: var(--cheese-size) var(--cheese-size);
}

/* background images for patterns */

.fblink-pattern-balloon {
  background: url('./Balloon.png') ;
}

.fblink-pattern-sale {
  background: url('./sale\ .png') ;
}

.fblink-pattern-discount {
  background: url('./Discount.png') ;
}

.fblink-pattern-girly {
  background: url('./Girly.png') ;
}

.fblink-pattern-birthday {
  background: url('./Birthday.png') ;
}

.fblink-pattern-birthday1 {
  background: url('./Birthday\ 1.png') ;
}

.fblink-pattern-carnival_monday {
  background: url('./Carnival\ monday.png') ;
  position: relative;
  z-index: 0;
}
.fblink-pattern-carnival_monday::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  width: 100%;
  border-radius: inherit;
  overflow: hidden;
  background: rgba(0, 0, 0, 0.5);
  z-index: -1;
}

.fblink-pattern-carnival_monday1 {
  background: url('./Carnival\ monday2.png') ;
  position: relative;
  z-index: 0;
}
.fblink-pattern-carnival_monday1::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  width: 100%;
  border-radius: inherit;
  overflow: hidden;
  background: rgba(0, 0, 0, 0.2);
  z-index: -1;
}

.fblink-pattern-childrens_day {
  background: url('./Childrens\ day.png') ;
}

.fblink-pattern-childrens_day2 {
  background: url('./Children\ day2.png') ;
}

.fblink-pattern-easter_sunday {
  background: url('./Easter\ sunday.png') ;
}

.fblink-pattern-easter_sunday2 {
  background: url('./Easter\ sunday2.png') ;
}

.fblink-pattern-fathers_day {
  background: url('./Fathers\ day.png') ;
}

.fblink-pattern-fathers_day2 {
  background: url('./Fathers\ day\ 2.png') ;
}

.fblink-pattern-fathers_day3 {
  background: url('./Fathers\ day3.png') ;
}

.fblink-pattern-labor_day {
  background: url('./Labour\ day.png') ;
  position: relative;
  z-index: 0;
}
.fblink-pattern-labor_day::before{
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  width: 100%;
  border-radius: inherit;
  overflow: hidden;
  background: rgba(0, 0, 0, 0.5);
  z-index: -1;
}

.fblink-pattern-labor_day2 {
  background: url('./Laborday2.png') ;
}

.fblink-pattern-mens_day {
  background: url('./Mens\ day.png') ;
}

.fblink-pattern-mothers_day {
  background: url('./Mothers\ day.png') ;
}

.fblink-pattern-mothers_day2 {
  background: url('./Mothersday2.png') ;
}

.fblink-pattern-thanksgiving {
  background: url('./Thanksgiving.png') ;
}

.fblink-pattern-thanksgiving2 {
  background: url('./Thanksgving2.png') ;
}

.fblink-pattern-veterans_day {
  background: url('./Veterans\ day.png') ;
}

.fblink-pattern-veterans_day2 {
  background: url('./Veterans\ day2.png') ;
}

.fblink-pattern-womans_day {
  background: url('./Womansday.png') ;
}

.fblink-pattern-womans_day2 {
  background: url('./Womansday2.png') ;
}

.fblink-pattern-womans_day3 {
  background: url('./Womans\ day3.png') ;
}

.fblink-pattern-wavy {
  background: url('./Wavy.png') ;
}

.fblink-pattern-fresh {
  background: url('./Fresh.png') ;
}

/* Icon animations */
[data-animation="futureblink-holographic"] {
  transition: transform 0.3s ease;
  display: inline-block;
}

[data-animation="futureblink-holographic"]:hover {
  transform: scale(1.05);
}


[data-animation="futureblink-pulse"]:hover {
  animation: hoverPulse 400ms ease infinite alternate;
}

@keyframes hoverPulse {
  from {
    transform: scale(1);
    box-shadow: none;
  }
  to {
    transform: scale(1.07);
    box-shadow: 0 0 10px rgba(0, 0, 0, 0);
  }
}

[data-animation="futureblink-push"]:hover {
  animation: hoverPush 300ms ease-out;
}

@keyframes hoverPush {
  to {
    transform: scale(0.8);
  }
}

[data-animation="futureblink-pop"]:hover {
  animation: hoverPop 300ms ease-out;
}

@keyframes hoverPop {
  to {
    transform: scale(1.2);
  }
}

[data-animation="futureblink-bounce_in"]:hover {
  animation: hoverBounceIn 700ms ease-out;
}

@keyframes hoverBounceIn {
  0% {
    transform: scale(1.2);
  }
  60% {
    transform: scale(1);
  }
  100% {
    transform: scale(1.3);
  }
}

[data-animation="futureblink-bounce_out"]:hover {
  animation: hoverBounceOut 700ms ease-out;
}

@keyframes hoverBounceOut {
  0% {
    transform: scale(0.8);
  }
  60% {
    transform: scale(1);
  }
  100% {
    transform: scale(0.7);
  }
}

[data-animation="futureblink-float"]:hover {
  transition-duration: 800ms;
  transform: translateY(-5px);
}

[data-animation="futureblink-sink"]:hover {
  transition-duration: 800ms;
  transform: translateY(5px);
}

[data-animation="futureblink-bob"]:hover {
  animation: hoverBob 900ms linear infinite alternate;
}

@keyframes hoverBob{
  0%{
    transform: translateY(-5px);
  } 50%{
    transform: translateY(4px);
  } 100%{
    transform: translateY(0);
  }
}

[data-animation="futureblink-skew"]:hover {
  transition-duration: 600ms;
  transform: skewX(-10deg);
}

[data-animation="futureblink-skew"]:hover {
  transition-duration: 600ms;
  transform: skewX(-10deg);
}

[data-animation="futureblink-wobble_horizontal"]:hover {
  animation: hoverWobbleHorizontal 900ms ease-in-out;
}
@keyframes hoverWobbleHorizontal {
  0%{ transform: translateX(0)}
  30%{ transform: translateX(-10px)}
  50%{ transform: translateX(6px);}
  80%{ transform: translateX(-7px);}
  100%{ transform: translateX(4px);}
}

[data-animation="futureblink-wobble_vertical"]:hover {
  animation: hoverWobbleVertical 900ms ease-in-out;
}
@keyframes hoverWobbleVertical {
  0%{ transform: translateY(0)}
  30%{ transform: translateY(-5px)}
  50%{ transform: translateY(4px);}
  80%{ transform: translateY(-3px);}
  100%{ transform: translateY(2px);}
}


[data-animation="futureblink-wobble_top"]:hover {
  animation: hoverWobbleTop 900ms ease-in-out;
  transform-origin: bottom;
}
@keyframes hoverWobbleTop {
  0%{ transform: skewX(0)}
  30%{ transform: skewX(-10deg)}
  50%{ transform: skewX(8deg);}
  80%{ transform: skewX(-5deg);}
  100%{ transform: skewX(4deg);}
}

[data-animation="futureblink-wobble_bottom"]:hover {
  animation: hoverWobbleBottom 900ms ease-in-out;
  transform-origin: top;
}
@keyframes hoverWobbleBottom {
  0%{ transform: skewX(0)}
  30%{ transform: skewX(-10deg)}
  50%{ transform: skewX(8deg);}
  80%{ transform: skewX(-5deg);}
  100%{ transform: skewX(4deg);}
}

[data-animation="futureblink-buzz"]:hover {
  animation: hoverBuzz 400ms linear infinite;
  transform-origin: center;
}
@keyframes hoverBuzz {
  0%{ transform: skewX(0)}
  30%{ transform: skewX(-10deg)}
  50%{ transform: skewX(10deg);}
  80%{ transform: skewX(-5deg);}
  100%{ transform: skewX(5deg);}
}


/* Icon Shadows */
[data-shadow="futureblink-soft_glow"]{
  box-shadow: rgba(100, 100, 111, 0.4) 0px 7px 29px 0px;
}

[data-shadow="futureblink-subtle_drop"]{
  box-shadow: rgba(0, 0, 0, 0.15) 1.95px 1.95px 2.6px;
}

[data-shadow="futureblink-light_drop"]{
  box-shadow: rgba(0, 0, 0, 0.35) 0px 5px 15px;
}

[data-shadow="futureblink-classic_drop"]{
  box-shadow: rgba(0, 0, 0, 0.24) 0px 3px 8px;
}

[data-shadow="futureblink-minimal"]{
  box-shadow: rgba(99, 99, 99, 0.2) 0px 2px 8px 0px; 
}

[data-shadow="futureblink-sketch_style"]{
  box-shadow: rgba(0, 0, 0, 0.1) 0px 4px 12px;
}

[data-shadow="futureblink-floating"]{
  box-shadow: rgba(0, 0, 0, 0.25) 0px 54px 55px, rgba(0, 0, 0, 0.12) 0px -12px 30px, rgba(0, 0, 0, 0.12) 0px 4px 6px, rgba(0, 0, 0, 0.17) 0px 12px 13px, rgba(0, 0, 0, 0.09) 0px -3px 5px;
}

[data-shadow="futureblink-soft_sketch"]{
  box-shadow: rgba(0, 0, 0, 0.05) 0px 6px 24px 0px, rgba(0, 0, 0, 0.08) 0px 0px 0px 1px;
}

[data-shadow="futureblink-gentle_glow"]{
  box-shadow: rgba(17, 12, 46, 0.5) 0px 48px 50px 0px;
}

[data-shadow="futureblink-stripe_soft"]{
  box-shadow: rgba(50, 50, 93, 0.25) 0px 50px 100px -20px, rgba(0, 0, 0, 0.3) 0px 30px 60px -30px, rgba(10, 37, 64, 0.35) 0px -2px 6px 0px inset;
}

[data-shadow="futureblink-stripe_light"]{
  box-shadow: rgba(255, 255, 255, 0.1) 0px 1px 1px 0px inset, rgba(50, 50, 93, 0.25) 0px 50px 100px -20px, rgba(0, 0, 0, 0.3) 0px 30px 60px -30px;
}

[data-shadow="futureblink-material_light"]{
  box-shadow: rgba(0, 0, 0, 0.25) 0px 14px 28px, rgba(0, 0, 0, 0.22) 0px 10px 10px;
}

[data-shadow="futureblink-material_bold"]{
  box-shadow: rgba(0, 0, 0, 0.3) 0px 19px 38px, rgba(0, 0, 0, 0.22) 0px 15px 12px;
}

[data-shadow="futureblink-deep_soft"]{
  box-shadow: rgba(0, 0, 0, 0.2) 0px 60px 40px -7px;
}

[data-shadow="futureblink-lonely_planet"]{
  box-shadow: rgba(0, 0, 0, 0.8) 0px 30px 90px;
}

[data-shadow="futureblink-mac_os"]{
  box-shadow: rgba(0, 0, 0, 0.56) 0px 22px 70px 4px;
}

/* Hover color */
.futureblink-icon-hover-cls:hover svg {
  stroke: var(--icon-hover-color);
}