/**
 * PREMIUM ANIMATIONS CSS
 * Elegant, minimal animations for real estate website
 * Effects: fade-in, fade-up, stagger, subtle scale
 */

/* ==========================================================================
   CSS CUSTOM PROPERTIES FOR ANIMATIONS
   ========================================================================== */
:root {
    /* Timing */
    --anim-duration: 0.8s;
    --anim-duration-fast: 0.6s;
    --anim-duration-slow: 1s;
    --anim-stagger: 0.12s;

    /* Easing - Smooth, premium feel */
    --anim-ease: cubic-bezier(0.25, 0.1, 0.25, 1);
    --anim-ease-out: cubic-bezier(0.33, 1, 0.68, 1);
    --anim-ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);

    /* Distances */
    --anim-distance: 40px;
    --anim-distance-sm: 25px;
}

/* ==========================================================================
   BASE ANIMATION STATES
   Elements start hidden, then animate in when .is-visible is added
   ========================================================================== */

/* Fade In */
.anim-fade-in {
    opacity: 0;
    transition: opacity var(--anim-duration) var(--anim-ease);
}

.anim-fade-in.is-visible {
    opacity: 1;
}

/* Fade Up */
.anim-fade-up {
    opacity: 0;
    transform: translateY(var(--anim-distance));
    transition:
        opacity var(--anim-duration) var(--anim-ease-out),
        transform var(--anim-duration) var(--anim-ease-out);
}

.anim-fade-up.is-visible {
    opacity: 1;
    transform: translateY(0);
}

/* Fade Up Small - for text elements */
.anim-fade-up-sm {
    opacity: 0;
    transform: translateY(var(--anim-distance-sm));
    transition:
        opacity var(--anim-duration-fast) var(--anim-ease-out),
        transform var(--anim-duration-fast) var(--anim-ease-out);
}

.anim-fade-up-sm.is-visible {
    opacity: 1;
    transform: translateY(0);
}

/* Scale In - subtle scale for hero */
.anim-scale-in {
    opacity: 0;
    transform: scale(0.98);
    transition:
        opacity var(--anim-duration-slow) var(--anim-ease),
        transform var(--anim-duration-slow) var(--anim-ease);
}

.anim-scale-in.is-visible {
    opacity: 1;
    transform: scale(1);
}

/* ==========================================================================
   STAGGER ANIMATIONS FOR GRID ITEMS
   Each child appears with slight delay
   ========================================================================== */
.anim-stagger > * {
    opacity: 0;
    transform: translateY(var(--anim-distance-sm));
    transition:
        opacity var(--anim-duration-fast) var(--anim-ease-out),
        transform var(--anim-duration-fast) var(--anim-ease-out);
}

.anim-stagger.is-visible > *:nth-child(1) { transition-delay: calc(var(--anim-stagger) * 0); }
.anim-stagger.is-visible > *:nth-child(2) { transition-delay: calc(var(--anim-stagger) * 1); }
.anim-stagger.is-visible > *:nth-child(3) { transition-delay: calc(var(--anim-stagger) * 2); }
.anim-stagger.is-visible > *:nth-child(4) { transition-delay: calc(var(--anim-stagger) * 3); }
.anim-stagger.is-visible > *:nth-child(5) { transition-delay: calc(var(--anim-stagger) * 4); }
.anim-stagger.is-visible > *:nth-child(6) { transition-delay: calc(var(--anim-stagger) * 5); }
.anim-stagger.is-visible > *:nth-child(7) { transition-delay: calc(var(--anim-stagger) * 6); }
.anim-stagger.is-visible > *:nth-child(8) { transition-delay: calc(var(--anim-stagger) * 7); }

.anim-stagger.is-visible > * {
    opacity: 1;
    transform: translateY(0);
}

/* ==========================================================================
   HERO BANNER ANIMATION
   Immediate load animation with subtle scale
   ========================================================================== */
.hero-slider,
.hero-banner {
    opacity: 0;
    transform: scale(1.02);
    animation: heroFadeIn 1.2s var(--anim-ease) forwards;
}

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

/* Hero content elements stagger */
.hero-content .hero-subtitle {
    opacity: 0;
    transform: translateY(20px);
    animation: heroContentIn 0.8s var(--anim-ease-out) 0.3s forwards;
}

.hero-content .hero-title {
    opacity: 0;
    transform: translateY(25px);
    animation: heroContentIn 0.8s var(--anim-ease-out) 0.45s forwards;
}

.hero-content .hero-description {
    opacity: 0;
    transform: translateY(20px);
    animation: heroContentIn 0.8s var(--anim-ease-out) 0.6s forwards;
}

