/* ----------- Landing Layout ----------- */

#landing-outer-container {
	/* Don't let Grav template "tail"'s prose class limit us */
	max-width: initial;
}

#landing-main-slideshow-container {
    display: grid;
    grid-template-columns: 60% 40%;
}

#landing-main-slideshow-container > div {
    box-sizing: border-box;
}

@media (max-width: 700px) {
    #landing-main-slideshow-container {
        grid-template-columns: 1fr; /* single column */
        grid-template-rows: auto auto; /* two rows */
        height: auto; /* optional: let content define height */
    }
}
@media (min-width: 701px) {
	#landing-main-slideshow-container > div:nth-child(1) {
		padding-right: 20px;
	}

	#landing-main-slideshow-container > div:nth-child(2) {
		padding-left: 20px;
	}
}


/* ----------- Main Slideshow ----------- */

#main-slideshow {
    position: relative;
    width: 100%;
    height: 400px;
}


/* ----------- Phone Animation Slideshow ----------- */

#phone-anim-slideshow {
    position: absolute;
    top: 6%;
    left: 9%;
    width: 35%;
    height: 56%;
    /*background-color: rgba(255,0,0,0.3);*/
    transform: rotate(-7deg);
    overflow: hidden;
}

#phone-anim-slideshow > div {
    display: flex;
    justify-content: center;
    align-items: center;
}

#phone-anim-slideshow > div > span {
    font-size: 150%;
}


/* ----------- Slideshow: Common ----------- */

.main-slide,
.phone-anim-slide {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    opacity: 0;
    transform: translateY(50px);
}

.main-slide.slide-inup,
.phone-anim-slide.slide-inup {
    animation: slideInUp 400ms ease-out forwards;
    z-index: 2;
}

.main-slide.slide-inup.anim-rev,
.phone-anim-slide.slide-inup.anim-rev {
    animation-direction: reverse;
}

.main-slide.slide-outdown,
.phone-anim-slide.slide-outdown {
    animation: slideOutDown 400ms ease-in forwards;
    z-index: 1;
}

.main-slide.slide-outdown.anim-rev,
.phone-anim-slide.slide-outdown.anim-rev {
    animation-direction: reverse;
}

#main-slideshow[data-direction="forward"] .main-slide.slide-outdown,
#main-slideshow[data-direction="backward"] .main-slide.slide-inup {
	pointer-events: none;
}


@keyframes slideInUp {
    from {
        opacity: 0;
        transform: translateY(50px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes slideOutDown {
    from {
        opacity: 1;
        transform: translateY(0);
    }
    to {
        opacity: 0;
        transform: translateY(-50px);
    }
}


/* ----------- Phone Animation ----------- */

#phone-anim-container {
    position: relative;
}

#phone-anim-container > svg {
    width: 100%;
    max-height: 400px;
}

@media (max-width: 700px) {
    #phone-anim-container > svg {
        max-height: 300px;
    }
}

.animated {
    transform-origin: 50% 90%;
    transform-box: fill-box;
    animation-fill-mode: forwards;
}

#thumb_ball.animated {
    animation: thumb_ball_move 500ms alternate linear;
    animation-iteration-count: 2;
}

#thumb_lower_phanalx.animated {
    animation: thumb_lower_phanalx_move 500ms alternate linear;
    animation-iteration-count: 2;
}

#thumb_upper_phanalx.animated {
    animation: thumb_upper_phanalx_move 500ms alternate linear;
    animation-iteration-count: 2;
}

@keyframes thumb_upper_phanalx_move {
    0%   { transform: translate(0,0) rotate(0deg); }
    40%  { transform: translate(-40%,28%) rotate(-30deg); }
    100% { transform: translate(-90%,76%) rotate(-90deg); }
}

@keyframes thumb_lower_phanalx_move {
    0%   { transform: translate(0,0) rotate(0deg); }
    40%  { transform: translate(-20%,10%) rotate(-12deg); }
    100% { transform: translate(-20%,11%) rotate(-57deg); }
}

@keyframes thumb_ball_move {
    0%   { transform: translate(0,0) rotate(0deg); }
    40%  { transform: translate(2%,0) rotate(-8deg); }
    100% { transform: translate(2%,0) rotate(-12deg); }
}


/* ----------- Control Buttons ----------- */

#landing-buttons {
	margin-top: 1rem;
}

#landing-buttons > button {
    display: inline-block;
    position: relative;
    vertical-align: top;
    padding: 0px 15px;
    margin-right: 6px;
}

#landing-buttons > button#button-next-slide > span {
    margin-left: 30px;
}

#landing-buttons > button#button-next-slide > svg {
    position: absolute;
    top: 50%;
    left: 15px;
    transform: translateY(-50%) rotate(-90deg);
}

.progress-ring__bg {
    fill: none;
    stroke: #ccc;
    stroke-width: 4;
}

.progress-ring__progress {
    fill: none;
    stroke: rgb(99 102 241/var(--tw-text-opacity));
    stroke-width: 4;
    stroke-linecap: round;

    /* Circumference = 2 * π * r (must be correct for correct timing) */
    stroke-dasharray: 50.27;
    stroke-dashoffset: 50.27;

    animation: fillCircle 8s linear forwards;
}

@keyframes fillCircle {
    to {
        stroke-dashoffset: 0;
    }
}


/* ----------- Main Slideshow Specific ----------- */

.button-tail {
	border: 1px solid rgb(99 102 241/var(--tw-text-opacity));
	border-radius: 4px;
}

#landing-buttons {
	text-align: right;
}

@media (min-width: 701px) {
	.main-slide {
		padding-left: 8vw;
	}
	#phone-anim-container {
		padding-right: 8vw;
	}
	#landing-buttons {
		padding: 0 8vw;
	}
	#landing-buttons {
		text-align: left;
	}
	.main-slide > p {
		text-align: justify;
	}
}



/* ----------- Customizing The "tail" Theme just for landing page ----------- */


@media (min-width: 701px) {
	.prose.custom-padding {
		padding: 0 8vw;
		box-sizing: content-box;
	}
}