/* Game walkthrough films (/games/<game>/). The player chrome comes from
   explainer.css; which parts show when comes from the generated
   game-films.gen.css. This file is the look: type, shapes, and motion.
   Keyframes animate the individual rotate/translate/scale properties so they
   stack with whatever transform a beat has applied. */

.film--game {
  margin-bottom: 0;
}

/* Visibility defaults: hidden until a scene or beat shows them. */
.film--game [data-in],
.film--game [data-beat] {
  opacity: 0;
  transition: opacity 0.4s ease;
}
.film--game [data-on] {
  transform-box: fill-box;
  transform-origin: center;
  transition: transform 0.7s cubic-bezier(0.25, 1.25, 0.5, 1), opacity 0.45s ease, fill 0.3s ease;
}
.film--game .o-bottom {
  transform-box: fill-box;
  transform-origin: center bottom;
}
.film--game .o-lb {
  transform-box: fill-box;
  transform-origin: left bottom;
}

/* Type */
.gf-title {
  font: 900 46px var(--display);
  font-stretch: 72%;
  fill: var(--ink);
}
.gf-title--sm {
  font-size: 30px;
}
.gf-title--pink {
  fill: var(--pink);
}
.gf-big {
  font: 800 24px var(--display);
  font-stretch: 85%;
  fill: var(--ink);
}
.gf-label {
  font: 600 17px var(--body);
  fill: var(--ink-soft);
}
.gf-label--pink {
  fill: var(--pink);
  font-weight: 800;
}
.gf-say {
  font: 800 21px var(--display);
  font-stretch: 88%;
  fill: var(--ink);
}
.gf-tiny {
  font: 700 11px var(--body);
  letter-spacing: 0.08em;
  fill: var(--ink);
}
.gf-on-dark {
  fill: var(--paper);
}
.gf-baby {
  font: 900 19px var(--display);
  fill: var(--yellow);
}
.gf-baby--big {
  font-size: 40px;
  fill: var(--paper);
  stroke: var(--ink);
  stroke-width: 1.5px;
  paint-order: stroke;
}
.gf-btn {
  font: 800 19px var(--display);
  fill: var(--ink);
}
.gf-chip-text {
  font: 900 14px var(--display);
  letter-spacing: 0.1em;
  fill: var(--ink);
}
.gf-chip--yikes + .gf-chip-text {
  fill: var(--paper);
}
.gf-tape-text {
  font: 900 11px var(--display);
  letter-spacing: 0.24em;
  fill: var(--ink);
  opacity: 0.6;
}
.gf-emoji {
  font-family: "Apple Color Emoji", "Segoe UI Emoji", "Noto Color Emoji", sans-serif;
}

/* Shapes */
.gf-eyes {
  fill: none;
  stroke: var(--ink);
  stroke-width: 1.8;
  stroke-linecap: round;
}
.gf-eyes--big {
  stroke-width: 3.2;
}
.gf-outline {
  stroke: var(--ink);
  stroke-width: 2.4;
  stroke-linejoin: round;
}
.gf-shine {
  fill: none;
  stroke: #fff;
  stroke-width: 5;
  stroke-linecap: round;
  opacity: 0.85;
}
.gf-line {
  fill: none;
  stroke: var(--ink);
  stroke-width: 3;
  stroke-linecap: round;
}
.gf-line--thick {
  stroke-width: 5;
}
.gf-bubble {
  fill: var(--paper);
  stroke: var(--ink);
  stroke-width: 3;
  stroke-linejoin: round;
}
.gf-ring {
  fill: none;
  stroke: var(--ink);
  stroke-width: 3;
  stroke-dasharray: 10 12;
  opacity: 0.3;
}
.gf-tap {
  fill: none;
  stroke: var(--ink);
  stroke-width: 3;
}
.gf-block {
  fill: #f7e3c4;
  stroke: var(--ink);
  stroke-width: 2.2;
}
.gf-tape {
  fill: #b3b3bf;
  stroke: rgb(34 26 58 / 0.35);
  stroke-width: 1;
}
.gf-sel {
  fill: none;
  stroke: var(--ink);
  stroke-width: 4;
}
.gf-chip {
  stroke: var(--ink);
  stroke-width: 2.4;
}
.gf-chip--steady {
  fill: #c8f0c0;
}
.gf-chip--risky {
  fill: var(--yellow);
}
.gf-chip--yikes {
  fill: var(--ink);
}
.gf-dust {
  opacity: 0.85;
}

/* Always-on motion */
.gf-bob {
  animation: gf-bob 2.4s ease-in-out infinite;
}
.gf-float {
  animation: gf-float 1.6s ease-in-out infinite;
}
.gf-float--late {
  animation-delay: -0.8s;
}
.gf-rotor {
  transform-box: fill-box;
  transform-origin: center;
  animation: gf-rotor 0.12s linear infinite;
}
.gf-offright {
  transform: translate(320px, -40px);
}

