/* Site Laços Luíza Ateliê — sistema Boho Natura (v5) */

:root {
  /* paleta oficial — nunca improvisar fora desta lista */
  --marfim: #F3ECDF;
  --linho: #E7DCC8;
  --areia: #D6C1A0;
  --argila: #B67F63;
  --terracota: #A96F52;
  --terracota-escuro: #8C5E45;
  --salvia: #9EA98B;
  --cacau: #5B4A3B;
  --cacau-suave: #6E5B49;
  --papel: #FBF8F2;

  --borda: rgba(91, 74, 59, .14);
  --sombra: 0 1px 2px rgba(91, 74, 59, .06), 0 10px 24px -12px rgba(91, 74, 59, .28);
  --sombra-alta: 0 2px 4px rgba(91, 74, 59, .07), 0 16px 32px -14px rgba(91, 74, 59, .34);

  --display: "Fraunces", Georgia, "Times New Roman", serif;
  --corpo: "Mulish", "Segoe UI", system-ui, sans-serif;
  --punho: "Petit Formal Script", "Segoe Script", cursive;

  --coluna: 448px;
  --raio: 12px;
  --fita-l: 13px;   /* largura da fita */
  --bico: 7px;      /* profundidade do corte rabo-de-andorinha */

  /* tecido cai com peso: acelera e chega firme */
  --e-pano: cubic-bezier(.33, 0, .18, 1);
  /* assenta com ~7% de passar do ponto. mais que isso vira borracha, não pano */
  --e-pouso: cubic-bezier(.22, 1.08, .36, 1);
}

/* o corte da fita precisa interpolar suave; sem @property ele saltaria no meio */
@property --corte {
  syntax: "<percentage>";
  inherits: false;
  initial-value: 100%;
}

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

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  min-height: 100svh;
  background: var(--marfim);
  color: var(--cacau);
  font-family: var(--corpo);
  font-size: 16px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

.pular {
  position: absolute;
  left: -9999px;
  top: 8px;
  padding: 10px 16px;
  background: var(--terracota);
  color: var(--marfim);
  border-radius: 8px;
  font-size: 14px;
  font-weight: 600;
  text-decoration: none;
  z-index: 9;
}
.pular:focus { left: 50%; transform: translateX(-50%); }

/* ---------- o palco: a mesa de linho onde tudo está deitado ----------
   Camada fixa e mais funda que o conteúdo. Sangra 90px para fora da viewport
   para que a deriva do parallax nunca exponha a borda. */

.palco {
  position: fixed;
  inset: -90px;
  z-index: 0;
  overflow: hidden;
  pointer-events: none;
  /* A trama já vem assada em cima do marfim no próprio arquivo. Tentei antes com
     mix-blend-mode e foi erro duplo: soft-light sobre fundo claro quase não muda nada,
     e um blend do tamanho da viewport é recalculado a cada frame do parallax. */
  background: var(--marfim) url("assets/linho.webp") repeat;
  background-size: 384px 384px;
  /* o ponteiro (só no desktop) empurra a mesa; a fita e os cartões ficam parados */
  transform: translate3d(var(--palco-x, 0px), var(--palco-y, 0px), 0);
}

.ramo {
  position: absolute;
  background-repeat: no-repeat;
  background-size: contain;
  opacity: .42;
}

/* O palco sangra 90px para fora, então some-se 90px para falar em coordenada de tela:
   `calc(90px + X)` deixa X ser a posição real na viewport. Negativo = cortado pela
   borda, que é como a gipsofila aparece na capa. */

.ramo--topo {
  top: calc(90px - 20px);
  left: calc(90px - 70px);
  width: 250px;
  height: 224px;
  background-image: url("assets/ramo-topo.webp");
  rotate: -14deg;
}

.ramo--base {
  right: calc(90px - 70px);
  bottom: calc(90px - 20px);
  width: 260px;
  height: 225px;
  background-image: url("assets/ramo-base.webp");
  rotate: 168deg;
}

.coluna {
  position: relative;
  z-index: 1;
  max-width: var(--coluna);
  margin: 0 auto;
  padding: clamp(40px, 9vw, 68px) 20px calc(28px + env(safe-area-inset-bottom));
}

/* ---------- cabeçalho ---------- */

.cabecalho {
  text-align: center;
  margin-bottom: clamp(30px, 7vw, 42px);
}

.laco {
  display: block;
  width: 74px;
  margin: 0 auto 20px;
}
.laco svg { display: block; width: 100%; height: auto; fill: var(--argila); }

.sobrescrito {
  margin: 0 0 8px;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--cacau-suave);
}

.marca {
  margin: 0;
  font-family: var(--display);
  font-size: clamp(40px, 12vw, 52px);
  font-weight: 400;
  font-variation-settings: "SOFT" 45, "WONK" 1, "opsz" 96;
  line-height: 1.02;
  letter-spacing: -.015em;
}

