/* elysia ! yay */
/* animations */
@property --blur {
  syntax: "<number>";
  inherits: false;
  initial-value: 0;
}
@property --spinny {
  syntax: "<angle>";
  inherits: true;
  initial-value: 0deg;
}
@property --half-spinny {
  syntax: "<angle>";
  inherits: true;
  initial-value: 0deg;
}

@media (prefers-reduced-motion: no-preference) {
  @keyframes fade-in {
    from {
      --blur: 10;
      opacity: 0;
      pointer-events: none;
    }
    to {
      --blur: 0;
      opacity: 1;
      pointer-events: initial;
    }
  }
  @keyframes fade-out {
    from {
      --blur: 0;
      opacity: 1;
    }
    to {
      --blur: 10;
      opacity: 0;
    }
  }
  @keyframes para-scale {
    from {
      scale: 0.7;
      background-position: -100% -15%;
    }
    to {
      scale: 1.2;
      background-position: 0% 0%;
    }
  }
  @keyframes spinny {
    from {
      --spinny: 0deg;
    }
    to {
      --spinny: 360deg;
    }
  }
  @keyframes half-spinny {
    from {
      --half-spinny: 0deg;
    }
    to {
      --half-spinny: 45deg;
    }
  }

  @keyframes flaming-text {
    0% {
        transform: translateY(-2px);
        text-shadow: -2px 2px #faa, -1px 2px #faa, 0px 2px #faa, 1px 2px #faa, 2px 2px #faa,
                 -2px 1px #faa, -1px 1px #faa, 0px 1px #faa, 1px 1px #faa, 2px 1px #faa,
                 -2px 0px #faa, -1px 0px #faa, 0px 0px #faa, 1px 0px #faa, 2px 0px #faa,
                 -2px -1px #faa, -1px -1px #faa, 0px -1px #faa, 1px -1px #faa, 2px -1px #faa,
                 -2px -2px #faa, -1px -2px #faa, 0px -2px #faa, 1px -2px #faa, 2px -2px #faa,
                 -2px 3px #faa4, -1px 3px #faa4, 0px 3px #faa4, 1px 3px #faa4, 2px 3px #faa4,
                 -2px 5px #faa3, -1px 5px #faa3, 0px 5px #faa3, 1px 5px #faa3, 2px 5px #faa3,
                 -2px 8px #faa2, -1px 8px #faa2, 0px 8px #faa2, 1px 8px #faa2, 2px 8px #faa2,
                 -2px 11px #faa1, -1px 11px #faa1, 0px 11px #faa1, 1px 11px #faa1, 2px 11px #faa1,
                 -2px 15px #faa1, -1px 15px #faa1, 0px 15px #faa1, 1px 15px #faa1, 2px 15px #faa1,
                 -2px 20px #faa1, -1px 20px #faa1, 0px 20px #faa1, 1px 20px #faa1, 2px 20px #faa1, 0px 0px 8px #faa
    }
    0%, 50% {
      transform: 12px;
      text-shadow: -2px 3px #faa4, -1px 3px #faa4, 0px 3px #faa4, 1px 3px #faa4, 2px 3px #faa4,
                 -2px 5px #faa3, -1px 5px #faa3, 0px 5px #faa3, 1px 5px #faa3, 2px 5px #faa3,
                 -2px 8px #faa2, -1px 8px #faa2, 0px 8px #faa2, 1px 8px #faa2, 2px 8px #faa2,
                 -2px 11px #faa1, -1px 11px #faa1, 0px 11px #faa1, 1px 11px #faa1, 2px 11px #faa1,
                 -2px 15px #faa1, -1px 15px #faa1, 0px 15px #faa1, 1px 15px #faa1, 2px 15px #faa1,
                 -2px 20px #faa1, -1px 20px #faa1, 0px 20px #faa1, 1px 20px #faa1, 2px 20px #faa1, 0px 0px 8px #faa;
    }
    100% {
        transform: translateY(8px);
        text-shadow: -2px 2px #faa, -1px 2px #faa, 0px 2px #faa, 1px 2px #faa, 2px 2px #faa,
                 -2px 1px #faa, -1px 1px #faa, 0px 1px #faa, 1px 1px #faa, 2px 1px #faa,
                 -2px 0px #faa, -1px 0px #faa, 0px 0px #faa, 1px 0px #faa, 2px 0px #faa,
                 -2px -1px #faa, -1px -1px #faa, 0px -1px #faa, 1px -1px #faa, 2px -1px #faa,
                 -2px -2px #faa, -1px -2px #faa, 0px -2px #faa, 1px -2px #faa, 2px -2px #faa,
                 -2px -3px #faa4, -1px -3px #faa4, 0px -3px #faa4, 1px -3px #faa4, 2px -3px #faa4,
                 -2px -5px #faa3, -1px -5px #faa3, 0px -5px #faa3, 1px -5px #faa3, 2px -5px #faa3,
                 -2px -8px #faa2, -1px -8px #faa2, 0px -8px #faa2, 1px -8px #faa2, 2px -8px #faa2,
                 -2px -11px #faa1, -1px -11px #faa1, 0px -11px #faa1, 1px -11px #faa1, 2px -11px #faa1,
                 -2px -15px #faa1, -1px -15px #faa1, 0px -15px #faa1, 1px -15px #faa1, 2px -15px #faa1,
                 -2px -20px #faa1, -1px -20px #faa1, 0px -20px #faa1, 1px -20px #faa1, 2px -20px #faa1, 0px 0px 8px #faa;
    }
  }
}


