/* =====================================================================
   barca.css  -  guest 3 of 3: Messi + FC Barcelona (#barca)
   Blaugrana navy / blue / garnet with gold, stadium lights at night.
   Everything is scoped under #barca. Animations use transform and
   opacity only; idle loops pause when the section is far off screen.
   ===================================================================== */

#barca {
  --bc-navy: #0b1f4d;
  --bc-blue: #004D98;
  --bc-garnet: #A50044;
  --bc-gold: #EDBB00;
  --bc-white: #fbfaf7;
  --bc-grass-a: #0e3a25;
  --bc-grass-b: #124529;
  --sec-bg: #0a1233;
  --sec-glow: rgba(0, 77, 152, .32);
  isolation: isolate;
}

#barca > .section-head,
#barca > .bc-screen,
#barca > .bc-shirt-spot,
#barca > .bc-game,
#barca > .bc-video {
  position: relative;
  z-index: 2;
}

/* ---------- stadium sky: glow, light towers, slow beams ---------- */
#barca > .bc-sky {
  position: absolute;
  inset: 0;
  z-index: 0;
  overflow: hidden;
  pointer-events: none;
  background:
    radial-gradient(120% 46% at 50% 0%, rgba(0, 77, 152, .36), transparent 72%),
    radial-gradient(80% 30% at 50% 58%, rgba(165, 0, 68, .14), transparent 70%),
    linear-gradient(180deg, transparent 0, rgba(11, 31, 77, .5) 22%, rgba(11, 31, 77, .42) 78%, transparent 100%);
  -webkit-mask-image: linear-gradient(180deg, transparent 0, #000 140px, #000 calc(100% - 140px), transparent 100%);
  mask-image: linear-gradient(180deg, transparent 0, #000 140px, #000 calc(100% - 140px), transparent 100%);
}

#barca .bc-tower {
  position: absolute;
  top: 34px;
  width: 44px;
  height: 20px;
  border-radius: 3px;
  background:
    radial-gradient(circle, #fff7d6 0 2.2px, transparent 2.9px) 1px 0 / 10.5px 10px,
    #1a2140;
  box-shadow: 0 0 18px 4px rgba(255, 244, 205, .38), 0 0 60px 12px rgba(255, 244, 205, .12);
}
#barca .bc-tower i {
  position: absolute;
  top: 100%;
  left: 50%;
  width: 3px;
  height: 90px;
  margin-left: -1.5px;
  background: linear-gradient(180deg, #1a2140, transparent);
}
#barca .bc-tower.l { left: 5%; transform: rotate(-8deg); }
#barca .bc-tower.r { right: 5%; transform: rotate(8deg); }

#barca .bc-beam {
  --a: 0deg;
  position: absolute;
  top: 40px;
  width: min(70vw, 340px);
  height: min(110vh, 900px);
  margin-left: calc(min(70vw, 340px) / -2);
  background: linear-gradient(180deg, rgba(255, 246, 214, .2), rgba(255, 246, 214, .06) 50%, transparent 82%);
  -webkit-clip-path: polygon(47% 0, 53% 0, 100% 100%, 0 100%);
  clip-path: polygon(47% 0, 53% 0, 100% 100%, 0 100%);
  transform-origin: 50% 0;
  transform: rotate(var(--a));
  opacity: .75;
  animation: bcBeam 9s ease-in-out infinite alternate;
  will-change: transform;
}
#barca .bc-beam.b1 { --a: -20deg; left: calc(5% + 22px); }
#barca .bc-beam.b2 { --a: -36deg; left: calc(5% + 22px); opacity: .45; animation-delay: -4s; }
#barca .bc-beam.b3 { --a: 20deg; left: calc(95% - 22px); animation-delay: -2s; }
#barca .bc-beam.b4 { --a: 36deg; left: calc(95% - 22px); opacity: .45; animation-delay: -6s; }
@keyframes bcBeam {
  from { transform: rotate(var(--a)); }
  to   { transform: rotate(calc(var(--a) * .8)); }
}

/* ---------- header ---------- */
#barca .guest-kicker { color: var(--bc-gold); }

