/****************/
 /* HOME GRAPHIC */
/****************/


@keyframes lowrider-hover {
  0% {
    rotate: calc(var(--timer) * 10deg);
    transform: translateY(calc(var(--height) + var(--offset-y)));
  }


  25% {
    rotate: calc(var(--timer) * 10deg - 10deg);
    transform: translateY(calc(var(--height) + var(--offset-y) - 1.6cqh))  translateX(-8cqw);
  }

  50% {
    rotate: calc(var(--timer) * 10deg);
    transform: translateY(calc(var(--height) + var(--offset-y)));
  }

  75% {
    rotate: calc(var(--timer) * 10deg + 2deg);
    transform: translateY(calc(var(--height) + var(--offset-y) - 2.4cqh)) translateX(0cqw);
  }

  100% {
    rotate: calc(var(--timer) * 10deg);
    transform: translateY(calc(var(--height) + var(--offset-y)));
  }
}

@keyframes fade {
  0% {
    opacity: 1;
    height: 100cqh;
  }

  99.9% {
    opacity: 0;
    height: 100cqh;
  }

  100% {
    opacity: 0;
    height: 0;
  }
}

@keyframes spin {
  0% {
    rotate: 0deg;
  }

  100% {
    rotate: 360deg;
  }
}

#home-graphic {
  --oppo-timer: calc(1 - var(--timer));

  display: flex;
  justify-content: center;
  align-items: end;

  overflow: clip;
  isolation: isolate;

  position: sticky;
  top: calc(-1 * (var(--home-graphic-height) - var(--nav-header-top-offset) ));

  height: var(--home-graphic-height);

  anchor-name: --home-graphic;
  container-name: graphic;
  container-type: size scroll-state; 

  --spin: calc(var(--timer) * 2);

  &:not([display]) > :not([loader]) {
    display: none;
  }

  & [loader] {
    position: absolute;

    aspect-ratio: 1;
    opacity: 1;
    transition: opacity 150ms linear;

    top: calc(50cqh - 10cqmin);
    height: 20cqmin;

    border: .8rem solid var(--gray-2);
    border-top-color: transparent;
  
    border-radius: 50%;

    animation: spin linear 1s infinite;
  }

  &[loaded] [loader] {
    opacity: 0;
  }

  &[display] {
    background-color: var(--c-blue);
    background-image: linear-gradient(to bottom, transparent, rgba(255, 255, 255, clamp(0, var(--oppo-timer), .6)));

    & [loader] {
      display: none;
    }

    &::after {
      content: '';
      display: block;
      position: absolute;
      z-index: 200;
      inset: 0;
      width: 100cqw;
      height: 100cqh;
      background-color: #fff;

      animation: fade 450ms linear forwards;
    }

    & > svg, & > div {
      position: absolute;
      transform-origin: center;
      isolation: isolate;

    }

    & svg {
      height: 50%;
      transform-origin: bottom center;
    }

      /*******/
    /* Sun */
    /*******/

    & #g_sun {    
      --c-yellow: rgba(255, 248, 208, var(--opacity, 1)); /* #fffd80; */
      --opacity: clamp(.5, var(--oppo-timer), 1);

      top: clamp(10cqmin, (100cqmin * var(--timer)), 60cqmin);

      height: calc(var(--timer) * 30cqmin + 20cqmin);
      aspect-ratio: 1;
      border-radius: 100%;
      background-color: var(--c-orange);
      overflow: clip;
      box-shadow: 0 0 clamp(1rem, calc(var(--oppo-timer) * 1rem), 2rem) var(--c-yellow), inset 0 -.5rem clamp(1rem, calc(var(--oppo-timer) * 1rem), 2rem) var(--c-yellow);

      filter: brightness(120%);
    }

    & #g_sun::after {
      display: block;
      position: absolute;
      content: '';
      inset: 0;
      background-color: var(--c-yellow);
      opacity: var(--timer, 1);
    }

    & #g_rays {
      height: 100%;
      width: 100%;

      --c-orange: rgba(255, 212, 0, calc(.8 * var(--timer, 1))); /* #ffd400; */

      background-image: 
        repeating-conic-gradient(
          from calc(var(--spin) * 1deg) at 50% calc(10% + clamp(10%, calc(var(--timer) * 100%), 90%)), 
          transparent calc(var(--spin) * 60deg + 0deg) calc(var(--spin) * 60deg + 10deg),
          rgba(255, 255, 255, clamp(.1, calc(var(--oppo-timer) /2), .3)) calc(var(--spin) * 60deg + 10deg) calc(var(--spin) * 60deg + 20deg)
        ),
        radial-gradient(circle at 50% calc(20% + clamp(10%, calc(var(--timer) * 100%), 90%)), var(--c-orange), transparent);
        ;

      mask: radial-gradient(circle, #fff, transparent);
      mask-size: 80cqh;
    }

      /**********/
    /* Clouds */
    /**********/
    
    & [id*=cloud] {   
      mix-blend-mode: hard-light; 
      filter: blur(var(--blur, 0)) sepia(100%) saturate(100%) brightness(100%) hue-rotate(180deg);
      height: 50cqw;
    }

    & #g_cloud-1 { 
      --blur: .5px;
      translate: calc(-50cqw - var(--timer) * 60cqw) 12cqh;
      opacity: .8;
      z-index: 1;
    }

    & #g_cloud-2 { 
      --blur: 1px;
      translate: calc(50cqw + var(--timer) * 60cqw) 12cqh;
      z-index: 1;
      rotate: 12deg;
    }

    & #g_cloud-3 {
      --blur: 1.5px;
      height: 12cqw;
      translate: calc(-20cqw - var(--timer) * 120cqw)  -40cqh;
    }

    & #g_cloud-4 {
      --blur: 2px;
      height: 12cqw;
      translate: calc(16cqw + var(--timer) * 120cqw) -70cqh;
    }

      /**************/
    /* Palm trees */
    /**************/

    & [id*=palm] {
      filter: hue-rotate(calc(var(--oppo-timer) * 110deg)) brightness(calc(var(--oppo-timer) * 130%));

      height: 80%;
      transform: translateY(10cqh);

      .g_palm_1 {
        fill: var(--c-purple);
      }

      .g_palm_2 {
        fill: rgb(32, 0, 119);
      }

      .g_palm_3 {
        fill: rgb(13, 3, 31);
      }
    }

    & #g_palm-1 {
      transform: rotateY(180deg);
      translate: calc(-50cqw - (2cqw * var(--timer))) 0;
      rotate: calc(12deg - (24deg * var(--timer)));
      z-index: 2;
    }

    & #g_palm-2 {
      translate: calc(-30cqw - (36cqw * var(--timer))) 12cqh;
      rotate: calc(8deg - (20deg * var(--timer)));
      scale: .96;
      z-index: 1;
    }

    & #g_palm-3 {
      translate: calc(-12cqw - (60cqw * var(--timer))) 24cqh;
      rotate: calc(4deg - (16deg * var(--timer)));
      scale: .92;
    }

    & #g_palm-4 {
      translate: calc(16cqw + (60cqw * var(--timer))) calc(24cqh/*  + (60cqh * var(--timer)) */);
      rotate: calc(-8deg + (16deg * var(--timer)));
      scale: .92;
    }

    & #g_palm-5 {
      transform: rotateY(180deg);
      translate: calc(30cqw + (36cqw * var(--timer))) calc(16cqh/*  + (45cqh * var(--timer)) */);
      rotate: calc(-8deg + (20deg * var(--timer)));
      scale: .96;
      z-index: 1;
    }

    & #g_palm-6 {
      translate: calc(50cqw + (4cqw * var(--timer))) -10cqh;
      rotate: calc(-12deg + (24deg * var(--timer)));
      z-index: 2;
    }

    /******************/
    /* Buildings, etc */
  /******************/


    & .parallax {
      --height: 50cqh;
      --offset-x: 0cqw;
      --offset-y: 0cqh;

      --outline-width: 1px;
      --outline-color: hsl(0 0% 0% / .2);
      --sepia: 0%;
      --hue-rotate: 0deg;
      --brightness: 100%;
      
      height: var(--height);
      transform: translateY(calc(var(--height) + var(--offset-y)));
      translate: var(--offset-x) calc(round(var(--timer)) * (-.5 + var(--timer)) * -2 * (var(--height) + var(--offset-y)));  

      filter: brightness(calc(var(--timer) * 100%)) 
              hue-rotate(calc(var(--oppo-timer) * 20deg)) 
              drop-shadow(calc(-1 * var(--outline-width)) 0 0 var(--outline-color)) 
              drop-shadow(0 calc(-1 * var(--outline-width))  0 var(--outline-color)) 
              drop-shadow(var(--outline-width) 0 0 var(--outline-color)) 
              drop-shadow(0 var(--outline-width) 0 var(--outline-color))
              sepia(var(--sepia))
              hue-rotate(var(--hue-rotate))
              brightness(var(--brightness));
    }

    & #g_dtla {
      --height: 40cqh;
      --offset-x: -32cqw;
      --offset-y: 20cqh;
    }

    & #g_griffith {
      --height: 30cqh; 
      --offset-x: 32cqw; 
      z-index: 2;
      bottom: -14cqh;  
    }

    & #g_hollywood {
      --offset-x: 34cqw;
      --height: 48cqh;
    }

    & #g_lax-1 {
      --height: 24cqh;
      --offset-x: -38cqw;
    }

    & #g_lax-2 {  
      display: none;
      --height: 50cqh;
      --offset-x: -10cqw;
    }

    & #g_santamonica {
      --height: 90cqh;
    }

    & #g_poppy {
      --height: 64cqh;
      --offset-x: 46cqw;
      --offset-y: 66cqh;
      --hue-rotate: -5deg;
      bottom: 12cqh;
    }

    & #g_lowrider {
      --height: 20cqh;
      --offset-x: 10cqw;
      --offset-y: 60cqh;
      transform-origin: bottom center;
      rotate: calc(var(--timer) * 10deg);
      bottom: -6cqh;
      z-index: 1;
      animation-name: lowrider-hover;
      animation-iteration-count: infinite;
      animation-timing-function: ease-in;
      animation-duration: 1s;
      animation-fill-mode: both;
      animation-play-state: paused;
    }

    & #g_lowrider:hover {
      animation-play-state: running;
    }
    

    & #g_agave {
      --height: 120cqh;
      --offset-y: 50cqh;
      --offset-x: -55cqw;
      --sepia: 50%;
      --hue-rotate: 50deg;
      --brightness: 80%;
      bottom: -30cqh;
    }

    /* BG Texture */
    &::before, & #g_sun::before {
      display: block;
      content: '';
      background-image: url(https://overstockla.com/assets/home-graphic/texture.png);
      width: 100%;
      height: 100%;
      position: absolute;
      inset: 0;
      mix-blend-mode: multiply;
      z-index: auto;
    }
  }
}