/* Beat effects (see EFFECTS in game-films.mjs) */
@keyframes gf-bob {
  50% {
    translate: 0 -10px;
  }
}
@keyframes gf-float {
  50% {
    translate: 0 -14px;
    rotate: 8deg;
  }
}
@keyframes gf-rotor {
  50% {
    scale: 0.15 1;
  }
}
@keyframes gf-shake {
  25% {
    rotate: -3deg;
    translate: -2px 0;
  }
  75% {
    rotate: 3deg;
    translate: 2px 0;
  }
}
@keyframes gf-creak {
  25% {
    rotate: -2deg;
  }
  75% {
    rotate: 3deg;
  }
}
@keyframes gf-teeter {
  25% {
    rotate: -7deg;
  }
  75% {
    rotate: 8deg;
  }
}
@keyframes gf-popin {
  from {
    scale: 0.2;
    opacity: 0;
  }
  to {
    scale: 1;
    opacity: 1;
  }
}
@keyframes gf-popout {
  to {
    scale: 1.7;
    opacity: 0;
  }
}
@keyframes gf-ripple {
  from {
    scale: 0.3;
    opacity: 1;
  }
  to {
    scale: 1.6;
    opacity: 0;
  }
}
@keyframes gf-plunge-a {
  45% {
    translate: 0 30px;
  }
}
@keyframes gf-plunge-b {
  45% {
    translate: 0 30px;
  }
}
@keyframes gf-plunge-c {
  45% {
    translate: 0 30px;
  }
}
@keyframes gf-rain {
  from {
    translate: 0 0;
    rotate: 0deg;
  }
  to {
    translate: 30px 470px;
    rotate: 540deg;
  }
}
.gf-cf1 {
  animation-delay: 0.15s !important;
}
.gf-cf2 {
  animation-delay: 0.3s !important;
}
.gf-cf3 {
  animation-delay: 0.45s !important;
}
@keyframes gf-dance {
  25% {
    rotate: -14deg;
    translate: -6px -6px;
  }
  75% {
    rotate: 14deg;
    translate: 6px -6px;
  }
}
@keyframes gf-wipe {
  from {
    clip-path: inset(0 100% 0 0);
    opacity: 1;
  }
  to {
    clip-path: inset(0 0 0 0);
    opacity: 1;
  }
}
@keyframes gf-wink {
  40% {
    rotate: -8deg;
    translate: 0 -10px;
  }
  70% {
    rotate: 4deg;
  }
}

/* Cups: the lights, the stamp, the numbers */
.gf-dim {
  fill: var(--ink);
  fill-opacity: 0.66;
}
.gf-spot {
  fill: var(--yellow);
  fill-opacity: 0.22;
}
.gf-pool {
  fill: var(--yellow);
  fill-opacity: 0.5;
}
.gf-glow {
  fill: var(--yellow);
  filter: blur(10px);
}
.gf-beam {
  fill: var(--yellow);
  fill-opacity: 0.45;
  filter: blur(4px);
}
.gf-stamp {
  font-family: var(--display);
  font-weight: 900;
  font-stretch: 80%;
  fill: var(--ink);
}
.gf-say--pink {
  fill: var(--pink);
}
.gf-num {
  font: 900 26px var(--display);
  fill: var(--paper);
  stroke: var(--ink);
  stroke-width: 1.4px;
  paint-order: stroke;
}
.gf-num--1 { transition-delay: 0.08s; }
.gf-num--2 { transition-delay: 0.16s; }
.gf-num--3 { transition-delay: 0.24s; }
.gf-num--4 { transition-delay: 0.32s; }
.gf-breathe {
  animation: gf-breathe 2.6s ease-in-out infinite;
}
.gf-breathe--1 { animation-delay: -0.5s; }
.gf-breathe--2 { animation-delay: -1.1s; }
.gf-breathe--3 { animation-delay: -1.7s; }
.gf-breathe--4 { animation-delay: -2.2s; }
.gf-dance--1 { animation-delay: -0.12s !important; }
.gf-dance--2 { animation-delay: -0.25s !important; }
.gf-dance--3 { animation-delay: -0.37s !important; }
@keyframes gf-breathe {
  50% {
    scale: 1.03 0.97;
  }
}
@keyframes gf-hop {
  50% {
    translate: 0 -9px;
    scale: 1.08 0.94;
  }
}
@keyframes gf-wiggle {
  25% {
    rotate: -12deg;
  }
  75% {
    rotate: 12deg;
  }
}
@keyframes gf-slam {
  from {
    scale: 2.4;
    opacity: 0;
  }
  to {
    scale: 1;
    opacity: 1;
  }
}

@media (prefers-reduced-motion: reduce) {
  .gf-breathe,
  .gf-bob,
  .gf-float,
  .gf-rotor {
    animation: none;
  }
}
@keyframes gf-scrap {
  from {
    translate: 0 0;
    rotate: 0deg;
    opacity: 1;
  }
  to {
    translate: var(--sx) var(--sy);
    rotate: var(--sr);
    opacity: 0;
  }
}