/* ====================================
Navigation
==================================== */
body[data-page="intro"] nav {
  font-size: var(--fs-01);
}

body[data-page="intro"] .overlay-navigation {
  position: fixed;
  z-index: 99;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  visibility: hidden;
}

body[data-page="intro"] .overlay-slide-down {
  visibility: visible;
  transition: none;
}

/* Stay visible until both links have exited; nav-intro.js reads this duration to know when to hide the overlay. */
body[data-page="intro"] .overlay-slide-up {
  visibility: hidden;
  transition: visibility 0s linear 1s;
}

/* Links slide in one after another, then exit in the same order. */
body[data-page="intro"] .overlay-navigation .nav-links li {
  opacity: 0;
  transform: translate3d(0, -100vh, 0);
  backface-visibility: hidden;
  will-change: transform, opacity;
  transition:
    transform .5s cubic-bezier(0.64, 0, 0.78, 0),
    opacity .5s ease-in,
    background-color .2s linear;
}

body[data-page="intro"] .overlay-slide-up .nav-links li:nth-child(2) {
  transition-delay: .5s, .5s, 0s;
}

body[data-page="intro"] .overlay-slide-down .nav-links li {
  opacity: 1;
  transform: translate3d(0, 0, 0);
  transition:
    transform .8s cubic-bezier(0.22, 1, 0.36, 1),
    opacity .6s ease-out,
    background-color .2s linear;
}

body[data-page="intro"] .overlay-slide-down .nav-links li:nth-child(2) {
  transition-delay: .35s, .35s, 0s;
}

@media (prefers-reduced-motion: reduce) {
  body[data-page="intro"] .overlay-navigation .nav-links li,
  body[data-page="intro"] .overlay-slide-up,
  body[data-page="intro"] .overlay-slide-down .nav-links li {
    transition: none;
  }
}

body[data-page="intro"] nav,
body[data-page="intro"] nav ul {
  width: 100%;
  height: 100%;
  margin: 0;
  padding: 0;
  background-color: #00000000;
  overflow: hidden;
}

body[data-page="intro"] nav ul {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: var(--space-minus-1);
}

body[data-page="intro"] .nav-links {
  height: 100%;
  list-style: none;
}

body[data-page="intro"] .nav-links li {
  display: flex;
  justify-content: center;
  align-items: center;
  flex: 0 0 auto;
  inline-size: 60vw;
  aspect-ratio: 5 / 2;
  margin: 0 var(--space-minus-1);
  /* top, right, bottom, left */
  padding: 0 var(--space-minus-1);
  /* space inside each li */
  border-radius: 50%;
  text-align: center;
  transition: all .2s linear;
}

body[data-page="intro"] .nav-links li a {
  display: flex;
  justify-content: center;
  align-items: center;
  position: relative;
  top: auto;
  inline-size: 100%;
  block-size: 100%;
  color: var(--text-color);
  letter-spacing: 4px;
  text-decoration: none;
  text-align: center;
  font-size: var(--fs-1);
}

@media (hover: hover) and (pointer: fine) {
  body[data-page="intro"] .nav-links li a:hover::before,
  body[data-page="intro"] .nav-links li a:focus-visible::before {
    transform: scaleX(1);
    opacity: 1;
  }

  body[data-page="intro"] .nav-links li a:hover::after,
  body[data-page="intro"] .nav-links li a:focus-visible::after {
    transform: translateY(40px);
    opacity: 1;
    display: block;
  }
}

body[data-page="intro"] .nav-links li:nth-of-type(1) {
  background-color: #7594a05d
}

body[data-page="intro"] .nav-links li:nth-of-type(2) {
  background-color: #2145535d
}


body[data-page="intro"] .slide-in-nav-item {
  animation: slide-in-nav-item 0.4s linear 1 .2s both;
}

body[data-page="intro"] .slide-in-nav-item-delay-1 {
  animation: slide-in-nav-item 0.4s linear 1 .4s both;
}

body[data-page="intro"] .slide-in-nav-item-reverse {
  animation: slide-in-nav-item-reverse .3s linear 1 .5s both;
}

body[data-page="intro"] .slide-in-nav-item-delay-1-reverse {
  animation: slide-in-nav-item-reverse .3s linear 1 .4s both;
}

/* ====================================
Burger king
==================================== */

body[data-page="intro"] .open-overlay {
  z-index: 100;
  width: var(--space-2);
  display: block;
  cursor: pointer;
  background: transparent;
  border: 0;
  padding: 0;
}

body[data-page="intro"]:has(.open-overlay[aria-expanded="true"]) main,
body[data-page="intro"]:has(.open-overlay[aria-expanded="true"]) footer {
  opacity: 0;
  transition: opacity var(--intro-nav-fade-out-duration) cubic-bezier(0.22, 1, 0.36, 1);
}

body[data-page="intro"]:has(.open-overlay[aria-expanded="false"]) main,
body[data-page="intro"]:has(.open-overlay[aria-expanded="false"]) footer {
  opacity: 1;
  transition: opacity var(--intro-nav-fade-in-duration) cubic-bezier(0.22, 1, 0.36, 1) var(--intro-nav-fade-in-delay);
}

body[data-page="intro"] header:has(.open-overlay[aria-expanded="true"]) .header-title {
  opacity: 0;
  transition: opacity var(--intro-nav-fade-out-duration) cubic-bezier(0.22, 1, 0.36, 1);
}

