/* ==========================================================================
   "Think. Strop" Animation Section Styles
   ========================================================================== */

.think-anim-section {
    position: relative;
    height: 100vh;
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    overflow: hidden;
    background-color: #f1f4f6;
    /* Matching the background from design */
}

/* Container for text to keep it centered when moving */
.anim-text-wrapper {
    position: absolute;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    font-size: 75px;
    font-weight: 800;
    letter-spacing: -0.05em;
    line-height: 0.8;
    z-index: 2;
}

/* Group think + dot */
.anim-line-1 {
    display: flex;
    align-items: baseline;
}

/* Initial state for text elements (Hidden and translated out) */
.anim-word-think {
    color: #ff4d00;
    opacity: 0;
    transform: translateX(-100vw);
    transform-origin: center right;
}

.anim-dot {
    color: #ff4d00;
    opacity: 0;
    transform: scale(0);
    transform-origin: center;
}

.anim-word-strop {
    color: #1a1a1a;
    opacity: 0;
    transform: translateX(100vw);
    transform-origin: center right;
    margin-left: 2ch;
    /* offset strop under think */
}

/* Initial state for logo (Hidden and shrunk) */
.anim-logo {
    position: absolute;
    width: 305px;
    max-width: 80vw;
    opacity: 0;
    transform: scale(0);
    z-index: 1;
}

/* ==========================================================================
   Animation Triggers (fires when .is-animating is added via JS)
   ========================================================================== */

.think-anim-section.is-animating .anim-word-think {
    animation: splitAnimLeft 6s forwards cubic-bezier(0.4, 0, 0.2, 1);
}

.think-anim-section.is-animating .anim-dot {
    animation: splitAnimCenter 6s forwards cubic-bezier(0.4, 0, 0.2, 1);
}

.think-anim-section.is-animating .anim-word-strop {
    animation: splitAnimRight 6s forwards cubic-bezier(0.4, 0, 0.2, 1);
}

.think-anim-section.is-animating .anim-logo {
    animation: revealLogo 6s forwards cubic-bezier(0.4, 0, 0.2, 1);
}

/* ==========================================================================
   Keyframes definition
   Time breakdown (6s total):
   0.0s - 1.2s (0% - 20%): Slide text in from edges
   1.2s - 2.7s (20% - 45%): Stay still
   2.7s - 4.5s (45% - 75%): Move apart to edges and blur/fade
   3.3s - 5.4s (55% - 90%): Logo scales up
   ========================================================================== */

@keyframes splitAnimLeft {
    0% {
        opacity: 0;
        transform: scale(1) translateX(-100vw);
        filter: blur(0px);
    }

    20% {
        opacity: 1;
        transform: scale(1) translateX(0);
        filter: blur(0px);
    }

    45% {
        opacity: 1;
        transform: scale(1) translateX(0);
        filter: blur(0px);
    }

    75% {
        opacity: 0;
        transform: scale(1.2) translateX(-100vw);
        filter: blur(12px);
    }

    100% {
        opacity: 0;
        transform: scale(1.2) translateX(-100vw);
        filter: blur(12px);
    }
}

@keyframes splitAnimCenter {
    0% {
        opacity: 0;
        transform: scale(0);
        filter: blur(0px);
    }

    20% {
        opacity: 1;
        transform: scale(1);
        filter: blur(0px);
    }

    45% {
        opacity: 1;
        transform: scale(1);
        filter: blur(0px);
    }

    75% {
        opacity: 0;
        transform: scale(0);
        filter: blur(12px);
    }

    100% {
        opacity: 0;
        transform: scale(0);
        filter: blur(12px);
    }
}

@keyframes splitAnimRight {
    0% {
        opacity: 0;
        transform: scale(1) translateX(100vw);
        filter: blur(0px);
    }

    20% {
        opacity: 1;
        transform: scale(1) translateX(0);
        filter: blur(0px);
    }

    45% {
        opacity: 1;
        transform: scale(1) translateX(0);
        filter: blur(0px);
    }

    75% {
        opacity: 0;
        transform: scale(1.2) translateX(100vw);
        filter: blur(12px);
    }

    100% {
        opacity: 0;
        transform: scale(1.2) translateX(100vw);
        filter: blur(12px);
    }
}

@keyframes revealLogo {
    0% {
        opacity: 0;
        transform: scale(0);
        filter: blur(8px);
    }

    45% {
        opacity: 0;
        transform: scale(0);
        filter: blur(8px);
    }

    60% {
        opacity: 0;
        transform: scale(0.5);
        filter: blur(4px);
    }

    90% {
        opacity: 1;
        transform: scale(1);
        filter: blur(0px);
    }

    100% {
        opacity: 1;
        transform: scale(1);
        filter: blur(0px);
    }
}