/* Basic page setup */
:root {
    /* --- Animation Timings --- */
    --fade-in-duration: 1.5s;       /* Default fade-in for text elements */
    --frame-fade-in-duration: 1.2s; /* A slightly faster fade for the frame */
    --fade-in-delay: 0.3s;          /* Universal delay before elements appear */
    --fade-out-duration: 1s;        /* Default fade-out for text elements */
    --frame-fade-out-duration: 0.5s; /* Fade-out for each frame in the final cascade */
}

body, html {
    margin: 0;
    padding: 0;
    width: 100%;
    height: 100%;
    overflow: hidden; /* Prevents scrollbars */
    background-color: #1a1a1a; /* A dark background */
    cursor: none;
    color: #EAEAEA; /* Light text color */
    font-weight: 400; /* Use the 'regular' weight */
    font-family: 'EB Garamond', serif;
}

/* The main container that will hold everything */
#poetry-container {
    width: 100%;
    height: 100%;
    display: grid;
    place-items: center; /* This perfectly centers grid items */
}

/* Custom cursor styles */
#custom-cursor {
    position: fixed;
    /* Start it off-screen until JS positions it */
    top: -100px;
    left: -100px;
    width: 24px;
    height: 24px;
    border: 1px solid #EAEAEA;
    border-radius: 50%;
    pointer-events: none; /* Allows clicks to pass through to elements underneath */
    transform: translate(-50%, -50%); /* Centers the circle on the actual cursor position */
    transition: transform 0.15s cubic-bezier(0.25, 1, 0.5, 1); /* A smooth, slightly trailing effect */
    will-change: transform; /* Performance optimization */
    z-index: 9999; /* Ensure it's on top of everything */
}

/* Style for the initial start screen */
#start-screen {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: #1a1a1a; /* Match the body background */
    z-index: 100; /* Ensure it's on top of everything */
    display: grid;
    place-items: center;
    transition: opacity 1s ease-out; /* For the fade-out effect */
}

/* Container for the initial instruction text */
.start-text-container {
    text-align: center;
    /* Use a similar fluid font size as the poem lines */
    font-size: clamp(0.9rem, 1.8vw, 1.75rem);
    line-height: 1.6; /* Add space between the lines */
}

.start-text-container p {
    margin: 0; /* Remove default paragraph margins */
}

/* Style for the frames we will create with JS */
.frame {
    grid-area: 1 / 1; /* Ensures all frames stack in the same grid cell */
    box-sizing: border-box; /* Includes padding and border in the element's total width and height */
    border: 1px solid rgba(255, 255, 255, 0.5); /* This color is overridden by JS */
    /* Make the frame fade in just like the text */
    opacity: 0;
    animation: fadeIn var(--frame-fade-in-duration) ease-in forwards;
    animation-delay: var(--fade-in-delay);
}

/* This class will be used for the final frame cascade fade-out */
.frame-hidden {
    /* Use a transition for a smooth fade-out of the border color */
    transition: border-color var(--frame-fade-out-duration) ease-out;
    border-color: transparent !important; /* Use !important to override inline styles */
}

/* Container for the final revealed poem */
#final-poem-container {
    position: fixed;
    inset: 0; /* A modern shorthand for top: 0, right: 0, bottom: 0, left: 0 */
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    padding: 2rem;
    opacity: 0; /* Initially hidden */
    pointer-events: none; /* Initially not interactive */
    transition: opacity 2s ease-in; /* A slow, graceful fade-in */
}

/* This div holds the block of poem lines */
#final-poem-text {
    /* Set a max-width for readability. The block will be centered by its flex parent. */
    max-width: 65ch;
}

#final-poem-text p {
    /* Add a larger margin between paragraphs for better separation */
    margin: 0 0 1.2em 0;
    /* A more aggressive clamp using viewport height (vh) to ensure text fits vertically without scrolling */
    font-size: clamp(0.5rem, 2.2vh, 1.2rem);
    text-align: left; /* Align text to the left within the block */
}

.signature {
    margin-top: 1em; /* Reduced margin to look better with the new paragraph spacing */
    font-size: clamp(0.5rem, 2.2vh, 1.2rem);
    /* Match the poem text block width for alignment */
    max-width: 65ch;
    width: 100%;
}

.signature a {
    color: #EAEAEA;
    text-decoration: underline;
    text-underline-offset: 0.2em; /* Creates a nice gap between text and underline */
    text-decoration-thickness: 1px; /* Keeps the line thin */
}

/* Style for the poem lines, including the animation */
.line {
    /* Make the text a grid item to unify centering with the frames */
    grid-area: 1 / 1;
    white-space: nowrap; /* Prevents the text from ever wrapping */
    /* Fluid font size: scales with viewport, but has min/max limits */
    font-size: clamp(0.9rem, 1.8vw, 1.75rem);
    text-align: center;
    padding: 20px;
    opacity: 0; /* Start invisible, animation will handle fade-in */
    animation: fadeIn var(--fade-in-duration) ease-in forwards; /* Apply our fade-in animation */
    animation-delay: var(--fade-in-delay); /* Wait a moment before fading in */
}

/* The fade-in animation keyframes */
@keyframes fadeIn {
    from { opacity: 0; }
    to { opacity: 1; }
}

/* Class to apply the fade-out animation */
.line-hidden {
    animation: fadeOut var(--fade-out-duration) ease-out forwards;
}

@keyframes fadeOut {
    from { opacity: 1; }
    to { opacity: 0; }
}

/* New animation for the final line's slow fade */
@keyframes slowFadeOut {
    from { opacity: 1; }
    to { opacity: 0; }
}

/* Class to apply the slow fade-out animation */
.line-slow-hidden {
    /* Use a variable for duration, with a fallback, set from JS */
    animation: slowFadeOut var(--final-text-fade-duration, 3s) ease-out forwards;
}

/* A utility class to hide elements (used for the start screen) */
.hidden {
    opacity: 0;
    pointer-events: none; /* Prevents interaction during/after fade */
}

/* Style for the cursor when the mouse is clicked */
#custom-cursor.active {
    transform: translate(-50%, -50%) scale(0.8);
}