/* The home page's hero and «Somos Vibilog» (generador/portada.py writes the hero into index.html; tried on
   nueva first and taken to www on 29-09-2026). Scoped to .hero-flujo and .intro-pantalla.

   «Todo pasa por Vibilog». The first screen, whole: a band across it where the week's
   work, in a mess (folder colours, askew, each chip at its own speed, speeding up as it goes in), runs
   in behind the big logo — a «tunnel» the colour of the page hides what is behind it — and comes out
   on the other side in order: two straight lanes, one pace, white, a green check. At load the V's
   halves close with the click (vibilog-pieza.css's timing: T = 1000 ms, 180 ms in, a hair of
   overshoot, 70 ms to settle), the output lanes light up in blue and the first finished jobs come out.
   On a phone the flow falls from above and leaves below. Pure CSS, infinite, no pause (Alberto, knowing it
   does not meet WCAG 2.2.2): the only exception to the single loop player (CLAUDE.md). With
   reduced motion nothing moves and the band is a still composition (the mess on one side, the order
   on the other). */

.hero.hero-flujo{box-sizing:border-box;min-height:calc(100vh - 82px);min-height:calc(100svh - 82px);padding-top:0;display:flex;flex-direction:column}
.hero-flujo .hx{margin-top:auto}
.hero-flujo .motion-hint{margin-top:auto;padding:0 0 24px}
.hx{--logo-w:clamp(280px,min(38vw,56svh,calc(100svh - 380px)),540px);position:relative;height:clamp(200px,calc(var(--logo-w) * .3233 + 120px),300px)}
.hx-flow{position:absolute;inset:0;overflow:hidden}
.hx-lane{position:absolute;z-index:0;left:0;right:0;top:var(--y);height:0}
/* the still composition (the base style, which only reduced motion shows: the animations start in the middle
   of their trip): --x0 is a fraction of the free room beside the logo, 0 at the tunnel and 1 at the band's edge */
