/* Foto da apresentação */
.intro-photo {
  margin-top: 26px;
  width: 100%;
  aspect-ratio: 4/5;
  border: 1px solid var(--line);
  border-radius: 3px;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #0c0c0c;
}

.intro-photo img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  display: block;
}

/* A foto nova aparece espelhada sem alterar o arquivo original. */
.intro-photo img.foto-espelhada {
  object-fit: cover;
  object-position: 42% 52%;
  transform: scaleX(-1);
}

/* Faixa de texto animada */
.marquee {
  margin-top: 22px;
  border-top: 1px solid var(--line-soft);
  border-bottom: 1px solid var(--line-soft);
  overflow: hidden;
  white-space: nowrap;
  padding: 9px 0;
}

.marquee span {
  display: inline-block;
  font-size: 9.5px;
  letter-spacing: 0.22em;
  color: rgba(222, 255, 145, 0.500);
  animation: slide 34s linear infinite;
}

/* O texto se repete no HTML, então deslizar até a metade fecha o ciclo. */
@keyframes slide {
  from { transform: translateX(0); }
  to { transform: translateX(-50%); }
}

/* Em telas largas, a foto fica ao lado do texto. */
@media (min-width: 720px) {
  .intro-grid {
    display: grid;
    grid-template-columns: 1.05fr 1fr;
    gap: 12px;
    align-items: start;
  }

  /* A moldura acompanha a margem direita e começa na linha da saudação. */
  .screen[data-screen="intro"] .intro-photo { margin-top: 6px; }
  /* Enquadramento da foto escolhido na prévia, sem mover sua moldura. */
  .screen[data-screen="intro"] .intro-photo img.foto-espelhada { translate: 0 -27px; scale: 1.23; }
  .screen[data-screen="intro"] .marquee { translate: 0 193px; }
}

@media (min-width: 720px) and (min-height: 851px) and (max-height: 999px) {
  .screen[data-screen="intro"] .marquee {
    translate: 0 clamp(0px, calc(84dvh - 605px), 193px);
  }
}

@media (min-width: 720px) and (max-height: 850px) {
  .screen[data-screen="intro"] .marquee { translate: none; }
}

@media (max-width:719px){
  /* No celular, a foto ocupa a coluna sem herdar ajustes experimentais do editor. */
  .screen[data-screen="intro"] .intro-photo{
    width:min(72vw,280px);
    margin:22px auto 0;
  }
  .screen[data-screen="intro"] .intro-photo img.foto-espelhada{
    translate:0 -10px;
    scale:1.18;
  }
}