/* ==========================================================================
   Formato 16:9: reproductor de video con franjas, controles y monigotes.
   ========================================================================== */

/* Escena y franjas animadas */
.art-a {
  background: #000;
  isolation: isolate;
}

.v-scene {
  position: absolute;
  inset: 0;
  overflow: hidden;
}

.v-band {
  position: absolute;
  top: -20%;
  bottom: -20%;
  will-change: transform;
}

.v-band.b1 {
  left: 20%;
  width: 44%;
  background: #019EB5;
  animation: vPan1 11s ease-in-out infinite alternate;
}

.v-band.b2 {
  left: 66%;
  width: 12%;
  background: #006A7A;
  animation: vPan2 8s ease-in-out infinite alternate;
}

.v-band.b3 {
  left: 12%;
  width: 1.6%;
  background: #FFFFFF;
  animation: vPan3 9.5s ease-in-out infinite alternate;
}

@keyframes vPan1 {
  from {
    transform: skewX(-42deg) translateX(-24%);
  }
  to {
    transform: skewX(-42deg) translateX(22%);
  }
}

@keyframes vPan2 {
  from {
    transform: skewX(-42deg) translateX(-70%);
  }
  to {
    transform: skewX(-42deg) translateX(90%);
  }
}

@keyframes vPan3 {
  from {
    transform: skewX(-42deg) translateX(-250%);
  }
  to {
    transform: skewX(-42deg) translateX(900%);
  }
}

.art-a.paused .v-band, .art-a.paused .v-eq b {
  animation-play-state: paused;
}

.v-big {
  position: absolute;
  left: 50%;
  top: 46%;
  width: 12%;
  aspect-ratio: .86;
  background: #FFFFFF;
  clip-path: polygon(0 0,100% 50%,0 100%);
  transform: translate(-35%,-50%) scale(.6);
  opacity: 0;
  transition: opacity .25s,transform .25s;
  pointer-events: none;
  z-index: 3;
}

.art-a.paused .v-big {
  opacity: 1;
  transform: translate(-35%,-50%) scale(1);
}

.v-toggle {
  position: absolute;
  inset: 0;
  z-index: 4;
  background: transparent;
  border: 0;
  padding: 0;
  cursor: pointer;
}

.v-toggle:focus-visible {
  outline: 3px solid #FFFFFF;
  outline-offset: -6px;
}

.v-bar {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 5;
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 32px 16px 14px;
  background: linear-gradient(transparent,rgba(0,0,0,.7));
  color: #FFFFFF;
  font-size: .82rem;
  font-weight: 600;
  pointer-events: none;
}

.v-icon {
  flex: none;
  width: 11px;
  height: 13px;
  background: linear-gradient(90deg,#FFFFFF 0 36%,transparent 36% 64%,#FFFFFF 64%);
}

.art-a.paused .v-icon {
  background: #FFFFFF;
  clip-path: polygon(0 0,100% 50%,0 100%);
}

.v-track {
  position: relative;
  flex: 1;
  height: 4px;
  background: rgba(255,255,255,.28);
}

.v-track i {
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 0;
  background: #FFFFFF;
}

.v-track i::after {
  content: "";
  position: absolute;
  right: -6px;
  top: 50%;
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: #13B3CA;
  transform: translateY(-50%);
}

.v-time {
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}

.v-eq {
  display: flex;
  align-items: flex-end;
  gap: 2px;
  height: 14px;
  flex: none;
}

.v-eq b {
  width: 3px;
  height: 40%;
  background: #FFFFFF;
  animation: vEq .8s ease-in-out infinite alternate;
}

.v-eq b:nth-child(2) {
  animation-duration: .6s;
  animation-delay: -.2s;
}

.v-eq b:nth-child(3) {
  animation-duration: 1s;
  animation-delay: -.5s;
}

.v-eq b:nth-child(4) {
  animation-duration: .7s;
  animation-delay: -.35s;
}

@keyframes vEq {
  from {
    height: 20%;
  }
  to {
    height: 100%;
  }
}

.art-a .fmt {
  top: 10px;
  bottom: auto;
}

/* Versión sobre fondo blanco: monigotes y línea delgada en negro */
#formatos .art-a {
  background: #FFFFFF;
}

