/* Celular do topo da landing (#461), do protótipo aprovado: telas em miniatura com os tokens do app. A base é o quadro
   final, Meu dia com a visita Agendada e as três etapas acesas: é o topo estático e o movimento reduzido. */
.landing-phone {
  max-width: 380px;
  margin: var(--space-4) auto 0;
}

.landing-phone .phone-steps {
  display: flex;
  justify-content: center;
  gap: var(--space-3);
  margin: 0;
  padding: 0;
  isolation: isolate;
  list-style: none;
  font-size: 13px;
  font-weight: 700;
  color: var(--text);
}

.landing-phone .phone-steps li {
  position: relative;
  padding: 2px var(--space-2);
  border-radius: var(--radius-pill);
  white-space: nowrap;
}

.landing-phone .phone-steps li + li::before {
  content: "›";
  position: absolute;
  left: -10px;
  color: var(--muted);
}

.landing-phone .phone-steps i {
  position: absolute;
  inset: 0;
  z-index: -1;
  border: 2px solid var(--accent);
  border-radius: inherit;
  background: var(--bg);
}

@media (width < 360px) {
  .landing-phone .phone-steps {
    gap: var(--space-2);
    font-size: 12px;
  }

  .landing-phone .phone-steps li {
    padding-inline: 6px;
  }

  .landing-phone .phone-steps li + li::before {
    left: -7px;
  }
}

/* O celular é cortado embaixo por um esmaecimento, para o topo caber na primeira tela. */
.landing-phone .phone-stage {
  height: 240px;
  margin-top: var(--space-1);
  overflow: hidden;
  perspective: 1000px;
  mask-image: linear-gradient(#000 86%, transparent);
}

.landing-phone .phone {
  position: relative;
  width: 236px;
  height: 340px;
  margin: 0 auto;
  transform-style: preserve-3d;
  transform: rotateY(180deg);
}

.landing-phone .phone-face {
  position: absolute;
  inset: 0;
  overflow: hidden;
  border: 6px solid var(--text);
  border-radius: 34px;
  background: var(--bg);
  text-align: left;
  backface-visibility: hidden;
  box-shadow: var(--elevation);
}

.landing-phone .phone-back {
  transform: rotateY(180deg);
}

.landing-phone .phone-bar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  height: 24px;
  margin: 0;
  padding: 0 18px;
  font-size: 10px;
  font-weight: 700;
  color: var(--text);
}

.landing-phone .phone-bar::after {
  content: "";
  width: 16px;
  height: 8px;
  border: 1.5px solid currentcolor;
  border-radius: 3px;
}

.landing-phone .phone-notch {
  position: absolute;
  top: 6px;
  left: 50%;
  width: 64px;
  height: 14px;
  margin-left: -32px;
  border-radius: var(--radius-pill);
  background: var(--text);
}

.landing-phone .sc {
  position: absolute;
  inset: 24px 0 0;
  padding: var(--space-2) var(--space-3);
  font-size: 12px;
  line-height: 1.35;
  color: var(--text);
}

.landing-phone .sc p {
  margin: 0;
  color: inherit;
}

.landing-phone :is(.s2, .s3, .s4, .m-none) {
  opacity: 0;
}

/* Telas em miniatura */
.landing-phone .m-h1 {
  font-size: 17px;
  font-weight: 700;
  letter-spacing: -.03em;
  line-height: 1.15;
}

.landing-phone .m-muted {
  color: var(--muted) !important;
}

.landing-phone .m-prog {
  color: var(--accent) !important;
  font-size: 10px;
  font-weight: 700;
}

.landing-phone .m-prog::after {
  content: "";
  display: block;
  height: 3px;
  margin: 4px 0 8px;
  border-radius: var(--radius-pill);
  background: linear-gradient(to right, var(--accent) var(--p), var(--surface) var(--p));
}

.landing-phone .m-btn {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  height: 32px;
  margin-top: var(--space-2);
  border-radius: var(--radius-field);
  background: var(--action);
  color: var(--on-action);
  font-weight: 700;
}

.landing-phone .m-badge {
  display: inline-block;
  padding: 1px var(--space-2);
  border-radius: var(--radius-pill);
  font-size: 10.5px;
  white-space: nowrap;
}

