/* ==========================================================================
   RotasSul Transfer — folha DIFERIDA do hero

   Reúne tudo de que o hero só precisa DEPOIS que o JavaScript roda:

     Fase 14.3  — explorar o veículo (exterior -> interior)
     Fase 14.4C — interação de material (reflexo, microperspectiva, ímã)

   O nome do arquivo vem da 14.3, que a criou. O critério do que entra aqui é
   mais amplo: nada nesta folha é necessário para a primeira pintura.

   Folha DIFERIDA. O index.html a carrega com media="print" e só a promove a
   media="all" no onload, então ela nunca entra no caminho crítico de
   renderização. Duas consequências de propósito:

     1. a primeira pintura não paga por nenhum byte daqui;
     2. sem JavaScript o onload nunca roda, a folha continua em media="print"
        e o controle jamais aparece — que é exatamente o comportamento
        desejado, já que sem JS não há visualizador.

   A regra que mantém o controle fora de cena antes disto (display:none) mora
   em css/cinematic-home.css, que é bloqueante: assim não existe um quadro
   sequer com o botão solto no fluxo.
   ========================================================================== */

/* ==========================================================================
   6. EXPLORAR O VEÍCULO — EXTERIOR -> INTERIOR   (Fase 14.3)

   Uma continuação opcional do hero: o visitante pede "Ver interior" e a
   fotografia externa dá lugar às fotos REAIS de cabine e porta-malas, no
   mesmo lugar, sem sair da página e sem abrir modal.

   TRÊS DECISÕES QUE SUSTENTAM O RESTO

   1. As fotos internas nascem em display:none (atributo `hidden` no HTML).
      Enquanto ninguém pedir, elas não são baixadas, não decodificam e não
      disputam o LCP com a foto do hero. O custo no carregamento é zero.

   2. Tudo aqui está preso a `html.cinematic-explore`, classe que o JS coloca
      ao inicializar — inclusive com prefers-reduced-motion. Sem JS a
      experiência simplesmente não existe e o hero fica idêntico ao de hoje;
      com reduced-motion ela existe, só que sem aproximação nem crossfade.

   3. O controle é ancorado em position:absolute dentro da moldura que já
      existe. Nenhuma linha nova de layout, nenhuma mudança de altura do
      hero, nenhum CLS.
   ========================================================================== */

/* -------- 6.1 As camadas de vista -------- */

/* Abaixo do véu de scroll (::before, z-index 1) e do brilho (z-index 2), e
   acima da foto externa: assim o mesmo acabamento cinematográfico cai também
   sobre as fotos internas, em vez de elas aparecerem "cruas". */
.rsp-hero__views {
  inset: 0;
  position: absolute;
  z-index: 0;
}

.rsp-hero__view {
  height: 100%;
  left: 0;
  object-fit: cover;
  object-position: center;
  opacity: 0;
  position: absolute;
  top: 0;
  width: 100%;
}

.cinematic-explore .rsp-hero__view {
  transition: opacity .46s var(--cine-ease-soft);
}

.rsp-hero__view.is-cine-current {
  opacity: 1;
}

/* O will-change de .cinematic-moving vale para a foto do hero, que o scrub
   redimensiona. As vistas internas nao sao redimensionadas por ninguem: o
   Chrome ja promove sozinho durante o crossfade. */
.cinematic-moving .rsp-hero__view {
  will-change: auto;
}

/* A foto externa sai por opacidade. O canal `transform` continua com a
   animação de entrada e a propriedade `scale` continua com o scrub — a
   aproximação de 1.035 é multiplicada lá pelo JS, no mesmo canal, para que
   não haja dois donos da mesma propriedade.

   Fase 14.4A: a foto virou <picture>, então ela não é mais filha direta da
   <figure>. O alvo passou a ser a classe, que não depende do aninhamento. */
.cinematic-explore .rsp-hero__photo {
  transition: opacity .46s var(--cine-ease-soft);
}

/* Classe propria: as vistas internas tambem sao <img> dentro da moldura, e
   um seletor descendente generico as apagaria junto com a externa. */
.cinematic-explore .rsp-hero__visual.is-cine-inside .rsp-hero__photo {
  opacity: 0;
}

/* Os cards flutuantes falam do serviço visto de fora. Ao entrar no veículo
   eles saem de cena e devolvem a fotografia inteira — é o que diferencia
   "explorar o carro" de "um slideshow por cima do hero". São decorativos
   (aria-hidden) e só a opacidade muda: nada se mexe no layout. */
.cinematic-explore .rsp-hero__cards-stack {
  transition: opacity .34s var(--cine-ease-soft);
}

.cinematic-explore .rsp-hero__visual.is-cine-inside .rsp-hero__cards-stack {
  opacity: 0;
}

/* -------- 6.2 O controle -------- */

/* Os dois estados ocupam a mesma célula do grid e o mesmo canto. O pai fica
   com a largura do maior deles, então a troca pílula -> segmentado não
   empurra nada e não pisca. */