.promessa {
  margin: 16px auto 0;
  max-width: 30ch;
  font-size: 15px;
  font-weight: 300;
  line-height: 1.62;
  color: var(--cacau-suave);
  text-wrap: balance;
}

/* ---------- o tear ----------
   Uma fita de cetim só, inteira, por trás dos cartões: aparece nas frestas e
   termina em bico. Ela é UM elemento — se cada trecho tivesse brilho próprio,
   leria como barras soltas, não como uma fita passando por baixo. */

.tear {
  position: relative;
  padding-bottom: 58px;
}

.fita {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 50%;
  translate: -50% 0;
  width: var(--fita-l);
  z-index: 0;
  isolation: isolate;   /* sem isto o mix-blend-mode do brilho quebra no WebKit */
  pointer-events: none;
  clip-path: polygon(0 0, 100% 0, 100% 100%, 50% calc(100% - var(--bico)), 0 100%);

  /* O cetim é um feixe de fibras paralelas. Na largura isso vira: borda escura e
     saturada, núcleo especular claro e DESSATURADO, fora do centro (fita chapada
     no centro lê como tubo de plástico). O deslocamento de saturação é o que
     separa cetim de "cor lisa com um risco claro em cima". */
  background:
    repeating-linear-gradient(90deg,
      rgba(0, 0, 0, .05) 0 1px,
      rgba(255, 255, 255, .045) 1px 2px),
    linear-gradient(90deg,
      hsl(18 34% 36%) 0%,
      hsl(19 36% 46%) 8%,
      hsl(20 37% 58%) 26%,
      hsl(22 28% 75%) 38%,
      hsl(20 36% 62%) 52%,
      hsl(19 36% 50%) 74%,
      hsl(18 34% 39%) 92%,
      hsl(17 33% 34%) 100%);
  background-blend-mode: overlay, normal;

  /* a fita é desenrolada de cima para baixo, com a ponta macia (pano não cai
     com borda de navalha) */
  mask-image: linear-gradient(to bottom,
    #000 var(--corte),
    transparent calc(var(--corte) + 9%));
  -webkit-mask-image: linear-gradient(to bottom,
    #000 var(--corte),
    transparent calc(var(--corte) + 9%));
}

/* invólucro: carrega a luz durante a abertura */
.fita-brilho {
  position: absolute;
  inset: -30% 0;
}

/* a banda especular. Perpendicular às fibras (que correm no comprimento da fita),
   por isso é horizontal — e por isso viaja na vertical quando o ângulo de visão
   muda. Rolar a página muda exatamente esse ângulo. */
.fita-luz {
  position: absolute;
  inset: 0;
  background: linear-gradient(to bottom,
    rgba(255, 244, 230, 0) 35%,
    rgba(255, 244, 230, .42) 47%,
    rgba(255, 255, 255, .6) 50%,
    rgba(255, 244, 230, .42) 53%,
    rgba(255, 244, 230, 0) 65%);
  mix-blend-mode: soft-light;
}

.links {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  gap: 14px;   /* a fresta por onde a fita aparece */
}

/* ---------- cartões ---------- */

.cartao {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 15px;
  padding: 17px 18px;
  background: var(--papel);
  border: 1px solid var(--borda);
  border-radius: var(--raio);
  box-shadow: var(--sombra);
  color: var(--cacau);
  text-decoration: none;
  transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease, background-color .18s ease;
}

.cartao:hover {
  transform: translateY(-2px);
  box-shadow: var(--sombra-alta);
  border-color: var(--argila);
}
.cartao:active { transform: translateY(0); }

.cartao:focus-visible {
  outline: 2px solid var(--terracota);
  outline-offset: 3px;
}

.cartao--destaque {
  background: var(--terracota);
  border-color: transparent;
  color: var(--marfim);
}
.cartao--destaque:hover {
  background: var(--terracota-escuro);
  border-color: transparent;
}
.cartao--destaque:focus-visible { outline-color: var(--cacau); }

.cartao-icone {
  display: grid;
  place-items: center;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: var(--linho);
  color: var(--terracota);
}
.cartao--destaque .cartao-icone {
  background: rgba(243, 236, 223, .16);
  color: var(--marfim);
}

