/* «Vendemos tiempo» · the brand close (Alberto, 27-sep: «al final del todo que
   el icono de Vibilog se ponga al centro, se agrande el cuadro, ponga vibilog
   escrito y el icono haga esa animación, con un poco de difuminado el fondo»).
   Last 7 % of the scroll, outside the camera:
     93      hand-off: the piece in the calendar hides and an identical tile
             takes its place on screen (--sx/--sy/--ss: where the piece sits in
             the last shot, as seen from the stage centre, and its size)
     93→96.5 it travels to the centre and grows; the calendar blurs behind
     «vibilog» is under the V all along, as in every tile (29-09-2026): the calendar's tile
             already carries it, so the hand-off at 93 is the same drawing growing
     96.8→99.5 the signature click (halves ∓5px → ±.35px → none, see
             vibilog-pieza.css), edge flash at 99.2
   Only while live: without JS or with reduced motion the page ends on the
   calendar, which says more than the logo. */
.time-brand{position:absolute;z-index:7;inset:0;pointer-events:none;--sx:-13.2cqw;--sy:8.85cqw;--ss:.2316}
.time-story:not(.is-live) .time-brand{display:none}
.time-brand::before{content:"";position:absolute;inset:0;background:#eef1f780;-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);opacity:0}
.time-brand .vb-piece{left:50%;top:50%;width:19cqw;translate:-50% -50%;border-radius:4cqw;opacity:0}
.is-live .time-brand::before,.is-live .time-brand .vb-piece,.is-live .time-brand .vb-l,.is-live .time-brand .vb-r,.is-live .tw .tv{animation-duration:10s;animation-timing-function:linear;animation-fill-mode:both;animation-play-state:paused}
.is-live .time-brand::before{animation-name:brand-veil}
.is-live .time-brand .vb-piece{animation-name:brand-move,brand-edge}
.is-live .time-brand .vb-l{animation-name:brand-l}
.is-live .time-brand .vb-r{animation-name:brand-r}
/* The calendar's own piece steps aside at the hand-off (visibility, so its
   own opacity keyframes stay untouched). */
.is-live .tw .tv{animation-name:tw-piece,tw-edge,brand-hand}
@keyframes brand-hand{0%,93.1%{visibility:visible}93.15%,100%{visibility:hidden}}
@keyframes brand-veil{0%,93%{opacity:0;animation-timing-function:cubic-bezier(.4,0,.2,1)}96.5%,100%{opacity:1}}
@keyframes brand-move{
  0%,93%{opacity:0;transform:translate(var(--sx),var(--sy)) scale(var(--ss))}
  93.1%{opacity:1;transform:translate(var(--sx),var(--sy)) scale(var(--ss));animation-timing-function:cubic-bezier(.65,0,.35,1)}
  96.5%,100%{opacity:1;transform:none}}
@keyframes brand-l{0%,96.8%{transform:none;animation-timing-function:cubic-bezier(.2,0,0,1)}97.9%{transform:translateX(-5px);animation-timing-function:cubic-bezier(.45,0,.9,.35)}99%{transform:translateX(.35px);animation-timing-function:cubic-bezier(.2,0,.2,1)}99.5%,100%{transform:none}}
@keyframes brand-r{0%,96.8%{transform:none;animation-timing-function:cubic-bezier(.2,0,0,1)}97.9%{transform:translateX(5px);animation-timing-function:cubic-bezier(.45,0,.9,.35)}99%{transform:translateX(-.35px);animation-timing-function:cubic-bezier(.2,0,.2,1)}99.5%,100%{transform:none}}
@keyframes brand-edge{
  0%,98.9%{box-shadow:inset 0 0 0 .25cqw #c9d7f5,0 1.6cqw 3.2cqw -1.4cqw #243f7370}
  99.3%{box-shadow:inset 0 0 0 .55cqw #2453ec,0 2.4cqw 4.8cqw -2cqw #243f7380}
  100%{box-shadow:inset 0 0 0 .3cqw #c9d7f5,0 2.4cqw 4.8cqw -2cqw #243f7370}}
/* Phone: the last shot is Friday close up (camera 3.2 × at 82,44; the piece
   rests at 96.65,50.8), so the tile starts at the right edge, 14.1cqw wide
   (4.4 × 3.2; 14.08 / 40 = .352). Desktop: 4.4 / 19 = .2316. */
@media (max-width:800px){
  .time-brand{--sx:46.88cqw;--sy:21.76cqw;--ss:.352}
  .time-brand .vb-piece{width:40cqw;border-radius:8.4cqw}
  .is-live .tw .tv{animation-name:tw-piece-m,tw-edge,brand-hand}
}

/* Variant «join» (ensamble-tiempo-antes-2.html): «vibilog» waits for the click.
   The tile arrives with the V alone (93→96.2), the halves open and close
   (T = 97.9, flash 97.7→98.3), and only then the V lifts and the name comes in
   (98.3→99.6). */
.is-live .time-brand.join .vb-piece{animation-name:join-move,join-edge}
.is-live .time-brand.join .vb-l{animation-name:join-l}
.is-live .time-brand.join .vb-r{animation-name:join-r}
@keyframes join-move{
  0%,93%{opacity:0;transform:translate(var(--sx),var(--sy)) scale(var(--ss))}
  93.1%{opacity:1;transform:translate(var(--sx),var(--sy)) scale(var(--ss));animation-timing-function:cubic-bezier(.65,0,.35,1)}
  96.2%,100%{opacity:1;transform:none}}
@keyframes join-l{0%,96.2%{transform:none;animation-timing-function:cubic-bezier(.2,0,0,1)}96.9%{transform:translateX(-5px);animation-timing-function:cubic-bezier(.45,0,.9,.35)}97.9%{transform:translateX(.35px);animation-timing-function:cubic-bezier(.2,0,.2,1)}98.6%,100%{transform:none}}
@keyframes join-r{0%,96.2%{transform:none;animation-timing-function:cubic-bezier(.2,0,0,1)}96.9%{transform:translateX(5px);animation-timing-function:cubic-bezier(.45,0,.9,.35)}97.9%{transform:translateX(-.35px);animation-timing-function:cubic-bezier(.2,0,.2,1)}98.6%,100%{transform:none}}
@keyframes join-edge{
  0%,97.7%{box-shadow:inset 0 0 0 .25cqw #c9d7f5,0 1.6cqw 3.2cqw -1.4cqw #243f7370}
  98.3%{box-shadow:inset 0 0 0 .55cqw #2453ec,0 2.4cqw 4.8cqw -2cqw #243f7380}
  99.6%,100%{box-shadow:inset 0 0 0 .3cqw #c9d7f5,0 2.4cqw 4.8cqw -2cqw #243f7370}}