/* Animation for text sequence and wrapper timing */
:root {
    --scroll-font-size: 2.5vmin;            /* Adjusted for wrapping */

    --fade-in-time: 2s;                     /* Time for one line to fade-in */
    --line-hold-time: 3s;                   /* The 'X seconds' pause between lines */
    --post-reveal-hold-time: 3s;            /* Pause after all text is revealed before fade-out */
    --scroll-out-fade-time: 3s;             /* Time for the entire scroll-wrapper to fade out */
   
    /* CALCULATIONS */
    /* Text display finishes at 9s (9s delay + 3s fade) */
    --wrapper-start-fade-delay: 12s;        /* Total hold time required: 9s + 3s (pause) = 12s */
    --total-sequence-duration: 15s;         /* Total duration for wrapper animation: 12s + 3s = 15s */
}



/* Keyframes for the Text Fade-In */
@keyframes textFadeIn {
    0% { opacity: 0; }
    100% { opacity: 1; }
}

/* Keyframes for the Scroll-Wrapper Fade-Out (Simple 0-to-100% fade) */
@keyframes wrapperFadeOut {
    0% { opacity: 1; }
    100% { opacity: 0; }
}

#scroll-wrapper {
    position: absolute;
    width: 100%; 
    height: 100%;
    margin-bottom: 2vh;
    opacity: 1;
    z-index: 4; 
    pointer-events: none;
    display: none;
    
    /* Apply the hold delay and the fade duration */
    animation-name: wrapperFadeOut;
    animation-duration: var(--scroll-out-fade-time); 
    animation-delay: var(--wrapper-start-fade-delay);
    animation-timing-function: linear;
    animation-fill-mode: forwards;
}

/* Scroll Image inside the wrapper */
#media-scroll {
    position: absolute; 
    width: 100%;
    max-height: 100%;
    object-fit: contain;
    z-index: 4;
    opacity: 1; 
}

/* New container specifically for the text to control its width */
#text-container {
    position: absolute; 
    max-width: 90%;                            /* Adjust this percentage to change how wide the text appears on the scroll paper */
    max-height: 100%;
    height: 80%;
    text-align: center; 
    z-index: 10;
    
    /* Responsive Positioning: Centers the element within its parent */
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    margin-top: 1vh;                          /* Use this to adjust the distance of the text from the top */
 }

/* Text Lines: Structural styles */
.sequence-text-line {
    position: relative; 
    font-family: 'Henny Penny', normal;
    color: transparent !important; 
    margin-bottom: 1vmin;                      /* Changed to vmin for responsive scaling */
    box-sizing: border-box;
    /* line-height: 2; 
   width: 100%; */
    opacity: 0; 
    display: block;
    
    /* Apply BOTH fade-in (1) and shine (2) animations */
    animation-name: textFadeIn, shine;
    animation-duration: var(--fade-in-time), 2s;
    animation-timing-function: ease-in-out, ease-in-out;
    animation-fill-mode: forwards, none;
    animation-iteration-count: 1, infinite;
    animation-direction: normal, alternate;
}

/* Remove margin from the last line to prevent extra space */
.sequence-text-line:last-child {
    margin-bottom: 0;
}

/* Text Delays for sequential display - Simplest, most reliable delays */
#text-1 { animation-delay: 0s, 0s; } 
#text-2 { animation-delay: 2s, 2s; } 
#text-3 { animation-delay: 4s, 4s; } 
#text-4 { animation-delay: 6s, 6s; }

/* GOLD METALLIC TEXT STYLING */
@keyframes shine {
    0% { background-position: 110% 0%, 0 0; }
    100% { background-position: -10% 0%, 0 0; }
}

[text-red] {
    color: #930303;                       /* Fallback color */
    font-size: var(--scroll-font-size);     /* Responsive Text Size */
/* L    line-height: 1.2;                       ine height for scroll text */
    position: relative; 
    display: block;
    /* width: 100%; */
    text-align: center;
}

[text-red]:not(:empty) { 
    color: transparent; 
    background-image: 
        linear-gradient(to right, transparent 0%, transparent 45%, white 50%, transparent 55%, transparent 100%), 
        linear-gradient(90deg, #c78c48, #cf9147 9.4%, #cf9348 9.4%, #b2763e 33.6%, #ad743c 35.7%, #ac723d 46.9%, #b0773d 51.7%, #b0793e 52.1%, #c4914c 64.6%, #c99750 68.5%, #ce9e54 73.2%, #f4d188);
    background-position: 110% 0%, 0 0;
    background-size: 200% auto, auto;
    -webkit-background-clip: text;
    background-clip: text;
}

[text-red]:before {
    content: attr(text-red);
    color: #fd0303;
    position: absolute;
    z-index: -1;
    
    /* Ensures absolute layer scales and centers correctly */
    top: 0;                                
    left: 0; 
    right: 0; 
    font-size: var(--scroll-font-size);
    text-align: center;

    /* CRITICAL FIX: Forces the generated text to wrap */
    white-space: pre-wrap; /* <-- ADD THIS LINE */

    /* Slight offset for 3D bevel effect */
    top: 0.05vw; 
    left: 0.05vw; 
    text-shadow: rgba(0, 0, 0, 1) 0px 0px 0.1vw;
}

[text-red]:after {
    content: attr(text-red);
    position: absolute;
    
    /* Ensures absolute layer scales and centers correctly */
    top: 0;                                 
    left: 0;
    right: 0; 
    font-size: var(--scroll-font-size);
    text-align: center;  

    /* CRITICAL FIX: Forces the generated text to wrap */
    white-space: pre-wrap; /* <-- ADD THIS LINE */

    background-image: linear-gradient(to bottom, transparent 0%, transparent 48%, rgba(98, 16, 0, .5) 50%, transparent 75%);
    -webkit-background-clip: text;
    background-clip: text;
}