.landing-phone .m-warn {
  background: var(--warning-bg);
  color: var(--warning);
}

.landing-phone .m-ok {
  background: var(--success-bg);
  color: var(--success);
}

.landing-phone .m-opt {
  position: relative;
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 6px var(--space-2);
  border: 1px solid var(--line);
  border-radius: var(--radius-field);
  background: var(--field);
}

.landing-phone .m-opt::before,
.landing-phone .m-on::before {
  content: "";
  flex: none;
  width: 11px;
  height: 11px;
  border: 1.5px solid var(--line);
  border-radius: 3px;
}

.landing-phone .m-on {
  position: absolute;
  inset: -1px;
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 6px var(--space-2);
  border: 2px solid var(--selected);
  border-radius: inherit;
  background: var(--selected-subtle);
  font-weight: 700;
}

.landing-phone .m-on::before {
  content: "✓";
  display: grid;
  place-items: center;
  border: 0;
  background: var(--selected);
  color: var(--selected-subtle);
  font-size: 9px;
}

.landing-phone .m-week {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 2px;
  margin: 3px 0;
  text-align: center;
  font-size: 9px;
  color: var(--muted);
}

.landing-phone .m-week b {
  display: block;
  padding: 1px 0;
  border: 1.5px solid transparent;
  border-radius: 7px;
  color: var(--text);
  font-size: 12px;
}

.landing-phone .m-week .sel b {
  border-color: var(--selected);
  background: var(--selected-subtle);
  text-decoration: underline;
}

.landing-phone .m-lbl {
  margin-top: 6px !important;
  font-size: 11px;
}

.landing-phone .m-field {
  padding: 5px var(--space-2);
  border: 1px solid var(--line);
  border-radius: var(--radius-field);
  background: var(--field);
  white-space: nowrap;
}

.landing-phone .tap {
  position: absolute;
  z-index: 2;
  width: 34px;
  height: 34px;
  margin: -17px 0 0 -17px;
  border-radius: 50%;
  background: var(--accent);
  opacity: 0;
  pointer-events: none;
}

/* 1. Bio */
.landing-phone .m-handle {
  text-align: center;
  font-weight: 700;
}

.landing-phone .m-prof {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 10px 0 6px;
}

.landing-phone .m-ava {
  display: grid;
  place-items: center;
  flex: none;
  width: 50px;
  height: 50px;
  border: 2px solid var(--accent);
  border-radius: 50%;
  background: var(--surface);
  font-size: 15px;
  font-weight: 700;
}

.landing-phone .m-link {
  position: relative;
  display: flex;
  align-items: center;
  gap: 4px;
  margin: 4px -4px 0 !important;
  padding: 2px 4px;
  border-radius: 6px;
  color: var(--accent) !important;
  font-size: 11.5px;
  font-weight: 700;
  white-space: nowrap;
}

.landing-phone .m-link svg {
  flex: none;
  width: 12px;
  height: 12px;
  fill: none;
  stroke: currentcolor;
  stroke-width: 2.4;
}

.landing-phone .m-twin {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 6px;
  margin: 10px 0;
}

.landing-phone .m-twin span {
  padding: 5px 0;
  border-radius: var(--radius-field);
  background: var(--surface);
  text-align: center;
  font-size: 11px;
  font-weight: 700;
}

.landing-phone .m-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 3px;
}

.landing-phone .m-grid i {
  aspect-ratio: 1;
  background: var(--surface);
}

.landing-phone .m-grid i:nth-child(2n) {
  background: var(--selected-subtle);
}

/* 2. Horários, justo para "Continuar" caber a 375×712 */
.landing-phone .s2 .m-prog::after {
  margin: 3px 0 5px;
}

.landing-phone .m-times {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 5px;
}

.landing-phone .m-times :is(.m-opt, .m-on) {
  gap: 4px;
  padding: 4px 5px;
}

.landing-phone .s2 .m-btn {
  margin-top: 6px;
}

.landing-phone .m-count {
  display: grid;
  margin-top: 4px !important;
  color: var(--muted) !important;
  font-size: 10px;
  line-height: 1.25;
}

.landing-phone .m-count > * {
  grid-area: 1 / 1;
}

