/* Direction 06: account collection. */

/* The owner's toy-style pictures share one quiet stage; each picture works on both themes. */
.dog-hero-scene {
  width: 100%;
  max-width: 410px;
  margin-inline: auto;
  min-width: 0;
  align-self: center;
}
.dog-stage {
  position: relative;
  width: 100%;
  aspect-ratio: 1;
  isolation: isolate;
}
.dog-sway,
.dog-stage img {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
}
.dog-stage img {
  pointer-events: none;
}
/* A slow 12 s back and forth: it pivots near the bottom of the picture and narrows a touch
   at each end, as a figure does when it turns. */
.dog-sway {
  transform-origin: 50% 86%;
  animation: dog-sway 12s ease-in-out infinite;
  animation-play-state: paused;
}
.is-flipped .dog-sway {
  animation-name: dog-sway-flipped;
}
.is-playing .dog-sway {
  animation-play-state: running;
}
@keyframes dog-sway {
  0%,
  100% {
    transform: rotate(-1.4deg) scaleX(0.985);
  }
  50% {
    transform: rotate(1.4deg) scaleX(1) translateY(-0.6%);
  }
}
@keyframes dog-sway-flipped {
  0%,
  100% {
    transform: scaleX(-1) rotate(1.4deg) scaleX(0.985);
  }
  50% {
    transform: scaleX(-1) rotate(-1.4deg) translateY(-0.6%);
  }
}
/* Compact characters are small, so their sway is wider and quicker to read as motion. */
.character-compact .dog-sway {
  animation-name: dog-sway-compact;
  animation-duration: 9s;
}
.character-compact.is-flipped .dog-sway {
  animation-name: dog-sway-compact-flipped;
}
@keyframes dog-sway-compact {
  0%,
  100% {
    transform: rotate(-2.6deg) scaleX(0.98);
  }
  50% {
    transform: rotate(2.6deg) scaleX(1) translateY(-1.2%);
  }
}
@keyframes dog-sway-compact-flipped {
  0%,
  100% {
    transform: scaleX(-1) rotate(2.6deg) scaleX(0.98);
  }
  50% {
    transform: scaleX(-1) rotate(-2.6deg) translateY(-1.2%);
  }
}
@media (prefers-reduced-motion: reduce) {
  .dog-sway {
    animation: none !important;
  }
  .is-flipped .dog-sway {
    transform: scaleX(-1);
  }
}

.accounts-character-intro {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(260px, 380px);
  align-items: center;
  gap: 56px;
  margin-bottom: 38px;
}
.accounts-character-copy {
  min-width: 0;
}
.accounts-intro-description {
  max-width: 480px;
  margin-top: 24px;
  color: var(--muted);
  font-size: 15px;
  line-height: 1.8;
}
.character-compact {
  max-width: 340px;
}
@media (max-width: 900px) {
  .accounts-character-intro {
    gap: 28px;
    grid-template-columns: minmax(0, 1fr) 280px;
  }
}
@media (max-width: 600px) {
  .accounts-character-intro {
    grid-template-columns: 1fr;
    gap: 12px;
    margin-bottom: 30px;
  }
  .character-compact {
    max-width: 210px;
  }
  .accounts-intro-description {
    font-size: 14px;
    margin-top: 18px;
  }
}

@media (max-width: 600px) {
  .dog-hero-scene {
    max-width: 260px;
  }
  .character-compact {
    max-width: 210px;
  }
}
.review-character-intro .accounts-intro-description {
  max-width: 600px;
}

/* A quiet contact desk, with the headset mascot reserved for Support. */