/* ==========================================================================
   Talyssa Jade | Arquitetura e Interiores
   Site em construção · style.css
   Aliança Produtora & Marketing · outubro/2026

   Índice
   01. Fontes
   02. Tokens (cores, tipografia, movimento)
   03. Base
   04. Estrutura da página (100% da tela no desktop)
   05. Página de texto (lado esquerdo)
   06. Espelhos (conteúdo de cada slide)
   07. Contato (WhatsApp)
   08. Navegação do banner
   09. Fotos (lado direito)
   10. Celular (até 860px)
   11. Telas baixas no desktop
   12. Movimento reduzido (acessibilidade)
   ========================================================================== */


/* 01. Fontes
   Povelyon TJ (versão da marca, com acentos) + Raleway.
   Arquivos em /fonts, já recortados para os caracteres do português.
   ========================================================================== */

@font-face {
  font-family: "Povelyon TJ";
  src: url("../fonts/povelyon-tj.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Raleway";
  src: url("../fonts/raleway-300.woff2") format("woff2");
  font-weight: 300;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Raleway";
  src: url("../fonts/raleway-400.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Raleway";
  src: url("../fonts/raleway-500.woff2") format("woff2");
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Raleway";
  src: url("../fonts/raleway-900.woff2") format("woff2");
  font-weight: 900;
  font-style: normal;
  font-display: swap;
}


/* 02. Tokens
   Paleta oficial da logo nova (design system de 30/out/2026).
   O tom da página de texto troca a cada slide: escuro (café) ou claro (areia).
   ========================================================================== */

:root {
  /* paleta da marca */
  --cafe: #2A0F0D;
  --areia: #D7C9AC;
  --terracota: #9A4F32;
  --caramelo: #D9A066;
  --linho: #F3EFE3;
  --branco: #FFFFFF;

  /* famílias */
  --revista: "Povelyon TJ", "Raleway", "Helvetica Neue", Arial, sans-serif;
  --texto: "Raleway", "Helvetica Neue", Arial, sans-serif;

  /* tom escuro (padrão): fundo café, texto areia, acento caramelo */
  --bg: var(--cafe);
  --ink: var(--areia);
  --acc: var(--caramelo);
  --btn: var(--caramelo);
  --btn-ink: var(--cafe);
  --soft: rgba(215, 201, 172, .72);
  --rule: rgba(215, 201, 172, .26);
  --grain: .22;

  /* respiro lateral da página de texto */
  --g: clamp(24px, 4.6vw, 76px);

  /* curvas de movimento */
  --ease: cubic-bezier(.76, 0, .24, 1);
  --out: cubic-bezier(.16, 1, .3, 1);

  color-scheme: dark;
}

/* tom claro: fundo areia, texto café, acento terracota */
.lp[data-tone="light"] {
  --bg: var(--areia);
  --ink: var(--cafe);
  --acc: var(--terracota);
  --btn: var(--cafe);
  --btn-ink: var(--areia);
  --soft: rgba(42, 15, 13, .74);
  --rule: rgba(42, 15, 13, .2);
  --grain: .34;
}


/* 03. Base
   ========================================================================== */

*,
*::before,
*::after {
  box-sizing: border-box;
}

html,
body {
  margin: 0;
  height: 100%;
}

body {
  background: var(--cafe);
  color: var(--areia);
  font-family: var(--texto);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

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

a {
  color: inherit;
}

:focus-visible {
  outline: 2px solid var(--acc);
  outline-offset: 4px;
}

/* biblioteca de ícones (invisível) e ícone reutilizado nos botões */
.sprite {
  position: absolute;
  width: 0;
  height: 0;
  overflow: hidden;
}

.icon {
  width: 22px;
  height: 22px;
  flex: none;
}


/* 04. Estrutura da página
   Desktop: duas colunas (texto 44% | foto 56%) com exatamente 100% da altura da tela.
   ========================================================================== */

.lp {
  display: grid;
  grid-template-columns: minmax(0, 44fr) minmax(0, 56fr);
  height: 100vh;   /* navegadores antigos */
  height: 100dvh;  /* altura real da tela, sem a barra do navegador */
  overflow: hidden;
  background: var(--bg);
  color: var(--ink);
  transition: background-color 1s var(--ease), color 1s var(--ease);
}


/* 05. Página de texto (lado esquerdo)
   ========================================================================== */

.panel {
  position: relative;
  isolation: isolate;
  display: grid;
  grid-template-rows: auto minmax(0, 1fr) auto auto;
  row-gap: clamp(16px, 3.4vh, 36px);
  min-width: 0;
  min-height: 0;
  padding-block: clamp(22px, 4.6vh, 52px);
  padding-inline: var(--g);
}

/* grão de papel por cima da cor (textura do design system) */
.panel::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  opacity: var(--grain);
  mix-blend-mode: soft-light;
  background-image: url("../img/textura-grao.svg");
  transition: opacity 1s var(--ease);
}

/* topo: logo + aviso de site em construção */
.top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  min-height: 62px;
}

.brand {
  position: relative;
  width: 240px;
  aspect-ratio: 5522 / 1598;
  margin: 0;
  transition: opacity .7s var(--ease);
}

.brand img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  transition: opacity 1s var(--ease);
}

