@property --shift {
  syntax: "<number>";
  inherits: false;
  initial-value: 0;
}


:root {
  --labs-sys-color-background: #111;
  --labs-sys-color-on-background: white;
  --base-speed: 4s;

  --labs-sys-color-grid: #fac4ff;
  --labs-sys-color-grid-glow: #df7373;
  --labs-sys-color-sun-1: #fdb428;
  --labs-sys-color-sun-2: #f672ca;
  --labs-sys-color-sun-glow: #b9f;

  --labs-sys-color-star: #f6c0c0;

  --color-palm-trunk: #333;
  --color-palm-leaf: #333;
  --color-palm-leaf-2: #b9f;
  --labs-sys-color-triangle: #6eccee;
  
  --labs-sys-color-volume: var(--labs-sys-color-triangle);
}

@mixin sun-lines {
  $lines: "";
  $end: 0;
  $lineCount: 8;
  @for $i from 1 to $lineCount {
    $start: $i + $end;
    $end: $start + $lineCount - $i;
    $lines: $lines +
      " #000 calc(#{$start}% + (3.5% * var(--shift))), 0%, #0000 calc(#{$end}%  + (2.8% * var(--shift))), 0%,";
  }
  $lines: $lines + "#000 calc(56% + (2.5% * var(--shift)))";
  --shift: 1;
  mask: linear-gradient(to top, #{$lines});
  mask-size: 100% 120%;
  animation: sun calc(var(--base-speed) / 4) linear infinite;
}

.delorean {
  position: absolute;
  bottom: 0;
  z-index: 11111;
  right: 0;
  left: 0;
  display: flex;
  justify-content: center;
  animation: delorean 30s ease infinite;
  perspective: 1000px;
}

@keyframes delorean {
  from {
    transform: translateY(0);
  }
  
  9% {
    transform: translateX(-2vmin) ;
  }

  20% {
    transform: translateX(0);
  }
  
  
  50% {
    transform: translate(-.05vmin, 6vmin) scale(1.5);
  }
 
  to {
    transform: translateY(0);
  }
}

.sun {
  position: relative;
  width: min(40vmin, 40%);
  aspect-ratio: 1;
  border-radius: 50%;

  &:after {
    content: "";
    position: absolute;
    inset: 0;
    @include sun-lines;
    border-radius: inherit;
    background-image: linear-gradient(
      to bottom,
      var(--labs-sys-color-sun-1),
      var(--labs-sys-color-sun-2) 60%
    );
  }

  &:before {
    content: "";
    position: absolute;
    inset: 0;
    background-image: linear-gradient(
      to top,
      var(--labs-sys-color-sun-1),
      var(--labs-sys-color-sun-2) 55%,
      var(--labs-sys-color-triangle) 65%,
      var(--labs-sys-color-sun-2) 69%
    );
    border-radius: inherit;
    transform: translateY(100%) rotateX(40deg) scaleY(1.2);
    perspective: 6.25rem;
    filter: blur(20px);
  }

  filter: drop-shadow(0 0 4rem var(--labs-sys-color-sun-glow));
}

@keyframes sun {
  from {
    --shift: 1;
  }

  to {
    --shift: 3.8;
  }
}

.top-lines {
  background: linear-gradient(
    to bottom,
    var(--labs-sys-color-sun-2) .2vmin,
    transparent .2vmin,
  );
  background-size: 125rem .4vmin;
  position: absolute;
  inset: 0;
  mix-blend-mode: overlay;
  opacity: 0.06;
  pointer-events: none;
}

.top {
  padding-top: 4rem;
  display: flex;
  flex: 1;
  justify-content: center;
  align-items: flex-end;
  position: relative;


  &:after {
    content: "";
    position: absolute;
    bottom: -0.5vmin;
    left: 0;
    right: 0;
    background: #222;
    height: 5vmin;
    clip-path: polygon(
      0% 38%,
      2.6% 40%,
      5.4% 24%,
      8.7% 59%,
      13.6% 72%,
      18.5% 22%,
      21.7% 35%,
      27.2% 8%,
      34% 53%,
      39.4% 81%,
      49.1% 85%,
      54.5% 64%,
      60% 53%,
      71.4% 80%,
      73.4% 15%,
      79.8% 29%,
      86.5% 15%,
      94.1% 36%,
      100% 27%,
      100% 100%,
      0% 100%
    );
  }

  &:before {
    content: "";
    position: absolute;
    bottom: -1vmin;
    left: 0;
    right: 0;
    background: rgba(0, 0, 0, 0.2);
    mix-blend-mode: soft-light;
    height: 15vmin;
    backdrop-filter: blur(20px);
    clip-path: polygon(
      0% 38%,
      2.6% 40%,
      5.4% 24%,
      8.7% 59%,
      13.6% 72%,
      18.5% 22%,
      21.7% 35%,
      27.2% 8%,
      34% 53%,
      39.4% 81%,
      49.1% 85%,
      54.5% 64%,
      60% 53%,
      71.2% 70%,
      76.6% 24%,
      81.4% 0%,
      87.1% 13%,
      94.2% 27%,
      100% 32%,
      100% 100%,
      0% 100%
    );
  }
}

.bottom-overlay {
  perspective: 14.5rem;
  flex: 0 0 12.5rem;
  position: absolute;
  z-index: 10000;
  right: 0;
  left: 0;
  bottom: 0;
  height: 12.5rem;
  background: radial-gradient(
    ellipse at center,
    transparent 50%,
    rgba(30, 30, 30, 0.9) 70%
  );
}


.bottom {
  background: inherit;
  perspective: 14.5rem;
  flex: 0 0 12.5rem;
  position: relative;


  &:before {
    content: "";
    position: absolute;
    inset: 0;
    --line-width: 0.0635rem;
    background: linear-gradient(
        to right,
        var(--labs-sys-color-grid) var(--line-width),
        transparent var(--line-width)
      ),
      linear-gradient(
        to bottom,
        var(--labs-sys-color-grid) var(--line-width),
        transparent var(--line-width)
      );
    background-size: 2rem 125rem, 125rem 2rem;
    transform: rotateX(53deg) scale(1.8) translateZ(43px);
    animation: grid calc(var(--base-speed) * 1) linear infinite;
    border-top: 1px solid var(--labs-sys-color-grid);
    filter: drop-shadow(0 0 2px var(--labs-sys-color-grid-glow));
  }
}

@keyframes grid {
  from {
    background-position-y: -30rem;
  }

  to {
    background-position-y: 0%;
  }
}


#stars {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 20rem;
  overflow: hidden;
  left: 0;
  z-index: -1;

  .star {
    position: absolute;
    background: var(--labs-sys-color-star);
    width: 0.15rem;
    height: 0.15rem;
    border-radius: 50%;
    transform: translate(var(--x), var(--y));
    box-shadow: 0 0 0.25rem var(--labs-sys-color-sun-glow);
  }
  
  animation: stars 20s linear;
}

