/* Lilia Lainy, página de links.
   Seis cenários = foto × paleta × tipografia. A paleta de cada um sai da própria foto.
   O cenário vem de data-c no <html> (links.js lê ?c=). */

@font-face{font-family:"Bodoni Moda";src:url(/fonts/bodoni-400-900-normal.woff2) format("woff2");font-weight:400 900;font-style:normal;font-display:swap}
@font-face{font-family:"Bodoni Moda";src:url(/fonts/bodoni-400-900-italic.woff2) format("woff2");font-weight:400 900;font-style:italic;font-display:swap}
@font-face{font-family:"Instrument Sans";src:url(/fonts/instrument-400-700-normal.woff2) format("woff2");font-weight:400 700;font-display:swap}
@font-face{font-family:"Gloock";src:url(/fonts/gloock-400-normal.woff2) format("woff2");font-weight:400;font-display:swap}
@font-face{font-family:"Hanken Grotesk";src:url(/fonts/hanken-300-700-normal.woff2) format("woff2");font-weight:300 700;font-display:swap}
@font-face{font-family:"Italiana";src:url(/fonts/italiana-400-normal.woff2) format("woff2");font-weight:400;font-display:swap}
@font-face{font-family:"Jost";src:url(/fonts/jost-300-600-normal.woff2) format("woff2");font-weight:300 600;font-display:swap}
@font-face{font-family:"Bricolage Grotesque";src:url(/fonts/bricolage-300-800-normal.woff2) format("woff2");font-weight:300 800;font-display:swap}

/* ---------- Cenários ---------- */
/* 0 · Bobes (padrão): ensaio de bastidor, bobes lilás e madeira. Creme do vestido, nogueira e lilás; Gloock + Hanken Grotesk. */
:root,[data-c="bobes"]{
  --bg:#f3ede0;--fg:#2e1608;--muted:#724224;--line:rgba(46,22,8,.12);--accent:#904eb0;--press:rgba(144,78,176,.07);
  --display:"Gloock",Georgia,serif;--text:"Hanken Grotesk",system-ui,sans-serif;
  --mark-size:clamp(68px,20vw,128px);--mark-weight:400;--mark-track:-.02em;--mark-case:none;--mark-style:normal;--mark-lh:.9;
  --sub-font:var(--display);--sub-style:normal;--sub-size:clamp(30px,8vw,46px);
  --t-font:var(--display);--t-size:22px;--t-weight:400;--t-style:normal;
  --radius:22px;--row-bg:#fbf8f1;--row-gap:10px;--row-pad:12px 16px 12px 12px;--row-line:0;
  --hero-pos:50% 18%;--fade:#f3ede0;
}
/* 1 · Gala: vestido verde na ponte. Musgo, bronze e pérola; Bodoni Moda + Instrument Sans. */
[data-c="gala"]{
  --bg:#1c1a11;--fg:#f1e9dd;--muted:#b9a68c;--line:rgba(223,195,173,.18);--accent:#dfc3ad;--press:rgba(223,195,173,.08);
  --display:"Bodoni Moda",Didot,serif;--text:"Instrument Sans",system-ui,sans-serif;
  --mark-size:clamp(76px,24vw,148px);--mark-weight:400;--mark-track:.16em;--mark-case:uppercase;--mark-style:normal;--mark-lh:.86;
  --sub-font:var(--display);--sub-style:italic;--sub-size:clamp(22px,6.2vw,30px);
  --t-font:var(--display);--t-size:23px;--t-weight:500;--t-style:normal;
  --radius:2px;--row-bg:transparent;--row-gap:0px;--row-pad:18px 0;--row-line:1px solid var(--line);
  --hero-pos:43% 30%;--fade:#1c1a11;
}
/* 2 · Estúdio: retrato de beleza em fundo pêssego. Pêssego, cacau e batom; Gloock + Hanken Grotesk. */
[data-c="estudio"]{
  --bg:#f3d9ca;--fg:#2a1210;--muted:#663a2d;--line:rgba(42,18,16,.14);--accent:#a2413d;--press:rgba(42,18,16,.05);
  --display:"Gloock",Georgia,serif;--text:"Hanken Grotesk",system-ui,sans-serif;
  --mark-size:clamp(64px,19vw,124px);--mark-weight:400;--mark-track:-.02em;--mark-case:none;--mark-style:normal;--mark-lh:.9;
  --sub-font:var(--display);--sub-style:normal;--sub-size:clamp(30px,8vw,46px);
  --t-font:var(--display);--t-size:22px;--t-weight:400;--t-style:normal;
  --radius:22px;--row-bg:#f9e9e0;--row-gap:10px;--row-pad:12px 16px 12px 12px;--row-line:0;
  --hero-pos:50% 30%;--fade:#f3d9ca;
}
/* 3 · Jardim: vestido fúcsia entre as flores. Vinho, fúcsia e pele; Italiana + Jost. */
[data-c="jardim"]{
  --bg:#241411;--fg:#f6e8e3;--muted:#d4a693;--line:rgba(212,166,147,.2);--accent:#f47e99;--press:rgba(240,86,122,.09);
  --display:"Italiana",Didot,serif;--text:"Jost",system-ui,sans-serif;
  --mark-size:clamp(66px,20vw,136px);--mark-weight:400;--mark-track:.22em;--mark-case:uppercase;--mark-style:normal;--mark-lh:.9;
  --sub-font:var(--text);--sub-style:normal;--sub-size:clamp(13px,3.6vw,15px);
  --t-font:var(--display);--t-size:26px;--t-weight:400;--t-style:normal;
  --radius:0px;--row-bg:transparent;--row-gap:0px;--row-pad:20px 0;--row-line:1px solid var(--line);
  --hero-pos:50% 24%;--fade:#241411;
}
/* 4 · Laço: vestido rosa e o 🎀 da Lyla. Blush, lilás e cereja; Bricolage Grotesque. */
[data-c="laco"]{
  --bg:#f6e3ea;--fg:#3b1a29;--muted:#674051;--line:rgba(59,26,41,.12);--accent:#ac3f68;--press:rgba(178,65,107,.07);
  --display:"Bricolage Grotesque",system-ui,sans-serif;--text:"Bricolage Grotesque",system-ui,sans-serif;
  --mark-size:clamp(80px,26vw,160px);--mark-weight:700;--mark-track:-.03em;--mark-case:lowercase;--mark-style:normal;--mark-lh:.8;
  --sub-font:var(--text);--sub-style:normal;--sub-size:clamp(22px,6vw,30px);
  --t-font:var(--display);--t-size:21px;--t-weight:700;--t-style:normal;
  --radius:999px;--row-bg:#fdf3f6;--row-gap:10px;--row-pad:10px 18px 10px 10px;--row-line:0;
  --hero-pos:50% 28%;--fade:#f6e3ea;
}

