/* Team: the interactive scene from heroes-interactivos, set into the page as a
   full-bleed band. The four characters follow the pointer with their eyes. */
.team {
  /* team.js replaces these with the real colours of the frame's outline, so the
     band continues the artwork's own background without a seam. */
  --esquina: #76053b;
  --borde-arriba: linear-gradient(90deg, #76053b, #dd1d77 50%, #77063a);
  --borde-izq: linear-gradient(180deg, #76053b, #9c0a52 50%, #a20a56);
  --borde-der: linear-gradient(180deg, #76063a, #9c0951 50%, #a80b57);
  /* 16:9 like the artwork, sized so heading and scene fit the window together. */
  --scene-w: min(76vw, 940px, max(320px, calc((100svh - 300px) * 16 / 9)));
  background: var(--esquina);
  color: #fff;
  text-align: center;
}
.team.curve-top { --curve-fill: var(--esquina); }

/* The characters are cut by the bottom edge of the frame, so the scene sits
   flush at the end of the band and the next section's curve rises over it. The
   gap left below stays under that curve at every width. */
.team-stage {
  position: relative;
  overflow: hidden;
  padding-bottom: calc(var(--curve-h) * .45);
}

/* The heading sits on the frame's top edge colours, stretched upwards and
   faded into the corner colour before they reach the curve. */
.team-head {
  padding: 110px 0 34px;
  background:
    linear-gradient(to top, transparent, var(--esquina) 85%),
    var(--borde-arriba) center / var(--scene-w) 100% no-repeat,
    var(--esquina);
}
.team-head > .section-wrap { position: relative; z-index: 1; }
.team .eyebrow { margin-bottom: 20px; }
.team h2 .handwritten { color: var(--note-yellow); }
.team-intro { font-size: 18px; max-width: 520px; margin: 24px auto 0; }

.team-scene {
  position: relative;
  width: var(--scene-w);
  aspect-ratio: 16 / 9;
  margin-inline: auto;
  /* Same gradients as the side bands, showing through the canvas fade. */
  background:
    var(--borde-izq) left / 4% 100% no-repeat,
    var(--borde-der) right / 4% 100% no-repeat,
    var(--borde-arriba);
  /* A sideways drag moves the eyes; a vertical one still scrolls the page. */
  touch-action: pan-y;
  user-select: none;
  -webkit-user-select: none;
}
.team-scene canvas {
  display: block;
  width: 100%;
  height: 100%;
  background: url('/assets/equipo/frames/reposo.webp') center / cover no-repeat;
  /* Top and side edges melt into the band: the source clips do not share one
     exact tone, and without this a line would show. */
  -webkit-mask-image:
    linear-gradient(to bottom, transparent, #000 4%),
    linear-gradient(to right, transparent, #000 2.5%, #000 97.5%, transparent);
  -webkit-mask-composite: source-in;
  mask-image:
    linear-gradient(to bottom, transparent, #000 4%),
    linear-gradient(to right, transparent, #000 2.5%, #000 97.5%, transparent);
  mask-composite: intersect;
}

/* The frame's side edges, continued out to the edges of the window. */
.team-side {
  position: absolute;
  top: 0;
  bottom: 0;
  width: 100vw;
  pointer-events: none;
}
.team-side-left { right: calc(100% - 1px); background: var(--borde-izq); }
.team-side-right { left: calc(100% - 1px); background: var(--borde-der); }

/* Hint pill, clear of the curve that covers the foot of the scene. Its lower
   edge doubles as the progress bar while the frames load. */
.team-hint {
  position: absolute;
  left: 50%;
  bottom: calc(var(--curve-h) * .55 + 14px);
  overflow: hidden;
  padding: 10px 20px;
  transform: translateX(-50%);
  border: 1px solid rgb(255 255 255 / .22);
  border-radius: 999px;
  background: rgb(40 4 22 / .55);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  font-size: 13px;
  font-weight: 600;
  letter-spacing: .02em;
  line-height: 1.4;
  white-space: nowrap;
  pointer-events: none;
  transition: opacity .6s ease, transform .6s ease;
}
.team-hint.is-hidden { opacity: 0; transform: translate(-50%, 8px); }
.team-hint i {
  position: absolute;
  inset: auto 0 0;
  height: 2px;
  background: rgb(255 255 255 / .8);
  transform: scaleX(var(--carga, 0));
  transform-origin: left;
  transition: transform .2s linear, opacity .5s ease .2s;
}
.team-hint.is-loaded i { opacity: 0; }
.team-hint .hint-touch { display: none; }
@media (hover: none) {
  .team-hint .hint-mouse { display: none; }
  .team-hint .hint-touch { display: inline; }
}

/* Colour shapes, kept to the corners of the heading: above its background,
   behind the text and behind the scene. They may run off the side of the window
   but stay whole vertically: the stage clips them, and a shape cut by a straight
   line in the middle of the band reads as a mistake. */
.team .deco { z-index: 0; }
.team .deco-team-lime { --size: clamp(130px, 14vw, 220px); --blob: var(--deco-lime); top: 46px; right: -5vw; }
.team .deco-team-teal { --size: clamp(80px, 9vw, 130px); --blob: var(--deco-teal); --ring: clamp(10px, 1.2vw, 16px); left: -3vw; top: 120px; }
.team .deco-team-dot { --size: clamp(30px, 3vw, 46px); --blob: var(--deco-yellow); left: 13vw; top: 60px; }

@media (max-width: 800px) {
  .team { --scene-w: 100%; }
  .team-head { padding: 75px 0 26px; }
  .team-intro { font-size: 17px; }
  .team .deco-team-lime { --size: clamp(84px, 22vw, 130px); top: 24px; right: -11vw; }
  .team .deco-team-teal, .team .deco-team-dot { display: none; }
}
@media (max-width: 480px) {
  .team-head { padding: 60px 0 20px; }
  .team-intro { font-size: 16px; }
  .team-hint { font-size: 12px; padding: 8px 16px; }
  /* No room left beside the eyebrow line at this width. */
  .team .deco-team-lime { display: none; }
}