.landing-phone .m-count .pick {
  color: var(--text);
  font-weight: 700;
}

.landing-phone .type {
  display: inline-block;
}

/* 4. Solicitação recebida, com o aviso por cima */
.landing-phone .m-notif {
  position: absolute;
  z-index: 3;
  top: 26px;
  right: 8px;
  left: 8px;
  display: grid;
  grid-template-columns: 30px 1fr;
  gap: var(--space-2);
  align-items: center;
  padding: var(--space-2);
  border-radius: var(--radius);
  background: var(--surface);
  box-shadow: var(--elevation);
  color: var(--text);
  font-size: 11px;
  line-height: 1.3;
  transform: translateY(-140%);
}

.landing-phone .m-notif > span:last-child {
  display: grid;
}

.landing-phone .m-notif > span:last-child span {
  color: var(--muted);
}

.landing-phone .m-nicon {
  display: grid;
  place-items: center;
  width: 30px;
  height: 30px;
  border-radius: var(--radius-field);
  background: var(--action);
  color: var(--on-action);
}

.landing-phone .m-nicon svg {
  width: 18px;
  height: 18px;
}

.landing-phone .m-meta {
  margin: 4px 0 !important;
  color: var(--muted) !important;
  font-size: 10.5px;
}

.landing-phone .m-meta .m-badge {
  margin-top: 3px;
}

/* 5. Meu dia */
.landing-phone .m-visit {
  position: relative;
  display: grid;
  gap: 1px;
  margin-top: 10px;
  padding: 10px 12px;
  border-radius: var(--radius);
  background: var(--raised);
  box-shadow: var(--elevation);
}

.landing-phone .m-visit::after {
  content: "";
  position: absolute;
  inset: 0;
  border: 2px solid var(--accent);
  border-radius: inherit;
  opacity: 0;
}

.landing-phone .m-vt {
  font-size: 15px;
  font-variant-numeric: tabular-nums;
}

.landing-phone small {
  font-size: inherit;
}

.landing-phone .m-visit :is(span, small) {
  color: var(--muted);
}

.landing-phone .m-visit .m-badge {
  justify-self: start;
  margin-top: 4px;
  color: var(--success);
}

@media (forced-colors: active) {
  .landing-phone .phone-face {
    border-color: CanvasText;
  }

  .landing-phone :is(.m-opt, .m-badge, .m-visit, .m-btn, .m-notif, .phone-steps i) {
    border: 1px solid CanvasText;
  }
}

/* Tela em loop da Landing Equipe (#769): o mesmo celular, com as telas de Solicitações, da solicitação com Quem atende e
   do dia do técnico. A base é o quadro final, o celular do técnico com o aviso "Nova visita" e as quatro etapas da
   legenda, que é o que vê quem pede movimento reduzido. */
.landing-phone-team {
  margin-bottom: 0;
}

.landing-phone-team .team-captions {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--space-1) var(--space-4);
  margin: 0;
  padding: 0;
  list-style: none;
  color: var(--text);
  font-size: 13px;
  font-weight: 700;
}

.landing-phone-team .team-captions li {
  position: relative;
  padding: 2px var(--space-2);
  border: 2px solid var(--accent);
  border-radius: var(--radius-pill);
  background: var(--bg);
  white-space: nowrap;
}

/* Parada, a legenda mostra as quatro etapas em ordem, com o separador da Landing. */
.landing-phone-team .team-captions li + li::before {
  content: "›";
  position: absolute;
  left: -14px;
  color: var(--muted);
}

