/* ============================================================================
   Vaucai — the home's opening scroll (2026-10-07). Choreography and the why:
   hero-scroll.js. Without JS the hero stays still and the messages sit in
   flow below it, readable, in their final colours.
   ============================================================================ */

.hero.hero-scroll {
    display: block;
    overflow: visible;
}

/* ----- The messages. Type comes from the shared rule with
   .integrations-title (index.html): one look for every sentence of the page. */
.hero-msgs {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: clamp(3rem, 8vh, 6rem);
    padding: clamp(4rem, 10vh, 7rem) 24px 0;
}
.hero-msg.is-brand { color: var(--vaucai-blue); }

/* Scroll mode: the messages share one cell centred on the screen. */
.hero-pin.is-scroll { position: relative; }
.hero-pin.is-scroll .hero-msgs {
    position: absolute;
    left: 50%;
    top: var(--msgs-top, 50%);
    width: min(100vw, 720px);
    transform: translate(-50%, -50%);
    display: grid;
    place-items: center;
    gap: 0;
    padding: 0;
    pointer-events: none;
}
.hero-pin.is-scroll .hero-msg,
.hero-pin.is-scroll .hero-final { grid-area: 1 / 1; }
/* The messages keep the 92vw they always had (4vw of air per side); the
   integrations block takes the full width it had as its own section, so its
   logos wrap 4 + 3 and its button stays on one line. */
.hero-pin.is-scroll .hero-msg { padding: 0 4vw; box-sizing: border-box; }
.hero-pin.is-scroll .hero-final { width: 100%; box-sizing: border-box; }
/* The last screen has a button and tooltips: it takes the pointer back. */
.hero-pin.is-scroll .hero-final { pointer-events: auto; }
/* Scroll mode: the crop is a MASK, not a height. The image is laid out whole
   from the start (its extra height cancelled by a negative margin, so nothing
   around it moves) and the opening only slides the mask's size: no layout and
   no re-raster of the phone per frame, which is what made it stutter on a
   phone. --full-h, --grow and --mask-h come from hero-scroll.js. */