@keyframes stars{
  from {
    transform: translateX(0);
  }
  60%{
      transform: translateX(3vmax) rotate(1deg);
  }
  to {
      transform: translateX(0);
  }
}


.palm {
  &:not(.small) {
    animation: palm-shaking 5s linear infinite;
  }
  &.small {
    animation: small-palm-shaking 4s linear inifinte;
  }
}

@keyframes palm-shaking {
  from {
    transform: translate(10vmin, 0vmin) rotate(6deg);
  }

  50% {
    transform: translate(10.5vmin, 0vmin) rotate(9deg);
  }

  to {
    transform: translate(10vmin, 0vmin) rotate(6deg);
  }
}

@keyframes small-palm-shaking {
  from {
    transform: translate(9vmin, 9vmin) scale(0.4) rotate(344deg) skewX(5deg);
  }

  50% {
    transform: translate(9vmin, 9vmin) scale(0.4) rotate(356deg) skewX(5deg);
  }

  to {
    transform: translate(9vmin, 9vmin) scale(0.4) rotate(344deg) skewX(5deg);
  }
}

.startails {
  position: absolute;
  inset: 0;
  overflow: hidden;
  mix-blend-mode: lighten;
}

.startail-r {
  position: absolute;
  left: 75vw;
  bottom: 0;
  background: linear-gradient(
    to right,
    var(--labs-sys-color-sun-glow) 10%,
    var(--labs-sys-color-triangle) 50%,
    transparent 80%
  );
  height: 0.2vmin;
  width: 15vmin;
  border-radius: 50%;
  filter: drop-shadow(0 0 15px white);
  transform: translateY(-32vmin) rotate(-20deg);
}

.startail-l {
  position: absolute;
  left: 16vw;
  bottom: 0;
  background: linear-gradient(
    to right,
    var(--labs-sys-color-sun-glow) 10%,
    var(--labs-sys-color-triangle) 30%,
    transparent 60%
  );
  height: 0.2vmin;
  width: 17vmin;
  border-radius: 50%;
  filter: drop-shadow(0 0 15px white);
  transform: translateY(-7vmin) rotate(-20deg);
}

