/* Estúdio Théo — landing "em manutenção"
   Composição base: 1920x1080 (16:9). Desktop = quadro único; mobile (≤767px) =
   palco 16:9 no topo + rodapé empilhado (ver media query no fim do arquivo). */

:root {
  --bg: #000;                 /* fundo preto (nenhum hex específico nos assets) */
  --fg: #fff;
  --theo: #ffffff;            /* logo THÉO placeholder */
  --grama-verde: #007A15;     /* cor real da grama (assets/svg/grama.svg) */
  --linha: #2f2f2f;
  --muted: #8a8a8a;
}

* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }

body {
  background: var(--bg);
  color: var(--fg);
  font-family: system-ui, -apple-system, "Segoe UI", sans-serif;
  overflow: hidden;           /* frame único, sem scroll */
  height: 100vh;
  display: flex;              /* centraliza o artboard 16:9 na viewport */
  align-items: center;
  justify-content: center;
}

img { display: block; max-width: 100%; }

/* iOS/Safari: impede que telefones detectados automaticamente fiquem invisíveis. */
a[x-apple-data-detectors] {
  color: inherit !important;
  -webkit-text-fill-color: inherit !important;
  text-decoration: none !important;
}

/* iOS/Safari: mantém o número do WhatsApp visível e impede data-detectors. */

.whatsapp-wrap {
  position: relative;
  display: inline-block;
  width: max-content;
  max-width: 100%;
}

.whatsapp-text {
  pointer-events: none;
}

.whatsapp-svg-text {
  display: none;
}

.whatsapp-number-img {
  display: none;
}

.whatsapp-hit {
  position: absolute;
  inset: 0;
  z-index: 3;
  display: block;
  color: transparent !important;
  -webkit-text-fill-color: transparent !important;
  text-decoration: none !important;
}

.whatsapp-link,
.whatsapp-link:link,
.whatsapp-link:visited,
.whatsapp-link:hover,
.whatsapp-link:active,
.whatsapp-link span,
.whatsapp-link[x-apple-data-detectors],
.whatsapp-link *[x-apple-data-detectors] {
  color: inherit !important;
  -webkit-text-fill-color: currentColor !important;
  text-decoration: none !important;
  opacity: 1 !important;
  visibility: visible !important;
}


/* ===================== PALCO (artboard 16:9) ===================== */
/* .cena é um artboard 16:9 que SEMPRE cabe na viewport (letterbox), centralizado.
   Assim o Lottie ('meet') preenche exatamente e TODAS as camadas posicionadas por %
   (chars, THÉO, balão, grama, rodapé) escalam como UM bloco só — em qualquer largura,
   sem dessincronizar/colidir em faixas intermediárias. */
.cena {
  position: relative;
  width: min(100vw, calc(100vh * 16 / 9));
  aspect-ratio: 16 / 9;
  overflow: hidden;
  background: var(--bg);
}

/* Wrappers do palco. No DESKTOP são transparentes (inset:0) → cena idêntica.
   No MOBILE viram um bloco 16:9 no topo + rodapé empilhado (ver media query). */
.scene-wrap { position: absolute; inset: 0; }
.stage { position: absolute; inset: 0; }

/* Camadas Lottie: cada .json é a comp 1920x1080 inteira → preenchem o palco e
   cada personagem cai sozinho na posição/altura de cena (feet ~62%). */
.char {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: 3;
  pointer-events: none;       /* a camada full-stage não captura; o hit-box captura */
}

/* ---- Hover dos personagens Lottie (scale por cima do loop idle) ---- */
/* transform-origin fica na BASE de cada personagem (medido), pra crescer "do chão". */
.char.hoverable { transition: transform 520ms cubic-bezier(0.22, 1, 0.36, 1); } /* saída lenta e suave */
.char.hoverable.is-hover {
  transform: scale(1.07);
  transition: transform 450ms cubic-bezier(0.33, 1.1, 0.68, 1);  /* inflar suave, overshoot bem sutil */
}
.char.hoverable[data-character="flor-01"]       { transform-origin: 18.4% 65%; }
.char.hoverable[data-character="flor-03"]        { transform-origin: 31.2% 65%; }
.char.hoverable[data-character="olho-01"]        { transform-origin: 59.3% 65%; }
.char.hoverable[data-character="olho-02"]        { transform-origin: 67.2% 65%; }
.char.hoverable[data-character="olho-03"]        { transform-origin: 75.1% 65%; }
.char.hoverable[data-character="planta-brilho"]  { transform-origin: 81.1% 65%; }

