/* ==========================================================================
   Home hero motion
   1. Intro: headline rises word by word, then subtitle, oval, button, image.
   2-3. Soft static glow and ground shadow behind the illustration.
   4. Living illustration: cursor wanders and clicks, objects float,
      chart bars grow, sparks twinkle. The illustration itself never moves.
   6. Button: periodic shine + slight magnet on hover.
   Only transform/opacity are animated. Everything is off with reduced motion.
   ========================================================================== */

.hero-anim {
    --ease-out: cubic-bezier(.22, 1, .36, 1);
    --ease-spring: cubic-bezier(.34, 1.56, .64, 1);
    position: relative;
    isolation: isolate;
}

/* ---------- 1. Intro ---------- */
.hero-anim .hw {
    display: inline-block;
    overflow: hidden;
    padding-bottom: .08em;   /* descenders are not clipped */
    margin-bottom: -.08em;
    vertical-align: top;
}

.hero-anim .hw__in {
    display: inline-block;
    animation: hero-word .8s var(--ease-out) both;
    animation-delay: calc(var(--i, 0) * 70ms + 80ms);
}

@keyframes hero-word {
    from { transform: translateY(105%); }
    to   { transform: translateY(0); }
}

.hero-anim .hero-block-title-outline,
.hero-anim .hero-button,
.hero-anim .hero-after-button-text {
    animation: hero-rise .8s var(--ease-out) both;
}

.hero-anim .hero-block-title-outline { animation-delay: .55s; }
.hero-anim .hero-button              { animation-delay: .75s; }
.hero-anim .hero-after-button-text   { animation-delay: .85s; }

@keyframes hero-rise {
    from { opacity: 0; transform: translateY(16px); }
    to   { opacity: 1; transform: translateY(0); }
}

/* The oval starts drawing once the subtitle is in. */
.hero-anim .my-line-path { animation-delay: .9s; }

.hero-anim .hero-stage {
    animation: hero-stage-in 1.1s var(--ease-out) .35s both;
}

@keyframes hero-stage-in {
    from { opacity: 0; scale: .94; }
    to   { opacity: 1; scale: 1; }
}

/* ---------- 1b. Background "link network" (drawn by hero-anim.js) ----------
   Faded out under the text on the left and toward the edges, so it only
   whispers behind the illustration. */