.hero-content .hero-buttons {
    opacity: 0;
    transform: translateY(20px);
    animation: heroContentIn 0.8s var(--anim-ease-out) 0.75s forwards;
}

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

/* ==========================================================================
   SECTION ANIMATIONS
   Applied to each major section on scroll
   ========================================================================== */

/* Section headers */
.section-subtitle {
    opacity: 0;
    transform: translateY(15px);
    transition:
        opacity var(--anim-duration-fast) var(--anim-ease-out),
        transform var(--anim-duration-fast) var(--anim-ease-out);
}

.section-title {
    opacity: 0;
    transform: translateY(20px);
    transition:
        opacity var(--anim-duration) var(--anim-ease-out),
        transform var(--anim-duration) var(--anim-ease-out);
    transition-delay: 0.1s;
}

.is-visible .section-subtitle,
.section-subtitle.is-visible {
    opacity: 1;
    transform: translateY(0);
}

.is-visible .section-title,
.section-title.is-visible {
    opacity: 1;
    transform: translateY(0);
}

/* ==========================================================================
   ABOUT SECTION ANIMATIONS
   ========================================================================== */
.about-header-left {
    opacity: 0;
    transform: translateY(var(--anim-distance-sm));
    transition:
        opacity var(--anim-duration) var(--anim-ease-out),
        transform var(--anim-duration) var(--anim-ease-out);
}

.about-header-right {
    opacity: 0;
    transform: translateY(var(--anim-distance-sm));
    transition:
        opacity var(--anim-duration) var(--anim-ease-out),
        transform var(--anim-duration) var(--anim-ease-out);
    transition-delay: 0.15s;
}

.about-top.is-visible .about-header-left,
.about-top.is-visible .about-header-right {
    opacity: 1;
    transform: translateY(0);
}

/* Stats stagger */
.about-stat {
    opacity: 0;
    transform: translateY(20px);
    transition:
        opacity var(--anim-duration-fast) var(--anim-ease-out),
        transform var(--anim-duration-fast) var(--anim-ease-out);
}

.about-top.is-visible .about-stat:nth-child(1) {
    transition-delay: 0.2s;
}

.about-top.is-visible .about-stat:nth-child(2) {
    transition-delay: 0.32s;
}

.about-top.is-visible .about-stat {
    opacity: 1;
    transform: translateY(0);
}

/* About bottom - image and missions */
.about-image {
    opacity: 0;
    transform: translateY(var(--anim-distance));
    transition:
        opacity var(--anim-duration-slow) var(--anim-ease-out),
        transform var(--anim-duration-slow) var(--anim-ease-out);
}

.about-missions {
    opacity: 0;
    transform: translateY(var(--anim-distance-sm));
    transition:
        opacity var(--anim-duration) var(--anim-ease-out),
        transform var(--anim-duration) var(--anim-ease-out);
    transition-delay: 0.2s;
}

.about-bottom.is-visible .about-image,
.about-bottom.is-visible .about-missions {
    opacity: 1;
    transform: translateY(0);
}

/* Mission blocks stagger */
.mission-block {
    opacity: 0;
    transform: translateY(15px);
    transition:
        opacity var(--anim-duration-fast) var(--anim-ease-out),
        transform var(--anim-duration-fast) var(--anim-ease-out);
}

.about-bottom.is-visible .mission-block:nth-child(1) {
    transition-delay: 0.3s;
}

.about-bottom.is-visible .mission-block:nth-child(2) {
    transition-delay: 0.42s;
}

.about-bottom.is-visible .mission-block {
    opacity: 1;
    transform: translateY(0);
}

/* ==========================================================================
   PROJECT CARDS - Stagger & Hover
   ========================================================================== */
.projects-grid .project-card {
    opacity: 0;
    transform: translateY(var(--anim-distance-sm));
    transition:
        opacity var(--anim-duration-fast) var(--anim-ease-out),
        transform var(--anim-duration-fast) var(--anim-ease-out);
}

.projects-grid.is-visible .project-card:nth-child(1) { transition-delay: 0s; }
.projects-grid.is-visible .project-card:nth-child(2) { transition-delay: 0.12s; }
.projects-grid.is-visible .project-card:nth-child(3) { transition-delay: 0.24s; }
.projects-grid.is-visible .project-card:nth-child(4) { transition-delay: 0.36s; }
.projects-grid.is-visible .project-card:nth-child(5) { transition-delay: 0.48s; }
.projects-grid.is-visible .project-card:nth-child(6) { transition-delay: 0.6s; }

