/**
 * Consterapia — Advanced Animations
 * Page transitions, custom cursor, hero parallax, Lottie placeholders
 */

/* ================================================================
   PAGE TRANSITIONS (View Transitions API + CSS fallback)
   ================================================================ */

/* Native View Transitions */
@view-transition { navigation: auto; }

::view-transition-old(root) {
    animation: cstPageOut .35s ease forwards;
}
::view-transition-new(root) {
    animation: cstPageIn .35s ease forwards;
}

@keyframes cstPageOut {
    from { opacity: 1; transform: translateY(0); }
    to   { opacity: 0; transform: translateY(-18px); }
}
@keyframes cstPageIn {
    from { opacity: 0; transform: translateY(18px); }
    to   { opacity: 1; transform: translateY(0); }
}

/* CSS fallback for browsers without View Transitions */
@supports not (view-transition-name: root) {
    .cst-page-transitioning {
        animation: cstPageIn .4s ease both;
    }
}

/* ================================================================
   CUSTOM CURSOR (desktop only)
   ================================================================ */

/* Custom cursor désactivé — curseur natif du navigateur conservé */
.cst-cursor-ring,
.cst-cursor-dot {
    display: none !important;
}

/* ================================================================
   HERO PARALLAX
   ================================================================ */

.hero-slider .hero__slide {
    overflow: hidden;
}

.hero-slider .hero__bg {
    will-change: transform;
    transform: scale(1.08);
    transition: transform .1s linear;
    transform-origin: center center;
}

/* Prefers-reduced-motion: disable parallax */
@media (prefers-reduced-motion: reduce) {
    .hero-slider .hero__bg {
        transform: none !important;
        transition: none;
    }
}

/* ================================================================
   MORPHING BLOB (organic background shapes)
   ================================================================ */

.cst-blob {
    position: absolute;
    border-radius: 50%;
    filter: blur(60px);
    opacity: .18;
    pointer-events: none;
    animation: cstBlobMorph 14s ease-in-out infinite alternate;
}

.cst-blob-gold  { background: radial-gradient(circle, #e5b720, #f0d060); }
.cst-blob-brown { background: radial-gradient(circle, #8D6E63, #5D4037); }

@keyframes cstBlobMorph {
    0%   { border-radius: 60% 40% 30% 70% / 60% 30% 70% 40%; transform: scale(1) rotate(0deg); }
    25%  { border-radius: 40% 60% 70% 30% / 40% 70% 30% 60%; }
    50%  { border-radius: 50% 50% 40% 60% / 30% 60% 40% 70%; transform: scale(1.05) rotate(5deg); }
    75%  { border-radius: 70% 30% 60% 40% / 60% 40% 70% 30%; }
    100% { border-radius: 30% 70% 40% 60% / 70% 30% 60% 40%; transform: scale(0.98) rotate(-3deg); }
}

@media (prefers-reduced-motion: reduce) {
    .cst-blob { animation: none; }
}

/* ================================================================
   SCROLL REVEAL — additional variants
   ================================================================ */

[data-reveal="fade-up"]    { opacity: 0; transform: translateY(40px); }
[data-reveal="fade-down"]  { opacity: 0; transform: translateY(-40px); }
[data-reveal="fade-left"]  { opacity: 0; transform: translateX(40px); }
[data-reveal="fade-right"] { opacity: 0; transform: translateX(-40px); }
[data-reveal="zoom"]       { opacity: 0; transform: scale(.88); }
[data-reveal="flip"]       { opacity: 0; transform: perspective(600px) rotateX(25deg); }

[data-reveal].revealed {
    opacity: 1 !important;
    transform: none !important;
    transition: opacity .7s ease, transform .7s ease;
    transition-delay: var(--reveal-delay, 0s);
}

@media (prefers-reduced-motion: reduce) {
    [data-reveal], [data-reveal].revealed {
        opacity: 1 !important;
        transform: none !important;
        transition: none !important;
    }
}

/* ================================================================
   FLOATING ELEMENTS (decoration)
   ================================================================ */

.cst-float-slow  { animation: cstFloat 7s ease-in-out infinite; }
.cst-float-med   { animation: cstFloat 5s ease-in-out infinite; }
.cst-float-fast  { animation: cstFloat 3.5s ease-in-out infinite; }

@keyframes cstFloat {
    0%, 100% { transform: translateY(0) rotate(0deg); }
    50%       { transform: translateY(-14px) rotate(4deg); }
}

/* ================================================================
   SHIMMER LOADING SKELETON
   ================================================================ */

.cst-skeleton {
    background: linear-gradient(90deg, #f0e8d0 25%, #fff8e1 50%, #f0e8d0 75%);
    background-size: 200% 100%;
    animation: cstShimmer 1.4s infinite;
    border-radius: 6px;
}

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

/* ================================================================
   RIPPLE EFFECT on buttons
   ================================================================ */

.btn, .wp-block-button__link {
    position: relative;
    overflow: hidden;
}

.btn::after, .wp-block-button__link::after {
    content: '';
    position: absolute;
    width: 0;
    height: 0;
    background: rgba(255,255,255,.3);
    border-radius: 50%;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%) scale(0);
    pointer-events: none;
}

.btn.ripple-active::after,
.wp-block-button__link.ripple-active::after {
    animation: cstRipple .55s ease-out forwards;
}

@keyframes cstRipple {
    to {
        width: 300px;
        height: 300px;
        opacity: 0;
        transform: translate(-50%, -50%) scale(1);
    }
}