.hero-pin.is-scroll .mockup-masked {
    width: 100%;
    aspect-ratio: auto;
    height: var(--full-h);
    margin-bottom: calc(-1 * var(--grow, 0px));
    -webkit-mask-image: linear-gradient(to bottom, #000 0%, #000 89%, transparent 100%);
    mask-image: linear-gradient(to bottom, #000 0%, #000 89%, transparent 100%);
    -webkit-mask-size: 100% var(--mask-h);
    mask-size: 100% var(--mask-h);
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
}

/* The hero photo, wrapped so the scene can hold it fixed and fade it
   (the photo itself carries a CSS entrance animation that would override an
   inline opacity). At rest the wrapper sits at the top of the document, so
   the photo lands exactly where it always did. */
.hero-backdrop-wrap {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 0;
    z-index: 0;
    pointer-events: none;
}

/* Computer: the hero photo ends with a hard cut. There it is pure background
   black, so the cut is invisible, while the 16px masked fade it had added a
   dithered band one level darker than the page, which climbed with the
   scroll. On a phone the photo shows, so it keeps its fade. */
@media (min-width: 769px) {
    /* (0,2,0): the base rule in index.html loads after this sheet. */
    .hero-backdrop-wrap .hero-backdrop {
        -webkit-mask-image: linear-gradient(to bottom, #000 var(--cta-fade-end, 82%), transparent var(--cta-fade-end, 82%));
        mask-image: linear-gradient(to bottom, #000 var(--cta-fade-end, 82%), transparent var(--cta-fade-end, 82%));
    }
}

/* Computer: no bottom veil. While the stage is pinned the hero is thousands of
   pixels tall, so its 10 % fade stretched over ~400px of plain background and
   was rasterised with a faint dithered striping. There it covers nothing: the
   photo already ends in black and the cursor fluid has its own fade. */
@media (min-width: 769px) {
    .hero.hero-scroll::after { display: none; }
}

/* The stage is its own layer from the first paint: promoted only when the
   scroll starts moving it, the phone was re-rasterised at that instant and
   visibly jumped. */
.hero-pin.is-scroll .hero-stage { will-change: transform; }

/* Computer: each message on ONE line while it fits. They shared the 580px
   max-width of the integrations title, which split «Deja de pagar tantas
   herramientas.» into three short lines on a wide screen. If a narrow window
   cannot hold the line, it breaks into two balanced ones (text-wrap from the
   shared rule). The integrations block keeps its own 720px. */
@media (min-width: 769px) {
    .hero-pin.is-scroll .hero-msgs { width: min(100vw, 1440px); }
    .hero-pin.is-scroll .hero-msg { max-width: none; padding: 0 24px; }
    /* Poster size: with a scenery behind each sentence (the swarm, the
       impossible program, the birth) 48px read small. ~75px at 1440 wide;
       too long for one line, it breaks into two balanced ones. Only the
       three messages: the integrations title keeps its size. */
    .hero-pin.is-scroll .hero-msg {
        font-size: clamp(3rem, 5.2vw, 5rem);
        line-height: 1.04;
        letter-spacing: -0.035em;
    }
    /* The integrations screen at the size of the others: the title at the
       sentences' poster size, and fourteen logos at 96px, two rows of seven
       (the last seven only on a computer: a phone keeps its seven). */
    .hero-pin.is-scroll .hero-final { max-width: 1180px; margin-left: auto; margin-right: auto; }
    .hero-pin.is-scroll .integrations-title {
        max-width: none;
        font-size: clamp(3rem, 5.2vw, 5rem);
        line-height: 1.04;
        letter-spacing: -0.035em;
    }
    .hero-pin.is-scroll .integration-logos { max-width: 816px; gap: 24px; }
    .hero-pin.is-scroll .integration-logo { width: 96px; height: 96px; }
    .hero-pin.is-scroll .integration-logo-inner { padding: 16px; border-radius: 22px; }
}

/* The seven logos that only a computer shows (see above), with their own
   tilt and breath like the first seven (index.html). */
@media (max-width: 768px) {
    .integration-logo-desk { display: none; }
}
.integration-logo-8  { --rot:  6deg; --float-dur: 11s;   --float-delay: 0.9s; }
.integration-logo-9  { --rot: -5deg; --float-dur: 12.2s; --float-delay: 2.2s; }
.integration-logo-10 { --rot:  4deg; --float-dur: 9.8s;  --float-delay: 0.3s; }
.integration-logo-11 { --rot: -6deg; --float-dur: 10.8s; --float-delay: 1.6s; }
.integration-logo-12 { --rot:  5deg; --float-dur: 12.8s; --float-delay: 0.7s; }
.integration-logo-13 { --rot: -4deg; --float-dur: 11.6s; --float-delay: 2.6s; }
.integration-logo-14 { --rot:  6deg; --float-dur: 10.2s; --float-delay: 1.1s; }

/* ----- What is not on screen does not move (2026-10-08). On a phone,
   hero-scroll.js puts each scenery of the scene to sleep (.is-dormida) while
   its screen is not on stage; a computer never gets the class. Each
   never-ending animation of the scene is named here, one by one, and holds
   where it is until its screen comes back: only those (a one-off flash is
   never frozen halfway), and a list a checker keeps whole
   (check_escena_duerme). A universal rule (.is-dormida *) was measured
   too: on an iPhone's engine it left the impossible program's screen far
   slower. */
.is-dormida .sw-float,
.is-dormida .cr-ring,
.is-dormida .integration-logo-inner,
.is-dormida .catalog-cta-btn,
.is-dormida .cta-bloom,
.is-dormida .cta-ring {
    animation-play-state: paused !important;
}