main {
    display: grid;
    margin-inline: auto;
      
  }


  .hero {
    display: grid;
    align-items: center;

    > * {
      grid-area: 1/1;
    }

    & h1 {
      text-align: center;
      font-family: 'Bebas Neue', sans-serif;
      font-weight: normal;
      font-size: 7rem;
      text-transform: uppercase;
    }

    & p {
      max-inline-size: 25ch;
      font-size: var(--font-size-4);
      color: var(--surface-1);
      text-align: center;
      display: none;
    }

    .visual {
      background: var(--gradient-8);

      block-size: calc(100dvh - var(--nav-block-size));
      overflow: hidden;

      & img {
        object-fit: cover;
        inline-size: 100%;
        block-size: 100%;
      }
    }

    :is(picture, img) {
      inline-size: 100%;
      block-size: 100%;
    }

    .content {
      display: grid;
      place-items: center;
    }

    @media (width < 768px) {
      .content {
        gap: var(--size-3);
      }
      & h1 {
        font-size: var(--font-size-8);
        max-inline-size: var(--size-content-1);
        line-height: var(--font-lineheight-0);
      }
    }
  }

  .fold {
    display: grid;
    justify-content: center;
    padding: var(--size-10);

    & p {
      text-align: center;
      font-size: var(--font-size-7);
      max-inline-size: var(--size-content-2);
      @media (width < 768px) {
        font-size: var(--font-size-fluid-3);
      }
    }
  }

  .schedule {
    & h2 {
      font-size: var(--font-size-7);
      color: var(--brand-1);
      text-transform: uppercase;
    }

    & table {
      border: 3px solid var(--surface-1);
      inline-size: 100%;
    }

    .table-wrapper {
      display: grid;
      justify-items: center;
      gap: calc(var(--gap) / 2);
    }

    & tr:hover td {
      color: var(--brand-1);
       background-color: white;
    }



  .showcase {
    display: grid;
    overflow: hidden;
    background-color: var(--surface-1);

    > * {
      grid-area: 1/1;
    }
    > video {
      display: block;
      inline-size: 100%;
    }
    > img {
      z-index: 1;
    }
  }



  .about {
    background-color: var(--surface-1);
    padding-inline: var(--size-3);

    display: grid;
    grid-template-rows: 1fr auto;
    justify-content: center;
    min-block-size: 100dvh;
    padding-block-end: var(--size-8);
    place-content: center;
    text-align: center;

    #target-word {
      font-size: var(--font-size-8);
      align-self: center;
    }

    & footer {
      & p {
        color: var(--text-2);
        text-wrap: balance;
      }
    }
  }
}

@layer components {
  .Card {
    display: grid;
    background-color: var(--surface-1);
    color: var(--text-1);
    gap: calc(var(--gap) / 2);
    align-content: start;

    text-decoration: none;
    transition: background-color 0.2s var(--ease-2);
    padding: var(--size-8);
    border-radius: var(--radius-3);

    & h2 {
      font-size: var(--font-size-5);
    }

    & ul {
      padding: var(--size-3);
    }

    & i {
      font-size: var(--font-size-5);

      /* VisBug ♥ */
      margin-inline-start: var(--size-00);
    }

    & li {
      text-wrap: balance;
    }

    &:hover {
      background-color: hsl(0, 0%, 33%);
    }
  }

  .Button,
  .LinkButton {
    display: inline-flex;
    text-transform: uppercase;
    font-weight: 700;
    text-decoration: none;

    color: var(--text-1);
    padding: calc(var(--size-2) + var(--border-size-1))
      calc(var(--size-2) + var(--border-size-2));

    padding: calc(var(--size-2) + var(--border-size-1))
      calc(var(--size-4) + var(--border-size-2));

    font-size: 1.25rem;
    min-inline-size: 13ch;
    transition: 0.2s ease;
    background-color: var(--surface-2);
    border: 1px solid var(--surface-2);

    &.Primary {
      border-color: var(--brand-1);
      background-color: var(--brand-1);
      &:hover {
        border-color: var(--text-1);
        background-color: var(--text-1);
        color: var(--brand-1);
      }
    }

    &.secondary {
      border-color: var(--text-1);
      background-color: var(--text-1);
      color: var(--brand-1);
      &:hover {
        border-color: var(--brand-1);
        background-color: var(--brand-1);
        color: var(--text-1);
      }
    }
  }

  .NavLink {
    color: var(--text-1);
    font-size: var(--font-size-3);
    font-weight: var(--font-weight-5);
    text-decoration-color: currentColor;
    text-decoration-thickness: var(--border-size-2);
    text-underline-offset: 0.5ex;
    text-decoration: none;
    transition: color 200ms ease;

    /* &:hover {
      text-decoration: underline;
    } */

    &:hover {
      color: var(--brand-1);
    }

    &:target {
      color: var(--brand-1);
    }

    @media (width < 768px) {
      font-size: var(--font-size-5);
      padding-inline: var(--size-4);
    }
  }

  .Logo {
    font-family: 'Bebas Neue', sans-serif;
    font-weight: var(--font-weight-9);

    font-size: 4.5rem;
    font-size: calc(var(--font-size-8) + var(--font-size-1));
  }

  .NavButton {
    padding: var(--size-2);
    background-color: var(--surface-1);
    > i {
      font-size: var(--font-size-6);
    }
  }
}

