@import url("./common.css");
@import url("./hero.css");
@import url("./walls.css");

.perspectiveContainer {
  position: fixed;
  left: 0; top: 0;
  width: 100vw;
  height: 100vh;
  overflow: clip scroll;
  scroll-behavior: smooth;
 
  @media (width >= 1080px) {
    perspective: var(--perspective);
  
    *:not(empty, svg, svg *) {
      transform-style: preserve-3d;
    }
  }
}

main {
  position: relative;

  @media (width >= 1080px) and (prefers-reduced-motion: no-preference){
    transform-origin: 50% calc(50dvh + var(--top, 0px));
    transform:
      rotateX(calc(var(--y, 0.5) * -10deg + 5deg))
      rotateY(calc(var(--x, 0.5) * 10deg - 5deg));
  }
}

.content {
  display: flex;
  flex-direction: column;
  align-items: center;
  font-size: 20px;
  gap: 20em;
  padding-top: 50dvh;
  
  
  /* fix Safari's z-index bug; */
  translate: 0;
  
  pointer-events: none;
  
  a, .logo {
      
  }
}

article {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 1em;
  width: 80vw;
  max-width: 80ch;
}

.bio {
  --color: var(--clr-neon-1);

  .split {
    display: grid;
    grid-template-columns: auto 3em;
    align-items: end;
  }

  .imgContainer {
    position: relative;
    width: 3em;
    aspect-ratio: 1;

    img {
      position: absolute;
      inset: -6em;
      width: 15em;
      pointer-events: none;
      border-radius: 50%;
      corner-shape: superellipse(1.5);
      box-shadow:
        0 0 5px var(--color),
        0 0 8px var(--color),
        0 0 13px var(--color),
        0 0 21px var(--color);
      transform: translateZ(calc(var(--depth) * 0.5));
      z-index: -1;
    } 
  }
}

.stuff {
  --color: var(--clr-neon-5);
  --strokeWidth: 0.3;
  grid-template-columns: 320px auto;

  .logo {
    rotate: -10deg;
  }
  
  @media (width >= 1080px) {
    [href="#social"] {
      display: inline-block;
      transform: translateZ(5px);
      transition: transform 0.3s;
      
      &:hover {
        transform: translateZ(1px);
      }
    }
  }
}

.youtube {
  --color: var(--clr-neon-7);
  --strokeWidth: 4;
  grid-template-columns: auto 320px;
}

.public {
  --color: var(--clr-neon-6);
  --strokeWidth: 1;

  h2 { text-align: center; }

  .split {
    grid-template-columns: 320px auto;
    gap: 160px;
  }
}

.stuff, .youtube, .public .split {
  display: grid;
  
  a, .logo {
    pointer-events: all;
  }
    
  .logo {
    width: 100%;
    transform: translateZ(calc(var(--depth) * 0.5)) scale(1.5);
    fill: none;
    stroke: var(--color);
    stroke-width: var(--strokeWidth, 3);
    z-index: -1;

    @media (width >= 1080px) {
      stroke: var(--clr-text);
      filter:
        drop-shadow(0 0 2px var(--color))
        drop-shadow(0 0 3px var(--color))
        drop-shadow(0 0 5px var(--color))
        drop-shadow(0 0 8px var(--color));

    }

  }
  
    @media (prefers-reduced-motion: no-preference) {
      &:hover .logo {
        animation: logoFlicker 5s infinite;
      }
    }
  

  @media (width < 1080px) {
    grid-template-columns: auto;
    justify-items: center;
      
    .logo {
      order: -1;
      width: 80%;
      max-width: 15em;
    }
    
    &.split {
      gap: 0px;
    }
  }
}

.ctaLink {
  display: block;
  width: max-content;
  margin: 2em auto 0;
  text-decoration: none;
  padding: 0.5em 2em;
  color: var(--clr-text);
  background-color: #0007;
  border-radius: 3em;
  corner-shape: superellipse(1.5);
  box-shadow:
    0 0 3px var(--color),
    0 0 5px var(--color),
    0 0 8px var(--color),
    0 0 13px var(--color);
  transition: color 0.25s;

  &:active {
    scale: 0.975;
  }

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

  @media (width >= 1080px) {
    transform: translateZ(1px);
  }
}

.questionMark {
  position: relative;
  z-index: -1;

  &::after {
    content: "?";
    position: absolute;
    inset: -0.5em;
    display: grid;
    place-items: center;
    font-size: 7em;
    rotate: 10deg;
    translate: 0.15em 0em;
    font-style: normal;
    color: var(--clr-background);
    text-shadow:
      0 0 2px var(--clr-neon-2),
      0 0 3px var(--clr-neon-2),
      0 0 5px var(--clr-neon-2),
      0 0 8px var(--clr-neon-2);
  }

  @media (prefers-reduced-motion: no-preference) {
    &:hover {
      animation: logoFlicker 5s infinite;
    }
  }
}

.social {
  --color: var(--clr-neon-1);

  position: relative;
  padding-block: 4em;
  text-align: center;
  scroll-margin-top: 20em;

  .social_icons {
    display: flex;
    gap: 1.5em;
    max-width: 420px;
    margin-inline: auto;
    padding-inline: 1em;
    pointer-events: all;
 
    a {
      width: 100%;
      aspect-ratio: 1;
      display: grid;
      place-items: center;
      border-radius: 0.5em;
      background-color: #0007;
      transition: box-shadow 0.25s;
      box-shadow:
        0 0 3px var(--color),
        0 0 5px var(--color),
        0 0 8px var(--color),
        0 0 13px var(--color);
    
      img {
        width: 50%;
      }
     
      &:hover {
        --color: var(--clr-neon-2);
      }
    
      @media (width >= 1080px) {
        transform: translateZ(1px);
      }
    }
  }

  .frame {
    position: absolute;
    inset: 0;
    pointer-events: none;

    i {
      position: absolute;
      inset: 0 -3vw;
      transform: translateZ(calc(var(--depth) * var(--i) * 0.05));
      /* opacity: calc(0.7 - var(--i) * 0.1); */
      border: 1px solid var(--clr-text);
      border-radius: 2em;
      box-shadow:
        0 0 2px var(--color),
        0 0 3px var(--color),
        0 0 5px var(--color),
        0 0 8px var(--color),
        0 0 2px var(--color) inset,
        0 0 3px var(--color) inset,
        0 0 5px var(--color) inset,
        0 0 8px var(--color) inset;
    }
  }
}

footer {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding-block: 10em;
  gap: 1em;
  text-align: center;
  
  p {
    padding: 1em;
  }
}