/* RAINBOWS */
 span.rb {
background: linear-gradient(
  80deg,
  var(--rb-1) 12.5%,
  var(--rb-2) 0 25%,
  var(--rb-3) 0 37.5%,
  var(--rb-4) 0 50%,
  var(--rb-5) 0 62.5%,
  var(--rb-6) 0 75%,
  var(--rb-7) 0 87.5%,
  var(--rb-8) 0 100%
);
  background-size: 200% 100%; 
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  animation: rainbow 2s linear infinite;
  width: fit-content;
  display: inline-block;
  filter: drop-shadow(1px 0 0 var(--dark)) drop-shadow(-1px 0 0 var(--dark)) drop-shadow(0 1px 0 var(--dark)) drop-shadow(0 -1px 0 var(--dark));
}

span.rb-slow {
background: linear-gradient(
  80deg,
  var(--rb-1) 12.5%,
  var(--rb-2) 0 25%,
  var(--rb-3) 0 37.5%,
  var(--rb-4) 0 50%,
  var(--rb-5) 0 62.5%,
  var(--rb-6) 0 75%,
  var(--rb-7) 0 87.5%,
  var(--rb-8) 0 100%
);
  
  background-size: 200% 100%; 
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  animation: rainbow 22s linear infinite;
  width: fit-content;
  display: inline-block;
  filter: drop-shadow(1px 0 0 var(--dark)) drop-shadow(-1px 0 0 var(--dark)) drop-shadow(0 1px 0 var(--dark)) drop-shadow(0 -1px 0 var(--dark));
}

 span.dream {
background: linear-gradient(
  111deg,
  #ffb3e8 0%,
  #c799ff 20%,
  #8aa5ff 40%,
  #a8f1ff 60%,
  #e3ff9c 80%,
  #fffbfa 90%,
  #ffb3c7 100%
);
  background-size: 200% 100%; 
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  animation: dreamdash 0.7s  steps(12, end) infinite;
  width: fit-content;
  display: inline-block;
  filter: drop-shadow(1px 0 0 var(--dark)) drop-shadow(-1px 0 0 var(--dark)) drop-shadow(0 1px 0 var(--dark)) drop-shadow(0 -1px 0 var(--dark));
}

@keyframes dreamdash {
  0% { background-position: 200% 0%; }
  100% { background-position: 0% 0%; }
}


 span.comingsoon {
background: linear-gradient(
  111deg,
  #3bcbff 0%,
  #20e6a7 30%,
  #3bffff 50%,
  #00d6ff 70%,
  #3bcbff 100%
);
  background-size: 200% 100%; 
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  animation: comingsoon 1s  reverse steps(24, end) infinite;
  width: fit-content;
  display: inline-block;
  filter: drop-shadow(1px 0 0 var(--dark)) drop-shadow(-1px 0 0 var(--dark)) drop-shadow(0 1px 0 var(--dark)) drop-shadow(0 -1px 0 var(--dark));
}

@keyframes comingsoon {
  0% { background-position: 200% 0%; }
  100% { background-position: 0% 0%; }
}


/* STARS */
.stars-ptext {
  font-family: inherit;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.15em;
  color: #fdffc9;
  font-weight: bold;
  -webkit-text-stroke: 5px #eb7d00;
  -webkit-text-fill-color: white; 
  animation: none !important;
  background: none !important;
  -webkit-background-clip: initial !important;
  -webkit-text-fill-color: #fdffc9 !important;
  paint-order: stroke fill;
}

