/* =========================================================
   Influencer Arena: motion (add-on)
   Animates elements INTO their normal look; final states are
   unchanged. Start states apply only under .js:not(.motion-off)
   (set by the inline <head> snippet + assets/js/animations.js),
   so without JavaScript, or with reduced motion, nothing hides.
   Uses keyframes on opacity + the individual translate/scale
   properties, so the site's existing transform hovers keep
   working.
========================================================= */

:root {
    --ia-ease: cubic-bezier(.22, 1, .36, 1);
}

/* Lenis 1.3.27 base styles, inlined from lenis/dist/lenis.css (saves a render-blocking request).
   Left out on purpose: `.lenis.lenis-stopped { overflow: clip }`. It removes the scrollbar while a popup
   is open (the page jumps sideways on Windows) and unsticks the navbar; Lenis already blocks wheel and
   touch scrolling while stopped, so the page behind a popup stays still without it. */
html.lenis,
html.lenis body {
    height: auto;
}

.lenis [data-lenis-prevent],
.lenis [data-lenis-prevent-wheel],
.lenis [data-lenis-prevent-touch],
.lenis [data-lenis-prevent-vertical],
.lenis [data-lenis-prevent-horizontal] {
    overscroll-behavior: contain;
}

.lenis.lenis-smooth iframe {
    pointer-events: none;
}

@keyframes ia-in {
    from { opacity: 0; translate: var(--ia-from, 0 24px); scale: var(--ia-scale, 1); }
    to   { opacity: 1; translate: 0 0; scale: 1; }
}

@keyframes ia-out {
    from { opacity: 1; translate: 0 0; }
    to   { opacity: 0; translate: var(--ia-to, 0 0); }
}

@keyframes ia-float {
    0%, 100% { translate: 0 0; }
    50%      { translate: 0 -8px; }
}

@keyframes ia-grow {
    from { scale: .96; }
    to   { scale: 1; }
}

@keyframes ia-line {
    from { scale: 0 1; }
    to   { scale: 1 1; }
}

@keyframes ia-pop {
    0%   { opacity: 0; scale: .3; }
    70%  { opacity: 1; scale: 1.12; }
    100% { opacity: 1; scale: 1; }
}

@keyframes ia-pulse {
    0%, 100% { scale: 1; }
    50%      { scale: 1.14; }
}

@keyframes ia-bounce {
    0%, 100% { translate: 0 0; }
    40%      { translate: 0 -10px; }
    70%      { translate: 0 -4px; }
}

@keyframes ia-word {
    from { translate: 0 110%; }
    to   { translate: 0 0; }
}

/* ---------- reveal directions ---------- */

[data-reveal]          { --ia-from: 0 var(--ia-dist, 24px); }
[data-reveal="down"]   { --ia-from: 0 calc(var(--ia-dist, 24px) * -1); }
[data-reveal="left"]   { --ia-from: -48px 0; }
[data-reveal="right"]  { --ia-from: 48px 0; }
[data-reveal="zoom"]   { --ia-from: 0 0; --ia-scale: .94; }
[data-reveal="fade"]   { --ia-from: 0 0; }

/* media and big blocks travel further */
[data-reveal]:is(form, .mission-image-card, .office-image-card, .join-form-card, .brand-form-wrapper,
    .contact-form-content, .map-wrapper, .newsletter-wrapper, .trusted-brands-wrapper, .position-relative,
    .col-xl-9, .stats-wrapper, .cta-wrapper) {
    --ia-dist: 40px;
}

/* sideways reveals only on desktop; phones and tablets get "up" */
@media (max-width: 991.98px) {
    [data-reveal="left"],
    [data-reveal="right"] {
        --ia-from: 0 var(--ia-dist, 24px);
    }
}

/* ---------- start states + reveal (text, headings, blocks: once) ---------- */

.js:not(.motion-off) [data-reveal]:not(.is-revealed),
.js:not(.motion-off) [data-reveal-card]:not(.is-in) {
    opacity: 0;
}

.js:not(.motion-off) [data-reveal].is-revealed {
    animation: ia-in .7s var(--ia-ease) var(--reveal-delay, 0ms) both;
}

/* ---------- cards: in AND out, from the direction you scroll ---------- */