/* logo areia no fundo café; logo café no fundo areia */
.brand .on-light { opacity: 0; }
.lp[data-tone="light"] .brand .on-light { opacity: 1; }
.lp[data-tone="light"] .brand .on-dark { opacity: 0; }

/* no slide 1 a logo grande já está no centro, então a do topo some */
.lp[data-slide="1"] .brand { opacity: 0; }

.status {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 0;
  font-family: var(--revista);
  font-size: 11.5px;
  letter-spacing: .24em;
  line-height: 1;
  white-space: nowrap;
}

.status__dot {
  width: 7px;
  height: 7px;
  flex: none;
  border-radius: 50%;
  background: var(--acc);
  animation: pulse 2.4s ease-in-out infinite;
  transition: background-color 1s var(--ease);
}

@keyframes pulse {
  0%, 100% { opacity: 1; }
  50% { opacity: .25; }
}


/* 06. Espelhos (conteúdo de cada slide)
   Os 5 textos ficam empilhados na mesma célula; só o ativo aparece.
   ========================================================================== */

.stage {
  display: grid;
  align-content: center;
  min-width: 0;
  min-height: 0;
}

.copy {
  grid-area: 1 / 1;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: clamp(14px, 2.6vh, 28px);
  min-width: 0;
  opacity: 0;
  visibility: hidden;
  transition: opacity .35s ease, visibility 0s linear .35s;
}

.copy.is-active {
  opacity: 1;
  visibility: visible;
  transition: opacity 0s, visibility 0s;
}

/* chapéu (Povelyon TJ, caixa alta) com fio de acento */
.kicker {
  display: flex;
  align-items: center;
  gap: 14px;
  margin: 0;
  font-family: var(--revista);
  font-size: 12.5px;
  letter-spacing: .22em;
  line-height: 1.3;
  color: var(--ink);
}

.kicker::before {
  content: "";
  width: 34px;
  height: 2px;
  flex: none;
  background: var(--acc);
  transition: background-color 1s var(--ease);
}

.lp[data-tone="dark"] .kicker {
  color: var(--acc);
}

/* título: Raleway Light com UMA palavra em Black */
.title {
  max-width: 15ch;
  margin: 0;
  font-weight: 300;
  font-size: clamp(30px, min(3.15vw, 5.8vh), 52px);
  line-height: 1.1;
  letter-spacing: -.005em;
  text-wrap: balance;
}

.title strong,
.tag strong {
  font-weight: 900;
}

/* texto de apoio */
.lede {
  max-width: 38ch;
  margin: 0;
  font-size: clamp(15px, 1.08vw, 17px);
  line-height: 1.62;
  color: var(--soft);
  text-wrap: pretty;
}

/* slide 1: a marca */
.copy--marca {
  gap: clamp(18px, 3.4vh, 34px);
}

.logo-title {
  margin: 0;
}

.logo-xl {
  width: clamp(220px, min(27vw, 46vh), 440px);
  height: auto;
}

.tag {
  margin: 0;
  font-weight: 300;
  font-size: clamp(19px, 1.6vw, 26px);
  line-height: 1.3;
  text-wrap: balance;
}

/* entrada do texto a cada troca (o primeiro quadro já nasce completo) */
.lp.moved .copy.is-active > * {
  animation: rise 1s var(--out) both;
  animation-delay: 380ms;
}

.lp.moved .copy.is-active > :nth-child(2) { animation-delay: 470ms; }
.lp.moved .copy.is-active > :nth-child(3) { animation-delay: 560ms; }

