/* tour.
   Celular e tablet: vídeo 4:5 em loop, legendas como texto comum abaixo.
   Desktop (base): 3 stills em tamanhos diferentes, com faixa escura só atrás do
   texto. O palco do canvas fica escondido até a Fase 2. */

.tour {
  --titulo: var(--branco);
  --foco: var(--coral);
  position: relative;
  background: var(--navy-profundo);
  color: var(--branco);
}

.tour__sentinela {
  position: absolute;
  inset: 0;
  visibility: hidden;
  pointer-events: none;
}

/* A cena só existe com o tour em pin (css/motion.css) */
.tour__cena { display: none; }

.tour__video-moldura { background: var(--navy-profundo); }
.tour__video {
  width: 100%;
  height: auto;
  aspect-ratio: 720 / 900;
  max-height: 80vh;
  max-height: 80svh;
  object-fit: cover;
}
/* Sem JS o vídeo não tem fonte nem pôster: fica a imagem do <noscript> */
html:not([class*="modo-"]) .tour__video { display: none; }
.tour__video-semjs {
  width: 100%;
  height: auto;
  max-height: 80vh;
  max-height: 80svh;
  object-fit: cover;
}

/* Sem still no celular: "display: none" com loading=lazy não baixa as fotos */
.tour__still { display: none; }

.tour__planos {
  display: grid;
  gap: 2.25rem;
  padding: 2.5rem var(--margem) 4.5rem;
  /* A saída dissolve para grafite, costurando com a seção seguinte */
  background: linear-gradient(to bottom, var(--navy-profundo) 55%, var(--grafite));
}

.tour__frase {
  font-family: var(--serif);
  font-size: clamp(2rem, 8.8vw, 2.75rem);
  font-weight: 400;
  line-height: 1.12;
  letter-spacing: -.01em;
  color: var(--branco);
  text-wrap: balance;
}
.tour__apoio { margin-top: .625rem; color: rgb(255 255 255 / .86); max-width: 30em; }

@media (min-width: 1024px) {
  .tour__video-moldura { display: none; }

  .tour__planos {
    display: block;
    padding: 0 0 clamp(5rem, 9vw, 8rem);
  }
  .tour__plano { position: relative; }
  .tour__still { display: block; width: 100%; height: auto; }

  /* Sangria total na chegada, depois dois quadros recuados, um de cada lado */
  .tour__plano--2 {
    width: 84%;
    margin: clamp(4rem, 8vw, 7.5rem) 0 0 auto;
  }
  .tour__plano--3 {
    width: 72%;
    margin: clamp(4rem, 8vw, 7.5rem) 0 0;
  }

  /* Sem o pin os stills também não são ampliados: o arquivo maior tem 1600 px */
  @media (min-width: 1700px) {
    .tour__plano--1 { width: min(1600px, 78vw); margin-inline: auto; }
    .tour__plano--2 { width: min(1400px, 68vw); }
    .tour__plano--3 { width: min(1200px, 58vw); }
  }

  /* Fundo de bordas suaves só atrás do texto: garante leitura sobre qualquer quadro.
     Máscara, não blur: é pintada uma vez e não pesa enquanto a legenda se move */
  .tour__legenda {
    position: absolute;
    isolation: isolate;
    width: fit-content;
    padding: 1rem 1.75rem 1.25rem;
  }
  .tour__legenda::before {
    content: "";
    position: absolute;
    inset: -1.75rem -3rem;
    z-index: -1;
    background: rgb(26 33 60 / .88);
    -webkit-mask-image:
      linear-gradient(to right, transparent, #000 3rem, #000 calc(100% - 3rem), transparent),
      linear-gradient(to bottom, transparent, #000 1.75rem, #000 calc(100% - 1.75rem), transparent);
    -webkit-mask-composite: source-in;
    mask-image:
      linear-gradient(to right, transparent, #000 3rem, #000 calc(100% - 3rem), transparent),
      linear-gradient(to bottom, transparent, #000 1.75rem, #000 calc(100% - 1.75rem), transparent);
    mask-composite: intersect;
  }
  .tour__legenda--1 { left: var(--margem); bottom: clamp(2rem, 5vw, 4.5rem); }
  .tour__legenda--2 { right: var(--margem); bottom: clamp(2rem, 4vw, 3.5rem); }
  .tour__legenda--3 { left: var(--margem); top: 50%; transform: translateY(-50%); }

  .tour__frase { font-size: clamp(2.25rem, 3.7vw, 3.75rem); line-height: 1.1; white-space: nowrap; }
  .tour__apoio { margin-top: .5rem; max-width: 32em; }

  /* Fase 2: o motion-engineer tira o hidden do palco e usa estes estilos */
  .tour__palco { position: relative; aspect-ratio: 16 / 9; overflow: hidden; }
  .tour__quadro,
  .tour__canvas { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
}