/* Lilia Lainy, parcerias. Identidade do /meuslinks/cenarios/novo/ (pedido do dono, 15/10):
   só Bricolage Grotesque, blush e vinho, rosa só em detalhe. Sem ruído: título, uma frase, dois contatos. */

@font-face{font-family:"Bricolage Grotesque";src:url(/fonts/bricolage-300-800-normal.woff2) format("woff2");font-weight:300 800;font-display:swap}

:root{
  --bg:#f6e3ea;--fg:#3b1a29;--muted:#674051;--surface:#fdf3f6;--accent:#b5577a;
  --font:"Bricolage Grotesque",system-ui,sans-serif;
  --gutter:max(24px,env(safe-area-inset-left),env(safe-area-inset-right));
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;background:var(--bg)}
body{margin:0;background:var(--bg);color:var(--fg);font-family:var(--font);font-size:17px;line-height:1.5;-webkit-font-smoothing:antialiased}
a{color:inherit;text-decoration:none}
img{display:block;max-width:100%}
h1,p,ul,figure{margin:0}
ul{padding:0;list-style:none}
:focus-visible{outline:2px solid var(--accent);outline-offset:3px;border-radius:6px}
.vh{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}

/* ---------- Topo ---------- */
.top{width:min(1080px,100% - var(--gutter) * 2);margin-inline:auto;padding-top:max(8px,env(safe-area-inset-top))}
.back{display:inline-flex;align-items:center;gap:.35em;min-height:44px;font-size:15px;color:var(--muted);transition:color .2s ease}
.back:hover{color:var(--fg)}

/* ---------- Celular: retrato com respiro acima da cabeça e contatos em sequência ---------- */
.hero{display:flex;flex-direction:column}
/* Foto mais alta; em telas curtas o conteúdo segue com rolagem natural. */
.hero-photo{position:relative;order:-1;width:min(1080px,100% - var(--gutter) * 2);height:clamp(220px,36svh,420px);margin:4px auto 0;border-radius:28px;overflow:hidden;background:var(--surface)}
.hero-photo img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:50% 8%;transform-origin:50% 8%}
/* A foto dissolve no blush, sem sobrepor texto ao retrato. */
.hero-photo::after{content:"";position:absolute;inset:auto 0 0;height:28%;pointer-events:none;background:linear-gradient(to bottom,rgba(246,227,234,0) 0%,rgba(246,227,234,.15) 45%,rgba(246,227,234,.55) 75%,var(--bg) 100%)}
.hero-txt{width:min(1080px,100% - var(--gutter) * 2);margin:24px auto 0}
h1{font-size:clamp(48px,14.4vw,72px);font-weight:700;line-height:1.05;letter-spacing:-.035em;text-wrap:balance}
.intro{margin-top:12px;max-width:32ch;font-size:17px;color:var(--muted);text-wrap:pretty}

/* ---------- Contato ---------- */
.contacts{display:grid;gap:10px;max-width:480px;margin-top:24px}
.pill{display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:center;gap:16px;min-height:60px;padding:10px 22px 10px 28px;background:var(--surface);border-radius:999px;box-shadow:0 1px 2px rgba(59,26,41,.06),0 4px 14px rgba(59,26,41,.06);transition:transform .25s ease,box-shadow .25s ease;-webkit-tap-highlight-color:transparent}
.pill:active{transform:scale(.98)}
.pill:focus-visible{border-radius:999px}
.txt{display:flex;flex-direction:column;min-width:0}
.t{font-size:19px;font-weight:700;line-height:1.2;letter-spacing:-.02em}
.s{margin-top:2px;font-size:15px;font-weight:400;color:var(--muted);overflow-wrap:anywhere}
.go{width:18px;height:18px;fill:none;stroke:var(--accent);stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}

/* ---------- Rodapé ---------- */
.foot{width:min(1080px,100% - var(--gutter) * 2);margin:56px auto 0;padding-bottom:max(32px,env(safe-area-inset-bottom));text-align:center}
.foot p{margin-inline:auto;max-width:60ch;font-size:13px;color:var(--muted)}