@keyframes rise {
  from { opacity: 0; transform: translateY(26px); }
  to { opacity: 1; transform: none; }
}


/* 07. Contato (WhatsApp)
   ========================================================================== */

.contact {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 14px 22px;
}

.btn {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  min-height: 54px;
  padding: 0 26px 0 22px;
  border-radius: 0;
  background: var(--btn);
  color: var(--btn-ink);
  font-weight: 500;
  font-size: 15px;
  letter-spacing: .02em;
  text-decoration: none;
  transition: background-color 1s var(--ease), color 1s var(--ease);
}

.btn__arrow {
  display: inline-block;
  transition: transform .45s var(--out);
}

.btn:hover .btn__arrow {
  transform: translateX(5px);
}

.phone {
  margin: 0;
  font-size: 14px;
  font-variant-numeric: lining-nums tabular-nums;
  letter-spacing: .04em;
  color: var(--soft);
  user-select: all;
}

.phone__label {
  display: block;
  margin-bottom: 4px;
  font-family: var(--revista);
  font-size: 10.5px;
  letter-spacing: .24em;
  color: var(--ink);
  opacity: .8;
}


/* 08. Navegação do banner
   ========================================================================== */

.foot {
  display: grid;
  gap: 14px;
}

.nav {
  display: flex;
  align-items: center;
  gap: 18px;
}

.segs {
  display: flex;
  flex: 1;
  gap: 8px;
  min-width: 0;
}

/* cada traço é um botão; a barra interna mostra o tempo do slide */
.seg {
  position: relative;
  flex: 1;
  height: 32px;
  padding: 0;
  border: 0;
  background: none;
  color: inherit;
  cursor: pointer;
}

.seg::before,
.seg__fill {
  content: "";
  position: absolute;
  top: 50%;
  left: 0;
  right: 0;
  height: 2px;
  margin-top: -1px;
  background: var(--rule);
}

.seg__fill {
  right: auto;
  width: calc(var(--p, 0) * 100%);
  background: var(--ink);
  transition: background-color 1s var(--ease);
}

.seg.is-done .seg__fill {
  width: 100%;
}

.count {
  font-size: 12px;
  font-variant-numeric: lining-nums tabular-nums;
  letter-spacing: .12em;
  white-space: nowrap;
}

.count strong {
  font-weight: 900;
}

.pause {
  padding: 8px 0;
  border: 0;
  background: none;
  color: inherit;
  font-family: var(--revista);
  font-size: 10.5px;
  letter-spacing: .22em;
  cursor: pointer;
  opacity: .8;
}

.pause:hover {
  opacity: 1;
}

.legal {
  margin: 0;
  font-size: 11.5px;
  letter-spacing: .04em;
  color: var(--soft);
}


/* 09. Fotos (lado direito)
   Cada foto entra cortando da direita para a esquerda, como página virando.
   ========================================================================== */

.media {
  position: relative;
  min-width: 0;
  overflow: hidden;
  background: var(--cafe);
  touch-action: pan-y;
}

.photo {
  position: absolute;
  inset: 0;
  z-index: 0;
  margin: 0;
  clip-path: inset(0 0 0 100%);
  transition: clip-path 1.35s var(--ease);
}

.photo.is-active {
  z-index: 2;
  clip-path: inset(0);
}

/* a foto que está saindo fica por baixo até a nova cobrir */
.photo.is-prev {
  z-index: 1;
  clip-path: inset(0);
  transition: none;
}

/* ponto de foco de cada foto (corte e zoom) */
.photo--1 { --pos: 50% 36%; }
.photo--2 { --pos: 50% 40%; }
.photo--3 { --pos: 45% 56%; }
.photo--4 { --pos: 50% 46%; }
.photo--5 { --pos: 50% 22%; }

.photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: var(--pos, 50% 50%);
  transform: scale(1.12);
  transform-origin: var(--pos, 50% 50%);
  will-change: transform;
}

/* zoom lento enquanto a foto está ativa */
.photo.is-active img {
  animation: settle 9s var(--out) both;
}

@keyframes settle {
  from { transform: scale(1.14); }
  to { transform: scale(1); }
}

