/* ==========================================================================
   ASAF International — animations.css
   Premium, lightweight motion layer. Loaded AFTER style.css.
   - Uses only transform/translate/opacity (GPU friendly)
   - Hidden "pre-reveal" states only apply when JS is running (html.js-anim)
   - Fully disabled for users who prefer reduced motion
   ========================================================================== */

:root {
    --anim-ease: cubic-bezier(0.16, 1, 0.3, 1);
    --anim-dur: 0.9s;
    --reveal-x: 70px;
    --reveal-y: 40px;
}
@media (max-width: 767px) {
    :root { --reveal-x: 36px; --reveal-y: 28px; }
}

/* ---------- 1) SCROLL REVEALS (left / right / up / zoom) ---------- */
.js-anim [data-reveal]:not(.is-in) { opacity: 0; }
.js-anim [data-reveal="left"]:not(.is-in)  { translate: calc(var(--reveal-x) * -1) 0; }
.js-anim [data-reveal="right"]:not(.is-in) { translate: var(--reveal-x) 0; }
.js-anim [data-reveal="up"]:not(.is-in)    { translate: 0 var(--reveal-y); }
.js-anim [data-reveal="zoom"]:not(.is-in)  { scale: 0.92; translate: 0 20px; }

.js-anim [data-reveal].is-in {
    animation: var(--reveal-name, revealUp) var(--anim-dur) var(--anim-ease) var(--reveal-delay, 0s) backwards;
}
.js-anim [data-reveal="left"].is-in  { --reveal-name: revealLeft; }
.js-anim [data-reveal="right"].is-in { --reveal-name: revealRight; }
.js-anim [data-reveal="up"].is-in    { --reveal-name: revealUp; }
.js-anim [data-reveal="zoom"].is-in  { --reveal-name: revealZoom; }

@keyframes revealLeft  { from { opacity: 0; translate: calc(var(--reveal-x) * -1) 0; } to { opacity: 1; translate: 0 0; } }
@keyframes revealRight { from { opacity: 0; translate: var(--reveal-x) 0; }            to { opacity: 1; translate: 0 0; } }
@keyframes revealUp    { from { opacity: 0; translate: 0 var(--reveal-y); }            to { opacity: 1; translate: 0 0; } }
@keyframes revealZoom  { from { opacity: 0; scale: 0.92; translate: 0 20px; }          to { opacity: 1; scale: 1; translate: 0 0; } }

/* ---------- 2) HERO ENTRANCE + ANIMATED ELEMENTS ---------- */
/* Soft drifting glow blobs behind hero text (injected by JS) */
.hero-glow { position: absolute; inset: 0; z-index: 2; pointer-events: none; overflow: hidden; }
.hero-glow span {
    position: absolute; width: 46vmax; height: 46vmax; border-radius: 50%;
    filter: blur(70px); opacity: 0.22; will-change: transform;
}
.hero-glow span:nth-child(1) { background: radial-gradient(circle, rgba(201,162,75,0.9), transparent 65%); top: -18%; left: -10%; animation: glowDriftA 22s ease-in-out infinite alternate; }
.hero-glow span:nth-child(2) { background: radial-gradient(circle, rgba(30,122,70,0.9), transparent 65%); bottom: -25%; right: -12%; animation: glowDriftB 26s ease-in-out infinite alternate; }
@keyframes glowDriftA { to { transform: translate3d(14vw, 10vh, 0) scale(1.15); } }
@keyframes glowDriftB { to { transform: translate3d(-12vw, -8vh, 0) scale(1.1); } }

/* Pause hero effects when the hero is scrolled out of view (saves CPU/battery) */
.hero-offscreen .green-text, .hero-offscreen .hero-glow span { animation-play-state: paused !important; }
/* Glow blobs are desktop/tablet only */
@media (max-width: 767px) { .hero-glow { display: none; } }

