/* =========================================================
   MYFUNADS — HOMEPAGE INTERACTION LAYER
   Hero entrance, pointer depth, button states and scroll
   reveals. Loaded after home.css and purely additive.

   Motion here uses the independent `translate` / `scale`
   properties (and `filter: opacity()`), so it composes with
   the GSAP `transform` / `opacity` tweens in js/scroll.js
   instead of overriding them.
========================================================= */


/* =====================================================
   HERO TITLE LINES
   `.hero-title span` paints a gradient on every span in
   the title; reset it for the line wrappers so only the
   accent word keeps it.
===================================================== */

.hero-title .hero-line,
.hero-title .hero-line-inner {
    background: none;
    -webkit-background-clip: border-box;
    background-clip: border-box;
    color: inherit;
}

.hero-title .hero-line {
    display: block;
    perspective: 900px;
}

.hero-title .hero-line-inner {
    display: inline-block;
    transform-origin: 50% 100%;
}


/* =====================================================
   HERO COPY SCRIM
   Soft shadow pool behind the copy so the description
   stays legible over the bright accretion disk.
===================================================== */

.hero-content::before {
    content: "";
    position: absolute;
    inset: -14% -16% -18%;
    z-index: -1;
    pointer-events: none;
    background:
        radial-gradient(
            closest-side,
            rgba(0, 0, 0, .46),
            rgba(0, 0, 0, .18) 62%,
            transparent
        );
}


/* =====================================================
   POINTER GLOW
===================================================== */

.hero-pointer-glow {
    position: absolute;
    inset: 0;
    z-index: 1;
    pointer-events: none;
    opacity: 0;
    background:
        radial-gradient(
            560px circle at var(--gx, 50%) var(--gy, 45%),
            rgba(244, 123, 32, .15),
            transparent 62%
        );
    mix-blend-mode: screen;
    transition: opacity .9s ease;
}

.hero.is-pointer-active .hero-pointer-glow {
    opacity: 1;
}


/* =====================================================
   POINTER DEPTH (desktop pointers only)
   --mx / --my run from -1 to 1 and are eased in JS.
   Layers move by different amounts to create depth:
   background drifts against the pointer, content and
   glass cards drift with it.
===================================================== */

@media (hover: hover) and (pointer: fine) and (prefers-reduced-motion: no-preference) {

    .hero {
        --mx: 0;
        --my: 0;
    }

    .hero-black-hole {
        scale: 1.04;
        translate:
            calc(var(--mx) * -16px)
            calc(var(--my) * -11px);
    }

    .hero-content {
        translate:
            calc(var(--mx) * 9px)
            calc(var(--my) * 7px);
    }

    .orbit-data {
        translate:
            calc(var(--mx) * var(--depth, 24) * 1px)
            calc(var(--my) * var(--depth, 24) * 1px);
    }

    .traffic-data { --depth: 30; }
    .campaigns-data { --depth: 22; }
    .conversion-data { --depth: 18; }
    .reach-data { --depth: 34; }
}


/* =====================================================
   HERO ENTRANCE
   `backwards` fill only: once each animation ends the
   element returns to its normal styles, so GSAP's scroll
   timeline always reads clean start values.
===================================================== */

