/* ============================================================================
   Vaucai — «Crea tu propia IA» (2026-10-08). The sentence condenses into the
   button: a ring of light closes in on it and «Crear mi Vaucai» materialises
   inside, on the brand's blue. A cursor (a touch on a phone) comes in, hovers
   and clicks it; the button opens into the outline of the hero's phone, its
   ring tracing the edge, and the phone emerges turning in 3D. There the
   naming (a real WhatsApp onboarding, rendered in Rotato) plays with the
   scroll.
   Choreography: hero-scroll.js. Everything here is born hidden: without the
   scroll scene (no JS) it is not shown.
   ============================================================================ */

.hero-create { display: none; }

.hero-pin.is-scroll .hero-create {
    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 light under the button, and later behind the phone. */
.cr-bloom {
    position: absolute;
    left: 50%;
    top: 50%;
    width: 760px;
    height: 760px;
    margin: -380px 0 0 -380px;
    border-radius: 50%;
    background: radial-gradient(closest-side, color-mix(in srgb, var(--vaucai-blue) 34%, transparent) 0%, color-mix(in srgb, var(--vaucai-blue) 10%, transparent) 48%, transparent 100%);
    opacity: 0;
}

/* ----- The button. */
.cr-pill {
    position: absolute;
    left: 50%;
    top: 50%;
    width: var(--cr-btn-w, 380px);
    height: var(--cr-btn-h, 72px);
    box-sizing: border-box;
    border-radius: 999px;
    visibility: hidden;
    opacity: 0;
    will-change: transform, width, height;
}
/* Its body: the brand blue, lit from above, with a lit top edge. */
.cr-fill {
    position: absolute;
    inset: 0;
    border-radius: inherit;
    overflow: hidden;
    background: linear-gradient(180deg, color-mix(in srgb, var(--vaucai-blue) 72%, #fff) 0%, var(--vaucai-blue) 52%, color-mix(in srgb, var(--vaucai-blue) 82%, #000) 100%);
    box-shadow:
        inset 0 1.5px 0 rgba(255, 255, 255, 0.5),
        inset 0 -3px 8px rgba(0, 0, 0, 0.18),
        0 22px 60px color-mix(in srgb, var(--vaucai-blue) 45%, transparent),
        0 4px 12px rgba(0, 0, 0, 0.45);
}
/* The flash of the click. */
.cr-fill::after {
    content: "";
    position: absolute;
    inset: 0;
    background: #fff;
    opacity: var(--cr-flash, 0);
}
/* A band of light that sweeps it when the cursor is over it. */
.cr-shine {
    position: absolute;
    top: -30%;
    bottom: -30%;
    left: -40%;
    width: 34%;
    background: linear-gradient(90deg, transparent 0%, rgba(255, 255, 255, 0.45) 50%, transparent 100%);
    transform: skewX(-20deg);
    opacity: 0;
}
/* The ring of light that turns around it. */
@property --cr-turn {
    syntax: '<angle>';
    initial-value: 0deg;
    inherits: false;
}
.cr-ring {
    position: absolute;
    inset: -3px;
    border-radius: inherit;
    padding: 2px;
    background: conic-gradient(from var(--cr-turn), transparent 0deg, color-mix(in srgb, var(--vaucai-blue) 60%, transparent) 70deg, #fff 110deg, var(--vaucai-blue) 150deg, transparent 230deg, transparent 360deg);
    -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
    -webkit-mask-composite: xor;
    mask: linear-gradient(#000 0 0) content-box exclude, linear-gradient(#000 0 0);
    filter: drop-shadow(0 0 6px color-mix(in srgb, var(--vaucai-blue) 80%, transparent));
    animation: cr-turn 2.6s linear infinite;
    opacity: 0;
}
@keyframes cr-turn { to { --cr-turn: 360deg; } }
.cr-label {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    font-size: var(--cr-font, 22px);
    font-weight: 600;
    letter-spacing: -0.01em;
    white-space: nowrap;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.18);
    visibility: hidden;
    opacity: 0;
}

/* ----- The cursor (computer) and the touch (phone), and the click's waves. */
.cr-cursor {
    position: absolute;
    left: 50%;
    top: 50%;
    width: 30px;
    height: 30px;
    margin: -2px 0 0 -6px;
    filter: drop-shadow(0 4px 8px rgba(0, 0, 0, 0.5));
    visibility: hidden;
    opacity: 0;
}
.cr-cursor svg { display: block; width: 100%; height: 100%; }
.cr-touch {
    position: absolute;
    left: 50%;
    top: 50%;
    width: 46px;
    height: 46px;
    margin: -23px 0 0 -23px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.42);
    box-shadow: 0 0 0 1.5px rgba(255, 255, 255, 0.6), 0 6px 18px rgba(0, 0, 0, 0.35);
    visibility: hidden;
    opacity: 0;
}
.cr-wave {
    position: absolute;
    left: 50%;
    top: 50%;
    width: 140px;
    height: 140px;
    margin: -70px 0 0 -70px;
    border-radius: 50%;
    border: 1.5px solid rgba(255, 255, 255, 0.85);
    box-shadow: 0 0 18px color-mix(in srgb, var(--vaucai-blue) 60%, transparent);
    opacity: 0;
}

/* ----- The phone: the naming video (its device fills 90 % x 95 % of the
   frame), sized so the device takes ~3/4 of the screen's height, revealed
   in 3D. */
.cr-stage {
    position: absolute;
    inset: 0;
    perspective: 1400px;
}
.cr-phone {
    position: absolute;
    left: 50%;
    top: 50%;
    height: var(--cr-img-h, 80vh);
    visibility: hidden;
    opacity: 0;
    will-change: transform, opacity;
}
.cr-phone video {
    display: block;
    height: 100%;
    width: auto;
}