/*****************/
/* UNICORN WORLD */
/*****************/

div.distraction {
  --size-unicorn:clamp(4em, 15vw, 6em);

  position: fixed;
  inset:0;
  pointer-events:none;
  overflow: hidden;
  z-index: 50;
}





/***********/
/* UNICORN */
/***********/

/* @property --time-unicorn {
  syntax:"<time>";
  inherits: false;
  initial-value: 3s;
} */

.unicorn {
  --stopX: -72vw;

  position:fixed;
  bottom:0;
  left:100%;

  width:var(--size-unicorn);
  display:grid;

  animation: --unicorn-move var(--time-unicorn) linear;
}

.unicorn[data-unicorn-number="2"] {
  --stopX: -68vw;
}

.unicorn[data-unicorn-number="3"] {
  --stopX: -64vw;
}

@keyframes --unicorn-move {
  0% {
    transform: translateX(0);
    animation-timing-function: ease-out;
  }
  60%, 95% {
    transform:translate( var(--stopX) );
    animation-timing-function: ease-out;
  }
  100% {
    transform:translate( calc( -100vw - var(--size-unicorn) ) );
  }
}

.unicorn > * {
  grid-area: 1/1;
  width:100%;
}

.unicorn .unicorn__eye {
  animation: --unicorn-eye var(--time-unicorn) linear;
  opacity:1;
}

.unicorn .unicorn__squint {
  animation: --unicorn-squint var(--time-unicorn) linear;
  opacity:0;
}

.unicorn .unicorn__mouth {
  animation: --unicorn-mouth var(--time-unicorn) linear;
  opacity:0;
}

@keyframes --unicorn-eye {
  0%, 59.9% {
    opacity:1;
    animation-timing-function: ease-out;
  }
  60%, 95% {
    opacity:0;
    animation-timing-function: ease-out;
  }
  95.1%, 100% {
    opacity:1;
  }
}

@keyframes --unicorn-squint {
  0%, 59.9% {
    opacity:0;
    animation-timing-function: ease-out;
  }
  60%, 95% {
    opacity:1;
    animation-timing-function: ease-out;
  }
  95.1%, 100% {
    opacity:0;
  }
}

@keyframes --unicorn-mouth {
  0%, 59.9% {
    opacity:0;
    animation-timing-function: ease-out;
  }
  60%, 95% {
    opacity:0;
    animation-timing-function: ease-out;
  }
  95.1%, 100% {
    opacity:1;
  }
}





/*****************/
/* UNCORN BUBBLE */
/*****************/

.unicorn-bubble.yellow { --color: var(--yellow--br); }
.unicorn-bubble.orange { --color: var(--orange--br); }
.unicorn-bubble { --color: var(--pink--br); }
.unicorn-bubble.green { --color: var(--green--br); }
.unicorn-bubble.blue { --color: var(--blue--br); }
.unicorn-bubble.purple { --color: var(--purple--br); }
.unicorn-bubble.turquoise { --color: var(--turquoise--br); }

.unicorn-bubble {
  --size-bubble:calc( ( var(--size-unicorn) * (.8 + .4 * var(--size)) * .05) * 20);

  position:fixed;
  left:calc( var(--x) * 100% - var(--size-bubble) * .5);
  bottom:calc( var(--y) * 100% - var(--size-bubble) * .5);
  z-index: 70;

  width:var(--size-bubble);
  height:var(--size-bubble);
  transform:scale(.05);

  background-image:
    radial-gradient(
      at 40% 40%, 
      #fff6, 
      var(--color) 85%
    );
  background-image:
    radial-gradient(
      at 40% 40% in oklch, 
      color-mix(in oklch, var(--color), transparent 75%), 
      var(--color) 85%
    );
  border-radius:50%;

  animation:
    --ani-bubble-translate 5s cubic-bezier(.1, .7, .3, .9) forwards,
    --ani-bubble-transform calc(15s + 15s * var(--timeY)) ease-in forwards,
    --ani-bubble-scale-opacity calc(15s + 15s * var(--timeY)) ease-in forwards;
  
  pointer-events:all;
  cursor:pointer;
  /* animation-composition:accumulate, add; */
}

@keyframes --ani-bubble-translate {
  to {
    translate: 
      calc(min(5vw, 2em) + min(25vw, 8em) * var(--poefX))
      0;
  }
}

@keyframes --ani-bubble-transform {
  to {
    translate: 
      calc( min(5vw, 2em) + min(25vw, 8em) * var(--poefX) + (var(--deltaX) - .25) * 100vw )
      calc(-40vh - 40vh * var(--deltaY) );
  }
}

@keyframes --ani-bubble-scale-opacity {
  to {
    transform:scale(1);
    opacity: .1;
  }
}

.unicorn-bubble.poef {
  scale:5;
  transition:.1s;
}