.startail-m {
  position: absolute;
  left: 18vw;
  bottom: 0;
  background: linear-gradient(
    to right,
    var(--labs-sys-color-sun-glow) 10%,
    var(--labs-sys-color-triangle) 50%,
    transparent 80%
  );
  height: 0.2vmin;
  width: 14vmin;
  border-radius: 50%;
  filter: drop-shadow(0 0 15px white);
  transform: translateY(-18vmin) rotate(-20deg);
  opacity: 0.5;
}

html, body {
  margin: 0;
  padding: 0;
  width: 100%;
  height: 100%;
  overflow: hidden;
}

.scene {
  display: flex;
  flex-direction: column;
  width: 100%;
  height: 100%;
  position: relative;
}

.scene:after {
  content: "";
  position: fixed; /* Fixed ensures it spans the viewport */
  top: 0;
  left: 0;
  width: 100vw; /* Explicitly set width to viewport width */
  height: 100vh; /* Explicitly set height to viewport height */
  pointer-events: none;
  background: url(/noise.svg);
  opacity: 0.7;
  mix-blend-mode: overlay;
  filter: invert(1);
  z-index: 20000;
}




body {
  background-color: var(--labs-sys-color-background);
  color: var(--labs-sys-color-on-background);
  height: 100vh;
  width: 100vw;
  overflow: hidden;
  color: var(--labs-sys-color-triangle);
}

#volume {
  position: fixed;
  left: 2.5vmin;
  bottom: 2.5vmin;
  width: 4rem;
  height: 4rem;
  display: grid;
  place-items: center;
  transition: background .3s ease;
  cursor: pointer;
  background: transparent;
  border: none;
  z-index: 42000;
  @media(hover){
    &:hover {
      background: rgba(0,0,0,.5);
    }
  }
  
  &.playing {
    .play {
      display: block;
    }
    .muted {
      display: none;
    }
  }
  &:not(.playing) {
    .play {
      display: none;
    }
     .muted {
       display: block;
     }
  }
}

a.labs-follow-me {
  right: unset;
  left: -0.5rem;
}

* {
  user-select: none;
  box-sizing: border-box;
  outline-color: var(--labs-sys-color-sun-2);
}











@layer mShadow, mGradientStroke;

@layer mShadow {
  h1 {
    /* Gradient and other styles */
    color: transparent;
    text-fill-color: transparent;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    -webkit-background-clip: text;
    font-size: 40px;
    paint-order: stroke fill;
    text-shadow: 3px 3px 0px cyan, 5px 5px 0px darkcyan;
    transition: all 0.5s;
    position: absolute; /* Make the h1 tags absolute to prevent shifting */
    right: 20px; /* Position the text on the right */
    z-index: 10;
    white-space: nowrap; /* Prevent text wrapping */
    margin: 0;
  }

  h1 {
    font-variation-settings: "wght" 100, "ital" 1, "rota" 20;
    /* Multiple Shadows */
    text-shadow: 3px 3px 0px #07bcccdd,
    3px 3px 0px #e601c099,
    8px 8px 0px #e9019a88,
    12px 12px 0px #f4046877,
    15px 15px 10px #48289666;  
    animation: hithere 1s ease infinite;
  }

  h1:hover {
    font-variation-settings: "wght" 800, "ital" 0, "rota" 0; /* Slightly bolder weight on hover */
    text-shadow: 10px 6px 0px #e601c0; /* Keep the original pink shadow with a slight blur */
    -webkit-text-stroke: 1px rgba(251, 251, 251, 0.9); /* Softer text stroke */
    transform: scale(1.08); /* A bit more scale for emphasis */
    animation-play-state: paused;
  }
  
}

@keyframes hithere {
  30% { transform: scale(1.026); }
  40%, 60% { transform: rotate(-1.02deg) scale(1.026); }
  50% { transform: rotate(1.02deg) scale(1.026); }
  70% { transform: rotate(0deg) scale(1.026); }
  100% { transform: scale(1.0); }
}

#animated-header {
  position: absolute; /* Keeps it fixed in place without shifting the page */
  top: 20%;  /* Position the header at the top */
  right: 20px;  /* Right-aligned */
  z-index: 10;
}

/* Add margin-top for spacing between h1 tags */
#animated-header h1:nth-child(1) {
  top: 0; /* First h1 at the top */
}

#animated-header h1:nth-child(2) {
  top: 65px; /* Adjust spacing between h1 tags */
}

#animated-header h1:nth-child(3) {
  top: 125px; /* Adjust spacing between h1 tags */
}

#animated-header h1:nth-child(4) {
  top: 190px; /* Adjust spacing between h1 tags */
}

#animated-header h1:nth-child(5) {
  top: 250px; /* Adjust spacing between h1 tags */
}

#animated-header a {
  text-decoration: none; /* Removes the underline */
  color: inherit; /* Makes the link inherit the color from the surrounding text */
}