/* 5 · Lilás: o Laço com a foto dos bobes de olhos fechados (pedido da Lilia, 15/10). Cores do Laço (blush, cereja e vinho), pedido do dono; Bricolage Grotesque. */
[data-c="lilas"]{
  --bg:#f6e3ea;--fg:#3b1a29;--muted:#674051;--line:rgba(59,26,41,.12);--accent:#ac3f68;--press:rgba(178,65,107,.07);
  --display:"Bricolage Grotesque",system-ui,sans-serif;--text:"Bricolage Grotesque",system-ui,sans-serif;
  --mark-size:clamp(80px,26vw,160px);--mark-weight:700;--mark-track:-.03em;--mark-case:lowercase;--mark-style:normal;--mark-lh:.8;
  --sub-font:var(--text);--sub-style:normal;--sub-size:clamp(22px,6vw,30px);
  --t-font:var(--display);--t-size:21px;--t-weight:700;--t-style:normal;
  --radius:999px;--row-bg:#fdf3f6;--row-gap:10px;--row-pad:10px 18px 10px 10px;--row-line:0;
  --hero-pos:50% 20%;--fade:#f6e3ea;
}

/* ---------- Base ---------- */
*,*::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(--text);font-size:16px;line-height:1.5;-webkit-font-smoothing:antialiased;transition:background-color .4s ease,color .4s ease}
a{color:inherit;text-decoration:none}
img{display:block;max-width:100%}
:focus-visible{outline:2px solid var(--accent);outline-offset:3px}

.page{min-height:100svh}
.hero{margin:0;position:relative;height:66svh;min-height:420px;overflow:hidden}
.hero-img{width:100%;height:100%;object-fit:cover;object-position:var(--hero-pos)}
.hero::after{content:"";position:absolute;inset:auto 0 0 0;height:46%;background:linear-gradient(to bottom,transparent,var(--fade) 92%)}

