/* ================================================== */
/* BASIC */
/* ================================================== */

.link {
    color: var(--color-text-alt);
    transition: 
        color 0.3s ease-in-out,
        background-color 0.3s ease-in-out;;
}

.link:hover { color: var(--color-text-main); }

/* ================================================== */
/* STICKY CONTROL */
/* ================================================== */

.sticky {
    position: fixed;
    z-index: 1;
    bottom: 20px;
    right: 20px;
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 20px;
}

.sticky .link {
    cursor: pointer;
    background-color: var(--color-text-main);
    color: var(--color-bg-main);
    padding: 10px;
    border-radius: 50px;
    transition: background-color 0.3s ease-in-out;
}

.sticky .link:hover { background-color: var(--color-accent-alt); }

.sticky .movable {
    z-index: -1;
    opacity: 0;

    transition:
        transform 0.4s ease-in-out,
        opacity 0.4s ease-in-out;
}

.sticky .movable:nth-child(1) {
    transform: translate(65px, 65px);
    transition-delay: 100ms;
}

.sticky .movable:nth-child(2) {
    transform: translate(0, 65px);
    transition-delay: 0ms;
}

.sticky .movable:nth-child(3) {
    transform: translate(65px, 0);
    transition-delay: 200ms;
}

.sticky.open .movable {
    transform: translate(0, 0);
    opacity: 1;
    z-index: 1;
}

/* ================================================== */
/* HERO */
/* ================================================== */

.hero .section { min-height: 100dvh; }

.hero .text-content { flex: 3; }
.hero .image-content { flex: 1.5; }

.hero .text-content .h1 { font-size: 10vw; }
.hero .text-content .h1 p:last-child { padding-left: 10vw; }

.hero .para {
    max-width: 700px;
    text-wrap: balance;
}

.hero .link .symbol { transition: transform 0.3s ease-in-out; }
.hero .link:has(.symbol):hover .symbol { transform: translateX(12px); }

.hero .image-content .img { aspect-ratio: 2 / 3; }

/* ================================================== */
/* COACH */
/* ================================================== */

.coach .img { 
    aspect-ratio: 4 / 5;
    object-fit: cover;
    object-position: top center;
}

.coach .section { max-width: 1200px; }

.coach .text-content,
.coach .image-content { flex: 1; }

.coach .text-content .line {
    width: 200px;
    height: 5px;
    background-color: var(--color-accent-main);
}

.coach .text-content .para {
    max-width: 700px;
    text-wrap: balance;
}

.coach .text-content .tagline {
    border-left: 2px solid var(--color-border);
    padding-left: 20px;
    font-style: italic;
}

.coach .image-content .grid {
    grid-template-columns: repeat(auto-fit, minmax(min(160px, 100%), 1fr));
}

.coach .image-content .grid .column { border-left: 2px solid var(--color-accent-alt); }

/* ================================================== */
/* STRUCTURE */
/* ================================================== */

.structure .body {
    grid-template-columns: repeat(auto-fit, minmax(min(400px, 100%), 1fr));
}

.structure .step {
    max-width: 400px;
    margin: 0 auto;
}

.structure .step .h1.fs-128 {
    color: var(--color-surface-alt);
    transition: transform 0.3s ease-in-out;
    transform-origin: left;
}
.structure .step:hover .h1.fs-128 { transform: scale(1.2); }

/* ================================================== */
/* RESULTS */
/* ================================================== */

.results .body {
    grid-template-columns: repeat(auto-fit, minmax(min(400px, 100%), 1fr));
}

.results .review .img {
    background-color: var(--color-accent-alt);
    aspect-ratio: 16 / 9;
    object-fit: cover;
    object-position: top center;
    border-radius: 4px 4px 0 0;
}

.results .review .text-content { border-radius: 0 0 4px 4px; }
.results .review .text-content .para { font-style: italic; }

/* ================================================== */
/* CONNECT */
/* ================================================== */

.connect { height: 100vh; }
.connect iframe { width: min(700px, 100%); }

/* ================================================== */
/* FOOTER */
/* ================================================== */

.footer {
    border-top: 1px solid var(--color-border);
}

/* ================================================== */
/* & RESPONSIVENESS */
/* ================================================== */

@media (max-width: 1024px) {
    .hero .image-content { flex: 2; }
}

@media (max-width: 768px) {
    .header .list { display: none; }
    .hero .section { flex-direction: column; }
    .hero .text-content .h1 { font-size: 15vw; }
    .coach .section { flex-direction: column; }
}