/* gloabs */
html {
    scroll-behavior: smooth;
}
.fullscreen-bg {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    width: 100%;
    height: 100%;
    
    overflow: hidden;
    pointer-events: none;
    
}
:root {
  --bodyBgGradient: radial-gradient(
    circle,
    rgba(18, 70, 92, 1) 0%,
    rgba(70, 111, 128, 1) 32%,
    rgba(87, 199, 133, 1) 72%,
    rgba(204, 237, 83, 1) 100%
  );
  --bodyFg: rgb(255, 237, 222);

  --enterBgGradient: radial-gradient(
    circle,
    rgba(18, 70, 92, 1) 0%,
    rgba(16, 92, 125, 1) 28%,
    rgba(70, 111, 128, 1) 77%,
    rgba(82, 128, 124, 1) 100%
  );
  @media (prefers-color-scheme: light) {
  }
}
.appears {
  filter: blur(calc(1px * var(--blur)));
  animation: fade-in forwards 0.4s ease-in-out;
}
.disapears {
  filter: blur(calc(1px * var(--blur)));
  animation: fade-out forwards 0.4s ease-in-out;
  pointer-events: none;
}
.para-scroll {
  animation: para-scale forwards 1s ease;
}
.flaming-text {
  animation: flaming-text alternate-reverse 3s ease infinite;
}

body {
  background-image: var(--bodyBgGradient);
  color: var(--bodyFg);
  place-items: center;
  align-items: center;
  height: 100svh;
  display: grid;
  touch-action: none;
  
}

/* enter */
.enter {
  color: #fff;
  border: none;
  background: transparent;
  position: absolute;
  inset: 40%;
  aspect-ratio: 3/2;
  
  z-index: 99999999;
  padding: 1rem;

  &:first-child {
    background-image: url(imgs/bg_shines.png);
    background-blend-mode: screen;
    display: block;
  }

  &:before {
    content: "";
    display: block;
    position: absolute;
    z-index: -1;
    background-image: var(--enterBgGradient);
    border-radius: 15px;
    filter: url("#turbulence");
    border: 2px solid;
    box-shadow: 10px 10px transparent;
    left: -5px;
    top: -5px;
    width: 100%;
    height: 100%;
    pointer-events: none;
  }
}

section.orbit {
  overflow: hidden;
  /* transition: transform 1s ease-out; */
  transition-behavior: allow-discrete;
}

/* main content mechanics */
main.appears nav {
  --intro: para-scale forwards 1s ease;
}
main {
  scroll-snap-type: x mandatory;
  opacity: 0;
  pointer-events: none;
  container-type: inline-size;
  overflow-x: auto;
  overflow-y: hidden;
  overscroll-behavior: contain;
  inline-size: 100cqi;
  height: 100svh;
  display: grid;
  place-items: center;
  scroll-padding: 10%;
  grid-auto-flow: column;
  scrollbar-width: none;
  --gap-size: 50cqi;
  gap: var(--gap-size);
  /* put on direct parent of snapping elements  */
  scroll-behavior: smooth;
  nav {
    display: grid;
    --s: 150px; /* control the size */
    --r: 200px; /* control the radius */
    --col-num: 3;
    width: calc(var(--r) * var(--col-num));
    justify-content: center;
    animation: spinny forwards 20s linear infinite, var(--intro, x);
    animation-play-state:running;
    .orbit {
      grid-area: 1/1;
      width: var(--s);
      --offset: calc(var(--index) / 8 * 360deg);
      --rotation: calc(var(--offset) + var(--spinny));
      text-align: center;

      transform: rotate(var(--rotation)) translateY(var(--r))
        rotate(calc(var(--rotation) * -1));
      &:hover {
        /* animation-play-state: paused; */
      }
    }
    &:has(.orbit:hover) {
      animation-play-state: paused;
    }
  }
  & > * {
    --tile-size: 45ch;
    overscroll-behavior: contain;
    scroll-snap-align: center;
    inline-size: min(var(--tile-size),90cqi);
    position: relative;
    
    &::before {
      
      content: "";
      width: calc(var(--gap-size) * 2 * var(--index) - 50px);
      position: absolute;
      background-image: linear-gradient(90deg, lightblue 0%, transparent 90%);
      height: 3px;
      /* border: 3px lightblue SOLID; */
      transform-origin: bottom;
      --offset: calc(var(--index) / 8 * 360deg);
      --delay: calc((var(--index) - 4.5) * 1s);
      animation: half-spinny 10s linear infinite alternate-reverse var(--delay); 
      --rotation: calc(var(--offset) + var(--half-spinny));
      transform-origin: calc( var(--gap-size) * var(--index) + 1 ) 50cqh;
      /* calc(var(--gap-size) + 400px) */
      animation-play-state: paused;
      opacity: 0;
      transition: opacity 0.3s;
      clip-path: polygon(0% 50%, 100% 50%, 50% 100%, 0 50%);
      transform: rotate(70deg) translateY(calc(var(--r) - var(--gap-size) / 5 )) rotate(calc(var(--rotation) * -1 )) translateX(calc(var(--gap-size) * -1) ) translateX(calc(50cqi)) translateX(calc(100px));
    }
  }
  &::before {
  content: "";
  display: block;
  inline-size: 50cqi;
}
&::after {
  content: "";
  display: block;
  inline-size: 50cqi;
}
}