.landing-phone-team .phone-stage {
  height: 340px;
  mask-image: linear-gradient(#000 96%, transparent);
}

.landing-phone-team .t2 {
  opacity: 0;
}

.landing-phone-team .t-notif-visit {
  transform: none;
}

/* Meu dia começa abaixo do aviso, que fica sobre a tela no quadro final. */
.landing-phone-team .t4 {
  padding-top: 64px;
}

.landing-phone-team .m-tabs {
  display: flex;
  gap: var(--space-3);
  margin: 6px 0 4px !important;
  border-bottom: 1px solid var(--line);
  font-size: 11px;
}

.landing-phone-team .m-tab-on {
  border-bottom: 2px solid var(--selected);
}

.landing-phone-team .m-row {
  position: relative;
  display: grid;
  gap: 1px;
  padding: var(--space-2) 0;
  border-bottom: 1px solid var(--line);
}

.landing-phone-team .m-row .m-muted {
  font-size: 11px;
}

.landing-phone-team .m-row .m-badge {
  justify-self: start;
  margin-top: 3px;
  color: var(--warning);
}

.landing-phone-team .t2 .m-lbl {
  margin: 6px 0 3px !important;
  font-weight: 700;
}

.landing-phone-team .t2 .m-opt + .m-opt {
  margin-top: 4px;
}

.landing-phone-team .m-person,
.landing-phone-team .m-person .m-on {
  display: grid;
  grid-template-columns: 11px minmax(0, 1fr);
  column-gap: 6px;
  align-items: center;
  padding: 3px var(--space-2);
  line-height: 1.2;
}

.landing-phone-team .m-person::before,
.landing-phone-team .m-person .m-on::before {
  grid-row: 1 / span 2;
  border-radius: 50%;
}

.landing-phone-team .m-person small {
  overflow: hidden;
  color: var(--muted);
  font-size: 10px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.landing-phone-team .m-person .m-on {
  font-weight: 400;
}

/* Quem atende é escolha de um: o marcado é um rádio cheio, como na demonstração do passo 2. */
.landing-phone-team .m-person .m-on::before {
  content: "";
  box-shadow: inset 0 0 0 2px var(--selected-subtle);
}

.landing-phone-team .m-off {
  border-style: dashed;
  background: transparent;
  color: var(--muted);
}

.landing-phone-team .m-off::before {
  visibility: hidden;
}

@media (forced-colors: active) {
  .landing-phone-team .team-captions li {
    border-color: CanvasText;
  }
}

/* Movimento: só sem pedido de movimento reduzido; com ele, o topo fica no quadro final. Ciclo de 8 s, em loop; os
   percentuais vêm de t × 12,5. Fora da tela, o ciclo para (landing_phone_controller). */
@media (prefers-reduced-motion: no-preference) {
  .landing-phone .anim {
    animation: 8s linear infinite;
  }

  .landing-phone .phone {
    animation-name: phone-flip;
  }

  .landing-phone .s1 {
    animation-name: phone-s1;
  }

  .landing-phone .s2 {
    animation-name: phone-s2;
  }

  .landing-phone .s3 {
    animation-name: phone-s3;
  }

  .landing-phone .s4 {
    animation-name: phone-s4;
  }

  .landing-phone .s5 {
    animation-name: phone-s5;
  }

  .landing-phone .m-notif {
    animation-name: phone-notif;
  }

  .landing-phone .m-visit {
    animation-name: phone-visit;
  }

  .landing-phone .m-visit::after {
    animation: 8s linear infinite phone-glow;
  }

  .landing-phone .p1 {
    animation-name: phone-p1;
  }

  .landing-phone .p2 {
    animation-name: phone-p2;
  }

  .landing-phone .p3 {
    animation-name: phone-p3;
  }

  .landing-phone .pick {
    animation-name: phone-pick;
  }

  .landing-phone .m-none {
    animation-name: phone-unpick;
  }

  .landing-phone .type {
    animation-name: phone-type;
  }

  .landing-phone .m-link {
    animation-name: phone-link;
  }

  /* Toques e botões pressionados: um keyframe só, deslocado pelo instante do toque. */
  .landing-phone .tap {
    animation-name: phone-tap;
    animation-delay: var(--at);
  }

  .landing-phone .press {
    animation-name: phone-press;
    animation-delay: var(--at);
  }

  /* Landing Equipe (#769): ciclo de 16 s; os percentuais vêm de t × 6,25. A legenda mostra uma etapa por vez, no lugar. */
  .landing-phone-team .anim {
    animation-duration: 16s;
  }

  .landing-phone-team .team-captions {
    display: grid;
    justify-items: center;
  }

  .landing-phone-team .team-captions li {
    grid-area: 1 / 1;
    opacity: 0;
  }

  .landing-phone-team .team-captions li + li::before {
    content: none;
  }

  .landing-phone-team .q1 {
    animation-name: team-q1;
  }

  .landing-phone-team .q2 {
    animation-name: team-q2;
  }

  .landing-phone-team .q3 {
    animation-name: team-q3;
  }

  .landing-phone-team .q4 {
    animation-name: team-q4;
  }

  .landing-phone-team .phone {
    animation-name: team-flip;
  }

  .landing-phone-team .t1 {
    animation-name: team-t1;
  }

  .landing-phone-team .t2 {
    animation-name: team-t2;
  }

  .landing-phone-team .t-notif-request {
    animation-name: team-notif-request;
  }

  .landing-phone-team .t-notif-visit {
    animation-name: team-notif-visit;
  }

  .landing-phone-team .t-pick-time {
    animation-name: team-pick-time;
  }

  .landing-phone-team .m-visit {
    animation-name: team-visit;
  }

  .landing-phone-team .m-visit::after {
    animation: none;
  }

  .landing-phone-team .tap {
    animation-name: team-tap;
  }

  .landing-phone-team .press {
    animation-name: team-press;
  }

  /* Fora da tela, as duas telas em loop param (landing_phone_controller); por último, pela ordem de especificidade. */
  .landing-phone[data-paused] .anim,
  .landing-phone[data-paused] .m-visit::after {
    animation-play-state: paused;
  }
}

@keyframes phone-flip {
  0%, 45% {
    transform: rotateY(0);
    animation-timing-function: ease-in;
  }

  48.1% {
    transform: rotateY(90deg) scale(.94);
    animation-timing-function: ease-out;
  }

  51.25%, 93.75% {
    transform: rotateY(180deg);
    animation-timing-function: ease-in;
  }

  96.9% {
    transform: rotateY(270deg) scale(.94);
    animation-timing-function: ease-out;
  }

  100% {
    transform: rotateY(360deg);
  }
}

@keyframes phone-s1 {
  0%, 12.5% {
    opacity: 1;
    transform: none;
  }

  15.6%, 90% {
    opacity: 0;
    transform: translateX(-24px);
  }

  90.1%, 100% {
    opacity: 1;
    transform: none;
  }
}

@keyframes phone-s2 {
  0%, 12.5% {
    opacity: 0;
    transform: translateX(24px);
  }

  15.6%, 31.25% {
    opacity: 1;
    transform: none;
  }

  34.4%, 100% {
    opacity: 0;
    transform: translateX(-24px);
  }
}

@keyframes phone-s3 {
  0%, 31.25% {
    opacity: 0;
    transform: translateX(24px);
  }

  34.4%, 90% {
    opacity: 1;
    transform: none;
  }

  90.1%, 100% {
    opacity: 0;
  }
}

@keyframes phone-s4 {
  0%, 70% {
    opacity: 1;
    transform: none;
  }

  73.1%, 99.9% {
    opacity: 0;
    transform: translateX(-24px);
  }

  100% {
    opacity: 1;
  }
}

@keyframes phone-s5 {
  0%, 70% {
    opacity: 0;
    transform: translateX(24px);
  }

  73.1%, 100% {
    opacity: 1;
    transform: none;
  }
}

@keyframes phone-notif {
  0%, 50% {
    transform: translateY(-140%);
  }

  52.5%, 61.25% {
    transform: none;
  }

  63.75%, 100% {
    transform: translateY(-140%);
  }
}

@keyframes phone-visit {
  0%, 72% {
    opacity: 0;
    transform: translateY(-12px);
  }

  75.5%, 100% {
    opacity: 1;
    transform: none;
  }
}

@keyframes phone-glow {
  0%, 74% {
    opacity: 0;
  }

  76% {
    opacity: 1;
  }

  86%, 100% {
    opacity: 0;
  }
}

@keyframes phone-p1 {
  0%, 12.5% {
    opacity: 1;
  }

  13.5%, 93.75% {
    opacity: 0;
  }

  94.75%, 100% {
    opacity: 1;
  }
}

@keyframes phone-p2 {
  0%, 12.5% {
    opacity: 0;
  }

  13.5%, 45% {
    opacity: 1;
  }

  46%, 100% {
    opacity: 0;
  }
}

@keyframes phone-p3 {
  0%, 46% {
    opacity: 0;
  }

  47%, 93.75% {
    opacity: 1;
  }

  94.75%, 100% {
    opacity: 0;
  }
}

@keyframes phone-unpick {
  0%, 21.2% {
    opacity: 1;
  }

  21.3%, 100% {
    opacity: 0;
  }
}

@keyframes phone-pick {
  0%, 21.2% {
    opacity: 0;
  }

  21.3%, 100% {
    opacity: 1;
  }
}

@keyframes phone-type {
  0%, 33% {
    clip-path: inset(0 100% 0 0);
    animation-timing-function: steps(16);
  }

  39%, 100% {
    clip-path: inset(0);
  }
}

@keyframes phone-link {
  0%, 8% {
    background: transparent;
  }

  8.5%, 12.5% {
    background: var(--selected-subtle);
  }

  13%, 100% {
    background: transparent;
  }
}

@keyframes phone-tap {
  0% {
    opacity: 0;
    transform: scale(.4);
  }

  1% {
    opacity: .45;
    transform: scale(.6);
  }

  4.5%, 100% {
    opacity: 0;
    transform: scale(1.5);
  }
}

@keyframes phone-press {
  0% {
    transform: none;
  }

  1% {
    transform: scale(.94);
  }

  3%, 100% {
    transform: none;
  }
}

@keyframes team-q1 {
  0%, 19% {
    opacity: 1;
  }

  20%, 100% {
    opacity: 0;
  }
}

@keyframes team-q2 {
  0%, 19% {
    opacity: 0;
  }

  20%, 39% {
    opacity: 1;
  }

  40%, 100% {
    opacity: 0;
  }
}

@keyframes team-q3 {
  0%, 39% {
    opacity: 0;
  }

  40%, 61% {
    opacity: 1;
  }

  62%, 100% {
    opacity: 0;
  }
}

@keyframes team-q4 {
  0%, 61% {
    opacity: 0;
  }

  62%, 98% {
    opacity: 1;
  }

  99%, 100% {
    opacity: 0;
  }
}

@keyframes team-flip {
  0%, 60% {
    transform: rotateY(0);
    animation-timing-function: ease-in;
  }

  63% {
    transform: rotateY(90deg) scale(.94);
    animation-timing-function: ease-out;
  }

  66%, 94% {
    transform: rotateY(180deg);
    animation-timing-function: ease-in;
  }

  97% {
    transform: rotateY(270deg) scale(.94);
    animation-timing-function: ease-out;
  }

  100% {
    transform: rotateY(360deg);
  }
}

@keyframes team-t1 {
  0%, 19% {
    opacity: 1;
    transform: none;
  }

  21%, 100% {
    opacity: 0;
    transform: translateX(-24px);
  }
}

@keyframes team-t2 {
  0%, 19% {
    opacity: 0;
    transform: translateX(24px);
  }

  21%, 94% {
    opacity: 1;
    transform: none;
  }

  95%, 100% {
    opacity: 0;
  }
}

@keyframes team-notif-request {
  0%, 3% {
    transform: translateY(-140%);
  }

  5%, 13% {
    transform: none;
  }

  15%, 100% {
    transform: translateY(-140%);
  }
}

@keyframes team-notif-visit {
  0%, 67% {
    transform: translateY(-140%);
  }

  70%, 92% {
    transform: none;
  }

  95%, 100% {
    transform: translateY(-140%);
  }
}

@keyframes team-pick-time {
  0%, 29.3% {
    opacity: 0;
  }

  29.4%, 100% {
    opacity: 1;
  }
}

@keyframes team-visit {
  0%, 72% {
    opacity: 0;
    transform: translateY(-12px);
  }

  75%, 100% {
    opacity: 1;
    transform: none;
  }
}

@keyframes team-tap {
  0% {
    opacity: 0;
    transform: scale(.4);
  }

  .5% {
    opacity: .45;
    transform: scale(.6);
  }

  2.25%, 100% {
    opacity: 0;
    transform: scale(1.5);
  }
}

@keyframes team-press {
  0% {
    transform: none;
  }

  .5% {
    transform: scale(.94);
  }

  1.5%, 100% {
    transform: none;
  }
}