/* Two Simps and a Micraphone: keyframes and reduced-motion overrides
   Converted from the React CSS modules. Class names follow component__class. */

/* ==========================================================================
   Base and shared primitives
   ========================================================================== */
@keyframes grain {
  0% {
    transform: translate(0, 0);
  }
  25% {
    transform: translate(-3%, 2%);
  }
  50% {
    transform: translate(2%, -3%);
  }
  75% {
    transform: translate(-1%, 3%);
  }
  100% {
    transform: translate(0, 0);
  }
}
@keyframes ec-pulse {
  from {
    transform: scaleY(1);
  }
  to {
    transform: scaleY(0.45);
  }
}

/* ==========================================================================
   Nav
   ========================================================================== */
@keyframes nav__tally {
  50% {
    opacity: 0.55;
  }
}
@keyframes nav__menuIn {
  from {
    clip-path: circle(0% at calc(100% - 3.2rem) 0);
  }
  to {
    clip-path: circle(150% at calc(100% - 3.2rem) 0);
  }
}
@keyframes nav__lampOn {
  from {
    opacity: 0;
  }
}
@keyframes nav__rise {
  from {
    opacity: 0;
    transform: translateY(18px);
  }
}
@keyframes nav__bars {
  from {
    transform: scaleY(0.25);
  }
  to {
    transform: scaleY(1);
  }
}

/* ==========================================================================
   Hero
   ========================================================================== */
@keyframes hero__drift {
  to {
    transform: translate(12vw, -4vh) scale(1.15);
  }
}
@keyframes hero__spin {
  to {
    transform: rotate(360deg);
  }
}
@keyframes hero__ticker {
  to {
    transform: translateX(-50%);
  }
}

/* ==========================================================================
   Episodes
   ========================================================================== */
@keyframes episodes__eq {
  to {
    transform: scaleY(1);
  }
}

/* ==========================================================================
   Hosts
   ========================================================================== */
@keyframes hosts__sheen {
  0%,
  55% {
    transform: translateX(-160%) skewX(-12deg);
  }
  85%,
  100% {
    transform: translateX(330%) skewX(-12deg);
  }
}
@keyframes hosts__turn {
  to {
    transform: rotate(360deg);
  }
}

/* ==========================================================================
   Show
   ========================================================================== */
@keyframes show__marquee {
  to {
    transform: translateX(-50%);
  }
}

/* ==========================================================================
   AfterHours
   ========================================================================== */
@keyframes after-hours__spin {
  to {
    transform: rotate(360deg);
  }
}
@keyframes after-hours__flicker {
  0% {
    opacity: 0.2;
  }
  18% {
    opacity: 1;
  }
  30% {
    opacity: 0.35;
  }
  48%,
  100% {
    opacity: 1;
  }
}

/* ==========================================================================
   Studio
   ========================================================================== */
@keyframes studio__blink {
  to {
    visibility: hidden;
  }
}

/* ==========================================================================
   Footer
   ========================================================================== */
@keyframes footer__ticker {
  to {
    transform: translateX(-50%);
  }
}
@property --credit-angle {
  syntax: "<angle>";
  inherits: false;
  initial-value: 0deg;
}
@keyframes footer__creditOrbit {
  to {
    --credit-angle: 360deg;
  }
}
@keyframes footer__creditShimmer {
  0% {
    background-position: 100% 0;
  }
  60%,
  100% {
    background-position: 0% 0;
  }
}
@keyframes footer__creditStar {
  0% {
    transform: rotate(0deg) scale(1);
    opacity: 1;
  }
  45% {
    opacity: 1;
  }
  50% {
    transform: rotate(180deg) scale(0.65);
    opacity: 0.55;
  }
  55% {
    opacity: 1;
  }
  100% {
    transform: rotate(360deg) scale(1);
    opacity: 1;
  }
}

/* ==========================================================================
   Reduced motion
   ========================================================================== */
/* Base and shared primitives */
@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }
  .grain {
    animation: none;
  }
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}
/* Nav */
@media (prefers-reduced-motion: reduce) {
  .nav__panel,
  .nav__panelRig span,
  .nav__panelLinks a,
  .nav__panelBottom {
    animation: none;
  }
}
@media (prefers-reduced-motion: reduce) {
  .nav__soundOn .nav__soundBars i {
    animation: none;
    transform: scaleY(0.7);
  }
}
/* Hero */
@media (prefers-reduced-motion: reduce) {
  .hero__medalRing,
  .hero__haze span,
  .hero__tickerTrack {
    animation: none;
  }
}
/* Hosts */
@media (prefers-reduced-motion: reduce) {
  .hosts__ring,
  .hosts__sheen::before {
    animation: none;
  }
}
/* Show */
@media (prefers-reduced-motion: reduce) {
  .show__track {
    animation: none;
  }
}
/* AfterHours */
@media (prefers-reduced-motion: reduce) {
  .after-hours__badgeRing {
    animation: none;
  }
}
/* Studio */
@media (prefers-reduced-motion: reduce) {
  .studio__rec i {
    animation: none;
  }
}
/* Footer */
@media (prefers-reduced-motion: reduce) {
  .footer__tickerTrack,
  .footer__credit,
  .footer__creditName,
  .footer__creditMark {
    animation: none;
  }
}