/* constellations styling*/

:root {
    /* --idHypnoTrans:100vw; */
}
:root:has(#home:target) main {
  
  --index: none;
  & > *::before {
    animation-play-state: running;
    opacity: 0;
  }
  nav:has(.orbit:hover)::before {
      animation-play-state: paused;
    }
    section {
      line-height: 2;

      font-size: clamp(12px, 2%, 30px);
    }
}
:root:has(:target:not(#home:target)) main {
  
  
  & > nav::before {
    animation-play-state: running;
    opacity: 1;
  }
  nav:has(.orbit:hover)::before {
      animation-play-state: paused;
    }
}
#home {
  --nav-number: 8;
}
#home > section {
  display: block;
  --nav-col: hsl(var(--hue) 100% 55%);
  --hue: calc((360 / var(--nav-number)) * var(--index));
  background-color: var(--nav-col);
  background-image: url(../storage/images/bg.jpg);
  background-blend-mode: luminosity;
  background-position: calc(( 0 + var(--index)) * 1.5em) calc(( 0 - var(--index)) * 1em);
  background-size: calc(( 0 + var(--index)) / 2 * 2.5em);
  padding: 1em;
  border-radius: 50px;
  
  color: var(--nav-col);
  filter: drop-shadow(1px 3px 3px 3px goldenrod) brightness(0.8);
  border: dotted var(--nav-col) 3px;
  /* clip-path:  */

  /* polygon(85.43% 97.26%, 68.38% 71.51%, 55.6% 92.99%, 24.67% 130.69%, -3.82% 107.2%, -7.43% 23.42%, 17.19% -30.58%, 31.03% -71.86%, 51.03% -27.98%, 69.81% 1.91%, 80.27% -35.55%, 92.87% -60.04%, 89.01% 6.42%, 97.5% 7.93%, 108% 25.71%, 89.41% 65.54%, 110.31% 92.72%)  */
  /* content-box; */
  background-clip: polygon(85.43% 97.26%, 68.38% 71.51%, 55.6% 92.99%, 24.67% 130.69%, -3.82% 107.2%, -7.43% 23.42%, 17.19% -30.58%, 31.03% -71.86%, 51.03% -27.98%, 69.81% 1.91%, 80.27% -35.55%, 92.87% -60.04%, 89.01% 6.42%, 97.5% 7.93%, 108% 25.71%, 89.41% 65.54%, 110.31% 92.72%) content-box;
  &:has(a) a::after {
    content: url("imgs/f.png");
    
    display: block;
    /* mix-blend-mode: ; */
    height: 10px;

  }
  /* &::before {
    content: "";
    display: block;
    position: absolute;
    z-index: -1;
    
    border-radius: 15px;
    filter: url("#turbulence");
    border: 2px solid;
    box-shadow: 10px 0px 1px 10px white;
    left: -5px;
    top: -5px;
    width: 90%;
    height: 90%;
    pointer-events: none;
  } */
}
/* nav decor*/

#home a[href="#biting"] {
  animation: flaming-text alternate-reverse 3s ease infinite;
  filter: hue-rotate(90deg);
}
header a[href="#home"], header a[href="#home"]:visited {
  color: darkred;
  text-decoration-thickness: 3px;
  text-decoration-color: black;
  font-weight: ;
  &:before {
    content: "<~ ";
  }
}

/* secs */

blockquote {
  border-left: 5px solid;
  margin: 0px;
  padding-left: 40px;
  background-color: rgba(128, 128, 128, 0.582);
  background-image: url(../storage/images/stars.gif);
  background-blend-mode: color-burn;
  padding: 10px 0px 10px 40px;
  box-shadow: 0px 0px 5px 5px black;
  border-radius: 3px;
}


:root:has(#hypno:target) {
  --index: 1;
}
:root:has(#biting:target) {
  --index: 2;
}
:root:has(#age:target) {
  --index: 5;
}
:root:has(#come_back:target) {
  --index: 6;
}
.constellation-cont {
    scroll-snap-align: center;
    line-height: 2;

      font-size: clamp(12px, 5vw, 30px);
    p {
      line-height: 2;

      font-size: clamp(30px, 5vw, 12px);
    }
}
#hypno {
    translate: var(--idHypnoTrans);
}