.prototype--gpt .kinetic-copy {
  z-index: 5;
}

.gpt-character {
  --character-x: 0vw;
  position: absolute;
  z-index: 4;
  left: 50%;
  bottom: -1.8vh;
  width: clamp(14rem, 22vw, 31rem);
  height: min(65vh, 43vw);
  pointer-events: none;
  opacity: 0;
  transform: translateX(calc(-50% + var(--character-x)));
  transition: opacity 480ms ease, transform 760ms var(--ease-film);
  will-change: transform, opacity;
}

.prototype.is-playing .gpt-character {
  opacity: 1;
}

.gpt-character[data-side="right"] {
  --character-x: -25vw;
}

.gpt-character[data-side="left"] {
  --character-x: 25vw;
}

.gpt-character[data-side="center"][data-action="page-turn"] {
  --character-x: -20vw;
}

.gpt-character[data-side="center"][data-action="finale"] {
  --character-x: 0vw;
  height: min(60vh, 40vw);
}

.gpt-character[data-action="push-word"] {
  width: clamp(16rem, 24vw, 34rem);
  height: min(58vh, 31vw);
}

.gpt-character[data-action="page-turn"] {
  width: clamp(18rem, 30vw, 40rem);
  height: min(68vh, 38vw);
}

.gpt-character__frame {
  position: absolute;
  inset: 0;
  margin: 0;
  opacity: 0;
  transform-origin: 50% 100%;
  transition: opacity 320ms ease;
  will-change: opacity, transform, filter;
}

.gpt-character__frame--active {
  opacity: 1;
}

.gpt-character__frame img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
  object-position: 50% 100%;
  filter:
    drop-shadow(0 1.4vh 1.7vh rgba(0, 0, 0, 0.52))
    saturate(0.92)
    contrast(1.02)
    brightness(0.94);
}

.gpt-character__ground {
  position: absolute;
  z-index: -1;
  left: 50%;
  bottom: 0.6vh;
  width: 72%;
  height: 4.5%;
  border-radius: 50%;
  opacity: 0.42;
  background: radial-gradient(ellipse, rgba(0, 0, 0, 0.72), transparent 70%);
  filter: blur(6px);
  transform: translateX(-50%);
}

.gpt-character__frame--active[data-action="idle"] {
  animation: character-idle 3.2s ease-in-out infinite;
}

.gpt-character__frame--active[data-action="look-back"] {
  animation: character-look-back 3.2s var(--ease-film) both;
}

.gpt-character__frame--active[data-action="hold-hands"] {
  animation: character-hold-hands 3.5s ease-in-out both;
}

.gpt-character__frame--active[data-action="push-word"] {
  animation: character-push-word 3.25s var(--ease-film) both;
}

.gpt-character__frame--active[data-action="page-turn"] {
  animation: character-page-turn 3.6s var(--ease-film) both;
}

.gpt-character__frame--active[data-action="finale"] {
  animation: character-finale 2.65s var(--ease-film) both;
}

.prototype--gpt .kinetic-copy[data-motion="push"].is-visible {
  animation: pushed-copy 3.25s var(--ease-film) both;
}

.prototype--gpt .kinetic-copy[data-motion="page"].is-visible,
.prototype--gpt .kinetic-copy[data-motion="turn"].is-visible {
  animation: page-copy-drift 3.6s var(--ease-film) both;
}

@keyframes character-idle {
  0%, 100% { transform: translate3d(0, 0, 0) scale(1); }
  50% { transform: translate3d(0, -0.45vh, 0) scale(1.006); }
}

@keyframes character-look-back {
  0% { transform: translate3d(-1.2vw, 0.8vh, 0) scale(0.975); filter: blur(2px); }
  32% { filter: blur(0); }
  55% { transform: translate3d(0.4vw, -0.25vh, 0) scale(1); }
  100% { transform: translate3d(0, 0, 0) scale(0.992); }
}

@keyframes character-hold-hands {
  0% { transform: translate3d(0, 0.55vh, 0) scale(0.965); }
  52% { transform: translate3d(0, -0.25vh, 0) scale(1.008); }
  100% { transform: translate3d(0, 0, 0) scale(1); }
}

@keyframes character-push-word {
  0% { transform: translate3d(-1.1vw, 0, 0) scale(0.985); }
  38% { transform: translate3d(0.75vw, -0.08vh, 0) scale(1.008); }
  60% { transform: translate3d(1.2vw, 0, 0) scale(1.012); }
  100% { transform: translate3d(0.45vw, 0, 0) scale(1); }
}

@keyframes character-page-turn {
  0% { transform: translate3d(-0.6vw, 0.4vh, 0) rotate(-0.6deg) scale(0.975); }
  46% { transform: translate3d(0.55vw, -0.35vh, 0) rotate(0.35deg) scale(1.01); }
  100% { transform: translate3d(0, 0, 0) rotate(0) scale(1); }
}

@keyframes character-finale {
  0% { transform: translate3d(0, 0.8vh, 0) scale(0.94); opacity: 0; }
  44% { opacity: 1; }
  100% { transform: translate3d(0, 0, 0) scale(1); opacity: 1; }
}

@keyframes pushed-copy {
  0%, 26% { transform: translate(calc(-50% + var(--copy-x)), calc(-50% + var(--copy-y))); }
  55% { transform: translate(calc(-50% + var(--copy-x) + 1.1vw), calc(-50% + var(--copy-y))); }
  100% { transform: translate(calc(-50% + var(--copy-x) + 0.5vw), calc(-50% + var(--copy-y))); }
}

@keyframes page-copy-drift {
  0% { transform: translate(calc(-50% + var(--copy-x) - 1vw), calc(-50% + var(--copy-y))) perspective(900px) rotateY(-4deg); }
  100% { transform: translate(calc(-50% + var(--copy-x)), calc(-50% + var(--copy-y))) perspective(900px) rotateY(0); }
}

@media (max-aspect-ratio: 4 / 3) {
  .gpt-character,
  .gpt-character[data-action="push-word"] {
    --character-x: 0vw !important;
    width: clamp(13rem, 44vw, 30rem);
    height: 48vh;
    bottom: -1.5vh;
  }

  .gpt-character[data-action="push-word"] {
    width: 62vw;
    height: 40vh;
  }
}

@media (prefers-reduced-motion: reduce) {
  .gpt-character__frame,
  .prototype--gpt .kinetic-copy {
    animation-duration: 1ms !important;
    animation-iteration-count: 1 !important;
  }
}