@media (prefers-reduced-motion: no-preference) {

    .hero-black-hole {
        animation: mfxHoleIn 2.4s cubic-bezier(.16, 1, .3, 1) backwards;
    }

    .hero-eyebrow {
        animation: mfxRise .9s cubic-bezier(.16, 1, .3, 1) .25s backwards;
    }

    .hero-title .hero-line-inner {
        animation: mfxLineIn 1.15s cubic-bezier(.16, 1, .3, 1) backwards;
    }

    .hero-title .hero-line:nth-child(1) .hero-line-inner {
        animation-delay: .38s;
    }

    .hero-title .hero-line:nth-child(2) .hero-line-inner {
        animation-delay: .52s;
    }

    .hero-description {
        animation: mfxRise 1s cubic-bezier(.16, 1, .3, 1) .78s backwards;
    }

    .hero-actions .hero-button {
        animation: mfxPop .9s cubic-bezier(.16, 1, .3, 1) .95s backwards;
    }

    .hero-actions .hero-button + .hero-button {
        animation-delay: 1.05s;
    }

    /* Keep the existing float loops; add the entrance first. */

    .traffic-data {
        animation:
            mfxCardIn 1.2s cubic-bezier(.16, 1, .3, 1) 1.1s backwards,
            cardFloatLeft 6s ease-in-out infinite;
    }

    .campaigns-data {
        animation:
            mfxCardIn 1.2s cubic-bezier(.16, 1, .3, 1) 1.22s backwards,
            cardFloatRight 7s ease-in-out infinite;
    }

    .conversion-data {
        animation:
            mfxCardIn 1.2s cubic-bezier(.16, 1, .3, 1) 1.34s backwards,
            cardFloatLeft 7.5s ease-in-out infinite;
    }

    .reach-data {
        animation:
            mfxCardIn 1.2s cubic-bezier(.16, 1, .3, 1) 1.46s backwards,
            cardFloatRight 6.5s ease-in-out infinite;
    }

    .scroll-indicator {
        animation: mfxFade 1s ease 1.8s backwards;
    }
}

@keyframes mfxHoleIn {
    from {
        opacity: 0;
        scale: 1.18;
    }
}

@keyframes mfxRise {
    from {
        opacity: 0;
        translate: 0 18px;
    }
}

@keyframes mfxLineIn {
    from {
        opacity: 0;
        transform: translateY(42%) rotateX(-68deg);
        filter: blur(8px);
    }
}

@keyframes mfxPop {
    from {
        opacity: 0;
        translate: 0 16px;
        scale: .92;
    }
}

@keyframes mfxCardIn {
    from {
        filter: opacity(0) blur(10px);
        scale: .84;
    }
}

@keyframes mfxFade {
    from {
        opacity: 0;
    }
}


/* =====================================================
   HERO BUTTONS — sheen, magnetic pull, press
===================================================== */

.hero-button {
    transition:
        transform .3s ease,
        translate .55s cubic-bezier(.16, 1, .3, 1),
        scale .2s ease,
        color .3s ease,
        background .3s ease,
        border-color .3s ease,
        box-shadow .3s ease;
}

.hero-button::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 1;
    pointer-events: none;
    background:
        linear-gradient(
            110deg,
            transparent 30%,
            rgba(255, 255, 255, .24) 50%,
            transparent 70%
        );
    translate: -120% 0;
    transition: translate .9s cubic-bezier(.16, 1, .3, 1);
}

.hero-button:hover::before {
    translate: 120% 0;
}

.hero-button-primary:hover {
    box-shadow:
        0 16px 40px rgba(244, 123, 32, .28);
}

.hero-button:active {
    scale: .97;
}


/* =====================================================
   PRESS + FOCUS STATES FOR EXISTING CONTROLS
===================================================== */

.mf-final-button:active,
.about-action-primary:active,
.about-action-secondary:active,
.models-arrow:active,
.how-tab:active {
    scale: .96;
}

.mf-choice:active {
    scale: .985;
}

.hero-button:focus-visible,
.mf-final-button:focus-visible,
.about-action-primary:focus-visible,
.about-action-secondary:focus-visible,
.about-circle:focus-visible,
.mf-choice:focus-visible,
.models-arrow:focus-visible,
.how-tab:focus-visible,
.mf-scale-slider:focus-visible {
    outline: 2px solid #f47b20;
    outline-offset: 4px;
}


/* =====================================================
   SCROLL REVEALS
   Class added by js/home-interactive.js, so content
   stays visible if JavaScript does not run.
===================================================== */

.mfx-reveal {
    opacity: 0;
    translate: 0 36px;
    transition:
        opacity .9s cubic-bezier(.16, 1, .3, 1),
        translate 1.1s cubic-bezier(.16, 1, .3, 1);
    transition-delay: var(--mfx-delay, 0s);
}

.mfx-reveal.is-in {
    opacity: 1;
    translate: 0 0;
}


/* =====================================================
   FLOW — "HOW IT CONNECTS" NOTES
   Small notes hung on the existing network line. Desktop
   positions are in track pixels (the SVG is 700px tall and
   centred, so "50% ± n" is a point on the line); a short
   dashed stub + dot ties each note to the line.
===================================================== */

