/* THE BASE HIDDEN STATE */
.reveal {
    opacity: 0;
    transform: translateY(2rem); /* Settles from 32px down */
    transition: opacity 0.8s cubic-bezier(0.16, 1, 0.3, 1), 
                transform 0.8s cubic-bezier(0.16, 1, 0.3, 1);
    will-change: transform, opacity;
}

/* THE ACTIVE VISIBLE STATE */
.reveal.active {
    opacity: 1;
    transform: translateY(0);
}

/* STAGGER DELAYS (For cards) */
/* The title starts slightly blurred and faint */
.pillar-card h3 {
    opacity: 0;
    filter: blur(5px);
    transform: translateX(-10px);
    transition: all 0.5s ease-out;
}

/* Snaps into focus when revealed */
.pillar-card.active h3 {
    opacity: 1;
    filter: blur(0);
    transform: translateX(0);
}

/* Stagger the cards so they don't all snap at once */
.stagger-delay-1 h3 { transition-delay: 0.1s; }
.stagger-delay-2 h3 { transition-delay: 0.2s; }
.stagger-delay-3 h3 { transition-delay: 0.3s; }

.pillar-card p {
    /* ... existing styles ... */
    
    /* 1. Set the initial state to invisible */
    opacity: 0;
    
    /* 2. Add a very gentle transition */
    transition: opacity 1s ease-out;
    
    /* 
       3. THE SECRET: Delay the text reveal 
       so it happens AFTER the header animation finishes.
    */
    transition-delay: 0.8s; 
}

/* 4. Make it visible when the card is active */
.pillar-card.active p {
    opacity: 1;
}

/* 1. INITIAL HIDDEN STATE */
#elevating .section-title-navy,
#elevating .product-card {
    opacity: 0;
    transform: translateY(2rem);
    transition: opacity 1s ease, transform 1s cubic-bezier(0.16, 1, 0.3, 1);
}

/* THE RED LINE (Hidden state) */
.product-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 50%;
    width: 0;
    height: 4px;
    border-top-left-radius: 2px;
    border-top-right-radius: 2px;
    background: var(--red);
    transform: translateX(-50%);
    transition: width 1s cubic-bezier(0.16, 1, 0.3, 1);
}

/* 2. THE TRIGGERED STATE (When JS adds .active) */
#elevating.active .section-title-navy,
#elevating.active .product-card {
    opacity: 1;
    transform: translateY(0);
}

#elevating.active .product-card::before {
    width: 100%;
}

/* STAGGERING */
#elevating.active .product-card:nth-child(1) { transition-delay: 0.2s; }
#elevating.active .product-card:nth-child(1)::before { transition-delay: 0.6s; }

#elevating.active .product-card:nth-child(2) { transition-delay: 0.4s; }
#elevating.active .product-card:nth-child(2)::before { transition-delay: 0.8s; }

/* MOTION BLUR EFFECT */
.product-slider-track.is-sliding .product-card {
    /* 
       We use a very small blur (0.125rem / 2px). 
       In medical design, too much blur looks like a mistake; 
       a little bit looks like 'speed'.
    */
    filter: blur(0.125rem);
    opacity: 0.9;
    
    /* 
       The transition here should be faster than the slide itself 
       to 'snap' back into focus.
    */
    transition: filter 0.1s ease-out, opacity 0.1s ease-out;
}

/* Base state for cards - ensures they snap back to sharp focus */
.product-card {
    filter: blur(0);
    opacity: 1;
    transition: filter 0.2s ease, transform 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}
.product-card {
    /* ... existing base styles ... */
    
    /* THE ENGINE: Ensure transitions are smooth */
    transition: 
        transform 0.4s cubic-bezier(0.16, 1, 0.3, 1), 
        box-shadow 0.4s ease, 
        border-color 0.3s ease;
    
    /* Ensure the card is the base for any absolute elements */
    position: relative;
    cursor: pointer;
}

.product-card:hover {
    /* 1. THE LIFT: Move the card up slightly (8px) */
    transform: translateY(-0.5rem);
    
    /* 2. THE DEPTH: Make the shadow deeper and softer to simulate height */
    box-shadow: 0 2rem 4rem rgba(0, 0, 0, 0.12);
    
    /* 3. THE BRAND FOCUS: Make the red top line pop */
    border-top-color: var(--red);
}

/* 4. THE ICON ACCENT (Optional): If you have icons in the card */
.product-card:hover i {
    transform: scale(1.1);
    color: var(--red);
    transition: all 0.3s ease;
}

/* 5. THE CONTENT SHIFT (Optional): A tiny bit of vertical settle for the text */
.product-card:hover h4 {
    color: var(--navy);
    transform: translateY(-0.125rem); /* 2px */
    transition: transform 0.3s ease;
}
/* FADE ANIMATION FOR THE CONTENT BOX */
/* 1. RESET: Cards are static, no transitions here */
.serve-info-col {
    display: flex;
    flex-direction: column;
    height: 100%;
    gap: 0.9375rem;
}

/* 2. PRECISION: Transition only the text elements */
#serve-header, 
#serve-desc {
    transition: opacity 0.2s ease; /* Faster duration for a 'snappy' feel */
    will-change: opacity; /* Optimizes browser performance */
}

/* 3. The state for the swap */
.text-hidden {
    opacity: 0;
}

/* 1. The Cursor for the typewriter */

