/* ============================================================
   IPOOLGO — Motion & animation layer (loaded last)
   "Alive" feel: scroll reveals in all directions, floating accents,
   animated gradients, hover micro-interactions, marquees.
   Respects prefers-reduced-motion.
   ============================================================ */

:root {
    --anim-ease: cubic-bezier(0.22, 1, 0.36, 1);
    --anim-fast: .35s;
    --anim-med: .7s;
}

/* ---------------------------------------------------------
   1. SCROLL REVEALS (directional)
   Add data-reveal="up|down|left|right|zoom|fade" to any element.
   --------------------------------------------------------- */
[data-reveal] {
    opacity: 0;
    will-change: transform, opacity;
    transition: opacity var(--anim-med) var(--anim-ease),
                transform var(--anim-med) var(--anim-ease);
}
[data-reveal="up"]    { transform: translateY(40px); }
[data-reveal="down"]  { transform: translateY(-40px); }
[data-reveal="left"]  { transform: translateX(-48px); }
[data-reveal="right"] { transform: translateX(48px); }
[data-reveal="zoom"]  { transform: scale(.9); }
[data-reveal="fade"]  { transform: none; }
[data-reveal].in { opacity: 1; transform: none; }

/* staggered children */
[data-reveal-group] > * {
    opacity: 0;
    transform: translateY(34px);
    transition: opacity .6s var(--anim-ease), transform .6s var(--anim-ease);
}
[data-reveal-group].in > * { opacity: 1; transform: none; }
[data-reveal-group].in > *:nth-child(1){ transition-delay:.06s; }
[data-reveal-group].in > *:nth-child(2){ transition-delay:.14s; }
[data-reveal-group].in > *:nth-child(3){ transition-delay:.22s; }
[data-reveal-group].in > *:nth-child(4){ transition-delay:.30s; }
[data-reveal-group].in > *:nth-child(5){ transition-delay:.38s; }
[data-reveal-group].in > *:nth-child(6){ transition-delay:.46s; }
[data-reveal-group].in > *:nth-child(7){ transition-delay:.54s; }
[data-reveal-group].in > *:nth-child(8){ transition-delay:.62s; }

/* ---------------------------------------------------------
   2. FLOATING / DRIFTING ACCENTS (like Hostinger's shapes)
   --------------------------------------------------------- */
@keyframes floatY { 0%,100%{ transform:translateY(0);} 50%{ transform:translateY(-16px);} }
@keyframes floatY2 { 0%,100%{ transform:translateY(0);} 50%{ transform:translateY(14px);} }
@keyframes drift { 0%{transform:translate(0,0) rotate(0);} 33%{transform:translate(14px,-12px) rotate(4deg);} 66%{transform:translate(-10px,10px) rotate(-3deg);} 100%{transform:translate(0,0) rotate(0);} }
@keyframes spinSlow { from{transform:rotate(0);} to{transform:rotate(360deg);} }
@keyframes pulseGlow { 0%,100%{ box-shadow:0 0 0 0 rgba(20,102,204,.35);} 50%{ box-shadow:0 0 0 14px rgba(20,102,204,0);} }

.float { animation: floatY 5s ease-in-out infinite; }
.float-slow { animation: floatY2 7s ease-in-out infinite; }
.drift { animation: drift 12s ease-in-out infinite; }

