/* animate.css */

:root {
    /* DURATIONS - Primarily for Baby Willow SVG animation now */
    --d-svg-draw: 2.0s; 
    --d-svg-fill: 0.6s; 

    /* TIMING CONTROL */
    --timeline-start: 0.1s; /* Base start time */

    /* SPECIFIC OFFSETS - For Baby Willow SVG animation on Index Page */
    --offset-header-to-svgdraw-start: 0.1s; 
    --offset-svgdraw-to-svgfill-start-relative-to-draw-end: -0.4s; 
    
    /* --- CALCULATED DELAYS for Baby Willow SVG Animation on Index Page --- */
    --delay-svg-draw: calc(var(--timeline-start) + var(--offset-header-to-svgdraw-start));
    --end-svg-draw: calc(var(--delay-svg-draw) + var(--d-svg-draw));
    --delay-svg-fill: calc(var(--end-svg-draw) + var(--offset-svgdraw-to-svgfill-start-relative-to-draw-end));
}

/* --- Element Load-In Animations --- */

/* Animation for Baby Willow SVG - ONLY ON INDEX PAGE (body without .message-page-custom-animations) */
body:not(.message-page-custom-animations) .baby-name-animated { 
    animation: drawText var(--d-svg-draw) ease-in-out var(--delay-svg-draw) both,
               fillText var(--d-svg-fill) ease-in var(--delay-svg-fill) both;
}

/* Static display for Baby Willow SVG on other pages (message.html, babysize.html) */
.message-page-custom-animations .baby-name-animated { 
    animation: none !important; 
    fill: #5a4d7b !important; 
    stroke: #5a4d7b !important; 
    stroke-dasharray: none !important; 
    stroke-dashoffset: 0 !important;   
    opacity: 1 !important; 
    transform: none !important; 
}

/* --- Page Header Submessage Fade-in Animation --- */
/* This applies a fade-in effect to the submessage in the header */
.header-submessage {
    animation: fadeInHeader 0.7s ease-out 0.15s both; /* Using similar animation to old .page-header, adjusted delay */
}

/* --- Main Content Fade-in Animation --- */
/* This applies a fade-in effect to the main content container on page load */
.main-content-area {
    animation: contentFadeIn 0.8s ease-out 0.2s both;
}


/* --- Countdown Number Change Animation --- */
#countdown span.number-changing {
    animation: subtleNumberUpdate 0.3s ease-out;
}


/* --- Keyframes Definitions --- */
@keyframes contentFadeIn {
    from {
        opacity: 0;
        transform: translateY(15px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}
@keyframes fadeInHeader { /* Reused for submessage */
    from { opacity: 0; transform: translateY(-10px); }
    to { opacity: 1; transform: translateY(0); }
}
@keyframes scaleUpContent {
    from { opacity: 0; transform: scale(0.95); }
    to { opacity: 1; transform: scale(1); }
}
@keyframes fadeInUpElement { 
    from { opacity: 0; transform: translateY(25px); }
    to { opacity: 1; transform: translateY(0); }
}
@keyframes fadeInFooter {
    from { opacity: 0; transform: translateY(20px); }
    to { opacity: 1; transform: translateY(0); }
}
@keyframes drawText { /* For Baby Willow on Index Page */
    to { stroke-dashoffset: 0; }
}
@keyframes fillText { /* For Baby Willow on Index Page */
    from { fill: transparent; }
    to { fill: #5a4d7b; }
}
@keyframes subtleNumberUpdate { 
    0% { opacity: 0.6; transform: translateY(3px); }
    100% { opacity: 1; transform: translateY(0); }
}

/* --- Responsive Animation Adjustments --- */
@media (max-width: 768px) { }
@media (max-width: 480px) { }

/* --- Conditional Animation Overrides (e.g., ?animate=false) --- */
/* This block disables animations for specific elements if ?animate=false is NOT controlling them directly. */
/* .header-submessage and .main-content-area are NOT listed here, so their animations always play. */
.no-page-load-animations .site-navigation, 
.no-page-load-animations #countdown-section,
.no-page-load-animations #countdown div,
.no-page-load-animations #registry-section,
.no-page-load-animations .button, 
.no-page-load-animations .page-footer,
.no-page-load-animations .page-header { /* Added .page-header here to ensure it doesn't pick up other animations if animate=false */
    animation: none !important; 
    opacity: 1 !important; 
    transform: none !important; /* Applied transform none to prevent unwanted shifts */
}

/* Specific handling for Baby Willow SVG when ?animate=false is used (affects index.html) */
/* This rule ONLY targets the SVG logo animation. */
.no-page-load-animations .baby-name-animated {
    animation: none !important;
    fill: #5a4d7b !important; 
    stroke: #5a4d7b !important; 
    stroke-dasharray: none !important;
    stroke-dashoffset: 0 !important;
    opacity: 1 !important;
    transform: none !important; /* This is specific to the SVG and can remain */
}