.flow-note {
    position: absolute;
    z-index: 9;
    width: 232px;
    padding: 14px 16px 15px;
    border-radius: 16px;
    background: rgba(255, 255, 255, .78);
    border: 1px solid rgba(255, 255, 255, .9);
    box-shadow: 0 18px 44px rgba(120, 50, 20, .12);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    color: #171313;
}

.flow-note-kicker {
    display: block;
    font-size: 9px;
    font-weight: 800;
    letter-spacing: .16em;
    text-transform: uppercase;
    color: #d9600c;
}

.flow-note strong {
    display: block;
    margin-top: 6px;
    font-size: 15px;
    letter-spacing: -.02em;
}

.flow-note strong b {
    color: #ef5a46;
}

.flow-note p {
    margin: 6px 0 0;
    font-size: 12.5px;
    line-height: 1.5;
    color: rgba(23, 19, 19, .68);
}

/* stub + dot linking the note to the line */
.flow-note::before,
.flow-note::after {
    content: "";
    position: absolute;
    left: 26px;
}

.flow-note::before {
    width: 0;
    border-left: 1.5px dashed rgba(239, 90, 70, .6);
}

.flow-note::after {
    width: 9px;
    height: 9px;
    margin-left: -4px;
    border-radius: 50%;
    background: #ef5a46;
    box-shadow: 0 0 0 5px rgba(239, 90, 70, .1);
}

/* below the flat stretch of the line (line at 50%) */
.flow-note-1 {
    left: 3700px;
    top: calc(50% + 44px);
}

.flow-note-1::before {
    top: -44px;
    height: 44px;
}

.flow-note-1::after {
    top: -48px;
}

/* above the line where it dips to ~50% + 126px */
.flow-note-2 {
    left: 5560px;
    bottom: calc(50% - 86px);
}

.flow-note-2::before {
    bottom: -40px;
    height: 40px;
}

.flow-note-2::after {
    bottom: -44px;
}

/* stacked mobile flow: notes sit between the cards */
@media (max-width: 768px) {

    .flow-note,
    .flow-note-1,
    .flow-note-2 {
        position: relative;
        left: auto;
        top: auto;
        bottom: auto;
        width: 100%;
        border-left: 3px solid #ef5a46;
    }

    .flow-note::before,
    .flow-note::after {
        display: none;
    }
}


/* =====================================================
   GROWTH DASHBOARD — counters + illustrative chart
===================================================== */

/* top-left: the bars rise to the right, so this corner is free */
.dashboard-chart-note {
    position: absolute;
    top: 10px;
    left: 12px;
    z-index: 2;
    font-size: 9px;
    font-weight: 800;
    letter-spacing: .14em;
    text-transform: uppercase;
    color: rgba(255, 255, 255, .5);
}

[data-count-to] {
    font-variant-numeric: tabular-nums;
}

/* labels wrap to one or two lines; reserve two so every
   tile's value sits on the same line */
.growth-dashboard .dashboard-metric > span {
    display: block;
    min-height: 2.5em;
}


/* =====================================================
   SCREEN-READER ONLY
===================================================== */

.mfx-sr-only {
    position: absolute !important;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
    border: 0;
}


/* =====================================================
   SCROLL PROGRESS
===================================================== */

.mfx-progress {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 2px;
    z-index: 99998;
    pointer-events: none;
    transform-origin: 0 50%;
    scale: var(--mfx-progress, 0) 1;
    background: linear-gradient(90deg, #f47b20, #ff6b4f);
    box-shadow: 0 0 12px rgba(244, 123, 32, .45);
}


/* =====================================================
   REDUCED MOTION
===================================================== */

@media (prefers-reduced-motion: reduce) {

    .mfx-reveal {
        opacity: 1;
        translate: none;
        transition: none;
    }

    .hero-button::before {
        display: none;
    }

    .hero-button {
        translate: none !important;
    }

    /* the advertiser logo marquees hold still (two classes to
       outrank the reverse row's animation shorthand in home.css) */
    .advertiser-loop .advertiser-loop-track {
        animation-play-state: paused;
    }
}