/* =====================================================
   EEiS – Animations & Effects
   ===================================================== */

/* ---- Keyframes ---- */
@keyframes fadeInUp       { from { opacity:0; transform:translateY(40px); } to { opacity:1; transform:translateY(0); } }
@keyframes fadeInLeft     { from { opacity:0; transform:translateX(-40px); } to { opacity:1; transform:translateX(0); } }
@keyframes fadeInRight    { from { opacity:0; transform:translateX(40px); } to { opacity:1; transform:translateX(0); } }
@keyframes fadeInScale    { from { opacity:0; transform:scale(0.88); } to { opacity:1; transform:scale(1); } }
@keyframes scaleX         { from { transform:scaleX(0); } to { transform:scaleX(1); } }
@keyframes float          { 0%,100% { transform:translateY(0); } 50% { transform:translateY(-14px); } }
@keyframes pulse          { 0%,100% { box-shadow:0 0 0 0 rgba(182,58,49,0.55); } 70% { box-shadow:0 0 0 18px rgba(182,58,49,0); } }
@keyframes pulseGreen     { 0%,100% { box-shadow:0 0 0 0 rgba(37,211,102,0.55); } 70% { box-shadow:0 0 0 16px rgba(37,211,102,0); } }
@keyframes rotateSlow     { from { transform:rotate(0deg); } to { transform:rotate(360deg); } }
@keyframes rotateSlowRev  { from { transform:rotate(0deg); } to { transform:rotate(-360deg); } }
@keyframes shimmer        { 0% { background-position:-400px 0; } 100% { background-position:400px 0; } }
@keyframes borderPulse    { 0%,100% { border-color:rgba(182,58,49,0.3); } 50% { border-color:rgba(182,58,49,0.8); } }
@keyframes ticker         { from { transform:translateX(0); } to { transform:translateX(-50%); } }
@keyframes drawLine       { from { width:0; } to { width:100%; } }
@keyframes countUp        { from { opacity:0; transform:translateY(10px); } to { opacity:1; transform:translateY(0); } }
@keyframes slideInFromBottom { from { opacity:0; transform:translateY(60px); } to { opacity:1; transform:translateY(0); } }
@keyframes heroTextReveal {
    0%   { clip-path:inset(0 100% 0 0); opacity:0; }
    30%  { opacity:1; }
    100% { clip-path:inset(0 0% 0 0); opacity:1; }
}
@keyframes bgZoom {
    0%   { transform:scale(1); }
    100% { transform:scale(1.06); }
}
@keyframes glowPulse {
    0%,100% { text-shadow: 0 0 20px rgba(182,58,49,0); }
    50%     { text-shadow: 0 0 40px rgba(182,58,49,0.35); }
}
@keyframes particleFloat {
    0%   { transform:translateY(0) translateX(0) rotate(0deg); opacity:0.6; }
    33%  { transform:translateY(-30px) translateX(20px) rotate(120deg); }
    66%  { transform:translateY(-10px) translateX(-15px) rotate(240deg); }
    100% { transform:translateY(0) translateX(0) rotate(360deg); opacity:0.6; }
}
@keyframes lineGrow {
    from { transform:scaleX(0); transform-origin:left; }
    to   { transform:scaleX(1); transform-origin:left; }
}
@keyframes revealUp {
    from { clip-path:inset(100% 0 0 0); transform:translateY(20px); }
    to   { clip-path:inset(0% 0 0 0); transform:translateY(0); }
}
@keyframes morphBg {
    0%,100% { border-radius: 60% 40% 30% 70% / 60% 30% 70% 40%; }
    50%     { border-radius: 30% 60% 70% 40% / 50% 60% 30% 60%; }
}

/* ---- Fade-in variants ---- */
.fade-in         { opacity:0; transform:translateY(30px); transition:opacity .65s ease, transform .65s ease; }
.fade-in.visible { opacity:1; transform:translateY(0); }

.fade-in-left         { opacity:0; transform:translateX(-35px); transition:opacity .65s ease, transform .65s ease; }
.fade-in-left.visible { opacity:1; transform:translateX(0); }

.fade-in-right         { opacity:0; transform:translateX(35px); transition:opacity .65s ease, transform .65s ease; }
.fade-in-right.visible { opacity:1; transform:translateX(0); }

.fade-in-scale         { opacity:0; transform:scale(0.9); transition:opacity .65s ease, transform .65s ease; }
.fade-in-scale.visible { opacity:1; transform:scale(1); }

