:root {
  --atmo-color: rgba(0, 0, 0, 1);
  --atmo-logo: none;
  --atmo-logo-size: 120px;
  --atmo-logo-opacity: 1;
  --atmo-logo-filter:  drop-shadow(0 0 8px rgba(255, 255, 255, 0.8)) drop-shadow(0 0 12px rgba(255, 255, 255, 0.8));
  --atmo-logo-position: center;
  --atmo-image: none;
  --atmo-in-ms: 780ms;
  --atmo-out-ms: 760ms;
  --atmo-ease: cubic-bezier(0.2, 0.8, 0.2, 1);
}


html[data-atmo-mode] body::before,
html[data-atmo-mode] body::after {
  --atmo-cover-in-ms: calc(var(--atmo-in-ms) * 0.8);
  --atmo-cover-in-delay-ms: calc(var(--atmo-in-ms) * 0.8);
  --atmo-logo-delay-ms: calc(var(--atmo-in-ms) * 0.5);
  content: "";
  position: fixed;
  pointer-events: none;
}


html[data-atmo-mode] body::before {
  view-timeline-name: atmo-solid;
  z-index: 2147483646;
  background: var(--atmo-color);
  opacity: 0;
  width: 10vw;
  height: 100vh;
  width: 10dvw;
  height: 100dvh;
  top: 0;
  left: 110%;
  will-change: left;
}

@keyframes atmo-box-move {
    0% {
        opacity: 1;
        left: 110%;
        width: 10vw;
        width: 10dvw;
    }
    25% {
        opacity: 1;
        left: 50%;
        width: 40vw;
        width: 100dvw;
    }
    40% {
        opacity: 1;
        left: 0%;
        width: 100vw;
        width: 100dvw;
    }
    50% {
        opacity: 1;
        left: 0%;
        width: 100vw;
        width: 100dvw;
    }
    60% {
        opacity: 1;
        left: 0%;
        width: 100vw;
        width: 100dvw;
    }
    75% {
        opacity: 1;
        left: -30%;
        width: 70vw;
        width: 100dvw;

    }
    100% {
        opacity: 1;
        left: -110%;
        width: 100vw;
        width: 100dvw;
    }
}

html[data-atmo-mode] body::after {
  view-timeline-name: atmo-logo;
  inset: 0;
  z-index: 2147483647;
  background-image: var(--atmo-logo);
  background-repeat: no-repeat;
  background-position: center;
  background-size: var(--atmo-logo-size);
  opacity: 0;
  filter: var(--atmo-logo-filter);
  transition: opacity 180ms ease var(--atmo-logo-delay-ms);
  will-change: opacity;
}

html.atmo-cover.atmo-cover--in body::before {
    animation: atmo-box-move var(--atmo-in-ms) 3 forwards;
    animation-play-state: running;
}
html.atmo-cover.atmo-cover--hold body::before {
  opacity: 0;
  animation-play-state: paused;
}

html.atmo-cover.atmo-cover--out body::before {
    animation: atmo-box-move var(--atmo-out-ms) forwards;
    animation-play-state: running;
}


html.atmo-cover.atmo-cover--in body::after,
html.atmo-cover.atmo-cover--hold body::after {
  opacity: var(--atmo-logo-opacity);
}

html.atmo-cover.atmo-cover--out body::after {
  transition: opacity var(--atmo-out-ms) ease var(--atmo-logo-delay-ms);
  opacity: 0;
}

@media only screen and (max-width: 600px) {  
   
   /* html[data-atmo-mode] body::before {
        z-index: 2147483646;
        background: var(--atmo-color);
        opacity: 0;
        width: 160vmax;
        height: 160vmax;
        border-radius: 50%;
        top: 50%;
        left: 50%;
        transform: translate(-50%,-50%) scale(0);
        transition: transform var(--atmo-cover-in-ms) var(--atmo-ease) var(--atmo-in-ms), opacity var(--atmo-cover-in-ms) ease;
        will-change: transform, opacity;
    }*/

    /*html.atmo-cover.atmo-cover--out body::before {
        opacity: 1;
        transform-origin: left top;
        transform: translate(-50%,-50%) scale(0);
        transition: transform var(--atmo-cover-out-ms) var(--atmo-ease), opacity 200ms;
    }*/


    html[data-atmo-mode] body::after {
        background-size: min(var(--atmo-logo-size),70vw);
    }



}


