/* ==========================================================================
   Splatter texture + the sticker gate
   Source of truth: futbolito/Stickers/"Futbolito Mobile UI Stickers.pdf"

   Kept in its own file rather than folded into style.css so the poster
   styles stay one concern and this stays easy to lift out.
   ========================================================================== */

/* --- splatter -----------------------------------------------------------
   Page 16 of the PDF is the texture on its own: 574 vector shapes, all one
   lime (#BED630). It sits above the poster's blue-to-red gradient and below
   everything else, so it never eats a click.

   Sized `auto 100%` and repeated across rather than `cover`: the artwork is
   phone-shaped, and stretching that to a wide desktop viewport smears the
   specks into horizontal streaks. Scaling to height keeps every speck the
   right shape at any width.
   ------------------------------------------------------------------------ */
.poster {
  position: relative;
  isolation: isolate;
}

.poster::before {
  content: '';
  position: absolute;
  inset: 0;
  background-image: url('/assets/textures/splatter.svg');
  background-size: auto 100%;
  background-repeat: repeat-x;
  background-position: center top;
  opacity: 0.85;
  pointer-events: none;
  z-index: 0;
}

/* Keep the poster's own content above the texture. */
.poster > * {
  position: relative;
  z-index: 1;
}

/* --- sticker gate --------------------------------------------------------
   The site is unusable until the whole sticker cycle has been pressed
   through. Order is taken from the "STICKER ORDER" progression on page 14,
   which adds one sticker per frame.
   ------------------------------------------------------------------------ */
body.gate-locked {
  overflow: hidden;
}

.sticker-gate {
  position: fixed;
  inset: 0;
  z-index: 9000;
  display: flex;
  align-items: center;
  justify-content: center;
  /* Transparent on purpose: in the PDF the stickers land on the live
     poster, not on a separate splash. A fixed element still swallows every
     click while it's up, so the site underneath stays unusable. */
  background: transparent;
  border: none;
  margin: 0;
  padding: 0;
  width: 100%;
  cursor: pointer;
  /* the gate is a <button>, so stop it inheriting UA button styling */
  font: inherit;
  color: inherit;
  -webkit-tap-highlight-color: transparent;
}

.sticker-gate[hidden] {
  display: none;
}

.sticker-gate.dismissing {
  opacity: 0;
  transition: opacity 0.45s ease;
}

/* The stage keeps the artwork's phone proportions (the PDF artboard is
   460.9 x 933.9pt) so every sticker lands where it was drawn, whatever the
   viewport is doing. */
.sticker-stage {
  position: relative;
  width: min(100vw, calc(100vh * 0.4935));
  aspect-ratio: 460.893 / 933.903;
  max-height: 100vh;
}

.gate-sticker {
  position: absolute;
  width: 100%;
  opacity: 0;
  transform: scale(0.55) rotate(var(--rot, 0deg));
  transition: opacity 0.18s ease, transform 0.34s cubic-bezier(0.2, 1.5, 0.4, 1);
  pointer-events: none;
  will-change: transform, opacity;
}

.gate-sticker.stuck {
  opacity: 1;
  transform: scale(1) rotate(var(--rot, 0deg));
}

/* Placements read off the finished composite on page 14. Percentages are of
   the stage, so they hold at every size. z-index is the artwork's stacking,
   which is deliberately not the press order - `cinco contra cinco` is
   pressed first but sits over GOOOOOL!. */
.gate-sticker[data-sticker='goooool']   { left:  4%; top: 13%; width: 92%; --rot: -2deg;  z-index: 1; }
.gate-sticker[data-sticker='cinco']     { left: 12%; top: 22%; width: 76%; --rot:  0deg;  z-index: 2; }
.gate-sticker[data-sticker='aguante']   { left: -9%; top: 47%; width: 118%; --rot: -13deg; z-index: 3; }
.gate-sticker[data-sticker='goleador']  { left: -6%; top: 66%; width: 112%; --rot: -1deg;  z-index: 4; }
.gate-sticker[data-sticker='oyito']     { left:  7%; top: 40%; width: 86%; --rot: -3deg;  z-index: 5; }
.gate-sticker[data-sticker='dale']      { left: 22%; top: 58%; width: 62%; --rot: -7deg;  z-index: 6; }

.sticker-gate-hint {
  position: absolute;
  left: 0;
  right: 0;
  bottom: clamp(18px, 4vh, 48px);
  text-align: center;
  font-family: 'KCFunkWagon XWide', 'KCFunkWagon', sans-serif;
  letter-spacing: var(--track-nav);
  color: var(--lime);
  font-size: clamp(13px, 1.4vw, 20px);
  margin: 0;
  z-index: 10;
  animation: gate-pulse 1.5s ease-in-out infinite;
}

@keyframes gate-pulse {
  0%, 100% { opacity: 0.55; }
  50%      { opacity: 1; }
}

@media (prefers-reduced-motion: reduce) {
  .gate-sticker { transition: opacity 0.18s ease; transform: rotate(var(--rot, 0deg)); }
  .gate-sticker.stuck { transform: rotate(var(--rot, 0deg)); }
  .sticker-gate-hint { animation: none; opacity: 1; }
  .sticker-gate.dismissing { transition: none; }
}