/* Slow shimmer across the gradient headline text */
.js-anim .green-text {
    background-size: 220% 100%;
    animation: textShimmer 7s ease-in-out infinite alternate;
}
@keyframes textShimmer { from { background-position: 0% 50%; } to { background-position: 100% 50%; } }

/* Navbar slides down once the preloader is gone */
.js-anim .navbar.fixed-top:not(.nav-in) { opacity: 0; translate: 0 -100%; }
.js-anim .navbar.fixed-top.nav-in { animation: navDrop 0.9s var(--anim-ease) 0.05s backwards; }
@keyframes navDrop { from { opacity: 0; translate: 0 -100%; } to { opacity: 1; translate: 0 0; } }

/* ---------- 3) SUBTLE FLOATING ---------- */
.anim-float       { animation: softFloat 6s ease-in-out infinite; }
.anim-float-slow  { animation: softFloat 8s ease-in-out infinite; animation-delay: -2s; }
.anim-paused { animation-play-state: paused !important; }
@keyframes softFloat { 0%, 100% { transform: translate3d(0, 0, 0); } 50% { transform: translate3d(0, -8px, 0); } }

/* ---------- 4) MARQUEES (infinite horizontal scroll) ---------- */
.marquee {
    position: relative; overflow: hidden; width: 100%;
    -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
            mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
}
.marquee-track {
    display: flex; width: max-content; will-change: transform;
    animation: marqueeLeft var(--marquee-speed, 40s) linear infinite;
}
.marquee--reverse .marquee-track { animation-name: marqueeRight; }
.marquee-group { display: flex; align-items: center; flex-shrink: 0; }
.marquee.is-paused .marquee-track { animation-play-state: paused; }
@media (hover: hover) { .marquee:hover .marquee-track { animation-play-state: paused; } }
.marquee { contain: paint; }
@keyframes marqueeLeft  { from { transform: translate3d(0, 0, 0); }    to { transform: translate3d(-50%, 0, 0); } }
@keyframes marqueeRight { from { transform: translate3d(-50%, 0, 0); } to { transform: translate3d(0, 0, 0); } }

/* Strip 1: sectors */
.marquee-band { background: var(--gradient-dark); border-top: 1px solid rgba(201,162,75,0.18); border-bottom: 1px solid rgba(201,162,75,0.18); padding: 18px 0; position: relative; z-index: 4; }
.marquee-item {
    display: inline-flex; align-items: center; gap: 14px; padding: 0 28px; white-space: nowrap;
    font-family: var(--font-primary); font-weight: 600; font-size: 0.95rem; letter-spacing: 0.14em; text-transform: uppercase;
    color: rgba(255,255,255,0.82);
}
.marquee-item i { color: var(--primary); font-size: 1.05rem; }
.marquee-dot { width: 6px; height: 6px; border-radius: 50%; background: var(--primary); opacity: 0.7; flex-shrink: 0; }

/* Strip 2: big outlined statement */
.marquee-statement { background: var(--dark); padding: 46px 0; overflow: hidden; }
.marquee-big {
    display: inline-flex; align-items: center; gap: 40px; padding-right: 40px; white-space: nowrap;
    font-family: var(--font-primary); font-weight: 800; line-height: 1.1;
    font-size: clamp(2rem, 6vw, 4.6rem);
    color: transparent; -webkit-text-stroke: 1.5px rgba(201,162,75,0.72);
}
.marquee-big .filled { color: var(--primary); -webkit-text-stroke: 0; }
.marquee-big .marquee-dot { width: 12px; height: 12px; }
@media (max-width: 767px) {
    .marquee-band { padding: 14px 0; }
    .marquee-item { padding: 0 18px; font-size: 0.8rem; }
    .marquee-statement { padding: 30px 0; }
    .marquee-big { -webkit-text-stroke-width: 1px; gap: 24px; padding-right: 24px; }
}