.content{position:relative;z-index:1;margin-top:calc(var(--mark-size) * -.62);padding:0 20px max(28px,env(safe-area-inset-bottom));max-width:560px;margin-inline:auto}

/* ---------- Assinatura: o momento único da página ---------- */
.mark{margin:0;display:flex;flex-direction:column;font-weight:inherit}
.mark-l{font-family:var(--display);font-size:var(--mark-size);font-weight:var(--mark-weight);letter-spacing:var(--mark-track);text-transform:var(--mark-case);font-style:var(--mark-style);line-height:var(--mark-lh);margin-right:calc(var(--mark-track) * -1);color:var(--fg)}
.mark-s{font-family:var(--sub-font);font-style:var(--sub-style);font-size:var(--sub-size);line-height:1.1;color:var(--accent);margin-top:6px}
[data-c="jardim"] .mark-s{letter-spacing:.42em;text-transform:uppercase;margin-top:14px}
[data-c="laco"] .mark-s,[data-c="lilas"] .mark-s{font-weight:500;letter-spacing:-.02em;margin-top:2px}
[data-c="gala"] .mark-s{padding-left:.15em}
.bio{margin:14px 0 0;color:var(--muted);font-size:15px;max-width:34ch}

@media (prefers-reduced-motion:no-preference){
  .mark-l{animation:rise .9s cubic-bezier(.2,.7,.1,1) both;clip-path:inset(0 0 0 0)}
  .mark-s,.bio{animation:fade .7s ease .45s both}
  .hero-img{animation:settle 1.4s cubic-bezier(.2,.7,.1,1) both}
}
@keyframes rise{from{transform:translateY(.35em);clip-path:inset(0 0 100% 0)}to{transform:none;clip-path:inset(0 0 0 0)}}
@keyframes fade{from{opacity:0}to{opacity:1}}
@keyframes settle{from{transform:scale(1.05)}to{transform:none}}

/* ---------- Destinos ---------- */
.dest{margin-top:30px;display:grid;gap:var(--row-gap);border-top:var(--row-line)}
.row{display:grid;grid-template-columns:auto minmax(0,1fr) auto;align-items:center;gap:16px;min-height:76px;padding:var(--row-pad);background:var(--row-bg);border-bottom:var(--row-line);border-radius:var(--radius);-webkit-tap-highlight-color:transparent;transition:background-color .2s ease}
a.row:hover,a.row:active{background-color:var(--press)}
[data-c="bobes"] a.row:hover,[data-c="estudio"] a.row:hover,[data-c="laco"] a.row:hover,[data-c="lilas"] a.row:hover{background-color:color-mix(in srgb,var(--row-bg) 92%,var(--accent))}
.thumb{width:52px;height:64px;object-fit:cover;object-position:50% 25%;border-radius:calc(var(--radius) * .6);transition:transform .3s cubic-bezier(.2,.7,.1,1)}
[data-c="laco"] .thumb,[data-c="lilas"] .thumb{width:56px;height:56px;border-radius:50%}
a.row:active .thumb{transform:scale(.96)}
.txt{display:flex;flex-direction:column;min-width:0}
.t{font-family:var(--t-font);font-size:var(--t-size);font-weight:var(--t-weight);font-style:var(--t-style);line-height:1.15;letter-spacing:-.005em}
[data-c="jardim"] .t{letter-spacing:.04em}
[data-c="laco"] .t,[data-c="lilas"] .t{letter-spacing:-.03em}
.s{font-size:13.5px;color:var(--muted);margin-top:3px}
.go{width:20px;height:20px;fill:none;stroke:var(--accent);stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round;transition:transform .25s ease}
a.row:hover .go{transform:translateX(3px)}

/* ---------- Rodapé ---------- */
.foot{display:flex;align-items:center;gap:6px;margin-top:30px}
.soc{display:grid;place-items:center;width:44px;height:44px;border-radius:50%;color:var(--fg)}
.soc:hover{background:var(--press)}
.soc svg{width:21px;height:21px;fill:none;stroke:currentColor;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}
.soc .dot{fill:currentColor;stroke:none}
.handle{margin-left:auto;font-size:13px;color:var(--muted)}

