/* ============================================================================
 * animations-v6.css  La Toxica V6 Wave 4  Motion + Loading Layer
 * ----------------------------------------------------------------------------
 * Date:   2026-05-04
 * Wave:   V6 Wave 4 (animations, hover transitions, scroll reveal,
 *         LibroReserve skeleton, page-load fade)
 * Author: V6 design sprint, executed by Claude Code subagent
 * Cascade: Loads at priority 37, AFTER design-system-v6.css (priority 35)
 *          and the V5 page sheets, so it has the final word on motion.
 * Honors prefers-reduced-motion: every keyframe and transition is paused
 * or removed when the user has reduced motion enabled.
 * ========================================================================== */


/* 1. Cempasuchil residue remap
 * Wave 1 left 9 var(--cempasuchil) references in v5-pages-a/b that resolve
 * to marigold for visible accents (3-step grid numbers, recipe card numbers,
 * storefront and reservation hyperlink hover color/border, script accent,
 * fallback button background). The V6 directive remaps all gold accent to
 * pink, so this token alias finishes the job without surgical edits.
 * -------------------------------------------------------------------------- */
:root {
    --cempasuchil:      var(--latoxica-pink);
    --cempasuchil-soft: var(--latoxica-pink-soft);
}


/* 2. Page-load fade
 * Quick 200ms opacity ramp on the body. Subtle, no transform, no jank.
 * -------------------------------------------------------------------------- */
body {
    animation: latoxica-page-fade 0.2s ease-out;
}

@keyframes latoxica-page-fade {
    from { opacity: 0; }
    to   { opacity: 1; }
}

@media (prefers-reduced-motion: reduce) {
    body { animation: none; }
}


/* 3. Sitewide hover transitions
 * Standard 200ms ease for color, background, border, transform, opacity on
 * the interactive surfaces. Anchors are included except for buttons, which
 * already have their own transition cascade.
 * -------------------------------------------------------------------------- */
.latoxica-button,
.latoxica-pill,
.latoxica-card-dark,
.latoxica-card-cream,
.latoxica-menu-item,
.latoxica-press-card,
a:not(.latoxica-button) {
    transition: color 0.2s cubic-bezier(0.2, 0, 0.2, 1),
                background 0.2s cubic-bezier(0.2, 0, 0.2, 1),
                border-color 0.2s cubic-bezier(0.2, 0, 0.2, 1),
                transform 0.2s cubic-bezier(0.2, 0, 0.2, 1),
                opacity 0.2s cubic-bezier(0.2, 0, 0.2, 1);
}


/* 4. Card hover lift
 * Subtle 2px upward translate with a pink border on cream and dark cards.
 * -------------------------------------------------------------------------- */
.latoxica-card-cream:hover,
.latoxica-card-dark:hover {
    transform: translateY(-2px);
    border-color: var(--latoxica-pink);
}

@media (prefers-reduced-motion: reduce) {
    .latoxica-card-cream:hover,
    .latoxica-card-dark:hover {
        transform: none;
    }
}


/* 5. Scroll-reveal pattern
 * Mirrors the V4 Appendix EE .latoxica-reveal class. Other waves can mark
 * any section wrapper with the class and the IntersectionObserver in
 * animations-v6.js will toggle is-visible when the section enters view.
 * -------------------------------------------------------------------------- */
.latoxica-reveal {
    opacity: 0;
    transform: translateY(20px);
    transition: opacity 0.6s ease-out, transform 0.6s ease-out;
}

.latoxica-reveal.is-visible {
    opacity: 1;
    transform: none;
}

@media (prefers-reduced-motion: reduce) {
    .latoxica-reveal {
        opacity: 1;
        transform: none;
        transition: none;
    }
}


/* 6. Stagger variant
 * Adds a 60ms cascade between direct children inside a
 * .latoxica-reveal--stagger container (cards in a grid, list items, etc.).
 * Capped at 360ms beyond the sixth child so a long list still completes
 * within roughly half a second.
 * -------------------------------------------------------------------------- */
.latoxica-reveal--stagger > * {
    opacity: 0;
    transform: translateY(15px);
    transition: opacity 0.5s ease-out, transform 0.5s ease-out;
}