/* 1. THE HIDDEN STATE (Initial) */
.glass-card, .outline-box {
    opacity: 0;
    transform: translateY(1.5rem);
    transition: opacity 0.3s ease, transform 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}

/* 2. THE VISIBLE STATE (Triggered by JS) */
/* Ensure the initial state is absolutely invisible */
#contact-cta:not(.active) .glass-card, 
#contact-cta:not(.active) .outline-box,
#contact-cta:not(.active) #typewriter-text {
    opacity: 0;
    visibility: hidden; /* Added visibility for a total blackout until scroll */
    transform: translateY(2rem);
}

#contact-cta.active .glass-card, 
#contact-cta.active .outline-box,
#contact-cta.active #typewriter-text {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}

#contact-cta.active .g-health { transition-delay: 0.2s; }
#contact-cta.active .g-mission { transition-delay: 0.35s; }
#contact-cta.active .g-quality { transition-delay: 0.55s; }

#contact-cta.active .outline-box:nth-child(1) { transition-delay: 0.65s; }
#contact-cta.active .outline-box:nth-child(2) { transition-delay: 0.75s; }
#contact-cta.active .outline-box:nth-child(3) { transition-delay: 0.9s; }

/* 4. TYPEWRITER CURSOR */

/* 1. Reset the container height to ensure enough room for the stagger */
/* 1. RESET: Remove all typewriter/cursor styles */
.cta-headline::after { display: none !important; }

/* 2. THE REVEAL BASE */
#contact-cta .reveal {
    opacity: 0;
    transform: translateY(1.5rem); /* Settles from 24px down */
    transition: opacity 0.8s ease, transform 0.8s cubic-bezier(0.16, 1, 0.3, 1);
    display: block; /* Ensures spans sit on their own lines */
}

/* 3. THE TRIGGER */
#contact-cta.active .reveal {
    opacity: 1;
    transform: translateY(0);
}

/* 4. THE RHYTHMIC STAGGER (The 'Neat' factor) */
#contact-cta.active .quote-big { transition-delay: 0.1s; }
#contact-cta.active .stagger-1 { transition-delay: 0.3s; }
#contact-cta.active .stagger-2 { transition-delay: 0.5s; }

/* Ensure the headline is bold and medical-grade */
.cta-headline {
    font-size: 5rem; /* 80px */
    font-weight: 800;
    line-height: 1;
    color: #fff;
}

/* 2. Position the Top-Right card */
.g-health { 
    width: 260px; 
    height: 160px; 
    right: 0; 
    top: 0; 
    z-index: 5;
}

/* 3. THE CENTERPIECE FIX: Mission Card */
.g-mission { 
    width: 340px; 
    height: 220px; 
    left: 50%; 
    top: 50%; 
    /* Initial state: Centered + 20px down for the reveal */
    transform: translate(-50%, -40%); 
    z-index: 10; 
    background: rgba(255, 255, 255, 0.18); /* Slightly more opaque to pop */
}

/* 4. Position the Bottom-Left card */
.g-quality { 
    width: 260px; 
    height: 160px; 
    left: 0; 
    bottom: 0; 
    z-index: 6;
}

/* 5. THE TRANSFORM REVEAL FIX */
/* We must ensure the mission card keeps its -50% horizontal center during the reveal */
#contact-cta.active .g-health,
#contact-cta.active .g-quality {
    opacity: 1;
    transform: translateY(0);
}

#contact-cta.active .g-mission {
    opacity: 1;
    /* This command restores the perfect vertical and horizontal center */
    transform: translate(-50%, -50%); 
}

.cta-text-side {
    position: relative;
    z-index: 20; /* Ensures it is ABOVE the red background stripes */
    text-align: left;
}

/* 2. THE QUOTE FIX */
.quote-mark-top {
    font-size: 5rem; /* Large and bold as per design */
    font-weight: 800;
    line-height: 1;
    display: block;
    margin-bottom: -1rem; /* Pulls the headline up closer to the quote */
    margin-left: -0.5rem; /* Slight left offset for visual balance */
    color: #fff;
}

/* 3. THE HEADLINE FIX */
.cta-headline {
    font-size: 5rem; /* 80px */
    font-weight: 800;
    line-height: 1.1;
    color: #fff;
    margin: 0;
}

.outline-box:hover {
    transform: translateY(-0.25rem);
    box-shadow: 0 1rem 2rem rgba(0, 0, 0, 0.1);
    background: rgba(255, 255, 255, 0.15);
}

/* 1. INITIAL STATE: Subtle offset, ready for action */
#apply-now .inner-content {
    opacity: 0;
    transform: translateY(1.5rem); /* 24px */
    /* 0.35s is the 'Surgical Sweet Spot' - fast but readable */
    transition: 
        opacity 0.35s ease-out, 
        transform 0.35s cubic-bezier(0.25, 1, 0.5, 1);
    will-change: transform, opacity;
}

/* 2. REVEAL TRIGGER: Snaps into place */
#apply-now.active .inner-content {
    opacity: 1;
    transform: translateY(0);
}

/* 3. OPTIONAL: The Red Slant Line Reveal */
/* We make the red line 'draw' slightly faster to lead the eye */
.red-line-slant {
    transform: scaleX(0);
    transform-origin: left;
    transition: transform 0.3s ease-out;
}

#apply-now.active .red-line-slant {
    transform: scaleX(1);
}