/* escurecimento suave para a legenda e o topo */
.photo::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    linear-gradient(to top, rgba(42, 15, 13, .62) 0%, rgba(42, 15, 13, 0) 34%),
    linear-gradient(to bottom, rgba(42, 15, 13, .38) 0%, rgba(42, 15, 13, 0) 18%);
}

.photo figcaption {
  position: absolute;
  z-index: 1;
  left: clamp(20px, 3vw, 44px);
  bottom: clamp(22px, 4vh, 40px);
  color: var(--branco);
  font-family: var(--revista);
  font-size: 11.5px;
  letter-spacing: .24em;
  line-height: 1.4;
}

.photo__note {
  display: block;
  margin-top: 6px;
  font-family: var(--texto);
  font-size: 12px;
  letter-spacing: .04em;
  opacity: .82;
}

/* número grande do slide no canto da foto */
.idx {
  position: absolute;
  z-index: 3;
  right: clamp(20px, 3vw, 44px);
  bottom: clamp(18px, 3.6vh, 36px);
  margin: 0;
  color: var(--branco);
  font-family: var(--revista);
  font-size: clamp(46px, 5vw, 84px);
  line-height: .8;
  letter-spacing: .02em;
  pointer-events: none;
}

/* topo sobre a foto: só aparece no celular */
.mhead {
  display: none;
}


/* 10. Celular (até 860px)
   Foto em cima, texto embaixo; a página rola normalmente.
   ========================================================================== */

@media (max-width: 860px) {
  .lp {
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: auto auto;
    height: auto;
    min-height: 100vh;
    min-height: 100svh;
    overflow: visible;
  }

  .media {
    grid-row: 1;
    height: 56vh;
    height: 56svh;
    min-height: 340px;
    max-height: 640px;
  }

  .panel {
    grid-row: 2;
    grid-template-rows: auto auto auto auto;
    row-gap: 22px;
    padding-block: 24px 26px;
    padding-inline: 22px;
  }

  .top { min-height: 0; }
  .brand { display: none; }
  .stage { align-content: start; }

  .title {
    max-width: 17ch;
    font-size: clamp(27px, 7.4vw, 34px);
  }

  .lede { font-size: 15px; }
  .logo-xl { width: min(250px, 68vw); }
  .copy--marca { gap: 18px; }

  .contact { gap: 12px; }
  .btn { width: 100%; justify-content: center; }
  .phone { width: 100%; text-align: center; }
  .phone__label { display: inline; margin: 0 8px 0 0; }

  .mhead {
    position: absolute;
    z-index: 4;
    top: 0;
    left: 0;
    right: 0;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 18px 18px 0;
  }

  .mhead__logo {
    width: 150px;
    height: auto;
    transition: opacity .7s var(--ease);
  }

  .lp[data-slide="1"] .mhead__logo { opacity: 0; }

  .mhead__wa {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    min-height: 40px;
    padding: 0 14px;
    background: rgba(42, 15, 13, .55);
    color: var(--areia);
    font-size: 13px;
    font-weight: 500;
    text-decoration: none;
    -webkit-backdrop-filter: blur(6px);
    backdrop-filter: blur(6px);
  }

  .mhead__wa .icon { width: 18px; height: 18px; }

  .idx { font-size: 44px; }
  .photo figcaption { bottom: 22px; }
}

@media (max-width: 860px) and (max-height: 700px) {
  .media {
    height: 48svh;
    min-height: 300px;
  }
}


/* 11. Telas baixas no desktop (notebooks com janela reduzida)
   Mantém tudo dentro dos 100% da tela.
   ========================================================================== */

@media (min-width: 861px) and (max-height: 680px) {
  .top { min-height: 48px; }
  .brand { width: 200px; }
  .lede { font-size: 14px; line-height: 1.5; }
  .btn { min-height: 46px; }
  .legal { display: none; }
}


/* 12. Movimento reduzido
   Quem pede menos movimento no sistema vê só trocas suaves, sem zoom nem corte.
   ========================================================================== */

@media (prefers-reduced-motion: reduce) {
  .photo {
    clip-path: none;
    opacity: 0;
    transition: opacity .7s ease;
  }

  .photo.is-active,
  .photo.is-prev {
    clip-path: none;
    opacity: 1;
  }

  .photo img,
  .photo.is-active img {
    animation: none;
    transform: none;
  }

  .lp.moved .copy.is-active > * { animation: none; }
  .status__dot { animation: none; }
  .lp,
  .btn,
  .brand img { transition: none; }
}