/* GLASS TEXT */
.glass-ptext {
  --container-shine: linear-gradient(
    120deg,
    transparent 5%,
    rgba(201, 253, 255, 1) 100%,
    transparent 80%
  );

  background-image: var(--container-shine), linear-gradient(var(--container), var(--container));
  background-size: 120% 100%, 100% 100%;
  background-position: 0 0, 0 0;
  background-repeat: no-repeat;

  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;

  font-weight: 200;
  font-family: inherit;
  display: inline-block;

  filter:
    drop-shadow(2px 0 0 #3848ff )
    drop-shadow(-2px 0 0 #91d1ff )
    drop-shadow(0 2px 0 #3848ff )
    drop-shadow(0 -1px 0 #a1efff);
  width: fit-content;
}

/* BLUE TEXT */
.blue-ptext {
  background: linear-gradient(
  100deg,
  #26daff 12%,
  #5eacff 25%,
  #6e73ff 62%,
  #8462f0 77%
);

  background-image: linear-gradient;
  background-size: 100%;
  background-position: 0 0, 0 0;
  background-repeat: no-repeat;

  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;

  font-weight: 200;
  font-family: inherit;
  display: inline-block;

  filter:
    drop-shadow(1px 0 0 #0300ff )
    drop-shadow(-1px 0 0 #0300ff )
    drop-shadow(0 1px 0 #0300ff )
    drop-shadow(0 -1px 0 #0300ff);
  width: fit-content;
}

/* GLOWING TEXT + FADING STROKE (for rb text) */
@property --glow-color {
  syntax: '<color>';
  inherits: false;
  initial-value: #ff3b3b;
}

@property --stroke-color {
  syntax: '<color>';
  inherits: false;
  initial-value: #5a0000;
}

span.rb.glow-ptext,
span.rb-slow.glow-ptext {
  filter:
    drop-shadow(1px 0 0 var(--stroke-color))
    drop-shadow(-1px 0 0 var(--stroke-color))
    drop-shadow(0 1px 0 var(--stroke-color))
    drop-shadow(0 -1px 0 var(--stroke-color))
    drop-shadow(0 0 1px var(--glow-color))
    drop-shadow(0 0 1px var(--glow-color));
}

span.rb.glow-ptext {
  animation:
    rainbow 2s linear infinite,
    stroke-ptext-cycle 2s linear infinite;
}

span.rb-slow.glow-ptext {
  animation:
    rainbow 22s linear infinite,
    glow-ptext-cycle 6s linear infinite,
    stroke-ptext-cycle 6s linear infinite;
}

@keyframes stroke-ptext-cycle {
  0%, 100% { --stroke-color: #c4002e; }
  16%      { --stroke-color: #b54200; }
  33%      { --stroke-color: #b06100; }
  50%      { --stroke-color: #004f3d; }
  66%      { --stroke-color: #002a94; }
  83%      { --stroke-color: #52008f; }
}

@media (prefers-reduced-motion: reduce) {
  span.rb.glow-ptext,
  span.rb-slow.glow-ptext {
    animation: none;
    --glow-color: #ffffff;
    --stroke-color: var(--dark);
  }
}

/* CLOUDS */
.cloudfloat {
  font-family: inherit;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.15em;
  color: #f2f7ff;
  font-weight: bold;
  -webkit-text-stroke: 5px #004db3;
  -webkit-text-fill-color: white; 
  -webkit-background-clip: initial !important;
  -webkit-text-fill-color: #fdffc9 !important;
  paint-order: stroke fill;
   position: relative;
            animation-name: cloudfloat;
            animation-duration:5s;
            animation-timing-function: linear;
            animation-delay: 0s;
            animation-iteration-count: infinite;
}

.cloud-img-hover {
  display: inline-flex;
   position: relative;
            animation-name: cloudimgfloat;
            animation-duration:5s;
            animation-timing-function: linear;
            animation-delay: 0s;
            animation-iteration-count: infinite;
}

@keyframes cloudimgfloat {
  0%   {top:0px;}
  10%   { top:1px;}
  20%  {top:2px;}
  30%  {top:1px;}
  40%  {top:0px;}
  50%  {top:0px;}
  60%  {top:-1px;}
  70%   {top:-2px;}
  80%  {top:-1px;}
  90%  {top:-1px;}
  100%  {top:0px;}
}

@keyframes cloudfloat {
  0%   {top:0px;}
  10%   { top:0px;}
  20%  {top:-1px;}
  30%  {top:-2px;}
  40%  {top:-1px;}
  50%  {top:0px;}
  60%  {top:1px;}
  70%   {top:2px;}
  80%  {top:2px;}
  90%  {top:1px;}
  100%  {top:0px;}
}