/* ⚒️ RESET STYLES (shoutout to Josh Comeau) */

@layer reset {
  /* 1. Use a more-intuitive box-sizing model */
  *,
  *::before,
  *::after {
    box-sizing: border-box;
  }

  /* 2. Remove default margin */
  *:not(dialog) {
    margin: 0;
  }

  /* 3. Enable keyword animations */
  @media (prefers-reduced-motion: no-preference) {
    html {
      interpolate-size: allow-keywords;
    }
  }

  body {
    /* 4. Increase line-height */
    line-height: 1.5;
    /* 5. Improve text rendering */
    -webkit-font-smoothing: antialiased;
  }

  /* 6. Improve media defaults */
  img,
  picture,
  video,
  canvas,
  svg {
    display: block;
    max-width: 100%;
  }

  /* 7. Inherit fonts for form controls */
  input,
  button,
  textarea,
  select {
    font: inherit;
  }

  /* 8. Avoid text overflows */
  p,
  h1,
  h2,
  h3,
  h4,
  h5,
  h6 {
    overflow-wrap: break-word;
  }

  /* 9. Improve line wrapping */
  p {
    text-wrap: pretty;
  }

  h1,
  h2,
  h3,
  h4,
  h5,
  h6 {
    text-wrap: balance;
  }
}

/* 🫟 Utilities */

@layer utilities {
  .zalando-500 {
    font-family: "Zalando Sans Expanded", "Verdana", "Helvetica", "Arial", sans-serif;
    font-optical-sizing: auto;
    font-weight: 500;
    font-style: normal;
  }

  .comme-400 {
    font-family: "Comme", "Verdana", "Helvetica", "Arial", sans-serif;
    font-optical-sizing: auto;
    font-weight: 400;
    font-style: normal;
  }

  hr.divider {
    margin: 2.5rem 0;
    border: 1px solid var(--color-neutral-600);
  }
}

/* 🪣 VARS */

:root {
  --color-light: var(--color-neutral-200);
  --color-dark: var(--color-neutral-800);
  --color-primary: #ff4c24;
  --color-neutral-100: #ffffff;
  --color-neutral-200: #efeeec;
  --color-neutral-300: #e3e1de;
  --color-neutral-400: #cbc8c5;
  --color-neutral-500: #818180;
  --color-neutral-600: #2c2c2c;
  --color-neutral-700: #1f1f1f;
  --color-neutral-800: #131313;
  --color-neutral-900: #000000;
  --color-white: var(--color-neutral-100);
  --color-black: var(--color-neutral-900);
  --color-error: var(--color-primary);
  --color-success: #0ba954;
}

/* 🎨 CUSTOM STYLES (📱 Mobile-first) */

/* Selection */
::selection {
  background-color: var(--color-primary);
  color: var(--color-dark);
}

::-moz-selection {
  background-color: var(--color-primary);
  color: var(--color-dark);
}

/* General */
body {
  color: var(--color-neutral-300);
  background-color: var(--color-neutral-800);
  background-image: radial-gradient(var(--color-neutral-700) 1px, transparent 1px);
  background-size: 24px 24px;

  a {
    color: var(--color-neutral-200);
  }
}

@media screen and (min-width: 70rem) {
  body {
    font-size: 1.1rem;
  }
}

/* HERO PART */

.hero-container {
  position: relative;
  height: 100vh;
  width: 100vw;
  /* overflow is 'clip' so that the animations' view() resorts to main viewport scrollbar */
  overflow: clip;

  .layer {
    position: absolute;
    object-fit: cover;
    object-position: bottom;
    width: 100%;
    height: 100%;
  }

  .layer-0 {
    animation: layer-0-move-down linear;
    animation-timeline: view();
  }

  .layer-1 {
    animation: layer-1-move-down linear;
    animation-timeline: view();
  }

  .layer-2 {
    top: 40%;
    object-position: top;
  }

  .layer-title {
    position: absolute;
    color: white;
    top: 33%;
    text-align: center;
    width: 100%;
    font-size: clamp(2.5rem, 7vw, 15rem);
    font-weight: 900;

    animation: layer-title-fade linear;
    animation-timeline: view();
    animation-fill-mode: forwards;
  }

  .ba-plane {
    position: absolute;
    top: 30%;
    width: 120px;
    height: 50px;

    animation: plane-left-to-right linear;
    animation-timeline: view();
    animation-fill-mode: forwards;
  }
}

@keyframes layer-0-move-down {
  50% {
    transform: translateY(0);
  }

  100% {
    transform: translateY(40vh);
  }
}

@keyframes layer-1-move-down {
  50% {
    transform: translateY(0);
  }

  100% {
    transform: translateY(20vh);
  }
}

@keyframes layer-title-fade {
  70% {
    opacity: 1;
  }

  100% {
    opacity: 0;
  }
}

