/*
    Toggle día / atardecer / noche
*/

/* CONTAINER
########################################################### */
.toggle-container {
    position: relative;
    width: 500px;
    height: 200px;
    border-radius: 100px;
    overflow: hidden;
    transition: background-color .3s, background-image .3s;
    cursor: pointer;
    background-color: rgb(33, 166, 255);
    box-shadow: 5px 5px 15px rgba(0, 0, 0, 0.2);
}
.toggle-container::after {
    content: '';
    position: absolute;
    width: 502px;
    height: 202px;
    border-radius: 100px;
    left: 0;
    top: 0;
    z-index: 10;
    box-shadow: inset -6px -6px rgba(0, 0, 0, 0.2),
        inset 6px 6px rgba(255, 255, 255, 0.2),
        inset -5px 2px 30px rgba(0, 0, 0, 0.3);
}

.toggle-container.is-sunset {
    background-color: #c9577b;
    background-image: linear-gradient(180deg, #5c3566 0%, #d9738a 55%, #ff9d6e 100%);
}
.toggle-container.is-night {
    background-color: rgb(7, 39, 61);
    background-image: none;
}

/* RADIANT (halo)
########################################################### */
.toggle-container .radiant {
    position: absolute;
    top: -70px;
    width: 340px;
    height: 340px;
    border-radius: 50%;
    background-color: rgba(255, 255, 255, 0.2);
    transition: all .5s ease-out;
}
.toggle-container .radiant::after {
    content: '';
    position: absolute;
    top: 45px;
    width: 250px;
    height: 250px;
    border-radius: 50%;
    background-color: rgba(255, 255, 255, 0.2);
    transition: all .5s ease-out;
}
.toggle-container .radiant::before {
    content: '';
    position: absolute;
    top: -45px;
    width: 430px;
    height: 430px;
    border-radius: 50%;
    background-color: rgba(255, 255, 255, 0.2);
    transition: all .5s ease-out;
}

.toggle-container .sun-radiant { left: -70px; }
.toggle-container .sun-radiant::before { left: -45px; }
.toggle-container .sun-radiant::after  { left: 45px; }

.toggle-container .sun-radiant {
    transform: translateX(0);
    opacity: 1;
    transition-delay: .5s;
}
.toggle-container.is-sunset .sun-radiant,
.toggle-container.is-night .sun-radiant {
    transform: translateX(-350px);
    opacity: 0;
    transition-delay: 0s;
}
.toggle-container.is-sunset .sun-radiant::before,
.toggle-container.is-night .sun-radiant::before { transform: translateX(-100px); }
.toggle-container.is-sunset .sun-radiant::after,
.toggle-container.is-night .sun-radiant::after  { transform: translateX(100px); }

.toggle-container .sunset-radiant { left: 80px; }
.toggle-container .sunset-radiant::before { left: -45px; }
.toggle-container .sunset-radiant::after  { left: 45px; }

.toggle-container .sunset-radiant {
    transform: translateX(-350px);
    opacity: 0;
    transition-delay: 0s;
}
.toggle-container .sunset-radiant::before { transform: translateX(-100px); }
.toggle-container .sunset-radiant::after  { transform: translateX(100px); }

.toggle-container.is-sunset .sunset-radiant {
    transform: translateX(0);
    opacity: 1;
    transition-delay: .5s;
}
.toggle-container.is-sunset .sunset-radiant::before,
.toggle-container.is-sunset .sunset-radiant::after { transform: translateX(0); }

.toggle-container.is-night .sunset-radiant {
    transform: translateX(350px);
    opacity: 0;
    transition-delay: 0s;
}
.toggle-container.is-night .sunset-radiant::before { transform: translateX(100px); }
.toggle-container.is-night .sunset-radiant::after  { transform: translateX(-100px); }

.toggle-container .moon-radiant { right: -70px; }
.toggle-container .moon-radiant::before { right: -45px; }
.toggle-container .moon-radiant::after  { right: 45px; }

.toggle-container .moon-radiant {
    transform: translateX(350px);
    opacity: 0;
    transition-delay: 0s;
}

.toggle-container.is-night .moon-radiant {
    transform: translateX(0);
    opacity: 1;
    transition-delay: .5s;
}
.toggle-container.is-night .moon-radiant::before,
.toggle-container.is-night .moon-radiant::after { transform: translateX(0); }

/* CLOUDS (solo día)
########################################################### */
.toggle-container .cloud {
    width: 100px;
    height: 100px;
    border-radius: 50%;
    position: absolute;
    transition: transform .8s;
}
.toggle-container .cloud--1 {
    bottom: 60px;
    right: -35px;
    background-color: rgb(211, 236, 252);
    box-shadow: -40px 50px rgb(211, 236, 252),
        -80px 100px rgb(211, 236, 252),
        -160px 110px rgb(211, 236, 252),
        -220px 120px rgb(211, 236, 252),
        -260px 110px rgb(211, 236, 252),
        -320px 140px rgb(211, 236, 252),
        -360px 140px rgb(211, 236, 252),
        -400px 170px rgb(211, 236, 252);
}
.toggle-container .cloud--2 {
    bottom: 100px;
    right: -15px;
    opacity: .4;
    background-color: white;
    box-shadow: -40px 50px white,
        -80px 100px white,
        -160px 110px white,
        -220px 120px white,
        -260px 110px white,
        -320px 140px white,
        -360px 140px white,
        -400px 170px white;
    transition-delay: .05s;
}
.toggle-container.is-sunset .cloud,
.toggle-container.is-night .cloud {
    transform: translateY(200px);
}

/* MAR Y GAVIOTAS (solo atardecer)
########################################################### */
.toggle-container .sea {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: 64px;
    background: linear-gradient(180deg,
        rgba(255, 200, 160, 0.18) 0%,
        rgba(210, 100, 120, 0.5) 45%,
        rgba(95, 45, 75, 0.72) 100%
    );
    opacity: 0;
    transform: translateY(24px);
    transition: opacity .6s, transform .6s;
    transition-delay: 0s;
}
.toggle-container.is-sunset .sea {
    opacity: 1;
    transform: translateY(0);
    transition-delay: .3s;
}

.toggle-container .bird {
    position: absolute;
    width: 18px;
    height: 9px;
    opacity: 0;
    transform: translateY(20px);
    transition: opacity .6s, transform .6s;
}
.toggle-container .bird::before,
.toggle-container .bird::after {
    content: '';
    position: absolute;
    width: 9px;
    height: 9px;
    border-top: 2px solid rgba(255, 255, 255, 0.9);
    border-radius: 50% 50% 0 0;
    top: 0;
}
.toggle-container .bird::before { left: 0; transform: rotate(20deg); }
.toggle-container .bird::after  { left: 9px; transform: rotate(-20deg) scaleX(-1); }

.toggle-container.is-sunset .bird {
    opacity: 1;
    transform: translateY(0);
    transition-delay: .35s;
}

/* PALMERAS (solo atardecer)
########################################################### */
.toggle-container .palm {
    position: absolute;
    bottom: -8px;
    width: 76px;
    height: 108px;
    opacity: 0;
    transform: translateY(50px);
    transition: opacity .6s, transform .6s;
    transition-delay: 0s;
}
.toggle-container .palm--1 { right: 30px; }
.toggle-container .palm--2 { right: 88px; width: 56px; height: 82px; }

.toggle-container .palm .trunk {
    position: absolute;
    bottom: 0;
    left: 60%;
    width: 7px;
    height: 62%;
    background: #241a1c;
    border-radius: 4px;
    transform: translateX(-50%) rotate(-5deg);
    transform-origin: bottom center;
}

.toggle-container .palm .frond {
    position: absolute;
    bottom: 62%;
    left: 50%;
    width: 7px;
    height: 46%;
    background: #241a1c;
    border-radius: 60% 60% 40% 40% / 75% 75% 25% 25%;
    transform-origin: 50% 100%;
}
.toggle-container .palm .frond--1 { transform: translateX(-50%) rotate(-72deg) scaleX(1.05); }
.toggle-container .palm .frond--2 { transform: translateX(-50%) rotate(-38deg); }
.toggle-container .palm .frond--3 { transform: translateX(-50%) rotate(-6deg) scaleY(1.1); }
.toggle-container .palm .frond--4 { transform: translateX(-50%) rotate(28deg); }
.toggle-container .palm .frond--5 { transform: translateX(-50%) rotate(64deg) scaleX(1.05); }

.toggle-container.is-sunset .palm {
    opacity: 1;
    transform: translateY(0);
    transition-delay: .3s;
}

/* STARS (solo noche)
########################################################### */
.toggle-container .star {
    position: absolute;
    background-color: white;
    clip-path: polygon(50% 0, 65% 35%, 100% 50%, 65% 65%, 50% 100%, 35% 65%, 0 50%, 35% 35%);
    opacity: 0;
    transition: all .5s;
    transition-delay: .3s;
}
.toggle-container.is-night .star { opacity: .6; }
.toggle-container.is-night .star--1 { animation: nastySparkle 1s linear .5s infinite; }
.toggle-container.is-night .star--2 { animation: nastySparkle 1s linear 1s infinite; }
.toggle-container.is-night .star--3 { animation: nastySparkle 1s linear .7s infinite; }

.toggle-container .star--1  { height: 15px; width: 15px; top: 50px;  left: 100px; }
.toggle-container .star--2  { height: 18px; width: 18px; top: 130px; left: 60px; }
.toggle-container .star--3  { height: 12px; width: 12px; top: 110px; left: 190px; }
.toggle-container .star--1b { height: 15px; width: 15px; top: 50px;  right: 100px; }
.toggle-container .star--2b { height: 18px; width: 18px; top: 130px; right: 60px; }
.toggle-container .star--3b { height: 12px; width: 12px; top: 110px; right: 190px; }

.toggle-container .star-round {
    height: 3px;
    width: 3px;
    border-radius: 50%;
    position: absolute;
    background-color: white;
    opacity: 0;
    transition: all .5s;
    transition-delay: .3s;
}
.toggle-container .star-round--1 { top: 90px;  left: 120px; }
.toggle-container .star-round--2 { top: 40px;  left: 50px; }
.toggle-container .star-round--3 { top: 80px;  left: 35px; }
.toggle-container .star-round--4 { top: 160px; left: 160px; }
.toggle-container .star-round--5 { top: 30px;  left: 180px; }
.toggle-container .star-round--6 { top: 60px;  left: 200px; }
.toggle-container .star-round--1b { top: 90px;  right: 120px; }
.toggle-container .star-round--2b { top: 40px;  right: 50px; }
.toggle-container .star-round--3b { top: 80px;  right: 35px; }
.toggle-container .star-round--4b { top: 160px; right: 160px; }
.toggle-container .star-round--5b { top: 30px;  right: 180px; }
.toggle-container .star-round--6b { top: 60px;  right: 200px; }

.toggle-container.is-night .star-round {
    opacity: .6;
    animation: nastySparkle 1s linear .5s infinite;
}

@keyframes nastySparkle {
    0% { opacity: .6; }
    50% { opacity: .8; }
    100% { opacity: .6; }
}

/* DOT (sol / atardecer / luna)
########################################################### */
.toggle-container .toggle-dot {
    height: 160px;
    width: 160px;
    background-color: rgb(255, 230, 0);
    border-radius: 50%;
    position: absolute;
    top: 20px;
    left: 20px;
    box-shadow: inset -2px -5px 5px rgb(204, 156, 0),
        inset 2px 5px 5px rgb(255, 246, 168);
    transition: transform 1s ease-in-out, background-color .3s, box-shadow .3s;
    transform: translateX(0) rotate(0deg);
}

.toggle-container.is-sunset .toggle-dot {
    background-color: rgb(255, 125, 61);
    box-shadow: inset -2px -5px 5px rgba(180, 80, 30, 0.7),
        inset 2px 5px 5px rgba(255, 205, 160, 0.9);
    transform: translateX(150px) rotate(180deg);
}

.toggle-container.is-night .toggle-dot {
    background-color: rgb(215, 223, 233);
    box-shadow: inset -2px -5px 5px rgb(112, 140, 175),
        inset 2px 5px 5px rgb(237, 241, 245);
    transform: translateX(300px) rotate(360deg);
}

/* MOON CRATERS (solo noche)
########################################################### */
.toggle-container .toggle-crater {
    background-color: rgb(158, 176, 197);
    position: absolute;
    border-radius: 50%;
    box-shadow: inset 2px 5px 2px rgb(133, 156, 185);
    opacity: 0;
    transition: opacity .5s;
    transition-delay: .3s;
}
.toggle-container .toggle-crater--1 { height: 35px; width: 35px; top: 20px; left: 65px; }
.toggle-container .toggle-crater--2 { height: 52px; width: 52px; top: 50px; left: 15px; }
.toggle-container .toggle-crater--3 { height: 42px; width: 42px; bottom: 30px; right: 30px; }

.toggle-container.is-night .toggle-crater { opacity: 1; }

/* SUNSET SHADOW LINES (solo atardecer)
########################################################### */
.toggle-container .toggle-shadow-line {
    position: absolute;
    height: 7px;
    border-radius: 50%;
    background: rgba(120, 40, 10, 0.22);
    opacity: 0;
    transition: opacity .5s;
    transition-delay: .3s;
}
.toggle-container .toggle-shadow-line--1 { top: 38px;  left: 22px; width: 116px; }
.toggle-container .toggle-shadow-line--2 { top: 76px;  left: 6px;  width: 148px; }
.toggle-container .toggle-shadow-line--3 { top: 114px; left: 24px; width: 112px; }

.toggle-container.is-sunset .toggle-shadow-line { opacity: 1; }