/* Wrapper do vento: full-stage (mantém o svg do Lottie no lugar); recebe o rotate do vento */
.wind-wrap { position: absolute; inset: 0; }

/* Mapa de áreas de hit (geradas por JS a partir da bbox real de cada personagem) */
.hitmap { position: absolute; inset: 0; z-index: 5; pointer-events: none; }
.hit { position: absolute; pointer-events: auto; cursor: pointer; }
/* .hit { background: rgba(255,0,0,.18); } */ /* descomente p/ depurar as áreas */

/* Palmeira rosa (flor-02) — sem Lottie; em pé sobre a grama, entre vaso e flor roxa */
.char-static[data-character="flor-02"] {
  position: absolute;
  left: 21.36%;               /* mantém o centro em ~25.1% */
  bottom: 35.43%;            /* ~4px mais baixa (0.37% de 1080) */
  width: 7.48%;               /* +10% (era 6.8%) */
  z-index: 3;
  cursor: pointer;
}
.flor02-svg { display: block; width: 100%; height: auto; }

/* Hover flor-02: tronco escala a partir da base; coroa ganha um extra com stagger,
   compondo com o scale do container (sem abrir buraco entre tronco e coroa). */
.flor02-trunk, .flor02-crown {
  transform-box: fill-box;
  transform-origin: 50% 100%;
  transition: transform 520ms cubic-bezier(0.22, 1, 0.36, 1);  /* saída lenta e suave */
}
.char-static[data-character="flor-02"].is-hover .flor02-trunk {
  transform: scale(1.03, 1.05);
  transition: transform 450ms cubic-bezier(0.33, 1.1, 0.68, 1);
}
.char-static[data-character="flor-02"].is-hover .flor02-crown {
  transform: scale(1.05, 1.07);
  transition: transform 450ms cubic-bezier(0.33, 1.1, 0.68, 1) 60ms; /* stagger 60ms */
}

/* Grama: faixa de tufos na linha do chão. Tileada em repeat-x (mantém o formato
   dos tufos em qualquer largura, sem esticar) e À FRENTE dos personagens (z-index
   acima de .char) pra eles parecerem plantados na grama, não colados numa linha. */
.grama {
  position: absolute;
  left: 21.57%;                        /* -5% de escala (a partir do centro) */
  width: 55.86%;                       /* 58.8% * 0.95 */
  bottom: 34.8%;                       /* baseline na linha dos pés (~65%) */
  z-index: 4;                          /* À FRENTE das camadas .char (z3) → corta a base dos personagens */
  pointer-events: none;                /* não bloqueia o hover dos personagens */
  line-height: 0;
}
.grama img { width: 100%; height: auto; display: block; } /* uma instância, aspecto natural (tufos separados) */
.grama .grama-mob { display: none; }  /* grama-mobile.svg só entra no mobile (ver media query) */

/* ===================== AVIÕES (voo contínuo, CSS) ===================== */
/* Alternam infinitamente no mesmo ciclo de 18s:
   ida cruza esquerda→direita (0–42%), volta cruza direita→esquerda (52–94%). */

.plane {
  position: absolute;
  z-index: 6;
  will-change: transform;
  pointer-events: none;   /* aviões não capturam mouse (não têm hover) */
}

/* ida = Lottie congelado full-stage (herda .char inset:0). translateX move a camada inteira;
   o avião+balão (frame 140) fica no topo e cruza a tela. */
.plane--ida {
  z-index: 6;
  animation: voo-ida 30s linear infinite;
}

/* volta = SVG estático compacto no topo; translateX cruza no sentido oposto. */
.plane--volta {
  top: 11%;
  left: 0;
  width: 24.3%;                    /* escala junto com o stage em desktop e mobile */
  animation: voo-volta 30s linear infinite;
}
.plane--volta img,
.plane--volta-svg { width: 100%; height: auto; display: block; overflow: visible; }


