/**
 * Module: Dramatic
 * Filename: ca__Dramatic.css
 */

.curtainReveal {
  animation-name: curtainReveal;
  animation-timing-function: ease-out;
  transform-origin: top center;
  overflow: hidden;
}

@keyframes curtainReveal {
  0% {
    clip-path: inset(0 0 100% 0);
    opacity: 0;
  }

  50%,
  100% {
    clip-path: inset(0 0 0 0);
    opacity: 1;
  }
}

.curtainClose {
  animation-name: curtainClose;
  animation-timing-function: ease-in;
  transform-origin: top center;
}

@keyframes curtainClose {
  0% {
    clip-path: inset(0 0 0 0);
    opacity: 1;
  }

  50%,
  100% {
    clip-path: inset(0 0 100% 0);
    opacity: 0;
  }
}

.spiralTwistIn {
  animation-name: spiralTwistIn;
  animation-timing-function: ease-out;
  transform-origin: center;
  will-change: transform, opacity;
}

@keyframes spiralTwistIn {
  0% {
    transform: scale(0) rotate(720deg);
    opacity: 0;
  }

  60% {
    transform: scale(1.05) rotate(-30deg);
    opacity: 1;
  }

  100% {
    transform: scale(1) rotate(0deg);
  }
}

.spiralTwistOut {
  animation-name: spiralTwistOut;
  animation-timing-function: ease-in;
  transform-origin: center;
  will-change: transform, opacity;
}

@keyframes spiralTwistOut {
  0% {
    transform: scale(1) rotate(0deg);
    opacity: 1;
  }

  100% {
    transform: scale(0.3) rotate(-360deg);
    opacity: 0;
  }
}

.spotlightFocus {
  animation-name: spotlightFocus;
  animation-timing-function: ease-in-out;
  transform-origin: center;
  will-change: transform, opacity;
}

@keyframes spotlightFocus {
  0% {
    filter: brightness(0.2) blur(4px);
    transform: scale(1.2);
    opacity: 0;
  }

  100% {
    filter: brightness(1) blur(0);
    transform: scale(1);
    opacity: 1;
  }
}

.spotlightFade {
  animation-name: spotlightFade;
  animation-timing-function: ease-out;
  transform-origin: center;
  will-change: transform, opacity;
}

@keyframes spotlightFade {
  0% {
    filter: brightness(1) blur(0);
    opacity: 1;
    transform: scale(1);
  }

  100% {
    filter: brightness(0.3) blur(6px);
    opacity: 0;
    transform: scale(0.9);
  }
}