/* decorative floating blobs injected on the homepage */
.deco-blob {
    position: absolute; border-radius: 50%; pointer-events: none; z-index: 0;
    filter: blur(2px); opacity: .5;
}
.deco-blob.b1 { width:120px; height:120px; background:radial-gradient(circle at 30% 30%, #38bdf8, #1466cc); animation: floatY 6s ease-in-out infinite; }
.deco-blob.b2 { width:80px;  height:80px;  background:radial-gradient(circle at 30% 30%, #22c55e, #0e9f6e); animation: floatY2 8s ease-in-out infinite; }
.deco-blob.b3 { width:160px; height:160px; background:radial-gradient(circle at 30% 30%, #a78bfa, #6d28d9); animation: drift 14s ease-in-out infinite; opacity:.35; }

/* ---------------------------------------------------------
   3. ANIMATED GRADIENT ACCENTS & TEXT
   --------------------------------------------------------- */
@keyframes gradientShift { 0%{background-position:0% 50%;} 50%{background-position:100% 50%;} 100%{background-position:0% 50%;} }
.animated-gradient {
    background: linear-gradient(120deg, #1466cc, #38bdf8, #22c55e, #1466cc);
    background-size: 300% 300%;
    animation: gradientShift 10s ease infinite;
}
.gradient-text-anim {
    background: linear-gradient(90deg,#38bdf8,#1466cc,#22c55e,#38bdf8);
    background-size: 300% auto;
    -webkit-background-clip: text; background-clip: text;
    -webkit-text-fill-color: transparent; color: transparent;
    animation: gradientShift 8s linear infinite;
}

/* ---------------------------------------------------------
   4. HOVER MICRO-INTERACTIONS
   --------------------------------------------------------- */
.hover-lift { transition: transform var(--anim-fast) var(--anim-ease), box-shadow var(--anim-fast) var(--anim-ease); }
.hover-lift:hover { transform: translateY(-6px); box-shadow: 0 18px 40px rgba(0,0,0,.18); }

.btn { position: relative; overflow: hidden; }
.btn::after {
    content:""; position:absolute; top:0; left:-120%; width:60%; height:100%;
    background: linear-gradient(120deg, transparent, rgba(255,255,255,.35), transparent);
    transform: skewX(-20deg); transition: none;
}
.btn:hover::after { left:130%; transition: left .7s ease; }

.btn-primary:hover { animation: pulseGlow 1.2s ease-out 1; }

/* category / product image zoom already exists; add a soft tilt on hover */
.category-card, .product-card, .hover-lift { transition: transform var(--anim-fast) var(--anim-ease), box-shadow var(--anim-fast) var(--anim-ease); }

/* nav links: animated underline */
.nav-menu a { position: relative; }
.nav-menu a::after {
    content:""; position:absolute; left:0; bottom:-4px; height:2px; width:0;
    background: var(--ipg-blue, #1466cc); transition: width .3s var(--anim-ease);
}
.nav-menu a:hover::after, .nav-menu a.active::after { width:100%; }

/* ---------------------------------------------------------
   5. HERO ENTRANCE + SUBTLE PARALLAX
   --------------------------------------------------------- */
@keyframes heroIn { from{ transform:translateY(26px);} to{ transform:none;} }
.hero-slide.active .hero-subtitle { animation: heroIn .7s var(--anim-ease) both; animation-delay:.1s; }
.hero-slide.active .hero-title    { animation: heroIn .7s var(--anim-ease) both; animation-delay:.25s; }
.hero-slide.active .hero-description { animation: heroIn .7s var(--anim-ease) both; animation-delay:.4s; }
.hero-slide.active .hero-buttons, .hero-slide.active .btn { animation: heroIn .7s var(--anim-ease) both; animation-delay:.55s; }
.hero-slide-bg { transition: transform 6s ease-out; }
.hero-slide.active .hero-slide-bg { transform: scale(1.08); } /* slow Ken Burns zoom */

/* ---------------------------------------------------------
   6. COUNT-UP STAT POP
   --------------------------------------------------------- */
@keyframes statPop { 0%{ transform:scale(.8);} 60%{ transform:scale(1.08);} 100%{ transform:scale(1);} }
.about-stat-number.counting { animation: statPop .6s var(--anim-ease); }

/* ---------------------------------------------------------
   7. SCROLL PROGRESS BAR (top of page)
   --------------------------------------------------------- */
.scroll-progress {
    position: fixed; top:0; left:0; height:3px; width:0; z-index: 3000;
    background: linear-gradient(90deg,#1466cc,#38bdf8,#22c55e);
    transition: width .1s linear;
}

/* ---------------------------------------------------------
   8. MARQUEE (partners / brands)
   --------------------------------------------------------- */
@keyframes marqueeMove { from{ transform:translateX(0);} to{ transform:translateX(-50%);} }

/* ---------------------------------------------------------
   9. REDUCED MOTION — turn it all off
   --------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation: none !important;
        transition: none !important;
    }
    [data-reveal], [data-reveal-group] > * { opacity:1 !important; transform:none !important; }
}

/* keep decorations clipped; lighten on small screens */
.hero-slider { overflow: hidden; }
@media (max-width: 600px) {
    .deco-blob.b3 { display: none; }
    .deco-blob.b1 { width: 80px; height: 80px; }
    .deco-blob.b2 { width: 56px; height: 56px; }
}