/* ida: cruza uma vez e fica fora da tela enquanto a volta acontece */
@keyframes voo-ida {
  0%   { transform: translateX(-72vw); }
  45%  { transform: translateX(94vw); }
  100% { transform: translateX(94vw); }
}

/* volta: entra depois da ida, com velocidade equivalente */
@keyframes voo-volta {
  0%,  55% { transform: translateX(115vw); }
  99%, 100% { transform: translateX(-46vw); }
}

@media (prefers-reduced-motion: reduce) {
  .plane--ida, .plane--volta { animation: none; }
}

/* Logotipo THÉO — SVG oficial do designer (#E3DDD5), na posição do antigo texto */
.logo-theo {
  position: absolute;
  top: 33%;
  left: 48%;
  transform: translate(-50%, -50%);
  margin: 0;
  z-index: 4;
  width: 13%;                 /* proporção parecida com o texto anterior */
  line-height: 0;
  pointer-events: none;
}
.logo-theo img { width: 100%; height: auto; }

/* ===================== RODAPÉ (dentro do palco) ===================== */
.rodape {
  position: absolute;
  top: 70%;
  left: 0;
  right: 0;
  z-index: 6;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
  padding: 0 6%;
}
.rodape-col { display: flex; flex-direction: column; gap: 20.8px; }  /* +60% (era 13px) espaço título↔conteúdo */
.rodape-titulo {
  font-size: 13.2px;         /* +10% (era 12px) */
  letter-spacing: .16em;
  color: var(--fg);          /* branco (era cinza) */
  font-weight: 700;
}
.rodape-link {
  color: var(--muted);       /* cinza (era branco) */
  text-decoration: none;
  font-size: 18px;
  font-weight: 400;          /* peso menor (era 600) */
}
.rodape-link:hover { text-decoration: underline; }

.redes { display: flex; gap: 36.05px; align-items: center; }  /* espaçamento +30% (era 27.73px) */
.redes a { color: var(--fg); width: 30.49px; height: 30.49px; display: inline-flex; }  /* ícones +5% (era 29.04px) */
.redes svg { width: 30.49px; height: 30.49px; }
.redes a:hover { opacity: .7; }

/* Base: copyright (esq) + voltar ao topo (dir) */
.rodape-base {
  position: absolute;
  left: 6%;
  right: 6%;
  bottom: 3%;
  z-index: 6;
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 12px;
  color: var(--muted);
}
.voltar-topo {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  border: 1px solid var(--linha);
  border-radius: 50%;
  color: var(--muted);
  text-decoration: none;
  font-size: 16px;
}
.voltar-topo:hover { color: var(--fg); border-color: var(--fg); }

/* Fontes incorporadas no Illustrator entregue pelo designer. */
@font-face {
  font-family: "Theo Sora";
  src: url("../assets/fonts/sora-extrabold.ttf") format("truetype");
  font-weight: 800;
  font-display: swap;
}
@font-face {
  font-family: "Theo Manrope";
  src: url("../assets/fonts/manrope-extralight.ttf") format("truetype");
  font-weight: 200;
  font-display: swap;
}
.social-mobile { display: none; }
.social-desktop { display: contents; }