.hero-net {
    position: absolute;
    z-index: -2;
    inset: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    opacity: 0;
    transition: opacity 1.6s ease;
    -webkit-mask-image:
        linear-gradient(90deg, rgba(0, 0, 0, .25) 0%, rgba(0, 0, 0, .25) 30%, #000 60%),
        linear-gradient(180deg, transparent 0%, #000 15%, #000 80%, transparent 100%);
    -webkit-mask-composite: source-in;
            mask-image:
        linear-gradient(90deg, rgba(0, 0, 0, .25) 0%, rgba(0, 0, 0, .25) 30%, #000 60%),
        linear-gradient(180deg, transparent 0%, #000 15%, #000 80%, transparent 100%);
            mask-composite: intersect;
}

.hero-net.is-on { opacity: 1; }

/* ---------- 2-3. Stage: soft glow + ground shadow ---------- */
.hero-stage {
    position: relative;
    isolation: isolate;
}

/* Glow behind the monitor (screen centre is about 70% / 40% of the art). */
.hero-stage__glow {
    position: absolute;
    z-index: -1;
    left: 22%;
    top: 0;
    width: 90%;
    height: 85%;
    border-radius: 50%;
    background: radial-gradient(closest-side, rgba(102, 102, 255, .16), rgba(102, 102, 255, .06) 55%, rgba(102, 102, 255, 0));
    pointer-events: none;
}

/* Contact shadow under the monitor stand and the objects on the "floor". */
.hero-stage__shadow {
    position: absolute;
    z-index: -1;
    left: 18%;
    top: 74%;
    width: 78%;
    height: 22%;
    border-radius: 50%;
    background: radial-gradient(closest-side, rgba(22, 22, 58, .10), rgba(22, 22, 58, 0));
    pointer-events: none;
}

/* ---------- 4. Living illustration ----------
   Parts of the inline SVG get classes ha-* (see hero-main-anim.svg).
   Motion is small and slow: things breathe, the cursor clicks the search
   field, chart bars grow, sparks twinkle. */
.hero-art {
    display: block;
    width: 606px;
    max-width: 100%;
    height: auto;
    overflow: visible;
}

.hero-art .ha {
    transform-box: fill-box;
    transform-origin: center;
    will-change: transform;
}

/* Cursor arrow: "alive" - drifts around the search field like a real user's
   hand, hesitates, clicks twice per loop. Origin = arrow tip (top-right). */
.hero-art .ha-cursor {
    transform-origin: 100% 0%;
    animation: ha-cursor 8s cubic-bezier(.45, 0, .25, 1) infinite;
}

@keyframes ha-cursor {
    0%, 100% { translate: 0 0;        scale: 1; }
    12%      { translate: 12px -6px;  scale: 1; }
    18%      { translate: 14px -4px;  scale: 1; }
    20%      { translate: 14px -4px;  scale: .84; }   /* click */
    23%      { translate: 14px -4px;  scale: 1; }
    38%      { translate: 30px 6px;   scale: 1; }
    44%      { translate: 27px 9px;   scale: 1; }
    58%      { translate: 44px 18px;  scale: 1; }
    62%      { translate: 44px 18px;  scale: 1; }
    64%      { translate: 44px 18px;  scale: .84; }   /* click */
    67%      { translate: 44px 18px;  scale: 1; }
    82%      { translate: 16px 10px;  scale: 1; }
    90%      { translate: 4px 3px;    scale: 1; }
}

/* Search field: light "press" in sync with both cursor clicks. */
.hero-art .ha-search {
    animation: ha-search 8s ease-in-out infinite;
}

@keyframes ha-search {
    0%, 18%, 26%, 62%, 70%, 100% { opacity: 1; }
    21%, 65%                     { opacity: .82; }
}

/* Floating objects: each on its own rhythm. */
.hero-art .ha-ask,
.hero-art .ha-cube-l,
.hero-art .ha-cube-r,
.hero-art .ha-pie,
.hero-art .ha-phone,
.hero-art .ha-cyl {
    animation: ha-bob var(--hdur, 5s) ease-in-out infinite;
}

.hero-art .ha-ask    { --hdur: 4.6s; --hd: 0s;   --hy: -7px; }
.hero-art .ha-cube-l { --hdur: 5.2s; --hd: .8s;  --hy: -9px; }
.hero-art .ha-cube-r { --hdur: 4.8s; --hd: 1.6s; --hy: -8px; }
.hero-art .ha-pie    { --hdur: 6s;   --hd: .4s;  --hy: -5px; }
.hero-art .ha-phone  { --hdur: 6.4s; --hd: 1.2s; --hy: -4px; }
.hero-art .ha-cyl    { --hdur: 5.6s; --hd: 2s;   --hy: -5px; }

@keyframes ha-bob {
    0%, 100% { translate: 0 0; }
    50%      { translate: 0 var(--hy, -6px); }
}

/* Question bubble also tilts a little, like it is "asking". */
.hero-art .ha-ask { animation-name: ha-ask; transform-origin: 50% 100%; }

@keyframes ha-ask {
    0%, 100% { translate: 0 0;               rotate: 0deg; }
    50%      { translate: 0 var(--hy, -6px); rotate: -4deg; }
}

/* Chart bars: grow one after another from their base, then settle. */
.hero-art .ha-bar {
    transform-origin: 0% 100%;
    animation: ha-bar 4.5s var(--ease-out) infinite;
}

.hero-art .ha-bar-1 { --hd: 0s; }
.hero-art .ha-bar-2 { --hd: .15s; }
.hero-art .ha-bar-3 { --hd: .3s; }

@keyframes ha-bar {
    0%, 100% { scale: 1; }
    12%      { scale: .55; }
    40%      { scale: 1.04; }
    55%      { scale: 1; }
}

/* Sparks around the monitor twinkle. */
.hero-art .ha-spark {
    animation: ha-spark 2.8s ease-in-out infinite;
}

.hero-art .ha-spark:nth-of-type(2n) { --hd: .9s; }
.hero-art .ha-spark:nth-of-type(3n) { --hd: 1.7s; }

@keyframes ha-spark {
    0%, 100% { opacity: 1;  scale: 1; }
    50%      { opacity: .25; scale: .7; }
}

/* Dotted pattern on the screen shimmers slowly. */
.hero-art .ha-dots {
    animation: ha-dots 3.6s ease-in-out infinite;
}

.hero-art .ha-dots + .ha-dots { --hd: 1.8s; }

@keyframes ha-dots {
    0%, 100% { opacity: 1; }
    50%      { opacity: .45; }
}

/* Everything is already in motion when the art appears: negative delays
   start each loop mid-way, so the rhythms are offset but nothing waits.
   Kept last: the animation shorthands above would reset the delay. */
.hero-art .ha { animation-delay: calc(-1 * var(--hd, 0s)); }

/* ---------- 6. Button ---------- */
.hero-anim .hero-button {
    position: relative;
    display: inline-block;
    overflow: hidden;
    isolation: isolate;
    translate: var(--bx, 0) var(--by, 0);
    transition: translate .35s var(--ease-out), color .2s, background .2s;
}

.hero-anim .hero-button::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    background: linear-gradient(110deg, transparent 30%, rgba(255, 255, 255, .35) 50%, transparent 70%);
    transform: translateX(-120%);
    animation: hero-shine 5s ease-in-out 2.5s infinite;
}

@keyframes hero-shine {
    0%       { transform: translateX(-120%); }
    18%, 100% { transform: translateX(120%); }
}

/* ---------- Responsive ---------- */
/* Sizes of .hero-block-right svg come from media.css. */
@media (max-width: 768px) {
    .hero-art { width: 100%; height: auto; }
}

/* ---------- Reduced motion ---------- */
@media (prefers-reduced-motion: reduce) {
    .hero-anim *,
    .hero-anim *::before,
    .hero-anim *::after {
        animation: none !important;
        transition: none !important;
    }
    .hero-anim .hero-button { translate: none; }
}