/* Container for all text and lines */
.text-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100vh;
    z-index: 2;
    pointer-events: none;
    transition: opacity 0.1s ease;
    /* Performance optimizations */
    transform: translateZ(0);
    will-change: opacity;
    -webkit-transform: translateZ(0);
}

/* Animation for text entrance */
@keyframes flipUp {
    0% {
        transform: rotateX(90deg);
        opacity: 0;
    }
    100% {
        transform: rotateX(0deg);
        opacity: 1;
    }
}

/* Base styles for all text elements */
.text {
    position: absolute;
    color: white;
    /* Restore original font size with responsive scaling to prevent line crossing */
    font-size: clamp(4rem, 10rem, 10rem);
    font-family: var(--app-font-family, Arial, Helvetica, sans-serif);
    transform-origin: bottom;
    animation: flipUp 1s cubic-bezier(0.23, 1, 0.32, 1) forwards;
    opacity: 0;
    /* Ensure text doesn't overflow or cause layout issues */
    white-space: nowrap;
    line-height: 1;
    /* Prevent text from being clipped */
    overflow: visible;
}

/* Individual text positioning */
/* Use bottom positioning to align text baseline with grey lines */
.text-top-left {    /* "Ishaan" - sits on line at 20% */
    bottom: 80%; /* 100% - 20% = 80% from bottom */
    left: 2%;
    animation-delay: 0.5s;
}

.text-top-right {   /* "Nimkar" - sits on line at 45% */
    bottom: 55%; /* 100% - 45% = 55% from bottom */
    right: 2%;
    animation-delay: 0.5s;
}

.text-bottom-left { /* "Work" - sits on line at 70% */
    bottom: 30%; /* 100% - 70% = 30% from bottom */
    left: 2%;
    animation-delay: 1.0s;
}

.text-bottom-right { /* "Book" - sits on line at 95% */
    bottom: 5%; /* 100% - 95% = 5% from bottom */
    right: 2%;
    animation-delay: 1.0s;
}

/* Grey horizontal lines between text */
.text-overlay::before,
.text-overlay::after,
.text-overlay .divider-1,
.text-overlay .divider-2 {
    content: '';
    position: absolute;
    left: 0;
    width: 100%;
    height: 1px;
    background-color: #808080;
}

/* Positioning for each horizontal line */
.text-overlay::before {
    top: 20%;
}

.text-overlay::after {
    top: 45%;
}

.text-overlay .divider-1 {
    top: 70%;
}

.text-overlay .divider-2 {
    top: 95%;
}

/* Responsive font sizing to prevent text from crossing lines */
/* Scale font size based on viewport height to ensure text never exceeds available space */
/* Original size is 10rem, but we scale it down on smaller screens */

/* Base responsive sizing - scale down on smaller viewports */
@media (max-height: 800px) {
    .text {
        font-size: clamp(3rem, 8vh, 8rem);
    }
}

@media (max-height: 600px) {
    .text {
        font-size: clamp(2.5rem, 7vh, 6rem);
    }
}

/* On very small viewports, ensure text doesn't cross lines */
@media (max-height: 500px) {
    .text {
        font-size: clamp(2rem, 6vh, 5rem);
    }
}

/* On tall screens, allow original size */
@media (min-height: 1000px) {
    .text {
        font-size: 10rem;
    }
}