/**
 * Maison Del Forno — High-End & Lightweight Animations Stylesheet
 *
 * This file is automatically enqueued on all frontend pages.
 * Handles transitions, scroll reveals, Ken Burns effects, card hovers, and sticky header state.
 */

/* ── Scroll Reveal Animations ──────────────────────────────────────────── */

/* Elements prepared for reveal are hidden initially */
.reveal-item {
    opacity: 0;
    transform: translateY(20px);
    transition: opacity 0.8s cubic-bezier(0.215, 0.61, 0.355, 1),
        transform 0.8s cubic-bezier(0.215, 0.61, 0.355, 1);
    will-change: opacity, transform;
}

/* Standalone media-text gets a slightly larger reveal travel */
.wp-block-media-text.reveal-item {
    transform: translateY(30px);
}

/* Active reveal state */
.reveal-item.reveal-active {
    opacity: 1;
    transform: translateY(0);
}

/* Reduce movement on mobile for accessibility and smoothness */
@media (prefers-reduced-motion: reduce) {
    .reveal-item {
        opacity: 1 !important;
        transform: none !important;
        transition: none !important;
    }
}

@media (max-width: 600px) {
    .reveal-item {
        transform: translateY(10px);
        /* Lower offset on small screens to prevent clipping */
    }

    .wp-block-media-text.reveal-item {
        transform: translateY(15px);
    }
}

/* ── Premium Soft Staggered Fade Animation ──────────────────────────────── */

@keyframes softLuxuryReveal {
    from {
        opacity: 0;
        transform: translateY(15px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Base state for all text content elements inside the hero slider */
.hero-slider__text-inner>* {
    opacity: 1;
    transform: translateY(0);
    will-change: opacity, transform;
}

/* Active state for text content elements (entrance animation) */
.hero-slider__text.is-active .hero-slider__text-inner>* {
    animation: softLuxuryReveal 1.4s cubic-bezier(0.16, 1, 0.3, 1) both;
}

/* Stagger delay for entrance: text starts appearing slightly after the image (starts at 0.5s) */
.hero-slider__text.is-active .hero-slider__text-inner>*:nth-child(1) {
    animation-delay: 0.5s;
}

.hero-slider__text.is-active .hero-slider__text-inner>*:nth-child(2) {
    animation-delay: 0.75s;
}

.hero-slider__text.is-active .hero-slider__text-inner>*:nth-child(3) {
    animation-delay: 1.0s;
}

/* ── Premium Card Hover Effects ────────────────────────────────────────── */

/* Smooth, high-end hover for custom card */
.delforno-card.has-link {
    transition: transform 0.4s cubic-bezier(0.25, 1, 0.5, 1),
        box-shadow 0.4s cubic-bezier(0.25, 1, 0.5, 1),
        opacity 0.4s cubic-bezier(0.25, 1, 0.5, 1) !important;
}

.delforno-card.has-link:hover {
    opacity: 1 !important;
    /* Overwrite standard opacity fade to preserve visibility */
    transform: translateY(-6px);
    box-shadow: 0 20px 40px rgba(139, 21, 37, 0.04), 0 1px 3px rgba(139, 21, 37, 0.02);
}

/* Elegant slow image zoom inside card */
.delforno-card.has-link .delforno-card__image-wrapper img {
    transition: transform 0.6s cubic-bezier(0.25, 1, 0.5, 1) !important;
}

.delforno-card.has-link:hover .delforno-card__image-wrapper img {
    transform: scale(1.05) !important;
}

/* Content group lift inside the card */
.delforno-card.has-link .delforno-card__content {
    transition: transform 0.4s cubic-bezier(0.25, 1, 0.5, 1);
}

.delforno-card.has-link:hover .delforno-card__content {
    transform: translateY(-2px);
}

/* ── Header Sticky Shrinking ───────────────────────────────────────────── */

/* Animate header padding and backdrop filters when scrolled */
/* Animate header shadow when scrolled */
.site-header {
    transition: box-shadow 0.4s cubic-bezier(0.25, 1, 0.5, 1) !important;
}

.site-header.header-scrolled {
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.15);
}

/* Adjust sticky top position offsets under WP admin bar when scrolled */
.admin-bar .site-header.header-scrolled {
    top: 32px;
}

@media (max-width: 782px) {
    .admin-bar .site-header.header-scrolled {
        top: 0;
    }
}

/* ── Premium Organic Logo Flower Animations ────────────────────────────── */

/* Base properties for the flower paths and SVGs to ensure perfect rotation origin */
svg.footer-ornement.logo-flower {
    transform-origin: center;
    transform-box: fill-box;
    will-change: transform;
    backface-visibility: hidden;
    transition: transform 0.6s cubic-bezier(0.34, 1.56, 0.64, 1);
}

/* Soft, elegant entrance rotation & scale on page load */
@keyframes flowerEntrance {
    0% {
        opacity: 0;
        transform: scale(0.3) rotate(-120deg);
    }

    100% {
        opacity: 1;
        transform: scale(1) rotate(0deg);
    }
}

/* Slow, continuous 360deg rotation */
@keyframes rotateInfinite {
    from {
        transform: rotate(0deg);
    }

    to {
        transform: rotate(360deg);
    }
}

/* Footer flower: invisible par défaut, animation déclenchée par l'IntersectionObserver */
svg.footer-ornement.logo-flower {
    opacity: 0;
}

/* Apply premium dynamic styles and animations when visible */
svg.footer-ornement.logo-flower.flower-visible {
    animation: flowerEntrance 1.6s cubic-bezier(0.34, 1.3, 0.64, 1) forwards;
}

/* Remove animation and keep visible once entrance is complete */
svg.footer-ornement.logo-flower.flower-ready {
    animation: none;
    opacity: 1;
}

/* Continuous rotation of the SVG path inside the flower when ready */
svg.footer-ornement.logo-flower.flower-ready path {
    transform-origin: center;
    transform-box: fill-box;
    animation: rotateInfinite 40s linear infinite;
}

/* Premium Hover Interaction: apply hover transform (scale only, keeping rotation) */
svg.footer-ornement.logo-flower:hover {
    transform: scale(1.15);
    transition: transform 0.5s cubic-bezier(0.34, 1.56, 0.64, 1);
}

/* Accessibility: respect user preferences for reduced motion */
@media (prefers-reduced-motion: reduce) {
    svg.footer-ornement.logo-flower {
        animation: none !important;
        transition: none !important;
        transform: none !important;
    }

    svg.footer-ornement.logo-flower path {
        animation: none !important;
        transform: none !important;
    }

    svg.footer-ornement.logo-flower:hover {
        transform: none !important;
    }
}