/* Cinematic Title Sequence - Pure CSS Animations */

.cts-60-overlay {
    position: fixed;
    inset: 0;
    z-index: 99999;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: #0D0D0D;
    animation: cts-60-overlay-fade-out 0.3s ease 7.7s forwards;
}

.cts-60-content {
    position: relative;
    width: 100%;
    text-align: center;
}

.cts-60-word {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    font-size: 10vw;
    font-weight: 200;
    letter-spacing: -0.02em;
    line-height: 1.1;
    opacity: 0;
    white-space: nowrap;
}

/* Word 1: Fade in at 1s, fade out at 2.2s */
.cts-60-word-1 {
    animation: cts-60-fade-in 0.6s ease 1s forwards, cts-60-fade-out 0.3s ease 2.2s forwards;
}

/* Word 2: Fade in at 2.2s, fade out at 3.4s */
.cts-60-word-2 {
    animation: cts-60-fade-in 0.6s ease 2.2s forwards, cts-60-fade-out 0.3s ease 3.4s forwards;
}

/* Word 3: Fade in at 3.4s, bold, larger, accent color, hold until 5.8s */
.cts-60-word-3 {
    font-size: 12vw;
    font-weight: 800;
    animation: cts-60-fade-in 0.6s ease 3.4s forwards, cts-60-fade-out 0.3s ease 5.8s forwards;
}

/* Horizontal line: Draw from center at 5.8s, fade out at 6.5s */
.cts-60-line {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    height: 1px;
    width: 0;
    background-color: #FFFFFF;
    animation: cts-60-line-draw 0.5s ease 5.8s forwards, cts-60-fade-out 0.3s ease 6.5s forwards;
}

/* Skip button */
.cts-60-skip {
    position: absolute;
    bottom: 2rem;
    right: 2rem;
    background: transparent;
    border: none;
    color: #FFFFFF;
    opacity: 0.4;
    font-size: 0.875rem;
    cursor: pointer;
    transition: opacity 0.3s ease;
    font-family: inherit;
    padding: 0.5rem 1rem;
}

.cts-60-skip:hover {
    opacity: 1;
}

/* Keyframes */
@keyframes cts-60-fade-in {
    from { opacity: 0; }
    to { opacity: 1; }
}

@keyframes cts-60-fade-out {
    from { opacity: 1; }
    to { opacity: 0; }
}

@keyframes cts-60-line-draw {
    from { width: 0; }
    to { width: 60vw; }
}

@keyframes cts-60-overlay-fade-out {
    from { opacity: 1; }
    to { opacity: 0; pointer-events: none; }
}

/* Tablet (769px - 1024px): Larger text */
@media (min-width: 769px) and (max-width: 1024px) {
    .cts-60-word {
        font-size: 12vw;
    }
    .cts-60-word-3 {
        font-size: 14vw;
    }
}

/* Mobile (below 768px): Accelerated timing, larger text, no line, centered skip */
@media (max-width: 768px) {
    .cts-60-word {
        font-size: 14vw;
    }
    .cts-60-word-3 {
        font-size: 18vw;
    }

    /* Accelerated timing: 40% faster */
    .cts-60-word-1 {
        animation: cts-60-fade-in 0.4s ease 0.6s forwards, cts-60-fade-out 0.2s ease 1.3s forwards;
    }
    .cts-60-word-2 {
        animation: cts-60-fade-in 0.4s ease 1.3s forwards, cts-60-fade-out 0.2s ease 2s forwards;
    }
    .cts-60-word-3 {
        animation: cts-60-fade-in 0.4s ease 2s forwards, cts-60-fade-out 0.2s ease 3.5s forwards;
    }

    /* Skip line animation on mobile */
    .cts-60-line {
        display: none;
    }

    /* Overlay fades at 5s instead of 7.7s */
    .cts-60-overlay {
        animation: cts-60-overlay-fade-out 0.3s ease 5s forwards;
    }

    /* Skip button: bottom-center, larger */
    .cts-60-skip {
        bottom: 2rem;
        left: 50%;
        right: auto;
        transform: translateX(-50%);
        font-size: 1rem;
    }
}

/* Reduced motion: Skip entirely */
@media (prefers-reduced-motion: reduce) {
    .cts-60-overlay {
        display: none;
    }
}