/* =========================================================
   CREATIVE ENDS — ANIMATION SYSTEM
   Premium Cinematic Motion Framework
   ========================================================= */

/* =========================
   GLOBAL TRANSITIONS
========================= */

*{
    transition:
        transform 0.4s ease,
        opacity 0.4s ease,
        background 0.4s ease,
        color 0.4s ease,
        box-shadow 0.4s ease;
}

/* =========================
   SCROLL REVEAL SYSTEM
========================= */

.reveal{

    opacity:0;

    transform:translateY(80px);

    transition:1s cubic-bezier(.16,.84,.44,1);

}

.reveal.active{

    opacity:1;

    transform:translateY(0);

}

/* =========================
   FADE ANIMATIONS
========================= */

.fade-in{

    animation:fadeIn 1.2s ease forwards;

}

@keyframes fadeIn{

    from{
        opacity:0;
    }

    to{
        opacity:1;
    }

}

/* =========================
   FADE UP
========================= */

.fade-up{

    opacity:0;

    transform:translateY(60px);

    animation:fadeUp 1.2s ease forwards;

}

@keyframes fadeUp{

    to{

        opacity:1;

        transform:translateY(0);

    }

}

/* =========================
   STAGGER DELAYS
========================= */

.delay-1{
    animation-delay:0.1s;
}

.delay-2{
    animation-delay:0.2s;
}

.delay-3{
    animation-delay:0.3s;
}

.delay-4{
    animation-delay:0.4s;
}

.delay-5{
    animation-delay:0.5s;
}

/* =========================
   HERO TEXT REVEAL
========================= */

.hero-title{

    opacity:0;

    transform:translateY(100px);

    animation:heroReveal 1.4s ease forwards;

}

.hero-subtitle{

    opacity:0;

    transform:translateY(80px);

    animation:heroReveal 1.6s ease forwards;

    animation-delay:0.3s;

}

.hero-buttons{

    opacity:0;

    transform:translateY(60px);

    animation:heroReveal 1.8s ease forwards;

    animation-delay:0.5s;

}

@keyframes heroReveal{

    to{

        opacity:1;

        transform:translateY(0);

    }

}

/* =========================
   MAGNETIC BUTTON EFFECT
========================= */

.btn-primary,
.btn-outline{

    position:relative;

    overflow:hidden;

}

.btn-primary::before,
.btn-outline::before{

    content:'';

    position:absolute;

    width:300px;
    height:300px;

    background:rgba(255,255,255,0.18);

    border-radius:50%;

    top:100%;
    left:100%;

    transform:translate(-50%,-50%);

    transition:0.7s ease;

}

.btn-primary:hover::before,
.btn-outline:hover::before{

    top:50%;
    left:50%;

}

/* =========================
   IMAGE ZOOM EFFECT
========================= */

.zoom-hover{

    overflow:hidden;

}

.zoom-hover img{

    transition:1.2s ease;

}

.zoom-hover:hover img{

    transform:scale(1.08);

}

/* =========================
   PARALLAX LAYERS
========================= */

.parallax-layer{

    will-change:transform;

    transform-style:preserve-3d;

}

/* =========================
   SERVICE CARD EFFECTS
========================= */

.service-card{

    transform-style:preserve-3d;

    perspective:1200px;

}

.service-card:hover{

    transform:
        rotateX(2deg)
        rotateY(-2deg)
        translateY(-10px);

}

/* =========================
   GLOW EFFECT
========================= */

.glow-hover:hover{

    box-shadow:
        0 0 20px rgba(219,185,110,0.4),
        0 0 50px rgba(219,185,110,0.2);

}

/* =========================
   FLOATING EFFECT
========================= */

.floating{

    animation:floating 4s ease-in-out infinite;

}

@keyframes floating{

    0%{
        transform:translateY(0px);
    }

    50%{
        transform:translateY(-14px);
    }

    100%{
        transform:translateY(0px);
    }

}

/* =========================
   ROTATING ELEMENT
========================= */

.rotate-slow{

    animation:rotateSlow 20s linear infinite;

}

@keyframes rotateSlow{

    from{
        transform:rotate(0deg);
    }

    to{
        transform:rotate(360deg);
    }

}

/* =========================
   TEXT SHIMMER EFFECT
========================= */

.shimmer-text{

    background:
        linear-gradient(
            90deg,
            #ffffff 0%,
            #DBB96E 50%,
            #ffffff 100%
        );

    background-size:200% auto;

    color:transparent;

    background-clip:text;

    -webkit-background-clip:text;

    animation:shimmer 3s linear infinite;

}