#barca .bc-label {
  display: inline-block;
  margin: 0 0 .75rem;
  padding: .3rem .9rem;
  border-radius: 999px;
  background: linear-gradient(90deg, var(--bc-blue) 0 50%, var(--bc-garnet) 50% 100%);
  box-shadow: 0 0 0 1px rgba(237, 187, 0, .6), 0 6px 18px rgba(0, 0, 0, .4);
  color: #fff;
  font-family: var(--font-type, 'Special Elite', 'Courier New', monospace);
  font-size: .8rem;
  letter-spacing: .18em;
}

#barca .section-title .bc-ten {
  color: var(--bc-gold);
  text-shadow: 2px 2px 0 var(--bc-garnet), -2px -2px 0 var(--bc-blue), 0 0 24px rgba(237, 187, 0, .38);
}

/* ---------- the stadium screen ---------- */
#barca .bc-screen {
  width: min(88vw, 360px);
  max-width: 100%;
  margin: 0 auto;
  transition: opacity .6s ease;
}
#barca .bc-screen.is-gone { opacity: 0; pointer-events: none; }

#barca .bc-bezel {
  position: relative;
  padding: 13px 11px;
  border-radius: 14px;
  background: linear-gradient(180deg, #1c2546, #0a0e22);
  box-shadow:
    0 0 0 1px rgba(237, 187, 0, .34),
    0 0 0 5px #060916,
    0 0 40px rgba(0, 77, 152, .42),
    0 24px 46px rgba(0, 0, 0, .6);
}
/* rows of little bulbs along the top and bottom of the screen */
#barca .bc-bezel::before,
#barca .bc-bezel::after {
  content: "";
  position: absolute;
  left: 16px;
  right: 16px;
  height: 5px;
  background: radial-gradient(circle, rgba(255, 236, 170, .95) 0 1.4px, transparent 2px) 0 50% / 10px 5px repeat-x;
  animation: bcBulbs 2.4s steps(2) infinite;
}
#barca .bc-bezel::before { top: 4px; }
#barca .bc-bezel::after { bottom: 4px; animation-delay: -1.2s; }
@keyframes bcBulbs {
  0%, 100% { opacity: 1; }
  50%      { opacity: .55; }
}

#barca .bc-screen-box {
  position: relative;
  aspect-ratio: 4 / 3;
  overflow: hidden;
  border-radius: 6px;
  background: radial-gradient(circle at 50% 40%, #143272, #050b1f 75%);
  -webkit-tap-highlight-color: transparent;
}
@supports not (aspect-ratio: 1 / 1) {
  #barca .bc-screen-box { height: 0; padding-bottom: 75%; }
}

#barca .bc-gif {
  position: absolute;
  inset: 0;
  z-index: 1;
  display: block;
  width: 100%;
  height: 100%;
  max-width: none;
  object-fit: cover;
  opacity: 0;
  transition: opacity .5s ease;
  user-select: none;
  -webkit-user-select: none;
  -webkit-touch-callout: none;
  -webkit-user-drag: none;
}
#barca .bc-gif.is-on.is-loaded { opacity: 1; }

#barca .bc-scan {
  position: absolute;
  inset: 0;
  z-index: 2;
  pointer-events: none;
  background:
    repeating-linear-gradient(180deg, rgba(0, 0, 0, 0) 0 2px, rgba(0, 0, 0, .16) 2px 3px),
    radial-gradient(ellipse at 50% 50%, transparent 56%, rgba(0, 0, 0, .5));
  box-shadow: inset 0 0 26px rgba(0, 77, 152, .55);
}
#barca .bc-scan::after {
  content: "";
  position: absolute;
  inset: 0;
  background: #fff;
  opacity: 0;
}
#barca .bc-screen.is-cut .bc-scan::after { animation: bcFlash .45s ease-out; }
#barca .bc-screen.is-cut .bc-screen-box { animation: bcCut .45s var(--ease-out, ease-out); }
@keyframes bcFlash {
  0%   { opacity: .55; }
  100% { opacity: 0; }
}
@keyframes bcCut {
  0%   { transform: scale(1.035); }
  100% { transform: scale(1); }
}