@media (prefers-reduced-motion: no-preference) {
  @layer animation.scroll-driven {
    .showcase {
      view-timeline: --showcase;

      > img {
        animation: fade-overlay linear both;
        animation-timeline: --showcase;
        animation-range: 20% 40%;
        transform-origin: top center;
      }
    }

    .schedule {
      animation: to-white linear both;
      animation-timeline: view();
      animation-range-start: 4%;
      animation-range-end: 10%;
    }

    .cards {
      animation: to-brand linear both;
      animation-timeline: view();
      animation-range-start: 4%;
      animation-range-end: 16%;
    }

    .about {
      background-color: hsl(349 100% 58%);
      animation: to-black linear both;
      animation-timeline: view();
      animation-range-start: 4%;
      animation-range-end: 16%;
    }
    @keyframes fade-overlay {
      to {
        scale: 3.5;
        opacity: 0;
      }
    }
    /* Avoiding custom properties to ensure the animation remains on the compositor for optimal performance. */
    @keyframes to-brand {
      to {
        background-color: hsl(349 100% 58%);
      }
    }

    @keyframes to-white {
      to {
        background-color: white;
      }
    }

    @keyframes to-black {
      to {
        background-color: black;
      }
    }
  }

  @layer animation.reveal {
    .subject {
      opacity: 0;
    }

    .reveal-up {
      animation: fade-in 660ms ease forwards,
        slide-up 1000ms cubic-bezier(0, 0, 0.1, 1) forwards;
    }

    .reveal-down {
      animation: fade-in 660ms ease forwards,
        slide-down 1000ms cubic-bezier(0, 0, 0.1, 1) forwards;
    }

    @keyframes fade-in {
      to {
        opacity: 1;
      }
    }

    @keyframes slide-up {
      from {
        transform: translateY(-100px);
      }
    }

    @keyframes slide-down {
      from {
        transform: translateY(100px);
      }
    }
  }

  @layer animation.navbar {
    .Navbar {
      transition: transform 0.4s var(--ease-2);
      [scroll-direction='down'] & {
        transform: translateY(-200%);
      }
    }
  }

  @layer animation.scroll-driven.active-link {
    body {
      timeline-scope: --home, --schedules, --plans, --about;
    }

    #home {
      view-timeline-name: --home;
    }

    #schedules {
      view-timeline-name: --schedules;
    }
    #plans {
      view-timeline-name: --plans;
    }

    #about {
      view-timeline-name: --about;
    }

    .NavLink[href='#'] {
      animation-timeline: --home;
    }

    .NavLink[href='#schedules'] {
      animation-timeline: --schedules;
    }

    .NavLink[href='#plans'] {
      animation-timeline: --plans;
    }

    .NavLink[href='#about'] {
      animation-timeline: --about;
    }

    .NavLink {
      animation: highlight linear both;
    }

    @keyframes highlight {
      0%,
      100% {
        color: white;
      }
      30%,
      70% {
        color: hsl(349 100% 58%);
      }
    }
  }

  @layer animation.navbar.sm-screen {
    body:has(.menu.open) {
      overflow-y: hidden;
    }

    @media (prefers-reduced-motion: no-preference) {
      @media (width < 768px) {
        .menu {
          view-transition-name: menu;
        }

        ::view-transition-old(menu) {
          animation: var(--animation-slide-out-right);
        }

        ::view-transition-new(menu) {
          animation: var(--animation-slide-in-left);
        }
      }
    }
  }
}

@supports not (animation-timeline: scroll()) {
  .schedule {
    background-color: white;
  }
  .cards {
    background-color: var(--brand-1);
  }
}

@media (prefers-reduced-motion: reduce) {
  .schedule {
    background-color: white;
  }

  .showcase {
    display: none;
  }

  .cards {
    background-color: var(--brand-1);
  }
}