.icone {
  width: 21px;
  height: 21px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.6;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.cartao-texto { min-width: 0; }

.cartao-titulo {
  display: block;
  font-family: var(--display);
  font-size: 17px;
  font-weight: 500;
  font-variation-settings: "SOFT" 40, "WONK" 0, "opsz" 24;
  letter-spacing: -.005em;
}

.cartao-apoio {
  display: block;
  margin-top: 3px;
  font-size: 12.5px;
  font-weight: 300;
  line-height: 1.45;
  color: var(--cacau-suave);
}
.cartao--destaque .cartao-apoio { color: rgba(243, 236, 223, .82); }

.cartao-seta {
  display: grid;
  place-items: center;
  opacity: .4;
  transition: transform .18s ease, opacity .18s ease;
}
.cartao-seta .icone { width: 18px; height: 18px; }
.cartao:hover .cartao-seta { opacity: .75; transform: translateX(3px); }
.cartao--destaque .cartao-seta { opacity: .7; }
.cartao--destaque:hover .cartao-seta { opacity: 1; }

/* ---------- rodapé ---------- */

.rodape {
  text-align: center;
  padding-top: 4px;
}

.selo {
  width: 92px;
  height: auto;
  opacity: .5;
}

.entrega {
  margin: 14px auto 0;
  max-width: 30ch;
  font-size: 13px;
  font-weight: 300;
  line-height: 1.55;
  color: var(--cacau-suave);
  text-wrap: balance;
}
.entrega strong { font-weight: 600; color: var(--cacau); }

.assinatura {
  margin: 18px 0 0;
  font-family: var(--punho);
  font-size: 24px;
  font-weight: 400;
  line-height: 1;
  color: var(--terracota);
}

/* ---------- abertura (por tempo: sempre roda) ----------
   A fita é desenrolada, a luz desce junto com ela, e cada cartão pousa quando a
   fita passa por ele. A causalidade é o que mais vende o realismo. */

body.entrando .cabecalho > * { animation: surgir 620ms var(--e-pouso) both; }
body.entrando .laco { animation-delay: 0ms; }
body.entrando .sobrescrito { animation-delay: 80ms; }
body.entrando .marca { animation-delay: 140ms; }
body.entrando .promessa { animation-delay: 210ms; }

body.entrando .fita { animation: desenrolar 1000ms var(--e-pano) 260ms both; }
body.entrando .fita-brilho { animation: luz-desce 1120ms var(--e-pouso) 260ms both; }

body.entrando .cartao {
  animation: pousar 520ms var(--e-pouso) both;
  animation-delay: calc(560ms + var(--ordem) * 85ms);
}

body.entrando .rodape > * { animation: surgir 620ms var(--e-pouso) 1180ms both; }

@keyframes desenrolar {
  from { --corte: 0%; }
  to { --corte: 100%; }
}

/* a luz corre com o pano e assenta no meio — cetim é luz correndo no tecido */
@keyframes luz-desce {
  from { transform: translate3d(0, -60%, 0); }
  to { transform: translate3d(0, 0, 0); }
}

@keyframes pousar {
  from { opacity: 0; transform: translate3d(0, 10px, 0); }
  to { opacity: 1; transform: none; }
}

@keyframes surgir {
  from { opacity: 0; transform: translate3d(0, 8px, 0); }
  to { opacity: 1; transform: none; }
}

/* ---------- parallax (pelo scroll: só se a página rolar) ----------
   Aqui está o ponto: a banda de brilho do cetim viaja quando o ângulo de visão
   muda, e rolar a página é mudar o ângulo de visão. Não é enfeite, é o
   comportamento do material. Fica atrás de @supports porque o Firefox estável
   ainda não tem scroll-driven animation; sem ele, tudo repousa no estado final. */

@supports (animation-timeline: scroll()) {
  @media (prefers-reduced-motion: no-preference) {
    .fita-luz {
      will-change: transform;
      animation: luz-viaja linear both;
      animation-timeline: scroll(root block);   /* precisa vir DEPOIS do shorthand */
    }

    .ramo {
      animation: deriva linear both;
      animation-timeline: scroll(root block);
    }
    .ramo--base { --deriva: 26px; }
  }
}

/* Curso curto de propósito. Um linktree rola pouco (aqui, ~40px), e scroll() normaliza
   o percurso todo nesse pouquinho: um curso largo viraria um estalo. E os dois extremos
   têm que deixar a banda DENTRO da fita — se ela repousar fora, o brilho só existe para
   quem rola, e a maioria não rola. */
@keyframes luz-viaja {
  from { transform: translate3d(0, -14%, 0); }
  to { transform: translate3d(0, 14%, 0); }
}

/* a mesa está mais longe da câmera que os cartões, então anda menos */
@keyframes deriva {
  from { translate: 0 0; }
  to { translate: 0 calc(var(--deriva, 40px) * -1); }
}

/* ---------- menos movimento: pousar no estado final, nunca esconder ---------- */

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .01ms !important;
    /* sem zerar o atraso, um cartão com `fill: both` fica preso no quadro inicial
       (opacidade 0) durante todo o delay — conteúdo sumido, não animação reduzida */
    animation-delay: 0ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
  }
  .fita {
    mask-image: none;
    -webkit-mask-image: none;
  }
  .fita-brilho, .fita-luz, .ramo { transform: none; translate: none; }
  .cartao, .cabecalho > *, .rodape > * { opacity: 1; transform: none; }
}

/* ---------- telas estreitas ---------- */

@media (max-width: 400px) {
  .coluna { padding-left: 16px; padding-right: 16px; }
  .cartao { padding: 15px 15px; gap: 12px; }
  .cartao-icone { width: 36px; height: 36px; }
  .cartao-titulo { font-size: 16px; }
  .ramo--topo { width: 190px; height: 170px; }
  .ramo--base { width: 200px; height: 173px; }
}