/* ---------- Movimento ----------
   Só animação: em repouso nada muda de lugar, cor ou tamanho. Some com prefers-reduced-motion. */
:root{--ease-out:cubic-bezier(.2,.7,.1,1)}
@media (prefers-reduced-motion:no-preference){
  /* Troca de tela, par do /meuslinks/: a miniatura de Publicidades cresce até esta foto (cross-fade). */
  @view-transition{navigation:auto}
  .hero-photo{view-transition-name:lilia-foto}
  ::view-transition-group(root){animation-duration:.5s}
  ::view-transition-old(root){animation:vt-out .2s cubic-bezier(.4,0,1,1) both}
  ::view-transition-new(root){animation:vt-in .5s var(--ease-out) both}
  ::view-transition-group(lilia-foto){animation-duration:.5s;animation-timing-function:var(--ease-out);overflow:clip}
  ::view-transition-old(lilia-foto),::view-transition-new(lilia-foto){height:100%;object-fit:cover}

  /* Entrada em sequência: foto assenta, título sobe, frase, contatos, rodapé. */
  .hero-photo img{animation:photo-settle .65s var(--ease-out) backwards}
  h1{animation:text-in .45s var(--ease-out) .08s backwards}
  .intro{animation:text-in .45s var(--ease-out) .15s backwards}
  .contacts li{animation:text-in .45s var(--ease-out) backwards}
  .contacts li:nth-child(1){animation-delay:.22s}
  .contacts li:nth-child(2){animation-delay:.29s}
  .foot{animation:fade .35s ease .36s backwards}
  .back{animation:fade .3s ease .05s backwards}

  .pill{transition:transform .2s var(--ease-out),box-shadow .2s ease}
  .pill .go{transition:transform .2s var(--ease-out)}
  .pill:active{transform:scale(.98)}
  .pill:active .go{transform:translateX(2px)}
}
/* Hover só onde existe ponteiro; no toque o :hover grudaria depois do toque. */
@media (hover:hover){
  .pill:hover:not(:active){transform:translateY(-2px);box-shadow:0 10px 30px rgba(59,26,41,.05)}
  .pill:hover .go{transform:translateX(2px)}
}
@media (prefers-reduced-motion:reduce){
  .pill,.back{transition:none}
  .pill:hover,.pill:active,.pill:hover .go{transform:none}
}
@keyframes fade{from{opacity:0}to{opacity:1}}
@keyframes vt-out{to{opacity:0;transform:scale(.98)}}
@keyframes vt-in{from{opacity:0;transform:translateY(10px)}}
@keyframes text-in{from{opacity:0;transform:translateY(10px)}}
@keyframes photo-settle{from{transform:scale(1.03)}}

/* ---------- Computador: foto em metade da tela ---------- */
@media (min-width:900px){
  /* Acima da abertura, que ocupa o topo e cobriria o Voltar. */
  .top{position:absolute;top:0;left:0;right:0;z-index:1;padding-top:28px;pointer-events:none}
  .back{pointer-events:auto}
  .hero{display:grid;grid-template-columns:[full-start] minmax(var(--gutter),1fr) [content-start] minmax(0,540px) [mid] minmax(0,540px) [content-end] minmax(var(--gutter),1fr) [full-end];min-height:min(100svh,900px)}
  .hero-txt{grid-column:content-start/mid;grid-row:1;align-self:center;width:auto;margin:0;padding:120px 64px 64px 0}
  .hero-photo{grid-column:mid/full-end;grid-row:1;order:0;width:auto;height:auto;margin:0;border-radius:0}
  .intro{margin-top:24px;font-size:19px}
  .contacts{margin-top:40px;gap:12px}
  .pill{min-height:68px;padding-block:14px}
  .foot{margin-top:64px;padding-bottom:48px}
}