.cinematic-explore .rsp-hero__explore {
  bottom: 16px;
  display: grid;
  position: absolute;
  right: 16px;
  z-index: 3;
}

.cinematic-explore .rsp-hero__explore > * {
  align-self: end;
  grid-area: 1 / 1;
  justify-self: end;
}

/* Vidro escuro: legível tanto sobre o brilho dourado do topo quanto sobre a
   sombra do rodapé da foto, e claramente subordinado ao CTA dourado. */
.rsp-hero__explore-open,
.rsp-hero__explore-tabs {
  -webkit-backdrop-filter: blur(11px) saturate(1.3);
  backdrop-filter: blur(11px) saturate(1.3);
  background: #0d1b26b5;
  border: 1px solid #ffffff30;
  border-radius: 100px;
  box-shadow: 0 8px 24px #0a1a2652, inset 0 1px #ffffff26;
  transition: opacity .3s var(--cine-ease-soft), transform .3s var(--cine-ease);
}

.rsp-hero__explore-open {
  align-items: center;
  color: #fff;
  cursor: pointer;
  display: inline-flex;
  font-family: Epilogue, sans-serif;
  font-size: 12px;
  font-weight: 700;
  gap: 7px;
  letter-spacing: -.01em;
  line-height: 1;
  padding: 10px 15px;
  white-space: nowrap;
}

.rsp-hero__explore-open svg {
  flex-shrink: 0;
  opacity: .9;
}

.rsp-hero__explore-open:hover {
  background: #0d1b26d4;
}

.rsp-hero__explore-tabs {
  display: flex;
  gap: 2px;
  padding: 3px;
}

.rsp-hero__explore-tab {
  background: none;
  border: 0;
  border-radius: 100px;
  color: #ffffffc4;
  cursor: pointer;
  font-family: Epilogue, sans-serif;
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: -.01em;
  line-height: 1;
  padding: 9px 13px;
  transition: background .2s var(--cine-ease-soft), color .2s var(--cine-ease-soft);
  white-space: nowrap;
}

.rsp-hero__explore-tab:hover {
  color: #fff;
}

.rsp-hero__explore-tab.is-cine-current {
  background: #ffffff2b;
  box-shadow: inset 0 1px #ffffff26;
  color: #fff;
}

.rsp-hero__explore-open:focus-visible,
.rsp-hero__explore-tab:focus-visible {
  outline: 2px solid #f4c84b;
  outline-offset: 2px;
}

.rsp-hero__image:focus-visible {
  outline: 2px solid #f4c84b;
  outline-offset: 3px;
}

/* Estado fechado: o segmentado existe no grid (para reservar a largura) mas
   sai da árvore de acessibilidade e da ordem de tabulação. */
.cinematic-explore .rsp-hero__explore-tabs {
  opacity: 0;
  pointer-events: none;
  transform: translateY(4px);
  visibility: hidden;
}

.cinematic-explore .rsp-hero__explore.is-cine-open .rsp-hero__explore-tabs {
  opacity: 1;
  pointer-events: auto;
  transform: none;
  visibility: visible;
}

.cinematic-explore .rsp-hero__explore.is-cine-open .rsp-hero__explore-open {
  opacity: 0;
  pointer-events: none;
  transform: translateY(4px);
  visibility: hidden;
}

/* -------- 6.3 Telas pequenas --------
   A moldura encolhe muito e os dois cards ficam ancorados à esquerda: o
   canto inferior direito deixa de caber a pílula. Ela sobe para o canto
   superior direito, que é a única área livre em todas as larguras. Alvos de
   toque maiores. */
@media (max-width: 991px) {
  .cinematic-explore .rsp-hero__explore {
    bottom: auto;
    right: 12px;
    top: 12px;
  }

  .cinematic-explore .rsp-hero__explore > * {
    align-self: start;
  }

  /* A moldura encolhe para ~350x248 e os dois cards ja ocupam a faixa
     superior e a inferior da esquerda. Com rotulo, a pilula invadia a quina
     do card "Status do voo" em 320 e 390. Vira um alvo redondo de 38px: o
     nome acessivel continua no <span>, que sai da tela mas fica na arvore de
     acessibilidade. Os rotulos voltam inteiros no estado aberto, quando os
     cards ja sairam de cena. */
  .rsp-hero__explore-open {
    border-radius: 50%;
    height: 38px;
    justify-content: center;
    padding: 0;
    width: 38px;
  }

  .rsp-hero__explore-open span {
    clip: rect(0 0 0 0);
    clip-path: inset(50%);
    height: 1px;
    overflow: hidden;
    position: absolute;
    white-space: nowrap;
    width: 1px;
  }

  .rsp-hero__explore-tab {
    font-size: 11.5px;
    padding: 12px;
  }
}

@media (max-width: 380px) {
  .rsp-hero__explore-tab {
    padding: 12px 10px;
  }
}