@keyframes plane-left-to-right {
  70% {
    right: 80%;
  }

  100% {
    right: -10%;
  }
}

@media screen and (min-width: 70rem) {
  @keyframes plane-left-to-right {
    70% {
      right: 80%;
    }

    100% {
      right: 20%;
    }
  }
}

/* FADER & ARROW BETWEEN HERO AND CONTENT */

.fader {
  position: relative;
  height: 15vh;
  margin-top: -14vh;
  background-image:
    radial-gradient(var(--color-neutral-700) 1px, transparent 1px),
    linear-gradient(0deg, rgba(19, 19, 19, 1) 30%, rgba(255, 255, 255, 0) 100%);
  background-size:
    24px 24px,
    auto;
}

.arrow-down {
  position: relative;
  height: 15vh;
  margin-top: -15vh;
  display: flex;
  justify-content: center;
  align-items: center;
  animation: 3s linear 0s infinite alternate up-and-down;
}

@keyframes up-and-down {
  0% {
    transform: translate(0, 10px);
  }

  50% {
    transform: translate(0, -10px);
  }

  100% {
    transform: translate(0, 10px);
  }
}

/* CONTENT PART */

.content-container {
  padding: 0 0.5rem;
  text-align: center;

  .location {
    font-size: 2.2rem;

    span {
      text-decoration: var(--color-primary) line-through solid;
    }
  }

  .small-bio {
    font-size: 0.8rem;
  }

  .social-media {
    display: flex;
    justify-content: center;
    margin: 0 2vh;
    gap: 2vh;

    & > a {
      flex: 0 1 5rem;
      transition: transform 0.1s;

      &:hover {
        transform: scale(1.2);
      }
    }
  }

  .content-chunks-wrapper {
    margin-left: 5%;

    .content-chunk {
      margin-top: 1.5rem;
      text-align: left;

      summary {
        font-size: clamp(1.2rem, 2vw, 2rem);
        user-select: none;
        cursor: pointer;
        text-decoration: wavy underline;
        text-decoration-color: transparent;
        text-underline-offset: 0.5rem;
        transition:
          text-decoration-color 0.1s ease,
          text-underline-offset 0.1s ease;
      }

      .item-content {
        margin-top: 2rem;
      }

      /* makes the transition between media breakpoints smooth in this container*/
      transition: all 0.5s ease;

      &[open] {
        summary {
          text-decoration-color: var(--color-primary);
          text-underline-offset: 1rem;
        }
      }
    }
  }
}

@media screen and (min-width: 40rem) {
  .content-container {
    width: 75%;
    margin: 0 auto;
  }
}

@media screen and (min-width: 70rem) {
  .content-container {
    width: 50%;

    .content-chunks-wrapper {
      display: flex;
      flex-flow: row wrap;
      gap: 2rem;

      .content-chunk {
        flex: 1 1 45%;
      }

      > *:last-child {
        flex: 1 1 100%;
      }
    }
  }
}

/* Table Styling */

.content-chunk.table {
  overflow: auto;
}

.domains-table {
  border-collapse: collapse;
  width: 100%;
  background-color: var(--color-neutral-600);
  border-radius: 1rem;
  overflow: hidden;
  box-shadow: 0 0.25rem 1rem var(--color-neutral-700);
  font-weight: 700;

  th,
  td {
    padding: 1rem 0.5rem;
    text-align: left;
    border-bottom: 1px solid rgb(255, 255, 255, 0.1);

    &:nth-child(2),
    &:nth-child(3) {
      text-align: center;
    }

    &:nth-child(1),
    &:nth-child(1) {
      padding-left: 2rem;
    }
  }

  tr:last-child td {
    border-bottom: none;
  }

  tr:hover {
    background-color: var(--color-neutral-700);
  }

  th {
    background-color: rgba(30, 30, 30, 0.8);
    text-transform: uppercase;
    letter-spacing: 1px;
    font-family: "Zalando Sans Expanded", "Verdana", "Helvetica", "Arial", sans-serif;
    font-size: 1rem;
    font-weight: 700;
    font-style: normal;
    color: var(--color-primary);
  }

  a.underline {
    text-decoration: none;
    position: relative;
    transition: color 0.3s ease;

    &:after {
      content: "";
      position: absolute;
      width: 0;
      height: 2px;
      bottom: -4px;
      left: 0;
      background-color: var(--color-primary);
      transition: width 0.3s ease;
    }

    &:hover {
      color: var(--color-primary);
    }

    &:hover:after {
      width: 100%;
    }
  }
}

/* FOOTER */

.footer-text {
  text-align: center;

  .small-text {
    font-size: 0.8rem;
    color: var(--color-neutral-500);
  }

  a {
    color: white;
    text-decoration: var(--color-neutral-600) wavy underline;
    transition: text-decoration 0.5s ease;

    &:hover {
      text-decoration: var(--color-primary) wavy underline;
    }
  }
}