#barca .bc-live {
  position: absolute;
  top: 8px;
  left: 8px;
  z-index: 3;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 2px 7px;
  border-radius: 4px;
  background: rgba(5, 10, 30, .72);
  color: #fff;
  font-family: var(--font-type, 'Special Elite', 'Courier New', monospace);
  font-size: .66rem;
  line-height: 1.35;
  letter-spacing: .14em;
}
#barca .bc-live i {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #ff2f7e;
  box-shadow: 0 0 6px #ff2f7e;
  animation: bcBlink 1.2s steps(2) infinite;
}
@keyframes bcBlink {
  0%, 100% { opacity: 1; }
  50%      { opacity: .2; }
}

#barca .bc-stand {
  display: block;
  width: 34%;
  height: 16px;
  margin: 0 auto;
  background: linear-gradient(90deg, #060916, #1c2546, #060916);
  -webkit-clip-path: polygon(24% 0, 76% 0, 100% 100%, 0 100%);
  clip-path: polygon(24% 0, 76% 0, 100% 100%, 0 100%);
}

/* ---------- her shirt ---------- */
#barca .bc-shirt-spot {
  width: min(60vw, 228px);
  max-width: 100%;
  margin: clamp(46px, 11vw, 64px) auto 0;
}
#barca .bc-shirt-hang {
  position: relative;
  transform-origin: 50% 0;
  animation: bcSway 6s ease-in-out infinite;
}
/* the hanger hook */
#barca .bc-shirt-hang::before {
  content: "";
  position: absolute;
  top: -15px;
  left: 50%;
  width: 22px;
  height: 18px;
  margin-left: -11px;
  border: 2.5px solid rgba(244, 238, 232, .7);
  border-bottom: 0;
  border-radius: 12px 12px 0 0;
}
@keyframes bcSway {
  0%, 100% { transform: rotate(-2.5deg); }
  50%      { transform: rotate(2.5deg); }
}
#barca .bc-shirt {
  display: block;
  width: 100%;
  height: auto;
  overflow: visible;
  filter: drop-shadow(0 16px 20px rgba(0, 0, 0, .55)) drop-shadow(0 0 22px rgba(0, 77, 152, .32));
}
#barca .bc-shirt-name,
#barca .bc-shirt-num {
  font-family: 'Arial Black', 'Avenir Next', 'Segoe UI Black', 'Helvetica Neue', Arial, sans-serif;
  font-weight: 900;
  fill: var(--bc-gold);
  stroke: var(--bc-navy);
  paint-order: stroke;
}
#barca .bc-shirt-name { font-size: 22px; letter-spacing: 3px; stroke-width: 1.2px; }
#barca .bc-shirt-num { font-size: 92px; letter-spacing: -3px; stroke-width: 4px; }
#barca .bc-shirt-cap {
  margin-top: .85rem;
  font-family: var(--font-hand, 'Caveat', cursive);
  font-size: 1.5rem;
  line-height: 1.15;
  color: var(--blush, #ffc2df);
  transform: rotate(-2deg);
}

/* ---------- score 10 ---------- */
#barca .bc-game {
  width: min(100%, 400px);
  margin: clamp(46px, 11vw, 64px) auto 0;
}

#barca .bc-board {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto auto auto minmax(0, 1fr);
  align-items: center;
  gap: 7px;
  padding: 9px 11px;
  border-radius: 12px 12px 0 0;
  background: linear-gradient(180deg, #111a3a, #070b1d);
  box-shadow: 0 0 0 1px rgba(237, 187, 0, .3), inset 0 1px 0 rgba(255, 255, 255, .06);
  color: #fff;
}
#barca .bc-team {
  font-family: var(--font-type, 'Special Elite', 'Courier New', monospace);
  font-size: .7rem;
  line-height: 1.15;
  letter-spacing: .1em;
  color: rgba(255, 255, 255, .78);
  text-align: left;
  overflow-wrap: anywhere;
}
#barca .bc-team.is-her { color: var(--bc-gold); text-align: right; }
#barca .bc-digit {
  display: inline-block;
  min-width: 1.55em;
  padding: 1px 6px;
  border-radius: 6px;
  background: #03050f;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .08);
  font-family: 'Arial Black', 'Avenir Next', 'Segoe UI Black', 'Helvetica Neue', Arial, sans-serif;
  font-size: 1.85rem;
  line-height: 1.15;
  perspective: 220px;
}
#barca .bc-digit b {
  display: block;
  font-weight: 900;
  color: var(--bc-gold);
  text-shadow: 0 0 10px rgba(237, 187, 0, .5);
  backface-visibility: hidden;
}
#barca .bc-digit.is-them b { color: #fff; opacity: .78; text-shadow: none; }
#barca .bc-digit.is-flip b { animation: bcFlip .34s cubic-bezier(.5, 0, .5, 1); }
#barca .bc-digit.is-bump b { animation: bcFade .3s ease-out; }
#barca .bc-colon {
  font-family: 'Arial Black', Arial, sans-serif;
  font-size: 1.3rem;
  color: rgba(255, 255, 255, .55);
}
@keyframes bcFlip {
  0%     { transform: rotateX(0deg); }
  49.9%  { transform: rotateX(90deg); }
  50%    { transform: rotateX(-90deg); }
  100%   { transform: rotateX(0deg); }
}
@keyframes bcFade {
  from { opacity: .25; }
  to   { opacity: 1; }
}