/* -------- 6.4 prefers-reduced-motion --------
   A experiência continua inteira: o que sai é o movimento. A troca de vista
   passa a ser instantânea. Note que o seletor é `.cinematic-explore` e não
   `.cinematic-armed` — quem pede menos movimento nunca recebe `armed`, e
   ficaria de fora da rede de segurança se ela morasse lá. */
@media (prefers-reduced-motion: reduce) {
  .cinematic-explore .rsp-hero__view,
  .cinematic-explore .rsp-hero__photo,
  .cinematic-explore .rsp-hero__cards-stack,
  .cinematic-explore .rsp-hero__explore-open,
  .cinematic-explore .rsp-hero__explore-tabs,
  .cinematic-explore .rsp-hero__explore-tab {
    transition: none !important;
  }

  .cinematic-explore .rsp-hero__explore-tabs,
  .cinematic-explore .rsp-hero__explore.is-cine-open .rsp-hero__explore-open {
    transform: none !important;
  }
}

/* ==========================================================================
   7. INTERAÇÃO DE MATERIAL   (Fase 14.4C)

   A Fase 14.4B provou que separar a fotografia em camadas não cabe neste
   hero: a região que separava bem (céu e montanha) sobra em 0% a 4% da caixa
   depois do recorte, enquanto a zona de artefato da máscara ocupa de 5,6% a
   10,9%. A saída é dar profundidade pelo MATERIAL, não pela geometria.

   Duas camadas de resposta, ambas opcionais e ambas desktop:

     a) um reflexo especular que segue o ponteiro com atraso;
     b) um magnetismo discreto só na pílula "Ver interior".

   NADA disto move um pixel da fotografia em relação a outro. Não há máscara,
   não há camada duplicada, não há borda para rasgar — que era exatamente o
   problema que inviabilizou a 14.4B.

   Houve uma terceira camada em teste, uma microperspectiva de 0,55°/0,75° na
   moldura. Ela funcionava e ficava abaixo do limiar de identificação, mas
   respondia por cerca de 40% do custo de quadro sob CPU 4x — e era a única
   peça geométrica de uma fase feita para trocar geometria por material. Foi
   removida na revisão final, não desligada.

   Os números todos moram em js/cinematic-home.js, no bloco SPEC/MAG.
   Aqui ficam só a forma e as regras de segurança.
   ========================================================================== */

/* -------- 7.1 Reflexo especular -------- */

/* Um borrão radial grande e macio, deslocado por `translate` — canal que o
   JS já usa e que o compositor resolve sem repintar o gradiente. Ancorado a
   44% / 36% porque é de lá que vem a luz na fotografia nova; o ponteiro só
   modula em torno disso, nunca inverte a direção da cena. */
.cinematic-spec .rsp-hero__spec {
  display: block;
  background: radial-gradient(
    closest-side,
    #fffbf0 0%,
    #fffaeb 40%,
    #fff9e800 72%
  );
  height: 76%;
  left: 44%;
  margin-left: -38%;
  margin-top: -38%;
  opacity: 0;
  pointer-events: none;
  position: absolute;
  top: 36%;
  transition: opacity .55s var(--cine-ease-soft);
  width: 76%;
  z-index: 2;
}

/* A opacidade de pico é a única coisa que o JS não escreve por quadro: ela
   entra e sai por transição, para a luz nascer e morrer sem degrau. */
.cinematic-spec.cinematic-spec-on .rsp-hero__spec {
  opacity: var(--cine-spec-o, .1);
}

/* Sem promocao, deslocar o borrao radial obriga o navegador a repintar o
   gradiente inteiro a cada quadro. Promovido, ele e rasterizado uma vez e
   o resto e composicao. Como sempre neste projeto, a promocao so existe
   enquanto a cena se mexe. */
.cinematic-spec.cinematic-moving .rsp-hero__spec {
  will-change: translate;
}

/* -------- 7.2 Magnetismo da pílula --------
   Só a pílula "Ver interior". O CTA dourado não é tocado: ele é o destino
   principal e não deve competir por atenção com um convite secundário. */
.cinematic-mag .rsp-hero__explore-open {
  transition: background .22s var(--cine-ease), translate .18s var(--cine-ease-soft);
}

.cinematic-mag .rsp-hero__explore-open svg {
  transition: translate .22s var(--cine-ease-soft);
}

/* -------- 7.3 Redes de segurança --------
   Toque, tela pequena e movimento reduzido nunca recebem nada disto. As
   classes só entram pelo JS sob pointer:fine, mas a regra abaixo é a
   garantia de que uma mudança de contexto (girar o aparelho, ligar o
   reduced-motion no meio da sessão) apaga o efeito de imediato. */
@media (max-width: 991px), (pointer: coarse), (prefers-reduced-motion: reduce) {
  .rsp-hero__spec {
    display: none !important;
  }

  .rsp-hero__explore-open {
    translate: none !important;
  }

  .rsp-hero__explore-open svg {
    translate: none !important;
  }
}