.hx-in{translate:calc((var(--logo-w) / 2 - 50%) * var(--x0)) 0}
.hx-out{translate:calc((50% - var(--logo-w) / 2) * var(--x0)) 0}
.hx-lane b{position:absolute;left:50%;top:0;display:inline-flex;align-items:center;gap:6px;box-sizing:border-box;padding:7px 12px;border-radius:10px;white-space:nowrap;font-size:13px;font-weight:600;letter-spacing:-.005em;line-height:1.2}
/* a job's trip ends just inside the tunnel's left edge; a result starts just inside its right edge */
.hx-in b{left:calc(50% - var(--logo-w) / 2 + 15px);background:var(--c);color:#27364a;transform:translate(-50%,-50%) rotate(var(--r)) scale(var(--s));box-shadow:0 8px 16px -12px #243f7373}
/* depth: the back plane small, pale and slow, under the others; the front big and fast, on top */
.hx-in.p0{opacity:.5}.hx-in.p0 b{box-shadow:none}.hx-in.p2{z-index:0}.hx-in.p2 b{box-shadow:0 14px 26px -16px #243f7380}
.hx-out b{left:calc(50% + var(--logo-w) / 2 - 70px);background:#fff;color:#17202b;border:1px solid #dce1e8;transform:translate(-50%,-50%);box-shadow:0 10px 20px -14px #243f7366}
.hx-out svg{width:14px;height:14px;fill:none;stroke:#30a46c;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.hx-rail{position:absolute;left:50%;right:0;height:1px;background:#dce1e8;transform-origin:0 50%;overflow:hidden}
.hx-rail.r1{top:36%}.hx-rail.r2{top:64%}
.hx-tunnel{position:absolute;z-index:1;top:0;bottom:0;left:50%;width:calc(var(--logo-w) + 90px);translate:-50% 0;background:#f5f6f8;-webkit-mask:linear-gradient(90deg,transparent,#000 44px,#000 calc(100% - 44px),transparent);mask:linear-gradient(90deg,transparent,#000 44px,#000 calc(100% - 44px),transparent)}
.hx-logo{position:absolute;z-index:2;inset:0;display:grid;place-items:center;margin:0;pointer-events:none}
.hx-svg{display:block;width:var(--logo-w);height:auto;overflow:visible}
.hero-flujo .wrap{padding-block:8px 0}
.hero-flujo .eyebrow{margin:0 0 14px}
.hero-flujo h1{font-size:clamp(40px,min(4.6vw,7.4svh),64px)}
.hero-flujo p.lead{max-width:560px;margin:18px auto 24px;font-size:17px}

/* reduced motion: vibilog-base.css stops every animation and the base style above is the still composition
   (the V closed, the mess on one side, the order on the other), with only the labels portada.py marks for it:
   five jobs and a result per lane on a wide screen, three jobs and one result on a narrower one and on a phone */
@media (prefers-reduced-motion:reduce) and (width >= 1200px){.hx-lane:not(.hx-still-w){display:none}}
@media (prefers-reduced-motion:reduce) and (800px < width < 1200px){.hx-lane:not(.hx-still-n){display:none}}
@media (prefers-reduced-motion:reduce) and (width <= 800px){.hx-lane:not(.hx-still-m){display:none}
  /* nothing goes behind the logo or falls in from the top in a still: the tunnel (23 px over the logo, with its
     fade) and the band's faded ends would only rub out the row above the logo (Codex, 03-10-2026, at 360 px) */
  .hx-tunnel{display:none}.hx-flow{-webkit-mask:none;mask:none}}
.hx-in{animation:hx-in var(--t) cubic-bezier(.4,0,.85,.5) var(--d) infinite}
.hx-out{animation:hx-out 4.8s linear var(--d) infinite both}
.hx-rail{animation:hx-rail 1600ms linear both}
.hx-rail::after{content:"";position:absolute;inset:0;background:#2453ec;opacity:0;animation:hx-rail-blue 1600ms linear both}
.hx-l{animation:hx-cl 1200ms linear both}
.hx-r{animation:hx-cr 1200ms linear both}
@keyframes hx-in{from{translate:-57% 0}to{translate:0 0}}
@keyframes hx-out{0%{translate:0 0;opacity:0}3%{opacity:1}100%{translate:64% 0;opacity:1}}
/* the output lanes switch on with the click: drawn out from the logo in blue, then quiet */
@keyframes hx-rail{0%,62.5%{scale:0 1;animation-timing-function:cubic-bezier(.2,0,0,1)}81%,100%{scale:1 1}}
@keyframes hx-rail-blue{0%,81%{opacity:1}100%{opacity:0}}
/* the click (units of the logo's drawing: 1.2 ≈ 5 px on a wide screen) */
@keyframes hx-cl{0%,68.3%{translate:-1.2px 0;animation-timing-function:cubic-bezier(.45,0,.9,.35)}83.3%{translate:.08px 0;animation-timing-function:cubic-bezier(.2,0,.2,1)}89.2%,100%{translate:0 0}}
@keyframes hx-cr{0%,68.3%{translate:1.2px 0;animation-timing-function:cubic-bezier(.45,0,.9,.35)}83.3%{translate:-.08px 0;animation-timing-function:cubic-bezier(.2,0,.2,1)}89.2%,100%{translate:0 0}}

/* The energy of the click, from the inside out, round the whole mark (Alberto, 29-09-2026: the V's waves
   «están perfectas, pero quiero que incluya el texto de vibilog también»). At T = 1000 ms the V closes and
   a rounded box hugging «V vibilog» (2 px of blue) moves out by 12 % of the logo's width on every side and
   fades in 690 ms; a second, paler one follows 120 ms later; under them a soft blue flash goes out in
   400 ms. Once, like the click. The boxes are the logo's own box (.hx-mark) with 4 of its units of room
   round the ink; their outline follows the radius and grows by outline-offset, the same on every side (a
   scale would stretch a box this wide). Base style: nothing (the final frame, and what reduced motion
   shows). Timing in % of 2600 ms: 38.5 = 1000 ms. */
.hx-mark{position:relative;display:block;width:var(--logo-w)}
.hx-mark>i{position:absolute;left:-4.04%;width:108.08%;top:12.5%;height:87.5%;border-radius:calc(var(--logo-w) * .07);pointer-events:none;opacity:0}
.hx-wave{outline:2px solid #2453ec;outline-offset:0}
.hx-flash{background:#2453ec;filter:blur(calc(var(--logo-w) * .035))}
.hx-mark>i{animation:hx-wave 2600ms linear both}
.hx-mark>.w2{animation-name:hx-wave2}
.hx-mark>.hx-flash{animation-name:hx-flash}
.hx-svg{position:relative}
@keyframes hx-wave{0%,38.4%{opacity:0;outline-offset:calc(var(--logo-w) * -.01)}38.5%{opacity:0;outline-offset:calc(var(--logo-w) * -.01);animation-timing-function:linear}39.6%{opacity:1;outline-offset:0px;animation-timing-function:cubic-bezier(.2,0,0,1)}65%,100%{opacity:0;outline-offset:calc(var(--logo-w) * .12)}}
@keyframes hx-wave2{0%,43%{opacity:0;outline-offset:calc(var(--logo-w) * -.01)}44.1%{opacity:.5;outline-offset:0px;animation-timing-function:cubic-bezier(.2,0,0,1)}72%,100%{opacity:0;outline-offset:calc(var(--logo-w) * .09)}}
@keyframes hx-flash{0%,38.4%{opacity:0;scale:.96}39.2%{opacity:.16;scale:1;animation-timing-function:cubic-bezier(.4,0,.2,1)}54%,100%{opacity:0;scale:1.06}}

/* a phone: the flow falls from above the logo and leaves below it, in one straight line */
@media (max-width:800px){
  .hero.hero-flujo{min-height:calc(100vh - var(--hdr,72px));min-height:calc(100svh - var(--hdr,72px))}
  /* the logo a little above the band's middle: the mess falls from above, the result has room below */
  /* --at is a length: the logo's padding-top in % would take the band's WIDTH, and the logo sat ~40 px
     below the tunnel and the lanes, which take its height (the results came out through the logo) */
  .hx{--logo-w:min(58vw,224px,32svh);--h:clamp(206px,31svh,290px);--at:calc(var(--h) * .46);height:var(--h)}
  /* The words breathe (Alberto, 29-09-2026: «todo el texto está abajo agrupado feo… subir el texto y hacer
     que respire»): the band, a little lower, sits at the top instead of being pushed down by the free
     space, the headline has room above it and the lead and the buttons some between them; what is left
     goes under the buttons, above «Baja y mira». */
  .hero-flujo .hx{margin-top:clamp(0px,1.4svh,12px)}
  .hx-logo{place-items:start center;padding-top:calc(var(--at) - var(--logo-w) * .1617)}
  .hx-lane{left:var(--y);right:auto;top:0;bottom:0;width:0;height:auto}
  /* the still composition: a fraction of the room above the logo up to where the band fades in (12 %), and
     below it down to where it fades out (90 %) */
  .hx-in{translate:0 calc((12% - var(--at) + var(--logo-w) * .1617) * var(--x0))}
  .hx-out{translate:0 calc((90% - var(--at) - var(--logo-w) * .1617) * var(--x0))}
  .hx-lane b{left:0;font-size:11.5px;padding:6px 10px}
  .hx-in:nth-child(n+7),.hx-out:is(.o2,.o4,.o6),.hx-rail{display:none}
  .hx-in b{top:calc(var(--at) - var(--logo-w) * .1617 + 3px);transform:translate(-50%,-50%) rotate(var(--r)) scale(calc(var(--s) * .82))}
  .hx-out b{top:calc(var(--at) + var(--logo-w) * .1617 - 1px)}
  .hx-out{left:50%}
  /* the flow fades in at the top of the band and out at its foot, never cut */
  .hx-flow{-webkit-mask:linear-gradient(180deg,transparent,#000 12%,#000 90%,transparent);mask:linear-gradient(180deg,transparent,#000 12%,#000 90%,transparent)}
  .hx-tunnel{left:0;right:0;top:var(--at);bottom:auto;width:auto;height:calc(var(--logo-w) * .3233 + 46px);translate:0 -50%;-webkit-mask:linear-gradient(180deg,transparent,#000 20px,#000 calc(100% - 20px),transparent);mask:linear-gradient(180deg,transparent,#000 20px,#000 calc(100% - 20px),transparent)}
  .hero-flujo .wrap{padding-block:0;margin-top:clamp(20px,5.5svh,52px)}
  /* on a phone the band needs the eyebrow's room; the headline says what we do */
  .hero-flujo .eyebrow{display:none}
  .hero-flujo h1{font-size:clamp(30px,min(9vw,5.4svh),40px)}
  .hero-flujo p.lead{margin:16px auto 22px;font-size:15px;line-height:1.55}
  .hero-flujo .motion-hint{padding-bottom:16px}
}
@media (max-width:800px){
  .hx-in{animation-name:hx-in-m}
  .hx-out{animation-name:hx-out-m}
}
@keyframes hx-in-m{from{translate:0 -58%}to{translate:0 0}}
/* one result at a time: out of the logo, down a little, gone before the text below (a third of the period) */
@keyframes hx-out-m{0%{translate:0 0;opacity:0;animation-timing-function:cubic-bezier(.16,1,.3,1)}6%{translate:0 14%;opacity:1}24%{translate:0 21%;opacity:1}32%,100%{translate:0 28%;opacity:0}}

/* «Somos Vibilog», whole in one screen: the headline, the air and the portraits' height follow
   the screen's height (the portraits crop to the face instead of shrinking the row). */
.intro.intro-pantalla{box-sizing:border-box;min-height:100vh;min-height:100svh;padding-block:clamp(40px,7svh,96px);display:flex;flex-direction:column;justify-content:center}
.intro-pantalla h2{font-size:clamp(32px,min(4.2vw,6.6svh),62px)}
.intro-pantalla .team{margin-top:clamp(28px,5svh,64px)}
.intro-pantalla .team-list img{aspect-ratio:auto;height:clamp(200px,calc(100svh - 500px),410px);object-position:50% 22%}

@media (max-width:800px){
  .intro.intro-pantalla{padding-block:clamp(28px,5svh,56px)}
  .intro-pantalla h2{font-size:clamp(30px,5.2svh,39px)}
  .intro-pantalla .intro-head p:last-child{margin-top:16px}
  .intro-pantalla .team{margin-top:clamp(20px,3.5svh,36px)}
  .intro-pantalla .team-list img{height:var(--ph)}
}