/* =========================================================================
   Velaccio — Roster ("con quién trabajamos")

   A list of names in the display face. Hovering one splits it at its optical
   centre and grows a clip of that person's work out of the seam, pushing the
   two halves apart.

   Measured off the reference recording, which does three things at once over
   the same ~1.4s ease-out-cubic:

     • the slot widens from nothing, displacing the letters either side
     • the clip inside starts zoomed in at ~1.22 and settles to 1:1, so the
       frame is revealed rather than squashed
     • it fades up from black and resolves out of a heavy blur

   Sizes are px/em on purpose — the page inherits html{font-size:.625vw}, so
   rem here would track the viewport twice over.
   ========================================================================= */

.vel-roster {
  position: relative;
  padding: clamp(64px, 9vw, 150px) 0 clamp(64px, 9vw, 150px);
  background: transparent;
  /* Centred on purpose, and not only for looks: the slot opens from the middle
     of the name, so a centred row pushes both halves outward symmetrically and
     the name holds its place — exactly what the reference does. Left-aligned,
     the whole name would slide right as it opened. */
  text-align: center;
}

.rst-label {
  display: block;
  margin-bottom: clamp(26px, 3.4vw, 60px);
  color: rgba(255, 255, 255, .5);
  font-family: "Acid Grotesk", system-ui, sans-serif;
  font-size: clamp(14px, 1.2vw, 20px);
  font-weight: 500;
  letter-spacing: .02em;
}

.rst-list {
  margin: 0;
  padding: 0;
  list-style: none;
}

.rst-row {
  position: relative;
  display: block;
  padding: clamp(6px, .8vw, 16px) 0;
  font-family: "ABC Gravity Compressed", sans-serif;
  font-size: clamp(52px, 10.5vw, 210px);
  font-weight: 900;
  line-height: .94;
  text-transform: uppercase;
  white-space: nowrap;
  color: rgba(255, 255, 255, .38);
  cursor: default;
  transition: color .5s cubic-bezier(.33, 1, .68, 1);
  /* the slot's open size, in ems of the name itself, so it scales with the
     type at every breakpoint. */
  --rst-w: 1.9em;
  /* height is the cap height of the name beside it — see the @supports below;
     this em value is only the fallback for browsers without the `cap` unit. */
  --rst-h: .72em;
  /* per-row crop, for a clip that carries its own letterboxing: `cover` fills
     the slot with the source frame, bars and all, so those have to be scaled
     out of view. 1 leaves the frame as it is. */
  --rst-zoom: 1;
  --rst-ease: cubic-bezier(.33, 1, .68, 1);
  --rst-in: 1.3s;
  --rst-out: .7s;
}

/* `cap` is the font's own cap height, so the slot matches the letters exactly
   at any font-size. The em value above is only the fallback. */
@supports (height: 1cap) {
  .rst-row {
    --rst-h: 1cap;
  }
}

.rst-row + .rst-row {
  border-top: 1px solid rgba(255, 255, 255, .1);
}

.rst-row.is-open {
  color: #fff;
}

.rst-row:focus-visible {
  outline: 2px solid rgba(255, 255, 255, .6);
  outline-offset: 6px;
}

/* the two halves of the split name */
.rst-half {
  display: inline-block;
  vertical-align: baseline;
}

/* The slot. Width is the only thing that moves the letters, so it is the one
   property the layout animation runs on. */
.rst-media {
  position: relative;
  display: inline-block;
  /* bottom edge on the baseline: with the height set to the cap height, the
     slot then fills exactly the cap band the letters occupy */
  vertical-align: baseline;
  margin-bottom: 0;
  width: 0;
  height: var(--rst-h);
  overflow: hidden;
  border-radius: .05em;
  background: #000;
  transition: width var(--rst-out) var(--rst-ease);
}

.rst-row.is-open .rst-media {
  width: var(--rst-w);
  transition-duration: var(--rst-in);
}

/* Held at the full open width and centred, so narrowing the slot crops the
   clip from both edges instead of squeezing it. */
.rst-media__in {
  position: absolute;
  top: 0;
  left: 50%;
  width: var(--rst-w);
  height: 100%;
  margin-left: calc(var(--rst-w) / -2);
}

.rst-media video,
.rst-media img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0;
  transform: scale(calc(1.22 * var(--rst-zoom)));
  filter: blur(14px);
  transition: opacity var(--rst-out) var(--rst-ease),
              transform var(--rst-out) var(--rst-ease),
              filter var(--rst-out) var(--rst-ease);
}

.rst-row.is-open .rst-media video,
.rst-row.is-open .rst-media img {
  opacity: 1;
  transform: scale(var(--rst-zoom));
  filter: blur(0);
  transition-duration: var(--rst-in);
}

/* Until the script has split the names there is nothing to hover, so leave
   them be rather than hiding them. */
html.rst-js .rst-row:not(.is-split) .rst-media {
  display: none;
}

@media (max-width: 860px) {
  .rst-label {
    font-size: clamp(15px, 3.6vw, 20px);
  }

  .rst-row {
    font-size: clamp(46px, 15.5vw, 104px);
    white-space: normal;
  }
}

@media (prefers-reduced-motion: reduce) {

  .rst-media,
  .rst-media video,
  .rst-media img {
    transition: none;
  }

  .rst-media video,
  .rst-media img {
    transform: scale(var(--rst-zoom));
    filter: none;
  }
}

/* ---- Teléfono: la apertura va con el scroll --------------------------------

   Debajo de 600px no hay hover, así que el clip deja de abrirse con una clase
   y pasa a abrirse con la posición de scroll: roster.js ata --rst-p (0 a 1)
   a cada fila con ScrollTrigger en modo scrub. No hay estado abierto/cerrado;
   el hueco mide lo que diga el scroll en cada píxel, y al volver hacia arriba
   se cierra por el mismo camino.

   Todo lo que en escritorio anima una transición se calcula aquí desde
   --rst-p, con transition:none: una transición encima de un valor que ya
   cambia en cada frame solo añade retraso.

   Solo se activa con html.rst-scroll, que roster.js pone cuando GSAP está
   disponible. Sin él, el teléfono se queda con el toque de siempre.

   --rst-w lo fija roster.js en px: el hueco que queda en la fila después del
   nombre, para que el nombre grande y el clip abierto quepan en una línea. */
@media (max-width: 599px) {
  .rst-row {
    font-size: clamp(64px, 26vw, 150px);
    white-space: nowrap;
  }

  html.rst-scroll .rst-row {
    color: rgba(255, 255, 255, calc(.38 + .62 * var(--rst-p, 0)));
    transition: none;
  }

  html.rst-scroll .rst-media {
    width: calc(var(--rst-w) * var(--rst-p, 0));
    transition: none;
  }

  html.rst-scroll .rst-media video,
  html.rst-scroll .rst-media img {
    opacity: var(--rst-p, 0);
    transform: scale(calc((1.22 - .22 * var(--rst-p, 0)) * var(--rst-zoom)));
    filter: blur(calc(14px * (1 - var(--rst-p, 0))));
    transition: none;
  }
}