@keyframes shimmer{

    to{
        background-position:200% center;
    }

}

/* =========================
   PORTFOLIO OVERLAY EFFECT
========================= */

.portfolio-item{

    position:relative;

}

.portfolio-overlay{

    position:absolute;

    top:0;
    left:0;

    width:100%;
    height:100%;

    background:
        linear-gradient(
            to top,
            rgba(0,0,0,0.8),
            rgba(0,0,0,0.1)
        );

    opacity:0;

    transition:0.6s ease;

    display:flex;

    align-items:flex-end;

    padding:30px;

}

.portfolio-item:hover .portfolio-overlay{

    opacity:1;

}

/* =========================
   OVERLAY CONTENT REVEAL
========================= */

.overlay-content{

    transform:translateY(40px);

    transition:0.6s ease;

}

.portfolio-item:hover .overlay-content{

    transform:translateY(0);

}

/* =========================
   COUNTER ANIMATION
========================= */

.counter{

    font-size:72px;

    font-weight:700;

    color:var(--primary-gold);

}

/* =========================
   GLASSMORPHISM HOVER
========================= */

.glass-card{

    transition:0.5s ease;

}

.glass-card:hover{

    transform:translateY(-10px);

    background:rgba(255,255,255,0.12);

}

/* =========================
   NAVBAR LINK ANIMATION
========================= */

.nav-links a{

    position:relative;

}

.nav-links a::before{

    content:'';

    position:absolute;

    left:0;
    bottom:-10px;

    width:0%;
    height:2px;

    background:var(--primary-gold);

    transition:0.4s ease;

}

.nav-links a:hover::before{

    width:100%;

}

/* =========================
   WHATSAPP PULSE
========================= */

.whatsapp-float{

    animation:whatsappPulse 2.5s infinite;

}

@keyframes whatsappPulse{

    0%{
        box-shadow:0 0 0 0 rgba(37,211,102,0.6);
    }

    70%{
        box-shadow:0 0 0 18px rgba(37,211,102,0);
    }

    100%{
        box-shadow:0 0 0 0 rgba(37,211,102,0);
    }

}

/* =========================
   CTA BACKGROUND MOTION
========================= */

.cta-section::before{

    content:'';

    position:absolute;

    width:600px;
    height:600px;

    background:
        radial-gradient(
            rgba(219,185,110,0.18),
            transparent
        );

    top:-200px;
    right:-200px;

    animation:floating 8s ease-in-out infinite;

}

/* =========================
   SCROLL INDICATOR
========================= */

.scroll-indicator{

    position:absolute;

    bottom:40px;
    left:50%;

    transform:translateX(-50%);

    width:28px;
    height:48px;

    border:2px solid rgba(255,255,255,0.6);

    border-radius:30px;

}

.scroll-indicator::before{

    content:'';

    position:absolute;

    top:8px;
    left:50%;

    width:6px;
    height:6px;

    border-radius:50%;

    background:#fff;

    transform:translateX(-50%);

    animation:scrollWheel 2s infinite;

}

@keyframes scrollWheel{

    0%{

        opacity:1;

        top:8px;

    }

    100%{

        opacity:0;

        top:24px;

    }

}

/* =========================
   SECTION DIVIDER ANIMATION
========================= */

.animated-divider{

    width:120px;
    height:3px;

    background:var(--gradient-gold);

    margin:20px auto;

    position:relative;

    overflow:hidden;

}

.animated-divider::before{

    content:'';

    position:absolute;

    width:60px;
    height:100%;

    background:#fff;

    left:-60px;

    animation:dividerShine 3s linear infinite;

}

@keyframes dividerShine{

    to{
        left:120%;
    }

}

/* =========================
   LOADING SCREEN
========================= */

.loader{

    position:fixed;

    top:0;
    left:0;

    width:100%;
    height:100vh;

    background:#111;

    z-index:999999;

    display:flex;

    align-items:center;
    justify-content:center;

}

.loader-logo{

    width:180px;

    animation:loaderPulse 2s infinite;

}

@keyframes loaderPulse{

    0%{
        opacity:0.4;
        transform:scale(0.96);
    }

    50%{
        opacity:1;
        transform:scale(1);
    }

    100%{
        opacity:0.4;
        transform:scale(0.96);
    }

}