.hero-bg {
  animation: heroZoom 20s ease-in-out infinite alternate;
}

.brand-mark {
  animation: logoIn 0.7s ease both, softGlow 3.2s ease-in-out infinite;
}

.hero-copy h1 span {
  animation: fadeUp 0.62s ease 0.12s both;
}

.hero-copy h1 strong {
  animation: fadeUp 0.62s ease 0.22s both;
}

.hero-description {
  animation: fadeUp 0.62s ease 0.32s both;
}

.hero-actions {
  animation: fadeUp 0.62s ease 0.44s both;
}

.start-button,
.lesson-button {
  transition:
    box-shadow 0.16s ease,
    filter 0.16s ease,
    background 0.16s ease,
    color 0.16s ease,
    border-color 0.16s ease;
}

.button-arrow,
.lesson-button span:last-child {
  transition: background 0.2s ease, color 0.2s ease;
}

.situation-screen.is-active .training-sidebar {
  animation: fadeRight 0.55s ease both;
}

.situation-screen.is-active .lesson-panel {
  animation: fadeUp 0.55s ease 0.08s both;
}

.situation-screen.is-active .info-card {
  animation: fadeUp 0.5s ease both;
}

.situation-screen.is-active .info-card:nth-of-type(1) {
  animation-delay: 0.16s;
}

.situation-screen.is-active .info-card:nth-of-type(2) {
  animation-delay: 0.24s;
}

.situation-screen.is-active .info-card:nth-of-type(3) {
  animation-delay: 0.32s;
}

.situation-screen.is-active .employee-card {
  animation: fadeScale 0.6s ease 0.26s both;
}

.situation-screen.is-active .lesson-button {
  animation: fadeUp 0.55s ease 0.38s both;
}

.rules-screen.is-active .training-sidebar {
  animation: fadeRight 0.55s ease both;
}

.rules-screen.is-active .lesson-panel {
  animation: fadeUp 0.55s ease 0.08s both;
}

.rules-screen.is-active .rules-heading {
  animation: fadeUp 0.5s ease 0.14s both;
}

.rules-screen.is-active .rule-step {
  animation: fadeUp 0.5s ease both;
}

.rules-screen.is-active .rule-step:nth-of-type(1) {
  animation-delay: 0.18s;
}

.rules-screen.is-active .rule-step:nth-of-type(2) {
  animation-delay: 0.24s;
}

.rules-screen.is-active .rule-step:nth-of-type(3) {
  animation-delay: 0.30s;
}

.rules-screen.is-active .rule-step:nth-of-type(4) {
  animation-delay: 0.36s;
}

.rules-screen.is-active .rule-step:nth-of-type(5) {
  animation-delay: 0.42s;
}

.rules-screen.is-active .rule-step:nth-of-type(6) {
  animation-delay: 0.48s;
}

.rules-screen.is-active .mentor-note {
  animation: fadeRight 0.52s ease 0.28s both;
}

.rules-screen.is-active .rules-mentor-image {
  animation: fadeScale 0.58s ease 0.36s both;
}

.rules-screen.is-active .rules-next-button {
  animation: fadeUp 0.52s ease 0.44s both;
}

.mode-screen.is-active .training-sidebar,
.dialog-screen.is-active .training-sidebar,
.result-screen.is-active .training-sidebar {
  animation: fadeRight 0.55s ease both;
}

.mode-screen.is-active .lesson-panel,
.dialog-screen.is-active .lesson-panel,
.result-screen.is-active .lesson-panel {
  animation: fadeUp 0.55s ease 0.08s both;
}

.mode-screen.is-active .mode-copy,
.dialog-screen.is-active .dialog-copy,
.result-screen.is-active .result-main {
  animation: fadeUp 0.5s ease 0.14s both;
}

.mode-screen.is-active .mode-card,
.dialog-screen.is-active .dialog-option,
.result-screen.is-active .result-side {
  animation: fadeUp 0.52s ease both;
}

.mode-screen.is-active .mode-card:nth-of-type(1),
.dialog-screen.is-active .dialog-option:nth-of-type(1) {
  animation-delay: 0.20s;
}

.mode-screen.is-active .mode-card:nth-of-type(2),
.dialog-screen.is-active .dialog-option:nth-of-type(2) {
  animation-delay: 0.28s;
}

.dialog-screen.is-active .dialog-option:nth-of-type(3) {
  animation-delay: 0.36s;
}

.mode-screen.is-active .mode-footer .lesson-button,
.dialog-screen.is-active .dialog-footer .lesson-button,
.result-screen.is-active #restartBtn {
  animation: fadeUp 0.52s ease 0.38s both;
}

@keyframes heroZoom {
  from {
    transform: scale(1.01);
  }

  to {
    transform: scale(1.035);
  }
}

@keyframes logoIn {
  from {
    opacity: 0;
    transform: translateY(-12px) scale(0.94);
  }

  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

@keyframes softGlow {
  0%, 100% {
    box-shadow:
      0 0 28px rgba(255, 102, 51, 0.3),
      inset 0 0 20px rgba(255, 102, 51, 0.12);
  }

  50% {
    box-shadow:
      0 0 44px rgba(255, 102, 51, 0.48),
      inset 0 0 24px rgba(255, 102, 51, 0.16);
  }
}

@keyframes fadeUp {
  from {
    opacity: 0;
    transform: translateY(18px);
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes fadeRight {
  from {
    opacity: 0;
    transform: translateX(-18px);
  }

  to {
    opacity: 1;
    transform: translateX(0);
  }
}

@keyframes fadeScale {
  from {
    opacity: 0;
    transform: scale(0.975);
  }

  to {
    opacity: 1;
    transform: scale(1);
  }
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
    scroll-behavior: auto !important;
  }
}