/* ---------- 5) HOVER POLISH ---------- */
/* Button shine sweep */
.btn-primary { position: relative; overflow: hidden; isolation: isolate; }
.btn-primary::after {
    content: ''; position: absolute; top: 0; left: -80%; width: 55%; height: 100%; z-index: -1;
    background: linear-gradient(100deg, transparent, rgba(255,255,255,0.35), transparent);
    transform: skewX(-20deg); transition: left 0.7s var(--anim-ease);
}
.btn-primary:hover::after { left: 130%; }
.btn-primary i, .btn-outline-light i { transition: transform 0.35s var(--anim-ease); }
.btn-primary:hover i.bi-arrow-right, .btn-outline-light:hover i { transform: translateX(4px); }
.btn:active { transform: translateY(0) scale(0.98); }

/* Smooth image scaling in galleries / cards */
.gallery-image { overflow: hidden; }
.gallery-image img { transition: transform 0.8s var(--anim-ease); will-change: transform; }
.gallery-item:hover .gallery-image img { transform: scale(1.08); }

/* Icon / badge lift */
.contact-icon, .business-icon { transition: transform 0.4s var(--anim-ease), box-shadow 0.4s ease; }
.contact-info-item:hover .contact-icon, .business-vertical:hover .business-icon { transform: translateY(-3px) scale(1.06); }

/* Form field focus glow */
.form-floating > .form-control:focus,
.form-floating > .form-select:focus { box-shadow: 0 0 0 4px rgba(201,162,75,0.18) !important; transition: box-shadow 0.3s ease, border-color 0.3s ease; }

/* Footer link nudge uses existing styles; add smooth social lift */
.footer-social a { transition: transform 0.35s var(--anim-ease), background 0.3s ease, border-color 0.3s ease; }

/* ---------- 6) SCROLL PROGRESS BAR ---------- */
.scroll-progress {
    position: fixed; top: 0; left: 0; width: 100%; height: 3px; z-index: 1100; pointer-events: none;
    background: var(--gradient-primary); transform: scaleX(0); transform-origin: 0 50%; will-change: transform;
}

/* ---------- 7) PAGE TRANSITIONS ---------- */
.js-anim body { animation: pageIn 0.7s ease backwards; }
@keyframes pageIn { from { opacity: 0; } to { opacity: 1; } }
.js-anim body.page-leaving { opacity: 0; transition: opacity 0.28s ease; }

/* ---------- 8) PARALLAX HELPERS (values set by JS) ---------- */
.hero-bg, .business-image img { will-change: translate, scale; }

/* ---------- REDUCED MOTION: switch everything off ---------- */
@media (prefers-reduced-motion: reduce) {
    html:focus-within { scroll-behavior: auto; }
    *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; }
    .js-anim [data-reveal]:not(.is-in) { opacity: 1 !important; translate: none !important; scale: none !important; }
    .js-anim [data-reveal].is-in, .js-anim body,
    .js-anim .green-text, .hero-glow span, .anim-float, .anim-float-slow { animation: none !important; }
    .marquee-track { animation: none !important; }
    .marquee { overflow-x: auto; }
    .scroll-progress { display: none; }
}

/* ---------- 9) SMALL ADDITIONS ---------- */
.count { font-variant-numeric: tabular-nums; }
/* Keep the headline shimmer running alongside its entrance animation */
.js-anim .green-text[data-reveal].is-in {
    animation:
        revealUp var(--anim-dur) var(--anim-ease) var(--reveal-delay, 0s) backwards,
        textShimmer 7s ease-in-out infinite alternate;
}

/* Stop pre-reveal slide offsets from ever widening the page */
.js-anim section, .js-anim .footer { overflow-x: clip; }

/* ---------- PRINT: always show everything ---------- */
@media print {
    .js-anim [data-reveal], .js-anim .navbar.fixed-top { opacity: 1 !important; translate: none !important; scale: none !important; animation: none !important; }
    .scroll-progress, .hero-glow, .marquee-band, .marquee-statement { display: none !important; }
}