#barca .bc-sr {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

#barca .bc-pitch {
  position: relative;
  aspect-ratio: 4 / 3;
  overflow: hidden;
  border-radius: 0 0 12px 12px;
  background:
    radial-gradient(90% 55% at 50% 0%, rgba(255, 246, 214, .15), transparent 70%),
    linear-gradient(180deg, #080d27 0, #0b1433 53.3%, transparent 53.3%),
    repeating-linear-gradient(180deg, var(--bc-grass-a) 0 11.7%, var(--bc-grass-b) 11.7% 23.4%);
  box-shadow: 0 0 0 1px rgba(237, 187, 0, .3), 0 24px 44px rgba(0, 0, 0, .55);
  cursor: pointer;
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
  user-select: none;
  -webkit-user-select: none;
  transition: box-shadow .6s ease;
}
@supports not (aspect-ratio: 1 / 1) {
  #barca .bc-pitch { height: 0; padding-bottom: 75%; }
}
/* the crowd: tiny phone lights in the dark stand */
#barca .bc-pitch::before {
  content: "";
  position: absolute;
  inset: 0 0 58% 0;
  background: radial-gradient(circle, rgba(255, 255, 255, .5) 0 .8px, transparent 1.3px) 0 0 / 9px 7px;
  opacity: .32;
  pointer-events: none;
}
/* plain blaugrana boards along the back */
#barca .bc-pitch::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: 46%;
  height: 7.3%;
  background: repeating-linear-gradient(90deg, var(--bc-blue) 0 38px, var(--bc-garnet) 38px 76px);
  opacity: .5;
  pointer-events: none;
}
#barca.is-won .bc-pitch {
  box-shadow: 0 0 0 2px var(--bc-gold), 0 0 36px rgba(237, 187, 0, .42), 0 24px 44px rgba(0, 0, 0, .55);
}

#barca .bc-net {
  position: absolute;
  left: 12.5%;
  top: 11.7%;
  width: 75%;
  height: 41.6%;
  z-index: 1;
  overflow: hidden;
  background: rgba(3, 6, 18, .72);
  pointer-events: none;
}
#barca .bc-net-mesh {
  position: absolute;
  inset: -8%;
  background:
    repeating-linear-gradient(45deg, rgba(255, 255, 255, .32) 0 1px, transparent 1px 9px),
    repeating-linear-gradient(-45deg, rgba(255, 255, 255, .32) 0 1px, transparent 1px 9px);
  transform-origin: var(--hx, 50%) var(--hy, 50%);
}
#barca .bc-net::after {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(circle at var(--hx, 50%) var(--hy, 50%), rgba(0, 0, 0, .55), transparent 34%);
  opacity: 0;
}
#barca .bc-net.is-hit .bc-net-mesh { animation: bcNet .62s cubic-bezier(.2, .8, .3, 1); }
#barca .bc-net.is-hit::after { animation: bcDent .62s ease-out; }
@keyframes bcNet {
  0%   { transform: scale(1); }
  18%  { transform: scale(1.1, 1.07); }
  42%  { transform: scale(.97, .98); }
  66%  { transform: scale(1.03, 1.02); }
  100% { transform: scale(1); }
}
@keyframes bcDent {
  0%   { opacity: 0; }
  20%  { opacity: 1; }
  100% { opacity: 0; }
}