/* Desktop: proporções da referência de 3420 × 1824, relativas ao palco. */
@media (min-width: 768px) {
  .cena { container-type: inline-size; --desktop-content-shift: 0px; --desktop-plane-shift: -15px; }
  .plane--ida { top: var(--desktop-plane-shift); }
  .plane--volta { top: calc(11% + var(--desktop-plane-shift)); }
  .logo-theo { left: 50%; top: 50%; width: 13.55%; transform: translate(-50%, calc(-50% - 90px)); }
  .char:not(.plane) { translate: 0 calc(-.3cqw + 18px + var(--desktop-content-shift)); }
  .char-static[data-character="flor-02"] { left: 21.22%; width: 7.76%; bottom: calc(35.96% - 18px - var(--desktop-content-shift)); }
  .grama { bottom: calc(35.33% - 18px - var(--desktop-content-shift)); }
  .rodape {
    top: calc(66.5% + var(--desktop-content-shift));
    left: 8%;
    right: auto;
    width: 85.5%;
    height: 13.4%;
    padding: 0;
    gap: 0;
    grid-template-columns: 31% 34% 35%;
    border-top: 1px solid #111;
  }
  .rodape-col {
    padding-top: 2.2cqw;
    gap: 1.5cqw;
    min-width: 0;
  }
  .rodape-col + .rodape-col {
    padding-left: 2.65cqw;
    border-left: 1px solid #111;
  }
  .rodape-titulo {
    font-family: "Theo Sora", sans-serif;
    font-size: .9cqw;
    line-height: 1.1cqw;
    font-weight: 800;
    letter-spacing: .015em;
    white-space: nowrap;
  }
  .rodape-link {
    font-family: "Theo Manrope", sans-serif;
    font-weight: 200;
    font-size: 1.26cqw;
    line-height: 1.65cqw;
    color: #aaa;
    white-space: nowrap;
  }
  .redes { gap: 2.9cqw; padding-left: .3cqw; align-items: center; }
  .redes a, .redes svg { width: 1.36cqw; height: 1.36cqw; flex: 0 0 auto; }
  .social-desktop { display: none; }
  .redes .social-mobile { display: block; width: 100%; height: 100%; object-fit: contain; }
  .rodape-base {
    left: 8%;
    right: 3.5%;
    bottom: calc(4.8% - var(--desktop-content-shift));
    font-family: Arial, sans-serif;
    font-size: .64cqw;
    line-height: 1cqw;
    font-style: italic;
    align-items: flex-end;
  }
  .copyright .credit { margin-left: 1cqw; color: #bbb; }
  .voltar-topo {
    width: 2.1cqw;
    height: 2.8cqw;
    position: relative;
    border: 0;
    border-radius: 0;
    font-size: 0;
    color: #171717;
    margin-bottom: .8cqw;
  }
  .voltar-topo::before {
    content: "";
    position: absolute;
    left: 50%;
    top: .3cqw;
    height: 2.4cqw;
    border-left: 1px solid currentColor;
  }
  .voltar-topo::after {
    content: "";
    position: absolute;
    left: .3cqw;
    top: .3cqw;
    width: 1.5cqw;
    height: 1.5cqw;
    border-top: 1px solid currentColor;
    border-left: 1px solid currentColor;
    transform: rotate(45deg);
  }
}

/* Mobile: coordenadas proporcionais ao layout aprovado de 2250 × 4000.
   Cada desenho ganha seu enquadramento, preservando a proporção e o loop. */
@media (max-width: 767px) {
  html { overflow-x: clip; }
  body {
    display: block;
    height: auto;
    overflow: visible;
    -webkit-text-size-adjust: 100%;
    text-size-adjust: 100%;
  }
  .cena {
    width: 100%;
    height: 177.777778vw;
    min-height: 0;
    aspect-ratio: auto;
    overflow: hidden;
  }
  .scene-wrap {
    position: absolute;
    inset: 0 0 auto;
    width: 100%;
    height: 90vw;
    margin: 0;
    overflow: hidden;
  }
  .stage { position: absolute; inset: 0; width: 100%; height: 100%; }


  .char {
    inset: auto;
    top: auto;
    bottom: .22vw;
    width: var(--mobile-width);
    height: auto;
    aspect-ratio: var(--drawing-ratio);
    left: var(--mobile-left);
    transform-origin: 50% 100% !important;
  }
  .char svg { display: block; overflow: visible; }
  .wind-wrap { transform-origin: 50% 100% !important; }
  [data-character="flor-01"] { --mobile-left: 5.33vw; --mobile-width: 7.9vw; }
  [data-character="flor-03"] { --mobile-left: 25.2vw; --mobile-width: 12.15vw; }
  [data-character="olho-01"] { --mobile-left: 44.2vw; --mobile-width: 15.1vw; }
  [data-character="olho-02"] { --mobile-left: 63.5vw; --mobile-width: 6.44vw; }
  [data-character="olho-03"] { --mobile-left: 74.65vw; --mobile-width: 9.04vw; }
  [data-character="planta-brilho"] { --mobile-left: 85.1vw; --mobile-width: 8.65vw; }

  .char-static[data-character="flor-02"] {
    left: 14.25vw;
    bottom: .65vw;
    width: 13.72vw;
  }
  .logo-theo {
    top: 38.45vw;
    left: 34vw;
    width: 24.2vw;
    transform: none;
  }
  .grama {
    left: 13.25vw;
    bottom: .2vw;
    width: 71.1vw;
  }
  .grama .grama-desk { display: none; }
  .grama .grama-mob { display: block; transform: scaleY(.953); transform-origin: bottom; }

  .plane--ida {
    top: 15.9vw;
    bottom: auto;
    left: 10.36vw;
    width: 42.6vw;
    animation-name: voo-ida-mobile;
  }
  .plane--volta {
    top: 15.9vw;
    left: 0;
    width: 42.6vw;
    animation-name: voo-volta-mobile;
  }
  @keyframes voo-ida-mobile {
    0% { transform: translateX(-60vw); }
    44% { transform: translateX(95vw); }
    100% { transform: translateX(95vw); }
  }
  @keyframes voo-volta-mobile {
    0%, 50% { transform: translateX(115vw); }
    100% { transform: translateX(-60vw); }
  }

  .rodape {
    position: absolute;
    top: 100.8vw;
    left: 25.55vw;
    right: auto;
    width: 52.4vw;
    display: block;
    padding: 0;
  }
  .rodape-col {
    position: relative;
    height: 22vw;
    gap: 2.85vw;
    padding: 0 3.25vw;
  }
  .rodape-col + .rodape-col { padding-top: 0; }
  .rodape-col:not(:last-child)::after {
    content: "";
    position: absolute;
    top: 15.5vw;
    left: 0;
    width: 100%;
    border-bottom: .09vw solid #292929;
  }
  .rodape-titulo {
    font-family: "Theo Sora", sans-serif;
    font-size: 2.325vw;
    line-height: 3.3vw;
    font-weight: 800;
    letter-spacing: .025em;
    color: #fff;
    white-space: nowrap;
  }
  .rodape-link {
    display: block;
    position: relative;
    z-index: 2;
    font-family: "Theo Manrope", sans-serif;
    font-size: 3.525vw;
    line-height: 3.525vw;
    font-weight: 200;
    color: #fff;
    -webkit-text-fill-color: #fff;
    opacity: 1;
    white-space: nowrap;
  }

  .whatsapp-plain-text {
    display: none;
  }
  .whatsapp-number-img {
    display: block;
    width: auto;
    height: 4.725vw;
    pointer-events: none;
    opacity: 1;
    visibility: visible;
  }

  .redes {
    display: flex;
    gap: 5.35vw;
    margin-top: 0;
    padding-left: .5vw;
    align-items: center;
  }
  .redes a, .redes svg { width: 3.45vw; height: 3.45vw; flex: 0 0 auto; }
  .redes a { position: relative; }
  .redes a::after { content: ""; position: absolute; inset: -1.7vw; }
  .redes a[aria-label="YouTube"], .social-desktop { display: none; }
  .redes .social-mobile { display: block; width: 100%; height: 100%; object-fit: contain; }

  .rodape-base {
    position: absolute;
    left: 4.6vw;
    right: 3.55vw;
    bottom: 8.7vw;
    margin: 0;
    padding: 0;
    align-items: flex-end;
    font-family: Arial, sans-serif;
    font-size: 1.02vw;
    line-height: 1.5vw;
    font-style: italic;
    color: #8a8a8a;
  }
  .voltar-topo {
    position: relative;
    width: 2.5vw;
    height: 3.1vw;
    border: 0;
    border-radius: 0;
    font-size: 0;
    color: #171717;
  }
  .voltar-topo::before {
    content: "";
    position: absolute;
    left: 50%;
    top: .25vw;
    height: 2.5vw;
    border-left: .12vw solid currentColor;
  }
  .voltar-topo::after {
    content: "";
    position: absolute;
    left: .4vw;
    top: .25vw;
    width: 1.7vw;
    height: 1.7vw;
    border-top: .12vw solid currentColor;
    border-left: .12vw solid currentColor;
    transform: rotate(45deg);
  }
}