/* ==========================================================================
   Tuchan Inmobiliaria - 2026 Cinematic Motion Narrative Layer
   High-performance, hardware-composited animations (transform & opacity only)
   Preserves all design colors, typography, and core HTML structure.
   Compatible with Home, Propiedades, Nosotros, Servicios.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. Hero Entrance: Cinematic Lens Zoom & Stagger
   -------------------------------------------------------------------------- */
.hero-lens-bg {
    transform: scale(1.12);
    opacity: 0;
    animation: heroLensZoom 2.2s cubic-bezier(0.16, 1, 0.3, 1) forwards;
    will-change: transform, opacity;
}

@keyframes heroLensZoom {
    0% {
        transform: scale(1.12);
        opacity: 0;
    }
    30% {
        opacity: 1;
    }
    100% {
        transform: scale(1);
        opacity: 1;
    }
}

.hero-stagger-item {
    opacity: 0;
    transform: translateY(24px);
    animation: heroContentReveal 1s cubic-bezier(0.2, 0.8, 0.2, 1) forwards;
    will-change: transform, opacity;
}

.hero-stagger-item:nth-child(1) {
    animation-delay: 0.2s;
}

.hero-stagger-item:nth-child(2) {
    animation-delay: 0.38s;
}

.hero-stagger-item:nth-child(3) {
    animation-delay: 0.55s;
}

.hero-stagger-item:nth-child(4) {
    animation-delay: 0.72s;
}

@keyframes heroContentReveal {
    0% {
        opacity: 0;
        transform: translateY(24px);
    }
    100% {
        opacity: 1;
        transform: translateY(0);
    }
}

/* --------------------------------------------------------------------------
   2. Kinetic Typography: Subtle Luminous Cadence
   -------------------------------------------------------------------------- */