/* Stagger delays */
.delay-1 { transition-delay:.08s !important; }
.delay-2 { transition-delay:.16s !important; }
.delay-3 { transition-delay:.24s !important; }
.delay-4 { transition-delay:.32s !important; }
.delay-5 { transition-delay:.40s !important; }
.delay-6 { transition-delay:.48s !important; }

/* ---- Hero image zoom ---- */
.hero-bg-img {
    position:absolute; inset:0;
    animation: bgZoom 18s ease-in-out infinite alternate;
    transform-origin: center;
}

/* ---- Hero title animated ---- */
.hero-title-word {
    display:inline-block;
    will-change: transform, opacity;
    animation: slideInFromBottom .8s cubic-bezier(.22,.61,.36,1) both;
}
.hero-title-word:nth-child(2) { animation-delay:.15s; }
.hero-title-word.line-red { animation:
    slideInFromBottom .8s cubic-bezier(.22,.61,.36,1) both,
    glowPulse 3.2s ease-in-out infinite 1s; }

/* ---- Floating shapes (hero particles) ---- */
.hero-particles { position:absolute; inset:0; pointer-events:none; overflow:hidden; }
.particle {
    position:absolute; border-radius:50%;
    background:rgba(182,58,49,0.08);
    animation: particleFloat linear infinite;
}
.particle:nth-child(1)  { width:80px;  height:80px;  top:15%; left:10%;  animation-duration:12s; animation-delay:0s; }
.particle:nth-child(2)  { width:50px;  height:50px;  top:60%; left:80%;  animation-duration:9s;  animation-delay:2s; }
.particle:nth-child(3)  { width:120px; height:120px; top:75%; left:20%;  animation-duration:15s; animation-delay:1s; }
.particle:nth-child(4)  { width:35px;  height:35px;  top:30%; left:60%;  animation-duration:8s;  animation-delay:3s; }
.particle:nth-child(5)  { width:65px;  height:65px;  top:50%; left:45%;  animation-duration:11s; animation-delay:1.5s; }

/* Geometric lines */
.geo-line {
    position:absolute; background:rgba(182,58,49,0.12);
    pointer-events:none;
}
.geo-line.h { height:1px; width:200px; animation: shimmer 4s linear infinite; }
.geo-line.v { width:1px;  height:200px; }

/* ---- Floating buttons pulse ---- */
.float-whatsapp { animation: pulseGreen 2.5s ease-in-out infinite; }
.float-call     { animation: pulse 2.5s ease-in-out infinite; animation-delay:.8s; }

/* ---- Section title animated underline ---- */
.section-title-animated { position:relative; display:inline-block; }
.section-title-animated::after {
    content:''; position:absolute; bottom:-8px; left:0;
    height:3px; width:0; background:var(--red);
    border-radius:3px; transition:width .8s ease;
}
.section-title-animated.visible::after { width:60px; }

/* ---- Card hover lift + glow ---- */
.card-hover {
    transition: transform .3s ease, box-shadow .3s ease;
}
.card-hover:hover {
    transform: translateY(-8px) scale(1.015);
    box-shadow: 0 20px 50px rgba(182,58,49,0.15);
}
.card-hover-dark:hover {
    transform: translateY(-8px) scale(1.015);
    box-shadow: 0 20px 50px rgba(0,0,0,0.5);
}

/* ---- Icon bounce on hover ---- */
.icon-hover i, .icon-hover svg {
    transition: transform .3s cubic-bezier(.22,.61,.36,1);
}
.icon-hover:hover i, .icon-hover:hover svg {
    transform: scale(1.25) rotate(-5deg);
}

/* ---- Btn ripple effect ---- */
.btn { position:relative; overflow:hidden; }
.btn::after {
    content:''; position:absolute; inset:0;
    background:rgba(255,255,255,0.12);
    transform:scaleX(0); transform-origin:left;
    transition:transform .3s ease;
}
.btn:hover::after { transform:scaleX(1); }

/* ---- Red line draw on scroll ---- */
.line-draw {
    display:block; height:3px; background:var(--red);
    transform:scaleX(0); transform-origin:left;
    transition:transform .9s cubic-bezier(.22,.61,.36,1);
    border-radius:3px;
}
.line-draw.visible { transform:scaleX(1); }

/* ---- Number counter glow ---- */
[data-count] { display:inline-block; }

/* ---- Why card border animate ---- */
.why-card {
    transition: transform .35s ease, box-shadow .35s ease, border-color .35s ease, background .35s ease;
}

/* ---- Service card ---- */
.service-card {
    transition: transform .35s cubic-bezier(.22,.61,.36,1), box-shadow .35s ease, border-color .35s ease;
}

/* ---- Step connector pulse ---- */
.step-num {
    position:relative;
    animation: pulse 3s ease-in-out infinite;
}