.art-a .v-band.b3 {
  background: #000000;
}

.art-a .greeter .bust, .art-a .fig2 .hd {
  fill: #000000;
  stroke: none;
}

.art-a .jumper line {
  stroke: #000000;
}

.art-a .jumper .shadow {
  fill: rgba(0,0,0,.22);
}

.art-a .v-big {
  background: #000000;
}

#formatos .art-a.art .fmt {
  background: #000000;
  color: #FFFFFF;
}

/* Monigotes: uno de medio cuerpo al frente y otro al fondo saltando */
.fig2 {
  position: absolute;
}

.fig2 svg {
  display: block;
  width: 100%;
  height: 100%;
  overflow: visible;
}

.fig2 line, .fig2 path {
  stroke: #FFFFFF;
  stroke-linecap: round;
  fill: none;
}

.fig2 .hd, .fig2 .hand {
  fill: #FFFFFF;
}

.fig2 g, .fig2 line, .fig2 circle, .fig2 ellipse {
  transform-box: view-box;
}

.jumper {
  right: 13%;
  bottom: 24%;
  height: 27%;
  aspect-ratio: 44/80;
  opacity: .82;
}

.jumper line {
  stroke-width: 4;
}

.jumper .shadow {
  fill: rgba(255,255,255,.35);
  transform-origin: 22px 72px;
  animation: jShadow .9s ease-in-out infinite;
}

.jumper .jbody {
  animation: jUp .9s ease-in-out infinite;
}

.jumper .jal, .jumper .jar {
  transform-origin: 22px 21px;
}

.jumper .jll, .jumper .jlr {
  transform-origin: 22px 44px;
}

.jumper .jal {
  animation: jArmL .9s ease-in-out infinite;
}

.jumper .jar {
  animation: jArmR .9s ease-in-out infinite;
}

.jumper .jll {
  animation: jLegL .9s ease-in-out infinite;
}

.jumper .jlr {
  animation: jLegR .9s ease-in-out infinite;
}

@keyframes jUp {
  0%, 100% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(-12px);
  }
}

@keyframes jShadow {
  0%, 100% {
    transform: scale(1);
    opacity: 1;
  }
  50% {
    transform: scale(.55);
    opacity: .5;
  }
}

@keyframes jArmL {
  0%, 100% {
    transform: rotate(16deg);
  }
  50% {
    transform: rotate(155deg);
  }
}

@keyframes jArmR {
  0%, 100% {
    transform: rotate(-16deg);
  }
  50% {
    transform: rotate(-155deg);
  }
}

@keyframes jLegL {
  0%, 100% {
    transform: rotate(5deg);
  }
  50% {
    transform: rotate(26deg);
  }
}

@keyframes jLegR {
  0%, 100% {
    transform: rotate(-5deg);
  }
  50% {
    transform: rotate(-26deg);
  }
}

.greeter {
  left: 6%;
  bottom: 0;
  height: 82%;
  aspect-ratio: 1;
}

.greeter .bust {
  fill: #FFFFFF;
}

.greeter .gbody {
  transform-origin: 60px 100px;
  animation: gSway 3.6s ease-in-out infinite alternate;
}

.greeter .head {
  transform-origin: 60px 46px;
  animation: gTilt 1.8s ease-in-out infinite alternate;
}

@keyframes gTilt {
  from {
    transform: rotate(-5deg);
  }
  to {
    transform: rotate(5deg);
  }
}

@keyframes gSway {
  from {
    transform: rotate(-1.5deg);
  }
  to {
    transform: rotate(1.5deg);
  }
}

.art-a.paused .fig2 * {
  animation-play-state: paused;
}

@media (max-width:560px) {
  .v-bar {
    gap: 8px;
    padding: 24px 10px 10px;
    font-size: .74rem;
  }
}