/* ---------- Telas largas: foto fixa à esquerda ---------- */
@media (min-width:900px){
  .page{display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,1fr);min-height:100vh}
  .hero{position:sticky;top:0;height:100vh;min-height:0}
  .hero::after{inset:0 0 0 auto;width:30%;height:auto;background:linear-gradient(to right,transparent,var(--fade))}
  .content{margin:0;padding:12vh 64px 48px 0;align-self:center;max-width:600px;margin-left:-5vw}
  .bio{font-size:17px}
  .dest{margin-top:40px}
  .row{min-height:92px}
  .t{font-size:calc(var(--t-size) + 5px)}
  .s{font-size:14.5px}
  .thumb{width:62px;height:76px}
  [data-c="laco"] .thumb,[data-c="lilas"] .thumb{width:64px;height:64px}
}

/* Assinatura decorativa: sem JS ou com movimento reduzido, não cobre a página. */
.splash{display:none}

/* ---------- Movimento ----------
   Só animação: em repouso nada muda de lugar, cor ou tamanho. Tudo abaixo some com prefers-reduced-motion. */
:root{--ease-out:cubic-bezier(.2,.7,.1,1);--spring:cubic-bezier(.34,1.3,.5,1)}
@supports (animation-timing-function:linear(0,1)){
  :root{--spring:linear(0,.009,.035 2.1%,.141 4.4%,.723 12.9%,.938 16.7%,1.017 19.6%,1.077 22.6%,1.121 25.8%,1.149 29.4%,1.159 33.2%,1.148 37.7%,1.012 52.5%,.98 58.9%,.983 65%,1.004 78.2%,1)}
}

@media (prefers-reduced-motion:no-preference){
  /* Troca de tela: o navegador anima a passagem entre /meuslinks/ e /parcerias/ (e a volta). */
  @view-transition{navigation:auto}
  /* A miniatura de Publicidades cresce até a foto da tela "Vamos conversar" (cross-fade entre as duas fotos) e volta. */
  a.row[href="/parcerias/"] .thumb{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 dos destinos, depois do título. */
  .dest .row{animation:row-in .75s var(--spring) backwards}
  .dest .row:nth-child(1){animation-delay:.5s}
  .dest .row:nth-child(2){animation-delay:.58s}
  .dest .row:nth-child(3){animation-delay:.66s}
  .foot{animation:fade .6s ease .8s backwards}
  .row{transition:background-color .2s ease,transform .5s var(--spring)}
  a.row:active{transform:scale(.975)}

  /* Uma assinatura curta na entrada direta; o SVG acompanha a paleta do cenário. */
  html[data-splash] .splash{display:grid;place-items:center;position:fixed;inset:0;z-index:50;pointer-events:none;background:var(--bg);animation:splash-lift .65s cubic-bezier(.76,0,.24,1) .8s both}
  .splash-signature{position:relative;display:grid;justify-items:center;animation:splash-mark 1.15s var(--ease-out) both}
  .splash-initials{font-family:var(--display);font-weight:500;font-size:clamp(88px,24vw,124px);letter-spacing:-.09em;padding-right:.09em;line-height:1;color:var(--fg)}
  .splash-name{margin-top:20px;font-family:var(--text);font-size:10px;font-weight:500;letter-spacing:.32em;padding-left:.32em;color:var(--muted)}
  .splash-spark{position:absolute;width:30px;height:30px;top:-8px;right:-20px;color:var(--accent);animation:splash-spark .85s var(--ease-out) .12s both}
  html[data-splash] .mark-l{animation-delay:.85s}
  html[data-splash] .mark-s,html[data-splash] .bio{animation-delay:1.2s}
  html[data-splash] .dest .row:nth-child(1){animation-delay:1.2s}
  html[data-splash] .dest .row:nth-child(2){animation-delay:1.28s}
  html[data-splash] .dest .row:nth-child(3){animation-delay:1.36s}
  html[data-splash] .foot{animation-delay:1.5s}
}
@keyframes vt-out{to{opacity:0;transform:scale(.98)}}
@keyframes vt-in{from{opacity:0;transform:translateY(10px)}}
@keyframes row-in{from{opacity:0;transform:translateY(18px) scale(.98)}}
@keyframes splash-lift{from{clip-path:inset(0 0 0 0 round 0 0 0 0)}to{clip-path:inset(0 0 100% 0 round 0 0 36px 36px)}}
@keyframes splash-mark{
  0%{opacity:0;transform:translateY(10px) scale(.96)}
  30%,70%{opacity:1;transform:none}
  100%{opacity:0;transform:translateY(-12px)}
}
@keyframes splash-spark{
  from{opacity:0;transform:scale(.4) rotate(-25deg)}
  to{opacity:1;transform:none}
}