/* ============================================================================
   Vaucai — «Deja de pagar tantas herramientas.» (2026-10-08). The swarm:
   the apps a business pays for burst out of the phone, float in depth around
   the sentence, flip one by one into the Vaucai icon and merge into ONE.
   Choreography: hero-scroll.js. The marks only evoke each app by its colour
   and shape: none is an official logo. Without the scroll scene (no JS) the
   swarm is not shown: it is decoration, the sentence carries the message.
   ============================================================================ */

.hero-swarm { display: none; }

.hero-pin.is-scroll .hero-swarm {
    display: block;
    position: absolute;
    left: 50%;
    top: var(--msgs-top, 50%);
    width: 100vw;
    height: var(--scene-h, 100vh);
    transform: translate(-50%, -50%);
    pointer-events: none;
    visibility: hidden;
}

/* The sentence keeps a halo of the page's own colour: invisible on the
   background, it parts it from any icon that drifts or falls behind it. */
.hero-pin.is-scroll .hero-msg:first-child {
    text-shadow: 0 0 18px color-mix(in srgb, var(--bg) calc(var(--halo, 1) * 100%), transparent), 0 0 36px color-mix(in srgb, var(--bg) calc(var(--halo, 1) * 100%), transparent), 0 0 60px color-mix(in srgb, var(--bg) calc(var(--halo, 1) * 100%), transparent);
}

.sw-defs { position: absolute; width: 0; height: 0; overflow: hidden; }

/* A tile sits on the scene's centre; hero-scroll.js moves it out to its place
   (x/y), sizes it and blurs it by its depth. */
.sw-tile {
    position: absolute;
    left: 50%;
    top: 50%;
    width: var(--sz, 80px);
    height: var(--sz, 80px);
    margin: calc(var(--sz, 80px) / -2) 0 0 calc(var(--sz, 80px) / -2);
    filter: blur(var(--blur, 0px));
    perspective: 600px;
    will-change: transform, opacity;
}
.sw-par, .sw-float, .sw-card { width: 100%; height: 100%; }
.sw-par { will-change: transform; }

/* Each icon breathes on its own, out of step with the others. */
.sw-float { animation: sw-float 6s ease-in-out infinite alternate; }
.sw-tile:nth-of-type(3n) .sw-float { animation-duration: 7.4s; animation-delay: -2.1s; }
.sw-tile:nth-of-type(3n+1) .sw-float { animation-duration: 5.2s; animation-delay: -3.7s; }
.sw-tile:nth-of-type(4n) .sw-float { animation-direction: alternate-reverse; }
@keyframes sw-float {
    from { transform: translate3d(0, -4%, 0) rotate(-1.5deg); }
    to   { transform: translate3d(0, 4%, 0) rotate(1.5deg); }
}

/* The card turns over: the app in front, the Vaucai icon behind. */
.sw-card {
    position: relative;
    transform-style: preserve-3d;
}
/* ----- The icon: the SAME box as the integration logos of the home (white,
   13/78 of padding, 18/78 of corner, the same shadow), with the app's mark
   in its colour inside. Vaucai's is its logo: that box in black, white V. */
.sw-face {
    position: absolute;
    inset: 0;
    box-sizing: border-box;
    padding: 16.7%;
    border-radius: 23%;
    background: #fff;
    box-shadow: 0 12px 32px rgba(0, 0, 0, 0.45);
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
}
.sw-face > svg { display: block; width: 100%; height: 100%; }
.sw-back { transform: rotateY(180deg); }
.sw-vface {
    background: #0a0a0a;
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.14), 0 12px 32px rgba(0, 0, 0, 0.45);
}
/* The V is centred on its own bounds, optically: its weight is up in its
   arms, so it sits 2.5 units low (viewBox in index.html), and at 74 % of the
   box's width. */
.sw-face.sw-vface { padding: 12%; }
.sw-vmark { display: block; width: 100%; height: 100%; }

/* The ONE: every icon merges into it, above the sentence. */
.sw-one {
    position: absolute;
    left: 50%;
    top: 50%;
    width: var(--one, 104px);
    height: var(--one, 104px);
    margin: calc(var(--one, 104px) / -2) 0 0 calc(var(--one, 104px) / -2);
    will-change: transform, opacity;
}
.sw-one-tile {
    position: relative;
    box-sizing: border-box;
    width: 100%;
    height: 100%;
    padding: 12%;
    border-radius: 23%;
    overflow: hidden;
}
/* The flash of the punch, over the whole tile (--flash, from hero-scroll.js). */
.sw-one-tile::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 4;
    background: radial-gradient(closest-side, #fff 0%, color-mix(in srgb, var(--vaucai-blue) 70%, #fff) 60%, transparent 100%);
    opacity: var(--flash, 0);
    mix-blend-mode: screen;
}
/* Once still, a band of light sweeps the new icon. */
.sw-shine {
    position: absolute;
    top: -20%;
    bottom: -20%;
    left: -70%;
    width: 50%;
    background: linear-gradient(90deg, transparent 0%, rgba(255, 255, 255, 0.04) 25%, rgba(255, 255, 255, 0.34) 50%, rgba(255, 255, 255, 0.04) 75%, transparent 100%);
    transform: skewX(-18deg);
    opacity: 0;
    z-index: 4;
    pointer-events: none;
}
/* Its light: a brand-blue halo that flares as the icons land in it and then
   settles. Its opacity is driven through --glow by hero-scroll.js. */
.sw-one::before {
    content: "";
    position: absolute;
    inset: -90%;
    border-radius: 50%;
    background: radial-gradient(closest-side, color-mix(in srgb, var(--vaucai-blue) 55%, transparent) 0%, color-mix(in srgb, var(--vaucai-blue) 18%, transparent) 45%, transparent 100%);
    opacity: var(--glow, 0);
    transform: scale(calc(0.6 + var(--glow, 0) * 0.4));
}
/* The wave the ONE sends out as it lands. */
.sw-ring {
    position: absolute;
    inset: -6%;
    border-radius: 30%;
    border: 2px solid var(--vaucai-blue);
    box-shadow: 0 0 24px color-mix(in srgb, var(--vaucai-blue) 60%, transparent);
    opacity: 0;
    pointer-events: none;
}
/* The sparks the punch throws out. */
.sw-spark {
    position: absolute;
    left: 50%;
    top: 50%;
    width: 6px;
    height: 6px;
    margin: -3px 0 0 -3px;
    border-radius: 50%;
    background: #fff;
    box-shadow: 0 0 8px 2px color-mix(in srgb, var(--vaucai-blue) 85%, transparent);
    opacity: 0;
    pointer-events: none;
}