@view-transition {
  navigation: auto;
}

html[data-atmo-mode]::view-transition-old(root),
html[data-atmo-mode]::view-transition-new(root) {
  animation: none;
}

:root:has(html[data-atmo-cover])::view-transition-old(root),
:root:has(html[data-atmo-cover])::view-transition-new(root) {
  animation: none;
}

::view-transition-old(root),
::view-transition-new(root) {
  animation: none;
}


::view-transition-old(atmo-image) {
  animation: image-out 140ms ease both;
}
::view-transition-new(atmo-image) {
  animation: image-in 100ms ease both;
}

@keyframes image-in {
  0% { opacity: 0; transform: translateY(0) scale(1.01); }
  33%   { opacity: 0; transform: translateY(0)   scale(1); }
  66% { opacity: 1; transform: translateY(0) scale(1.01); }
  100%   { opacity: 1; transform: translateY(0)   scale(1); }
}
@keyframes image-out {
   0% { opacity: 1; transform: translateY(0) scale(1.01); }
  33%   { opacity: 1; transform: translateY(0)   scale(1); }
  66% { opacity: 0; transform: translateY(0) scale(1.01); }
  100%   { opacity: 0; transform: translateY(0)   scale(1); }
}




html[data-atmo-mode] #atmo {
  view-timeline-name: atmo-image;
  --atmo-content-in-ms: calc(var(--atmo-in-ms) * 0.5);
  --atmo-content-out-delay-ms: calc(var(--atmo-out-ms) * 1.2);
  --atmo-content-out-ms: calc(var(--atmo-in-ms) * 1);
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 2147483644;
  background-color: var(--atmo-color);
  background-image: var(--atmo-image);
  background-size: cover;
  background-position: top;
  background-repeat: no-repeat;
  opacity: 0;
  left: 50%;
  top: 50%;
  width: 100vw;
  height: 100vh;
  width: 100dvw;
  height: 100dvh;  
  transform: translate(-50%,-50%);
  transition: opacity 0ms ease var(--atmo-content-in-ms);
  will-change: opacity;
  filter: saturate(0.2); 

}

html[data-atmo-mode] #atmo::after {
  view-timeline-name: atmo-logo;
  inset: 0;
  z-index: 2147483647;
  background-image: var(--atmo-logo);
  background-repeat: no-repeat;
  background-position: center;
  background-size: var(--atmo-logo-size);
  opacity: 0;
  filter: brightness(0);
  /*transition: opacity 180ms ease var(--atmo-logo-delay-ms);*/
  will-change: opacity;
}

@media only screen and (max-width: 600px) {

    html[data-atmo-mode] #atmo {
        /*display: none;*/
    }
    
    html[data-atmo-mode] #atmo {



    }

    html[data-atmo-mode] body::after {
        background-size: min(var(--atmo-logo-size),70vw);
    }

}

html.atmo-cover.atmo-cover--in #atmo,
html.atmo-cover.atmo-cover--hold #atmo,
html.atmo-cover.atmo-cover--in #atmo::after,
html.atmo-cover.atmo-cover--hold #atmo::after {
  opacity:1;
}

html.atmo-cover.atmo-cover--hold #atmo {
    filter: saturate(1); 
}

html.atmo-cover.atmo-cover--out #atmo,
html.atmo-cover.atmo-cover--out #atmo::after {
  transition: opacity 0ms ease var(--atmo-out-ms);
  opacity: 0;
  
  
}

@media (prefers-reduced-motion: reduce) {
    html[data-atmo-mode] * {
        animation: none;
    }
}

/*html.atmo-cover.atmo-cover--in::after,
html.atmo-cover.atmo-cover--hold::after {
   opacity: var(--atmo-logo-opacity);
}

html.atmo-cover.atmo-cover--out::after {
  opacity: 0;
}*/