body[data-page="intro"] header:has(.open-overlay[aria-expanded="false"]) .header-title {
  opacity: 1;
  transition: opacity var(--intro-nav-fade-in-duration) cubic-bezier(0.22, 1, 0.36, 1) var(--intro-nav-fade-in-delay);
}

body[data-page="intro"] .open-overlay[aria-expanded="true"] span {
  display: block;
  background-color: var(--text-color)
}

body[data-page="intro"] .open-overlay:focus-visible {
  outline: 1px solid var(--text-color);
  outline-offset: 3px;
}

body[data-page="intro"] .open-overlay span {
  display: block;
  height: 1px;
  background-color: var(--text-color);
  margin-bottom: 4px;
  border-radius: 1px;
  transform-origin: center;
  transition: transform .2s ease, background-color .2s ease;
  cursor: pointer;
  margin-top: 8px;
}

.animate-top-bar {
  animation: animate-top-bar .6s ease-in-out 1 both
}

.animate-bottom-bar {
  animation: animate-bottom-bar .6s ease-in-out 1 both
}

.animate-middle-bar {
  animation: animate-middle-bar .6s ease-in-out 1 both
}

.animate-out-top-bar {
  animation: animate-out-top-bar .6s ease-in-out 1 both
}

.animate-out-bottom-bar {
  animation: animate-out-bottom-bar .6s ease-in-out 1 both
}

.animate-out-middle-bar {
  animation: animate-out-middle-bar .6s ease-in-out 1 both
}


/* ====================================
Animation keyframes
==================================== */

@keyframes slide-in-nav-item {
  from {
    -webkit-transform: translateY(-100%);
    transform: translateY(-100%)
  }

  to {
    -webkit-transform: translateY(0);
    transform: translateY(0)
  }
}

@keyframes slide-in-nav-item-reverse {
  from {
    -webkit-transform: translateY(0);
    transform: translateY(0)
  }

  to {
    -webkit-transform: translateY(-100%);
    transform: translateY(-100%)
  }
}

@keyframes animate-top-bar {
  0% {
    transform: translateY(0);
    background-color: #ffffff;
  }

  60% {
    transform: translateY(5px);
    background-color: #ffffff;
  }

  100% {
    transform: translateY(0);
    background-color: #a0adb3;
  }
}

@keyframes animate-bottom-bar {
  0% {
    transform: translateY(0);
    background-color: #ffffff;
  }

  60% {
    transform: translateY(-5px);
    background-color: #ffffff;
  }

  100% {
    transform: translateY(0);
    background-color: #cfdadf;
  }
}

@keyframes animate-middle-bar {
  0% {
    transform: translateY(0);
    background-color: #ffffff;
  }

  100% {
    transform: translateY(0);
    background-color: #e1e8eb;
  }
}

@keyframes animate-out-top-bar {
  0% {
    transform: translateY(0);
    background-color: #dde4e7
  }

  60% {
    transform: translateY(5px);
    background-color: #d6dfe2
  }

  100% {
    transform: translateY(0);
    background-color: #ffffff;
  }
}

@keyframes animate-out-bottom-bar {
  0% {
    transform: translateY(0);
    background-color: #e2e8eb
  }

  60% {
    transform: translateY(-5px);
    background-color: #cfd8db;
  }

  100% {
    transform: translateY(0);
    background-color: #ffffff;
  }
}

@keyframes animate-out-middle-bar {
  0% {
    transform: translateY(0);
    background-color: #e4e9eb
  }

  100% {
    transform: translateY(0);
    background-color: #ffffff;
  }
}


@media (min-width: 48rem) {
  body[data-page="intro"] nav {
    font-size: var(--fs-0);
  }

  /* allow the data-content tooltip to escape the clipped nav bounds */
  body[data-page="intro"] nav,
  body[data-page="intro"] nav ul {
    overflow: visible;
  }

  body[data-page="intro"] nav ul {
    flex-direction: row;
  }

  body[data-page="intro"] .nav-links li {
    position: relative;
    flex: 0 1 clamp(18rem, 30vw, 24rem);
    min-inline-size: 18rem;
    margin: var(--space-0);
    padding: var(--space-0) var(--space-3);
  }

  body[data-page="intro"] .nav-links li a {
    font-size: var(--fs-2);
    white-space: nowrap;
  }

  /* the li-anchored line below replaces the mobile a-anchored line */
  body[data-page="intro"] .nav-links li a::before {
    display: none;
  }

  body[data-page="intro"] .nav-links li::before {
    content: '';
    width: 60px;
    height: 1.2px;
    background-color: var(--text-color);
    position: absolute;
    top: 50%;
    left: 0;
    right: auto;
    z-index: 100;
    transform: scaleX(0);
    transform-origin: left center;
    opacity: 0;
    transition: all .2s linear;
  }

  body[data-page="intro"] .nav-links li a::after {
    content: attr(data-content);
    position: absolute;
    z-index: 100;
    display: block;
    color: var(--text-color);
    font-size: var(--fs-2);
    font-style: italic;
    text-transform: none;
    white-space: nowrap;
    text-align: center;
    letter-spacing: var(--letter-spacing-body);
    opacity: 0;
    left: 50%;
    right: auto;
    bottom: -90px;
    margin-inline: auto;
    transition: all .2s linear;
  }

  body[data-page="intro"] .nav-links li:hover::before {
    transform: scaleX(1);
    opacity: 1;
  }

  body[data-page="intro"] .nav-links li:hover a::after {
    transform: translate(-50%, var(--space-0));
    opacity: 1;
  }
}