.projects-grid.is-visible .project-card {
    opacity: 1;
    transform: translateY(0);
}

/* Project card hover - subtle zoom */
.project-card-image img {
    transition: transform 0.7s var(--anim-ease);
}

.project-card:hover .project-card-image img {
    transform: scale(1.04);
}

/* ==========================================================================
   AWARDS SECTION
   ========================================================================== */
.awards-header {
    opacity: 0;
    transform: translateY(var(--anim-distance-sm));
    transition:
        opacity var(--anim-duration) var(--anim-ease-out),
        transform var(--anim-duration) var(--anim-ease-out);
}

.home-awards-section.is-visible .awards-header {
    opacity: 1;
    transform: translateY(0);
}

.award-item {
    opacity: 0;
    transform: translateY(20px);
    transition:
        opacity var(--anim-duration-fast) var(--anim-ease-out),
        transform var(--anim-duration-fast) var(--anim-ease-out);
}

.awards-carousel.is-visible .award-item,
.awards-grid.is-visible .award-item {
    opacity: 1;
    transform: translateY(0);
}

/* ==========================================================================
   VIDEO SECTION
   ========================================================================== */
.video-content {
    opacity: 0;
    transform: translateY(var(--anim-distance-sm));
    transition:
        opacity var(--anim-duration) var(--anim-ease-out),
        transform var(--anim-duration) var(--anim-ease-out);
}

.video-media {
    opacity: 0;
    transition: opacity var(--anim-duration-slow) var(--anim-ease);
    transition-delay: 0.2s;
}

.home-video-section.is-visible .video-content,
.home-video-section.is-visible .video-media {
    opacity: 1;
    transform: translateY(0);
}

/* ==========================================================================
   NEWS SECTION
   ========================================================================== */
.news-header {
    opacity: 0;
    transform: translateY(var(--anim-distance-sm));
    transition:
        opacity var(--anim-duration) var(--anim-ease-out),
        transform var(--anim-duration) var(--anim-ease-out);
}

.home-news-section.is-visible .news-header {
    opacity: 1;
    transform: translateY(0);
}

.news-grid .news-card {
    opacity: 0;
    transform: translateY(var(--anim-distance-sm));
    transition:
        opacity var(--anim-duration-fast) var(--anim-ease-out),
        transform var(--anim-duration-fast) var(--anim-ease-out);
}

.news-grid.is-visible .news-card:nth-child(1) { transition-delay: 0.1s; }
.news-grid.is-visible .news-card:nth-child(2) { transition-delay: 0.22s; }
.news-grid.is-visible .news-card:nth-child(3) { transition-delay: 0.34s; }

.news-grid.is-visible .news-card {
    opacity: 1;
    transform: translateY(0);
}

/* News card hover - subtle zoom */
.news-card-image img {
    transition: transform 0.7s var(--anim-ease);
}

.news-card:hover .news-card-image img {
    transform: scale(1.04);
}

/* ==========================================================================
   FOOTER ANIMATION
   ========================================================================== */
.footer-contact-content {
    opacity: 0;
    transform: translateY(var(--anim-distance-sm));
    transition:
        opacity var(--anim-duration) var(--anim-ease-out),
        transform var(--anim-duration) var(--anim-ease-out);
}

.site-footer.is-visible .footer-contact-content {
    opacity: 1;
    transform: translateY(0);
}

/* ==========================================================================
   LINK ARROW HOVER
   ========================================================================== */
.link-arrow,
.view-all-link {
    transition: color 0.3s var(--anim-ease);
}

.link-arrow i,
.view-all-link i {
    transition: transform 0.4s var(--anim-ease-out);
}

.link-arrow:hover i,
.view-all-link:hover i {
    transform: translateX(6px);
}

/* ==========================================================================
   BUTTON HOVER EFFECTS
   ========================================================================== */
.btn,
button[class*="btn"] {
    transition:
        background-color 0.3s var(--anim-ease),
        color 0.3s var(--anim-ease),
        transform 0.3s var(--anim-ease),
        box-shadow 0.3s var(--anim-ease);
}

.btn:hover,
button[class*="btn"]:hover {
    transform: translateY(-2px);
}

/* ==========================================================================
   REDUCED MOTION
   Respect user preference for reduced motion
   ========================================================================== */
@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
    }

    .anim-fade-in,
    .anim-fade-up,
    .anim-fade-up-sm,
    .anim-scale-in,
    .anim-stagger > * {
        opacity: 1;
        transform: none;
    }
}