.latoxica-reveal--stagger.is-visible > *:nth-child(1) { transition-delay: 0ms;   opacity: 1; transform: none; }
.latoxica-reveal--stagger.is-visible > *:nth-child(2) { transition-delay: 60ms;  opacity: 1; transform: none; }
.latoxica-reveal--stagger.is-visible > *:nth-child(3) { transition-delay: 120ms; opacity: 1; transform: none; }
.latoxica-reveal--stagger.is-visible > *:nth-child(4) { transition-delay: 180ms; opacity: 1; transform: none; }
.latoxica-reveal--stagger.is-visible > *:nth-child(5) { transition-delay: 240ms; opacity: 1; transform: none; }
.latoxica-reveal--stagger.is-visible > *:nth-child(6) { transition-delay: 300ms; opacity: 1; transform: none; }
.latoxica-reveal--stagger.is-visible > *:nth-child(n+7) { transition-delay: 360ms; opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
    .latoxica-reveal--stagger > * {
        opacity: 1;
        transform: none;
        transition: none;
    }
}


/* 7. Hero subhead and CTA fade-up
 * Adds a 200ms delayed fade-up to the supporting hero copy and CTAs once
 * the hero section receives is-visible.
 * -------------------------------------------------------------------------- */
.latoxica-hero-a__sub,
.latoxica-hero-b__manifesto,
.latoxica-hero-c__sub,
.latoxica-hero-d__sub,
.latoxica-hero-a__cta,
.latoxica-hero-b__cta,
.latoxica-hero-c__cta,
.latoxica-hero-d__cta {
    opacity: 0;
    transform: translateY(12px);
    transition: opacity 0.6s ease-out 0.2s, transform 0.6s ease-out 0.2s;
}

.latoxica-reveal.is-visible .latoxica-hero-a__sub,
.latoxica-reveal.is-visible .latoxica-hero-b__manifesto,
.latoxica-reveal.is-visible .latoxica-hero-c__sub,
.latoxica-reveal.is-visible .latoxica-hero-d__sub,
.latoxica-reveal.is-visible .latoxica-hero-a__cta,
.latoxica-reveal.is-visible .latoxica-hero-b__cta,
.latoxica-reveal.is-visible .latoxica-hero-c__cta,
.latoxica-reveal.is-visible .latoxica-hero-d__cta {
    opacity: 1;
    transform: none;
}

@media (prefers-reduced-motion: reduce) {
    .latoxica-hero-a__sub,
    .latoxica-hero-b__manifesto,
    .latoxica-hero-c__sub,
    .latoxica-hero-d__sub,
    .latoxica-hero-a__cta,
    .latoxica-hero-b__cta,
    .latoxica-hero-c__cta,
    .latoxica-hero-d__cta {
        opacity: 1;
        transform: none;
        transition: none;
    }
}


/* 8. Hero photo subtle ken-burns
 * 12s slow alternating scale on hero A photo and hero B media image.
 * Pauses entirely under prefers-reduced-motion.
 * -------------------------------------------------------------------------- */
.latoxica-hero-a__photo,
.latoxica-hero-b__media img {
    animation: latoxica-ken-burns 12s ease-in-out infinite alternate;
    transform-origin: center center;
}

@keyframes latoxica-ken-burns {
    from { transform: scale(1.0); }
    to   { transform: scale(1.05); }
}

@media (prefers-reduced-motion: reduce) {
    .latoxica-hero-a__photo,
    .latoxica-hero-b__media img {
        animation: none;
    }
}


/* 9. LibroReserve skeleton loader
 * Cream shimmer placeholder rendered behind the iframe until the iframe's
 * load event fires. animations-v6.js inserts the skeleton element and adds
 * .latoxica-widget-loaded to the parent on iframe load.
 * -------------------------------------------------------------------------- */
.latoxica-widget-skeleton {
    background: linear-gradient(90deg,
        var(--creme-tortilla) 0%,
        rgba(242, 234, 214, 0.6) 50%,
        var(--creme-tortilla) 100%);
    background-size: 200% 100%;
    animation: latoxica-shimmer 1.6s ease-in-out infinite;
    height: 540px;
    border-radius: 0;
    position: relative;
}

.latoxica-widget-skeleton::after {
    content: 'Chargement de la réservation';
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    font-family: var(--latoxica-font-mono);
    font-size: 0.6875rem;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--noir-azabache);
    opacity: 0.6;
}

.latoxica-widget-loaded .latoxica-widget-skeleton {
    display: none;
}

@keyframes latoxica-shimmer {
    0%   { background-position: 200% 0; }
    100% { background-position: -200% 0; }
}

@media (prefers-reduced-motion: reduce) {
    .latoxica-widget-skeleton {
        animation: none;
        background: var(--creme-tortilla);
    }
}


/* End of animations-v6.css                                                   */