/* --- 1. STAGE SETUP --- */
        .animation-stage {
            position: relative;
            width: 100%;
            height: 80vh; /* was 90 -- for Mobile Height */
            display: flex;
            justify-content: center;
            align-items: center;
            /* Changed: Allow vertical overflow so SVGs aren't cut off at the bottom */
            overflow: visible; 
            background-color: var(--base-cream);
        }

        
        /* --- 2. REVEAL TEXT --- */
        .reveal-text {
            position: absolute;
            
/*            font-weight: bold;*/
/*            font-size: clamp(1.1rem, 8vw, 1.6rem);*/
            font-size: 1.3rem;
/*            color: var(--text-color);*/
            opacity: 0;
            z-index: 5;
            text-align: center;
            transform: scale(0.9);
            width:85vw;
            text-wrap: pretty;
        }
         
         @media (min-width: 1024px) {
            .animation-stage { height: 100vh; } 
             .reveal-text {width:30vw}
        }


        /* --- 3. RESPONSIVE SVGS (Desktop Only) --- */
        .responsive-svg {
            display: none; 
            position: absolute;
            top: 50%;
            height: 110vh; /* Oversized height */
            width: auto;
            opacity: 0;
            z-index: 10;
            pointer-events: none;
            /* Ensure they stay centered vertically even when overflowing */
            transform-origin: center; 
        }

        @media (min-width: 1024px) {
            .responsive-svg { display: block; }
        }

        /* --- 4. TRIGGERED ANIMATIONS --- */
        
        .visible .reveal-text { 
            animation: fadeInText 1s ease-out forwards;
            animation-delay: 0.3s;/* was 1.3*/ 
        }

        @keyframes fadeInText {
            to { opacity: 1; transform: scale(1); }
        }

        @media (min-width: 1024px) {
            .visible .split-left { animation: moveLeftSVG 1.8s cubic-bezier(0.4, 0, 0.2, 1) forwards 0.1s; }/* was 0.4*/
            .visible .split-right { animation: moveRightSVG 1.8s cubic-bezier(0.4, 0, 0.2, 1) forwards 0.1s; }/* was 0.4*/
        }

        @keyframes moveLeftSVG { 
            0% { opacity: 0; left: 50%; transform: translate(-50%, -50%); }
            100% { 
                opacity: 1; 
                left: 25vw; 
                transform: translate(-100%, -50%); 
            }
        }

        @keyframes moveRightSVG { 
            0% { opacity: 0; right: 50%; transform: translate(50%, -50%) scaleX(-1); }
            100% { 
                opacity: 1; 
                right: 25vw; 
                transform: translate(100%, -50%) scaleX(-1); 
            }
        }


/* ROTATING WORDS */
/*
.sentence {
  font-size: clamp(1.5rem, 5vw, 3rem);  Responsive font size 
    font-size: 1.6rem;  
  display: flex;
  align-items: baseline;
  flex-wrap: wrap; // Allows sentence to wrap on small screens //
}
*/

.sentence {
 
  display: flex;
  flex-wrap: wrap;
  justify-content: center; /* This centers the flex items horizontally */
  align-items: baseline;
  text-align: center;      /* Fallback for older browsers */
  width: 100%;             /* Ensure it takes full width to see the centering */
    
   /* Add this to restore and control spacing */
  gap: 0.3em; 
font-size: 2.2rem;
 line-height: 1.1; 
 
}

.rotating-container {
  display: inline-grid; /* Grid allows stacking without losing natural width */
  position: relative;
/*  margin-left: 0.3em;*/
  vertical-align: baseline;
    font-size:2.5rem;
/*    font-weight:bold;*/
    font-style: italic;
    line-height: 1.1;
}

/* 1. The Spacer: Sets the container's width to the longest word */
.spacer {
  visibility: hidden;
  height: 0;
  pointer-events: none;
  white-space: nowrap;
}

/* 2. The Wrapper: Stacks the animated words in the same spot */
.words-wrapper {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
}

.words-wrapper span {
  position: absolute;
  left: 0;
  top: 0;
  opacity: 0;
  white-space: nowrap;
  animation: fadeMove 6s infinite;
color: #f87329;
}

/* 3. The Staggered Animation */
.words-wrapper span:nth-child(1) { animation-delay: 0s; }
.words-wrapper span:nth-child(2) { animation-delay: 2s; }
.words-wrapper span:nth-child(3) { animation-delay: 4s; }

@keyframes fadeMove {
  0% { opacity: 0; transform: translateY(10px); }
  10%, 30% { opacity: 1; transform: translateY(0); }
  40% { opacity: 0; transform: translateY(-0px); }
  100% { opacity: 0; }
}


.featureWord{
/*    font-family: "Libre Franklin", sans-serif;*/
    font-weight: bold;
/*    font-size:1.6rem;*/
    font-style: italic;
}

.no-break {
  white-space: nowrap; /* Prevents text within the span from wrapping */
}
p {
  white-space: normal; /* Ensures the rest of the paragraph wraps normally */
}