/* ============================================
   Intro animation — Logo bois flotté
   Mobile-first, sans visibility:hidden agressif
   ============================================ */

#intro-overlay {
    position: fixed;
    inset: 0;
    z-index: 99999;
    background: linear-gradient(180deg, #f5e6d3 0%, #e8d5b8 30%, #d4c4a8 60%, #c4b898 100%);
    display: flex;
    align-items: center;
    justify-content: center;
    animation: overlayFadeOut 0.5s ease-in 2.6s forwards;
    pointer-events: all;
}

#intro-overlay.hidden {
    display: none;
}

#intro-logo-wrap {
    text-align: center;
    animation: logoScaleIn 0.7s cubic-bezier(0.34, 1.56, 0.64, 1) 0.15s forwards;
    opacity: 0;
    transform: scale(0.7);
    padding: 20px;
}

#intro-logo-wrap img {
    max-width: 88vw;
    max-height: 42vh;
    width: auto;
    height: auto;
    filter: drop-shadow(0 6px 20px rgba(0,0,0,0.22));
}

#intro-tagline {
    margin-top: 14px;
    font-family: 'Georgia', 'DejaVu Serif', serif;
    font-size: 0.95rem;
    color: #6b5d4a;
    opacity: 0;
    animation: taglineFadeIn 0.5s ease-out 0.8s forwards;
    letter-spacing: 0.03em;
    padding: 0 16px;
}

@keyframes logoScaleIn {
    0%   { opacity: 0; transform: scale(0.7); }
    55%  { opacity: 1; transform: scale(1.02); }
    100% { opacity: 1; transform: scale(1); }
}

@keyframes taglineFadeIn {
    0%   { opacity: 0; transform: translateY(6px); }
    100% { opacity: 0.75; transform: translateY(0); }
}

@keyframes overlayFadeOut {
    0%   { opacity: 1; }
    99%  { opacity: 0; }
    100% { opacity: 0; pointer-events: none; }
}

/* Sur tablette et desktop, image plus grande */
@media (min-width: 768px) {
    #intro-logo-wrap img {
        max-width: 60vw;
        max-height: 50vh;
    }
    #intro-tagline {
        font-size: 1.05rem;
        margin-top: 18px;
    }
}

/* Reduced motion */
@media (prefers-reduced-motion: reduce) {
    #intro-overlay { display: none !important; }
}