#barca .bc-ripple {
  position: absolute;
  z-index: 2;
  left: 50%;
  top: 30%;
  width: 70px;
  height: 70px;
  margin: -35px 0 0 -35px;
  border-radius: 50%;
  border: 2px solid rgba(255, 255, 255, .85);
  opacity: 0;
  transform: scale(.2);
  pointer-events: none;
}
#barca .bc-ripple::after {
  content: "";
  position: absolute;
  inset: -2px;
  border-radius: 50%;
  border: 2px solid rgba(237, 187, 0, .85);
  opacity: 0;
}
#barca .bc-ripple.is-on { animation: bcRipple .6s ease-out; }
#barca .bc-ripple.is-on::after { animation: bcRipple2 .7s .08s ease-out; }
@keyframes bcRipple {
  0%   { opacity: .9; transform: scale(.2); }
  100% { opacity: 0; transform: scale(1.8); }
}
@keyframes bcRipple2 {
  0%   { opacity: .8; transform: scale(.4); }
  100% { opacity: 0; transform: scale(2.3); }
}

#barca .bc-scene {
  position: absolute;
  inset: 0;
  z-index: 3;
  display: block;
  width: 100%;
  height: 100%;
  pointer-events: none;
}

#barca .bc-keeper {
  position: absolute;
  z-index: 4;
  left: 41.5%;
  width: 17%;
  bottom: 45.5%;
  transform-origin: 50% 100%;
  pointer-events: none;
}
#barca .bc-keeper-sway { animation: bcKeeper 1.5s ease-in-out infinite alternate; }
#barca .bc-keeper-art {
  display: block;
  width: 100%;
  height: auto;
  overflow: visible;
  filter: drop-shadow(0 4px 3px rgba(0, 0, 0, .45));
}
#barca .bc-keeper.is-left,
#barca .bc-keeper.is-right { transition: transform .2s ease-out; }
#barca .bc-keeper.is-left { transform: translate3d(-60%, 0, 0) rotate(-70deg); }
#barca .bc-keeper.is-right { transform: translate3d(60%, 0, 0) rotate(70deg); }
@keyframes bcKeeper {
  from { transform: translate3d(-8px, 0, 0); }
  to   { transform: translate3d(8px, 0, 0); }
}

#barca .bc-ball-shadow {
  position: absolute;
  z-index: 4;
  left: 50%;
  top: 84%;
  width: 36px;
  height: 10px;
  margin: 15px 0 0 -18px;
  border-radius: 50%;
  background: radial-gradient(closest-side, rgba(0, 0, 0, .55), transparent);
  pointer-events: none;
}

#barca .bc-ball {
  position: absolute;
  z-index: 5;
  left: 50%;
  top: 84%;
  width: 64px;
  height: 64px;
  margin: -32px 0 0 -32px;
  padding: 12px;
  border: 0;
  border-radius: 50%;
  background: transparent;
  cursor: pointer;
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
}
#barca .bc-ball::before {
  content: "";
  position: absolute;
  inset: 8px;
  border-radius: 50%;
  border: 2px solid rgba(237, 187, 0, .8);
  opacity: 0;
  animation: bcPing 1.9s ease-out infinite;
  pointer-events: none;
}
#barca.is-shooting .bc-ball::before,
#barca.is-won .bc-ball::before { animation: none; opacity: 0; }
#barca .bc-ball.is-scored { opacity: 0; }
#barca .bc-ball:focus-visible { outline: 2px solid var(--bc-gold); outline-offset: 0; }
#barca .bc-ball-art {
  display: block;
  width: 100%;
  height: 100%;
  pointer-events: none;
  filter: drop-shadow(0 2px 2px rgba(0, 0, 0, .35));
}
@keyframes bcPing {
  0%   { opacity: .85; transform: scale(.8); }
  70%  { opacity: 0; transform: scale(1.35); }
  100% { opacity: 0; transform: scale(1.35); }
}