.js:not(.motion-off) [data-reveal-card].is-in {
    animation: ia-in .7s var(--ia-ease) var(--reveal-delay, 0ms) both;
}

.js:not(.motion-off) [data-reveal-card].is-in.from-below { --ia-from: 0 40px; }
.js:not(.motion-off) [data-reveal-card].is-in.from-above { --ia-from: 0 -40px; }

.js:not(.motion-off) [data-reveal-card].is-out {
    animation: ia-out .45s var(--ia-ease) both;
}

.js:not(.motion-off) [data-reveal-card].is-out.to-above { --ia-to: 0 -28px; }
.js:not(.motion-off) [data-reveal-card].is-out.to-below { --ia-to: 0 28px; }

/* ---------- hero entrance (CSS only, starts at first paint) ---------- */

.js:not(.motion-off) [data-hero] {
    --ia-from: 0 28px;
    animation: ia-in .9s var(--ia-ease) calc(var(--hero-i, 0) * 110ms + 60ms) both;
}

/* hero picture: scale only, never hidden (it's the page's largest paint) */
.js:not(.motion-off) .ia-hero-media > img {
    animation: ia-grow 1.2s var(--ia-ease) both;
}

/* floating cards: arrive, then bob gently */
.js:not(.motion-off) .hero-section .floating-card,
.js:not(.motion-off) .hero-section .floating-card2,
.js:not(.motion-off) .video-hero-section .hero-stat-card,
.js:not(.motion-off) .video-hero-section .hero-content-card,
.js:not(.motion-off) .mission-floating-card {
    animation: ia-in .8s var(--ia-ease) .55s both, ia-float 6s ease-in-out 1.5s infinite;
}

.js:not(.motion-off) .hero-section .floating-card2,
.js:not(.motion-off) .video-hero-section .hero-content-card {
    animation-delay: .7s, 2.6s;
}

/* ---------- "How It Works": dashed line draws, numbers pop ---------- */

.js:not(.motion-off) .step-item .step-line {
    scale: 0 1;
    transform-origin: 0 50%;
}

.js:not(.motion-off) .step-item.is-in .step-line {
    animation: ia-line .9s var(--ia-ease) calc(var(--reveal-delay, 0ms) + 250ms) both;
}

.js:not(.motion-off) .step-item.is-in .step-num {
    animation: ia-pop .55s var(--ia-ease) calc(var(--reveal-delay, 0ms) + 150ms) both;
}

/* ---------- small touches ---------- */

.js:not(.motion-off) .platform-item.is-in .platform-icon {
    animation: ia-pulse .9s var(--ia-ease) calc(var(--reveal-delay, 0ms) + 250ms) both;
}

.js:not(.motion-off) .category-card:hover .category-icon {
    animation: ia-bounce .6s var(--ia-ease);
}

.trusted-logos:hover .logo-track {
    animation-play-state: paused;
}

/* ---------- statement headlines: word-by-word ---------- */

.js:not(.motion-off) [data-split]:not(.is-revealed) .ia-word__in {
    translate: 0 110%;
}

.js:not(.motion-off) [data-split].is-revealed .ia-word__in {
    animation: ia-word .9s var(--ia-ease) calc(var(--i, 0) * 60ms) both;
}

/* ---------- reduced motion: nothing moves, everything visible ---------- */

@media (prefers-reduced-motion: reduce) {
    .logo-track {
        animation: none !important;
        width: auto;
        flex-wrap: wrap;
        justify-content: center;
        row-gap: 18px;
    }

    .logo-item:nth-child(n+8) {
        display: none;
    }

    .category-card:hover .category-icon {
        animation: none !important;
    }

    .ia-tile img,
    .ia-tile__play,
    .ia-tile__caption,
    .ia-row__body,
    .ia-row__arrow,
    .ia-switch__thumb,
    .ia-top {
        transition: none !important;
    }
}

/* =========================================================
   Content-phase motion (driven by assets/js/animations-plus.js)
   Same rules as above: opacity + translate/scale keyframes
   (clip-path for the wipe), started by IntersectionObserver,
   paused off screen, off under reduced motion, and everything
   stays visible without JavaScript.
========================================================= */