.kinetic-shimmer {
    display: inline-block;
    position: relative;
    background: linear-gradient(105deg, #ffffff 0%, #ffbe00 45%, #ffffff 70%);
    background-size: 200% auto;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    animation: kineticShimmerFlow 6s ease-in-out infinite;
    will-change: background-position;
}

.kinetic-shimmer-dark {
    display: inline-block;
    position: relative;
    background: linear-gradient(105deg, #1A2A3A 0%, #CD2600 40%, #ffbe00 65%, #1A2A3A 90%);
    background-size: 200% auto;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    animation: kineticShimmerFlow 6s ease-in-out infinite;
    will-change: background-position;
}

@keyframes kineticShimmerFlow {
    0%, 15% {
        background-position: 0% center;
    }
    45%, 65% {
        background-position: 100% center;
    }
    95%, 100% {
        background-position: 0% center;
    }
}

.kinetic-chante {
    display: inline-block;
    transition: transform 0.35s cubic-bezier(0.34, 1.56, 0.64, 1);
    will-change: transform;
}

.kinetic-chante:hover {
    transform: scale(1.06) rotate(-1deg);
}

/* --------------------------------------------------------------------------
   3. Scroll-Triggered Reveals (IntersectionObserver Classes)
   -------------------------------------------------------------------------- */
[data-motion="reveal"] {
    opacity: 0;
    transform: translateY(30px);
    transition: opacity 0.85s cubic-bezier(0.16, 1, 0.3, 1),
                transform 0.85s cubic-bezier(0.16, 1, 0.3, 1);
    will-change: transform, opacity;
}

[data-motion="reveal"].is-revealed {
    opacity: 1;
    transform: translateY(0);
}

/* Staggered Child Containers */
[data-motion-stagger] > * {
    opacity: 0;
    transform: translateY(28px);
    transition: opacity 0.8s cubic-bezier(0.16, 1, 0.3, 1),
                transform 0.8s cubic-bezier(0.16, 1, 0.3, 1);
    will-change: transform, opacity;
}

[data-motion-stagger].is-revealed > *:nth-child(1) {
    opacity: 1;
    transform: translateY(0);
    transition-delay: 0.05s;
}

[data-motion-stagger].is-revealed > *:nth-child(2) {
    opacity: 1;
    transform: translateY(0);
    transition-delay: 0.14s;
}

[data-motion-stagger].is-revealed > *:nth-child(3) {
    opacity: 1;
    transform: translateY(0);
    transition-delay: 0.23s;
}

[data-motion-stagger].is-revealed > *:nth-child(4) {
    opacity: 1;
    transform: translateY(0);
    transition-delay: 0.32s;
}

[data-motion-stagger].is-revealed > *:nth-child(5) {
    opacity: 1;
    transform: translateY(0);
    transition-delay: 0.41s;
}

[data-motion-stagger].is-revealed > *:nth-child(6) {
    opacity: 1;
    transform: translateY(0);
    transition-delay: 0.50s;
}

[data-motion-stagger].is-revealed > *:nth-child(7) {
    opacity: 1;
    transform: translateY(0);
    transition-delay: 0.59s;
}

[data-motion-stagger].is-revealed > *:nth-child(8) {
    opacity: 1;
    transform: translateY(0);
    transition-delay: 0.68s;
}

/* Search bar / filter entrance */
.search-bar-motion {
    opacity: 0;
    transform: translateY(20px);
    animation: searchBarReveal 0.9s cubic-bezier(0.16, 1, 0.3, 1) 0.7s forwards;
    will-change: transform, opacity;
}

@keyframes searchBarReveal {
    0% {
        opacity: 0;
        transform: translateY(20px);
    }
    100% {
        opacity: 1;
        transform: translateY(0);
    }
}

/* --------------------------------------------------------------------------
   4. Smooth Parallax: Limited to Featured Property Image Layer
   -------------------------------------------------------------------------- */
.parallax-img-wrap {
    overflow: hidden;
}

.parallax-img-inner {
    transform: translateY(0) scale(1.08);
    transition: transform 0.15s cubic-bezier(0.25, 0.46, 0.45, 0.94);
    will-change: transform;
}

/* Subtle Floating Accent Layer */
.floating-accent-badge {
    animation: floatingBadge 4.5s ease-in-out infinite alternate;
    will-change: transform;
}

@keyframes floatingBadge {
    0% {
        transform: translateY(0px) rotate(0deg);
    }
    100% {
        transform: translateY(-8px) rotate(2deg);
    }
}

/* --------------------------------------------------------------------------
   5. UI Micro-interactions (Strictly <= 400ms)
   -------------------------------------------------------------------------- */
.property-card-shadow,
.card-hover {
    transition: transform 0.35s cubic-bezier(0.2, 0.8, 0.2, 1),
                box-shadow 0.35s cubic-bezier(0.2, 0.8, 0.2, 1) !important;
}

.property-card-shadow:hover,
.card-hover:hover {
    transform: translateY(-8px) !important;
    box-shadow: 0 20px 30px -10px rgba(26, 42, 58, 0.16) !important;
}

.btn-tuchan {
    transition: transform 0.25s cubic-bezier(0.2, 0.8, 0.2, 1),
                background-color 0.25s ease,
                box-shadow 0.25s ease;
}

.btn-tuchan:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 16px -4px rgba(205, 38, 0, 0.25);
}

.btn-tuchan-amarillo:hover {
    box-shadow: 0 8px 16px -4px rgba(255, 190, 0, 0.35);
}

.btn-tuchan:active {
    transform: scale(0.97) translateY(0);
}

/* Form input focus micro-lift */
input:focus,
select:focus {
    transform: translateY(-1px);
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}

/* Bento stat cards hover micro-lift */
.bento-stat-card {
    transition: transform 0.35s cubic-bezier(0.2, 0.8, 0.2, 1),
                box-shadow 0.35s cubic-bezier(0.2, 0.8, 0.2, 1);
}

.bento-stat-card:hover {
    transform: translateY(-6px);
    box-shadow: 0 16px 25px -8px rgba(26, 42, 58, 0.1);
}

/* --------------------------------------------------------------------------
   6. Accessibility: Reduced Motion Support
   -------------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
    .hero-lens-bg,
    .hero-stagger-item,
    [data-motion="reveal"],
    [data-motion-stagger] > *,
    .search-bar-motion,
    .floating-accent-badge,
    .kinetic-shimmer,
    .kinetic-shimmer-dark {
        animation: none !important;
        transition: none !important;
        transform: none !important;
        opacity: 1 !important;
    }
}