#barca .bc-gool {
  position: absolute;
  z-index: 6;
  left: 0;
  right: 0;
  top: 25%;
  font-family: 'Arial Black', 'Avenir Next', 'Segoe UI Black', 'Helvetica Neue', Arial, sans-serif;
  font-size: clamp(2.9rem, 15.5vw, 4.6rem);
  font-style: italic;
  font-weight: 900;
  line-height: 1;
  letter-spacing: -.01em;
  text-align: center;
  color: var(--bc-gold);
  -webkit-text-stroke: 1.5px #0b1f4d;
  text-shadow: 4px 4px 0 var(--bc-garnet), -3px -2px 0 var(--bc-blue), 0 0 28px rgba(237, 187, 0, .6);
  opacity: 0;
  transform: scale(.3);
  pointer-events: none;
}
#barca .bc-gool.is-on { animation: bcGool .95s cubic-bezier(.2, .9, .3, 1) both; }
@keyframes bcGool {
  0%   { opacity: 0; transform: scale(.25) rotate(var(--tilt, 0deg)); }
  22%  { opacity: 1; transform: scale(1.18) rotate(var(--tilt, 0deg)); }
  38%  { transform: scale(.96) rotate(var(--tilt, 0deg)); }
  52%  { transform: scale(1.03) rotate(var(--tilt, 0deg)); }
  78%  { opacity: 1; transform: scale(1) rotate(var(--tilt, 0deg)); }
  100% { opacity: 0; transform: translate3d(0, -18px, 0) scale(1.04) rotate(var(--tilt, 0deg)); }
}

/* the hint and the win line share one spot, so nothing jumps when she wins */
#barca .bc-foot {
  display: grid;
  margin-top: 14px;
}
#barca .bc-foot > * {
  grid-area: 1 / 1;
  transition: opacity .45s ease, transform .45s var(--ease-out, ease-out), visibility 0s linear 0s;
}
#barca .bc-hint {
  padding-top: 4px;
  font-family: var(--font-type, 'Special Elite', 'Courier New', monospace);
  font-size: .95rem;
  letter-spacing: .02em;
  color: rgba(244, 238, 232, .82);
}
#barca .bc-win {
  opacity: 0;
  visibility: hidden;
  transform: translate3d(0, 10px, 0);
  transition: opacity .45s ease, transform .45s var(--ease-out, ease-out), visibility 0s linear .45s;
}
#barca.is-won .bc-hint {
  opacity: 0;
  visibility: hidden;
  transition: opacity .3s ease, visibility 0s linear .3s;
}
#barca.is-won .bc-win {
  opacity: 1;
  visibility: visible;
  transform: none;
  transition: opacity .45s ease .15s, transform .6s var(--ease-spring, ease-out) .15s, visibility 0s linear 0s;
}
#barca .bc-win-line {
  font-family: var(--font-goth, 'Pirata One', Georgia, serif);
  font-size: clamp(1.7rem, 7.6vw, 2.2rem);
  line-height: 1.1;
  color: var(--bc-gold);
  text-shadow: 0 0 18px rgba(237, 187, 0, .35);
  text-wrap: balance;
}
#barca .bc-again {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 44px;
  min-height: 44px;
  margin-top: 2px;
  padding: 0 14px;
  border: 0;
  background: none;
  color: var(--blush, #ffc2df);
  font-family: var(--font-type, 'Special Elite', 'Courier New', monospace);
  font-size: .95rem;
  text-decoration: underline;
  text-underline-offset: 4px;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
#barca .bc-again:focus-visible { outline: 2px solid var(--bc-gold); outline-offset: 2px; border-radius: 6px; }
#barca .bc-again.is-nudge,
#barca .bc-video.is-nudge .bc-video-box { animation: bcNudge .5s ease; }
@keyframes bcNudge {
  0%, 100% { transform: none; }
  25%      { transform: translate3d(-5px, 0, 0); }
  75%      { transform: translate3d(5px, 0, 0); }
}

/* ---------- the video card ---------- */
#barca .bc-video {
  width: min(100%, 400px);
  margin: clamp(46px, 11vw, 64px) auto 0;
}
#barca .bc-video-box {
  position: relative;
  aspect-ratio: 16 / 9;
  overflow: hidden;
  border-radius: 12px;
  background: linear-gradient(135deg, var(--bc-blue), var(--bc-navy) 55%, var(--bc-garnet));
  box-shadow: 0 0 0 1px rgba(237, 187, 0, .3), 0 20px 40px rgba(0, 0, 0, .55);
}
@supports not (aspect-ratio: 1 / 1) {
  #barca .bc-video-box { height: 0; padding-bottom: 56.25%; }
}
#barca .bc-facade {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  padding: 0;
  border: 0;
  background: none;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