/* ---- MEP banner left accent ---- */
.mep-banner {
    position:relative; overflow:hidden;
    transition: box-shadow .35s ease;
}
.mep-banner::after {
    content:''; position:absolute; top:0; left:0; bottom:0;
    width:5px; background:var(--red);
    animation: pulse 2s ease-in-out infinite;
}

/* ---- Ticker ---- */
.stripe-ticker { animation: ticker 22s linear infinite; }
.red-stripe:hover .stripe-ticker { animation-play-state:paused; }

/* ---- Page hero reveal ---- */
.page-hero-inner .page-title {
    animation: slideInFromBottom .7s cubic-bezier(.22,.61,.36,1) .2s both;
}
.page-hero-inner .page-subtitle {
    animation: slideInFromBottom .7s cubic-bezier(.22,.61,.36,1) .4s both;
}
.page-hero-inner .breadcrumb {
    animation: fadeInLeft .6s ease .1s both;
}

/* ---- Header nav links ---- */
.main-nav a::before {
    content:''; position:absolute; bottom:0; left:50%; right:50%;
    height:2px; background:var(--red); border-radius:2px;
    transition: left .3s ease, right .3s ease;
}
.main-nav a:hover::before, .main-nav a.active::before { left:12px; right:12px; }

/* ---- Logo hover ---- */
.logo .logo-main {
    transition: letter-spacing .3s ease, color .3s ease;
}
.logo:hover .logo-main { letter-spacing:4px; }

/* ---- CTA section ---- */
.cta-section { position:relative; overflow:hidden; }
.cta-section::after {
    content:''; position:absolute; top:-60%; right:-15%;
    width:500px; height:500px; border-radius:50%;
    background:rgba(255,255,255,0.04);
    animation: float 8s ease-in-out infinite;
    pointer-events:none;
}

/* ---- Smooth scroll reveal for sections ---- */
section { transition: background .5s ease; }

/* ---- Image parallax wrapper ---- */
.parallax-img {
    transition: transform .1s linear;
    will-change: transform;
}

/* ---- Who-we-are visual float ---- */
.who-visual-inner {
    animation: float 6s ease-in-out infinite;
}

/* ---- Smart circle ---- */
.smart-circle i {
    animation: float 3s ease-in-out infinite;
}

/* ---- Value cards stagger ---- */
.value-card:nth-child(1) { transition-delay:.05s; }
.value-card:nth-child(2) { transition-delay:.10s; }
.value-card:nth-child(3) { transition-delay:.15s; }
.value-card:nth-child(4) { transition-delay:.20s; }
.value-card:nth-child(5) { transition-delay:.25s; }
.value-card:nth-child(6) { transition-delay:.30s; }

/* ---- Service full card ---- */
.service-full-card {
    transition: transform .35s cubic-bezier(.22,.61,.36,1), box-shadow .35s ease, border-color .35s ease;
}

/* ---- FM package ---- */
.fm-package {
    transition: transform .35s cubic-bezier(.22,.61,.36,1), box-shadow .35s ease;
}

/* ---- Industry card ---- */
.industry-card i {
    transition: transform .3s cubic-bezier(.22,.61,.36,1);
}
.industry-card:hover i {
    transform: scale(1.3) rotate(-8deg);
}

/* ---- Contact form focus effects ---- */
.form-control {
    transition: border-color .3s ease, background .3s ease, box-shadow .3s ease;
}

/* ---- Footer social ---- */
.social-links a {
    transition: transform .3s ease, border-color .3s ease, color .3s ease, background .3s ease;
}
.social-links a:hover { transform: translateY(-4px) scale(1.1); }

/* ---- Diagonal divider ---- */
.diagonal-divider { transition: none; }

/* ---- Scroll progress bar ---- */
#scrollProgress {
    position:fixed; top:0; left:0; height:3px;
    background:var(--red); z-index:1001;
    width:0%; transition:width .1s linear;
    box-shadow: 0 0 8px rgba(182,58,49,0.6);
}

/* ---- Section badge ---- */
.section-label {
    transition: letter-spacing .3s ease;
}
.section-label:hover { letter-spacing:4px; }

/* ---- Why num glow on hover ---- */
.why-card:hover .why-num {
    color: rgba(182,58,49,0.3);
    transition: color .3s ease;
}

/* ---- Reduced motion ---- */
@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation-duration: .01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: .01ms !important;
    }
}

@media (max-width: 680px) {
    .particle:nth-child(3),
    .particle:nth-child(5) {
        display: none;
    }

    .hero-bg-img {
        animation-duration: 24s;
    }
}