/**
 * Game Day Intro: the overlay and its stamps. Timings live in --rt-gi-* so a
 * site can tune the beat without touching the script; the script reads them.
 */

.rt-gi {
  --rt-gi-wipe: 800ms;      /* flame wipe in */
  --rt-gi-out: 600ms;       /* flame-out to black */
  --rt-gi-stamp: 340ms;     /* one stamp landing */
  --rt-gi-letter-gap: 90ms; /* between letters */
  --rt-gi-hold: 1400ms;     /* hold on the finished card */
  --rt-gi-burst: 900ms;     /* flame burst to transparent */
  --rt-gi-red: var(--rt-primary, #ed1c24);
  position: fixed;
  inset: 0;
  z-index: 3000;
  background: #000;
  color: #fff;
  overflow: hidden;
  display: block;
}
.rt-gi[hidden] { display: none; }

.rt-gi-video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  background: #000;
  opacity: 0;
}
.rt-gi.is-clip .rt-gi-video { opacity: 1; }

/* ---- Key frames in the clip slot ---------------------------------------- */
.rt-gi-stills {
  position: absolute;
  inset: 0;
  background: #000;
  opacity: 0;
}
.rt-gi.is-clip .rt-gi-stills { opacity: 1; }
.rt-gi-still {
  position: absolute;
  inset: 0;
  opacity: 0;
  transition: opacity 180ms ease;
}
.rt-gi-still img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transform-origin: center center;
}
.rt-gi-still.is-on { opacity: 1; }
/* The slow push: a few percent over the frame's life, alternating drift so
   consecutive frames do not feel like the same move twice. Runs a touch
   longer than the frame so it never freezes before the next one fades in. */
.rt-gi-still.is-on img { animation: rt-gi-push 1400ms ease-out forwards; }
.rt-gi-still:nth-child(even).is-on img { animation-name: rt-gi-push-alt; }
@keyframes rt-gi-push {
  from { transform: scale(1.02) translate(0.5%, 0.3%); }
  to   { transform: scale(1.12) translate(-1%, -0.8%); }
}
@keyframes rt-gi-push-alt {
  from { transform: scale(1.02) translate(-0.5%, 0.3%); }
  to   { transform: scale(1.12) translate(1%, -0.8%); }
}

.rt-gi-fire {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
}

/* ---- The stamp card ------------------------------------------------------ */
.rt-gi-stage {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: clamp(10px, 2vh, 22px);
  padding: 6vh 6vw;
  text-align: center;
  opacity: 0;
  pointer-events: none;
}
.rt-gi.is-card .rt-gi-stage { opacity: 1; }
.rt-gi.is-burst .rt-gi-stage { transition: opacity calc(var(--rt-gi-burst) * 0.6) ease; opacity: 0; }

.rt-gi-logo,
.rt-gi-letter,
.rt-gi-tagline {
  opacity: 0;
  transform: scale(1.6);
}
.rt-gi-logo.is-in,
.rt-gi-letter.is-in,
.rt-gi-tagline.is-in {
  animation: rt-gi-stamp var(--rt-gi-stamp) cubic-bezier(0.2, 1.4, 0.4, 1) forwards;
}
@keyframes rt-gi-stamp {
  0%   { opacity: 0; transform: scale(1.7); filter: blur(2px); }
  55%  { opacity: 1; transform: scale(0.94); filter: blur(0); }
  100% { opacity: 1; transform: scale(1); filter: blur(0); }
}
/* The whole card jolts when something lands. */
.rt-gi-stage.is-hit { animation: rt-gi-hit 220ms ease-out; }
@keyframes rt-gi-hit {
  0%   { transform: translate(0, 0); }
  30%  { transform: translate(-6px, 4px); }
  60%  { transform: translate(5px, -3px); }
  100% { transform: translate(0, 0); }
}

.rt-gi-logo {
  width: clamp(140px, 22vw, 300px);
  height: auto;
  filter: drop-shadow(0 12px 30px rgba(0, 0, 0, 0.7));
}

.rt-gi-word {
  display: flex;
  gap: 0.06em;
  font-family: var(--rt-font-display, "RT Display", "Arial Narrow", Impact, sans-serif);
  font-weight: var(--rt-font-display-weight, 400);
  font-size: clamp(3rem, 12vw, 9rem);
  line-height: 1;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: #fff;
  text-shadow: 0 6px 24px rgba(0, 0, 0, 0.8), 0 0 40px rgba(237, 28, 36, 0.35);
}
.rt-gi-letter { display: inline-block; }

.rt-gi-tagline {
  font-family: "Rye", "Smokum", "RT Display", serif;
  font-size: clamp(1.4rem, 4.2vw, 3.4rem);
  line-height: 1.15;
  color: var(--rt-gi-red);
  text-shadow: 0 3px 0 #3a0508, 0 8px 22px rgba(0, 0, 0, 0.8);
  max-width: 22ch;
  text-wrap: balance;
}

/* ---- Controls ------------------------------------------------------------ */
.rt-gi-skip {
  position: absolute;
  right: 22px;
  bottom: 22px;
  z-index: 2;
  appearance: none;
  border: 1px solid rgba(255, 255, 255, 0.55);
  background: rgba(0, 0, 0, 0.45);
  color: #fff;
  font: 600 0.9rem/1 inherit;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  padding: 10px 16px;
  border-radius: 999px;
  cursor: pointer;
  opacity: 0.85;
}
.rt-gi-skip:hover,
.rt-gi-skip:focus-visible { opacity: 1; outline: 2px solid #fff; outline-offset: 2px; }
.rt-gi.is-burst .rt-gi-skip,
.rt-gi.is-card .rt-gi-skip { opacity: 0; pointer-events: none; }

.rt-gi-sound {
  position: absolute;
  left: 22px;
  bottom: 22px;
  z-index: 2;
  appearance: none;
  border: 1px solid rgba(255, 255, 255, 0.55);
  background: rgba(0, 0, 0, 0.45);
  color: #fff;
  font: 600 0.9rem/1 inherit;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  padding: 10px 16px;
  border-radius: 999px;
  cursor: pointer;
  opacity: 0.85;
}
.rt-gi-sound:hover,
.rt-gi-sound:focus-visible { opacity: 1; outline: 2px solid #fff; outline-offset: 2px; }
.rt-gi-sound .fa-solid { margin-right: 6px; }
.rt-gi.is-burst .rt-gi-sound,
.rt-gi.is-card .rt-gi-sound { opacity: 0; pointer-events: none; }

.rt-gi-replay-row { margin-top: 10px; }
/* The play glyph IS this button's icon: the theme's hover arrow stays off. */
.rt-btn.rt-gi-replay::after { content: none; }
.rt-btn.rt-gi-replay i { margin-left: 4px; }

/* ---- Reduced motion: no fire, no shake, plain crossfades ---------------- */
@media (prefers-reduced-motion: reduce) {
  .rt-gi-logo.is-in,
  .rt-gi-letter.is-in,
  .rt-gi-tagline.is-in { animation: rt-gi-fade 300ms ease forwards; }
  .rt-gi-stage.is-hit { animation: none; }
  .rt-gi-video { transition: opacity 400ms ease; }
  .rt-gi-still.is-on img { animation: none; }
}
@keyframes rt-gi-fade {
  from { opacity: 0; transform: none; }
  to   { opacity: 1; transform: none; }
}