#barca .bc-facade:focus-visible { outline: 3px solid var(--bc-gold); outline-offset: -3px; }
#barca .bc-thumb {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  max-width: none;
  object-fit: cover;
  opacity: 0;
  transition: opacity .5s ease;
}
#barca .bc-thumb.is-loaded { opacity: 1; }
#barca .bc-facade::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(5, 10, 30, .1) 40%, rgba(5, 10, 30, .55));
}
#barca .bc-video.no-thumb .bc-facade::before {
  content: "10";
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: 'Arial Black', Arial, sans-serif;
  font-weight: 900;
  font-size: 7rem;
  color: rgba(237, 187, 0, .14);
}
#barca .bc-play {
  position: absolute;
  left: 50%;
  top: 50%;
  z-index: 1;
  width: 68px;
  height: 48px;
  margin: -24px 0 0 -34px;
  filter: drop-shadow(0 4px 10px rgba(0, 0, 0, .5));
  transition: transform .25s var(--ease-spring, ease-out);
}
#barca .bc-play svg { display: block; width: 100%; height: 100%; }
#barca .bc-facade:active .bc-play { transform: scale(.92); }
#barca .bc-iframe {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  border: 0;
}
#barca .bc-video-label {
  margin-top: .8rem;
  font-family: var(--font-hand, 'Caveat', cursive);
  font-size: 1.45rem;
  line-height: 1.15;
  color: var(--bone, #f4eee8);
}
#barca .bc-video-src {
  margin-top: .15rem;
  font-family: var(--font-type, 'Special Elite', 'Courier New', monospace);
  font-size: .74rem;
  letter-spacing: .05em;
  color: var(--muted, #9b8a99);
}

@media (hover: hover) {
  #barca .bc-facade:hover .bc-play { transform: scale(1.07); }
}

/* ---------- idle loops rest while the section is far away ---------- */
#barca:not(.is-near) .bc-beam,
#barca:not(.is-near) .bc-bezel::before,
#barca:not(.is-near) .bc-bezel::after,
#barca:not(.is-near) .bc-live i,
#barca:not(.is-near) .bc-shirt-hang,
#barca:not(.is-near) .bc-keeper-sway,
#barca:not(.is-near) .bc-ball::before {
  animation-play-state: paused;
}

@media (max-width: 359px) {
  #barca .bc-team { font-size: .62rem; letter-spacing: .06em; }
  #barca .bc-digit { font-size: 1.55rem; }
  #barca .bc-board { gap: 5px; padding: 8px; }
}

@media (prefers-reduced-motion: reduce) {
  #barca .bc-beam,
  #barca .bc-bezel::before,
  #barca .bc-bezel::after,
  #barca .bc-live i,
  #barca .bc-shirt-hang,
  #barca .bc-keeper-sway,
  #barca .bc-ball::before,
  #barca .bc-net.is-hit .bc-net-mesh,
  #barca .bc-screen.is-cut .bc-screen-box,
  #barca .bc-again.is-nudge,
  #barca .bc-video.is-nudge .bc-video-box { animation: none; }
  #barca .bc-shirt-hang { transform: rotate(-2deg); }
  #barca .bc-gool.is-on { animation: bcGoolCalm .9s ease both; }
  #barca .bc-ripple.is-on { animation: bcFadeOut .5s ease-out; }
  #barca .bc-ripple.is-on::after { animation: none; }
  #barca .bc-keeper.is-left,
  #barca .bc-keeper.is-right { transition: none; }
  #barca .bc-foot > *,
  #barca .bc-win,
  #barca.is-won .bc-win { transform: none; }
}
@keyframes bcGoolCalm {
  0%   { opacity: 0; transform: none; }
  20%  { opacity: 1; transform: none; }
  75%  { opacity: 1; transform: none; }
  100% { opacity: 0; transform: none; }
}
@keyframes bcFadeOut {
  0%   { opacity: .8; transform: scale(1); }
  100% { opacity: 0; transform: scale(1); }
}