@keyframes ia-wipe {
    from { clip-path: inset(0 100% 0 0 round 24px); }
    to   { clip-path: inset(0 0 0 0 round 24px); }
}

@keyframes ia-rot-in {
    from { opacity: 0; translate: 0 100%; }
    to   { opacity: 1; translate: 0 0; }
}

@keyframes ia-rot-out {
    from { opacity: 1; translate: 0 0; }
    to   { opacity: 0; translate: 0 -100%; }
}

@keyframes ia-marquee-rev {
    from { translate: -33.3333% 0; }
    to   { translate: 0 0; }
}

@keyframes ia-spin {
    to { --ia-angle: 360deg; }
}

/* wipe reveal: leaves no clip-path behind, so shadows and hovers stay intact */
.js:not(.motion-off) [data-reveal="wipe"].is-revealed {
    animation: ia-wipe 1.1s var(--ia-ease) var(--reveal-delay, 0ms) backwards;
}

/* rotating headline words */
.js:not(.motion-off) .ia-rotate__item.is-in {
    animation: ia-rot-in .6s var(--ia-ease) both;
}

.js:not(.motion-off) .ia-rotate__item.is-out {
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    animation: ia-rot-out .5s var(--ia-ease) both;
}

/* process line fills with scroll; steps light up as it reaches them (full line without motion) */
.js:not(.motion-off) .ia-timeline__fill {
    scale: 1 var(--line, 0);
}

.js:not(.motion-off) .ia-timeline__step:not(.is-lit) .ia-timeline__dot {
    background: #fff;
    border-color: #e6d7ff;
    color: var(--ia-purple);
    box-shadow: none;
}

.js:not(.motion-off) .ia-timeline__step.is-lit .ia-timeline__card {
    border-color: #e2d3ff;
    box-shadow: 0 12px 28px rgba(111, 50, 229, .08);
}

/* reverse marquee strip: runs while on screen, pauses on hover */
.ia-strip__track {
    animation: ia-marquee-rev 42s linear infinite;
}

.js .ia-strip:not(.is-on) .ia-strip__track,
.ia-strip:hover .ia-strip__track {
    animation-play-state: paused;
}

/* glow border rotates only while on screen */
.js:not(.motion-off) .ia-glow.is-on {
    animation: ia-spin 6s linear infinite;
}

/* subtle 3D tilt, mouse only (animations-plus.js sets --rx / --ry, max 6deg) */
@media (hover: hover) and (pointer: fine) {
    .js:not(.motion-off) [data-tilt] {
        transition: transform .6s var(--ia-ease), box-shadow .3s ease, border-color .3s ease;
    }

    .js:not(.motion-off) [data-tilt].is-tilting {
        transform: perspective(900px) rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg));
        transition: transform .12s linear, box-shadow .3s ease, border-color .3s ease;
    }
}

@media (prefers-reduced-motion: reduce) {
    .ia-strip__track {
        animation: none !important;
        width: auto;
        justify-content: center;
    }

    .ia-strip__set {
        flex-wrap: wrap;
        justify-content: center;
        row-gap: 10px;
    }

    .ia-strip__set[aria-hidden="true"] {
        display: none;
    }

    .ia-glow,
    .ia-faq .accordion-button::before,
    .ia-timeline__dot,
    .ia-timeline__card,
    .ia-link i,
    .ia-guide,
    .ia-guide__more i,
    .ia-indchip,
    .ia-quick,
    .ia-quick__arrow {
        animation: none !important;
        transition: none !important;
    }
}

/* glow cards that also reveal: run both animations together (otherwise the spin would replace the reveal) */
.js:not(.motion-off) .ia-glow.is-on[data-reveal-card].is-in {
    animation: ia-in .7s var(--ia-ease) var(--reveal-delay, 0ms) both, ia-spin 6s linear infinite;
}

.js:not(.motion-off) .ia-glow.is-on[data-reveal-card].is-out {
    animation: ia-out .45s var(--ia-ease) both, ia-spin 6s linear infinite;
}

.js:not(.motion-off) .ia-glow.is-on[data-reveal="wipe"].is-revealed {
    animation: ia-wipe 1.1s var(--ia-ease) var(--reveal-delay, 0ms) backwards, ia-spin 6s linear infinite;
}