@font-face {
  font-family: "Manrope";
  src: url("fonts/Manrope-Variable.ttf") format("truetype");
  font-style: normal;
  font-weight: 200 800;
  font-display: swap;
}

:root {
  --suoda-display: "Manrope", "Segoe UI Variable Display", "Trebuchet MS", sans-serif;
  --suoda-body: "Manrope", "Segoe UI Variable Text", "Segoe UI", sans-serif;
}

.ui-icon {
  width: 1.25rem;
  height: 1.25rem;
  display: inline-block;
  flex: 0 0 auto;
  color: inherit;
  background: currentColor;
  -webkit-mask: var(--ui-icon) center / contain no-repeat;
  mask: var(--ui-icon) center / contain no-repeat;
}

.ui-icon-book-open { --ui-icon: url("icons/book-open.svg"); }
.ui-icon-book-marked { --ui-icon: url("icons/book-marked.svg"); }
.ui-icon-library { --ui-icon: url("icons/library.svg"); }
.ui-icon-gamepad { --ui-icon: url("icons/gamepad-2.svg"); }
.ui-icon-user { --ui-icon: url("icons/user-round.svg"); }
.ui-icon-users { --ui-icon: url("icons/users-round.svg"); }
.ui-icon-route { --ui-icon: url("icons/route.svg"); }
.ui-icon-community { --ui-icon: url("icons/heart-handshake.svg"); }
.ui-icon-sparkles { --ui-icon: url("icons/sparkles.svg"); }
.ui-icon-focus { --ui-icon: url("icons/focus.svg"); }
.ui-icon-help { --ui-icon: url("icons/circle-question-mark.svg"); }
.ui-icon-download { --ui-icon: url("icons/download.svg"); }
.ui-icon-layers { --ui-icon: url("icons/layers.svg"); }
.ui-icon-checklist { --ui-icon: url("icons/clipboard-check.svg"); }
.ui-icon-settings { --ui-icon: url("icons/settings-2.svg"); }
.ui-icon-dashboard { --ui-icon: url("icons/layout-dashboard.svg"); }
.ui-icon-play { --ui-icon: url("icons/play.svg"); }
.ui-icon-file-check { --ui-icon: url("icons/file-check.svg"); }
.ui-icon-question { --ui-icon: url("icons/message-circle-question-mark.svg"); }
.ui-icon-compass { --ui-icon: url("icons/compass.svg"); }
.ui-icon-design { --ui-icon: url("icons/pencil-ruler.svg"); }
.ui-icon-badge-check { --ui-icon: url("icons/badge-check.svg"); }
.ui-icon-brain { --ui-icon: url("icons/brain-circuit.svg"); }
.ui-icon-graduation { --ui-icon: url("icons/graduation-cap.svg"); }
.ui-icon-send { --ui-icon: url("icons/send.svg"); }
.ui-icon-image { --ui-icon: url("icons/image-up.svg"); }
.ui-icon-audio { --ui-icon: url("icons/audio-lines.svg"); }

html {
  scroll-behavior: smooth;
}

body,
button,
input,
select,
textarea {
  font-family: var(--suoda-body);
  font-kerning: normal;
  text-rendering: optimizeLegibility;
}

:is(h1, h2, h3, .section-title, .package-title) {
  font-family: var(--suoda-display) !important;
  font-kerning: normal;
  text-wrap: balance;
}

:is(h1, h2) {
  letter-spacing: -.035em;
}

::selection {
  color: #fff;
  background: #1b668f;
}

:is(a, button, input, select, textarea):focus-visible {
  outline: 3px solid color-mix(in srgb, #1b86b5 45%, transparent);
  outline-offset: 3px;
}

:is(button, a, .course-card, .feature-card, .library-card) {
  -webkit-tap-highlight-color: transparent;
}

body.motion-enabled .motion-node {
  opacity: 0;
  transform: translate3d(0, 22px, 0) scale(.985);
  transition:
    opacity .68s cubic-bezier(.2, .75, .25, 1),
    transform .68s cubic-bezier(.2, .75, .25, 1);
  transition-delay: var(--motion-delay, 0ms);
}

body.motion-enabled .motion-node.is-motion-visible {
  opacity: 1;
  transform: translate3d(0, 0, 0) scale(1);
}

[data-view-panel].is-active {
  animation: suoda-view-enter .5s cubic-bezier(.2, .75, .25, 1) both;
}

img[data-panther-hover] {
  transform-origin: 50% 92%;
  animation: panterita-presence 4.8s ease-in-out infinite;
}

img[data-panther-hover]:hover,
[data-panther-interaction]:hover img[data-panther-hover],
[data-panther-interaction]:focus-within img[data-panther-hover],
a:hover img[data-panther-hover],
a:focus-visible img[data-panther-hover],
button:hover img[data-panther-hover],
button:focus-visible img[data-panther-hover],
aside:hover img[data-panther-hover],
article:hover img[data-panther-hover] {
  content: url("generated/pantera-saludo-uam.gif");
}

.course-hero-copy h1,
.hero-copy h1,
.hero-content h1 {
  position: relative;
  animation: suoda-title-enter .85s cubic-bezier(.2, .75, .25, 1) both;
}

.course-hero-copy h1::after,
.page-heading h1::after {
  display: block;
  width: clamp(52px, 8vw, 100px);
  height: 4px;
  margin-top: 14px;
  border-radius: 999px;
  background: currentColor;
  content: "";
  opacity: .25;
  transform-origin: left;
  animation: suoda-line-grow .9s .22s cubic-bezier(.2, .75, .25, 1) both;
}

.course-card,
.quick-access-grid button,
.feature-card,
.library-card,
.teacher-assessment,
.repeater-card {
  transition:
    transform .28s cubic-bezier(.2, .75, .25, 1),
    box-shadow .28s ease,
    border-color .28s ease;
}

.course-card:hover,
.quick-access-grid button:hover,
.feature-card:hover,
.library-card:hover {
  transform: translateY(-6px);
}

.course-hero::after,
.game-hero::after {
  position: absolute;
  inset: auto -8% -48% auto;
  width: min(42vw, 520px);
  aspect-ratio: 1;
  border: 1px solid rgba(255, 255, 255, .18);
  border-radius: 43% 57% 62% 38%;
  content: "";
  pointer-events: none;
  animation: suoda-drift 18s linear infinite;
}

@keyframes suoda-view-enter {
  from {
    opacity: 0;
    transform: translateY(12px);
  }
}

@keyframes suoda-title-enter {
  from {
    opacity: 0;
    letter-spacing: .02em;
    transform: translateY(18px);
  }
}

@keyframes suoda-line-grow {
  from {
    transform: scaleX(0);
  }
}

@keyframes suoda-drift {
  to {
    transform: rotate(1turn);
  }
}

@keyframes panterita-presence {
  0%,
  100% {
    transform: translate3d(0, 0, 0) rotate(-.35deg);
  }

  50% {
    transform: translate3d(0, -3px, 0) rotate(.35deg);
  }
}

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }

  body.motion-enabled .motion-node,
  body.motion-enabled .motion-node.is-motion-visible {
    opacity: 1;
    transform: none;
    transition: none;
  }

  [data-view-panel].is-active,
  .course-hero-copy h1,
  .hero-copy h1,
  .hero-content h1,
  .course-hero-copy h1::after,
  .page-heading h1::after,
  .course-hero::after,
  .game-hero::after,
  img[data-panther-hover] {
    animation: none;
  }

  img[data-panther-hover] {
    content: url("generated/pantera-uam-poster.webp");
  }
}