/* ============================================================================
   ~grec — site pessoal. Registro: Suíço Cinético na identidade CIn (o mesmo do mergulho /temas/ da TMI).
   Depende de tokens.css/base.css/hub.css. Um acento (--brand). Cenas que se montam ao entrar e rearmam ao sair.
   ============================================================================ */
:root { --pad: clamp(20px, 4.5vw, 72px); --ease-in: cubic-bezier(.2,.7,.2,1); --draw: cubic-bezier(.6,0,.2,1);
  --t-hero: clamp(2.4rem, 1rem + 6vw, 6.4rem); --t-cena: clamp(1.7rem, .9rem + 2.8vw, 3.4rem); --t-frase: clamp(1.1rem, .95rem + .8vw, 1.5rem);
  --trilho-w: 18px; --brand-ghost: color-mix(in srgb, var(--brand) 12%, transparent); --brand-soft: color-mix(in srgb, var(--brand) 22%, transparent); }
html { scroll-padding-top: var(--altura-topo); scroll-behavior: smooth; }
@media (min-width: 1000px) and (min-height: 700px) { html { scroll-snap-type: y proximity; } }
body { overflow-x: hidden; }
#prog { position: fixed; top: 0; left: 0; height: 2px; width: 0; background: var(--brand); z-index: 1001; }
.grao { position: fixed; inset: 0; pointer-events: none; z-index: 998; opacity: .06; mix-blend-mode: multiply; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"); }
:root[data-tema="escuro"] .grao { mix-blend-mode: overlay; opacity: .08; }

/* ---- cenas ---- */
.cena { position: relative; min-height: 78svh; display: flex; flex-direction: column; justify-content: center; padding: clamp(40px, 7vh, 88px) var(--pad); scroll-snap-align: start; overflow: hidden; border-bottom: var(--border); }
.cena--alta { min-height: calc(100svh - var(--altura-topo)); }
.cena--baixa { min-height: 0; scroll-snap-align: none; }
.cena .in { max-width: var(--page); margin-inline: auto; width: 100%; position: relative; z-index: 3; }
.kick { font-family: var(--font-mono); font-size: var(--t-xs); letter-spacing: .18em; text-transform: uppercase; color: var(--brand); display: flex; align-items: center; gap: var(--s-3); margin-bottom: var(--s-4); }
.kick::after { content: ""; width: min(140px, 16vw); height: 1px; background: currentColor; opacity: .4; }
h1.sec, h2.sec { font-size: var(--t-cena); max-width: 24ch; margin: 0 0 clamp(16px, 3vh, 32px); line-height: 1.02; letter-spacing: -.02em; }
h1.hero { font-size: var(--t-hero); line-height: .95; letter-spacing: -.035em; margin: var(--s-3) 0 var(--s-5); max-width: 12ch; }
.frase { font-family: var(--font-serif); font-size: var(--t-frase); line-height: 1.45; max-width: 58ch; color: var(--fg-body); }
.folio { position: absolute; bottom: 14px; left: var(--pad); right: calc(var(--pad) + var(--trilho-w)); display: flex; justify-content: space-between; font-family: var(--font-mono); font-size: var(--t-xs); letter-spacing: .12em; color: var(--fg-muted); text-transform: uppercase; z-index: 4; pointer-events: none; }
/* coreografia */
.rv { opacity: 0; transform: translateY(24px); transition: opacity .7s var(--ease-in), transform .7s var(--ease-in); }
.cena.play .rv { opacity: 1; transform: none; }
.cena.play .rv[data-d="1"] { transition-delay: .12s } .cena.play .rv[data-d="2"] { transition-delay: .24s } .cena.play .rv[data-d="3"] { transition-delay: .36s } .cena.play .rv[data-d="4"] { transition-delay: .5s } .cena.play .rv[data-d="5"] { transition-delay: .64s }
.casc .w { display: inline-block; overflow: hidden; vertical-align: bottom; padding-top: .14em; margin-top: -.14em; }
.casc .w i { font-style: normal; display: inline-block; transform: translateY(112%); transition: transform .8s var(--ease-in); }
.cena.play .casc .w i { transform: none; }
.casc .w:nth-child(2) i { transition-delay: .06s } .casc .w:nth-child(3) i { transition-delay: .12s } .casc .w:nth-child(4) i { transition-delay: .18s } .casc .w:nth-child(5) i { transition-delay: .24s } .casc .w:nth-child(6) i { transition-delay: .3s } .casc .w:nth-child(7) i { transition-delay: .36s } .casc .w:nth-child(8) i { transition-delay: .42s } .casc .w:nth-child(n+9) i { transition-delay: .5s }
.hl { position: relative; padding: 0 .06em; white-space: nowrap; color: var(--fg); transition: color .3s .7s; }
.hl::before { content: ""; position: absolute; inset: .08em -.02em .02em; background: var(--brand); z-index: -1; transform: scaleX(0); transform-origin: left; transition: transform .6s var(--draw) .7s; }
.cena.play .hl { color: var(--on-brand); } .cena.play .hl::before { transform: none; }
.cena::before, .cena::after { content: ""; position: absolute; background: var(--rule); pointer-events: none; z-index: 1; }
.cena::before { left: var(--pad); right: var(--pad); top: clamp(24px, 4vh, 40px); height: 1px; transform: scaleX(0); transform-origin: left; transition: transform 1.1s var(--draw); }
.cena::after { top: 0; bottom: 0; left: calc(var(--pad) - 12px); width: 1px; transform: scaleY(0); transform-origin: top; transition: transform 1.1s var(--draw) .2s; }
.cena.play::before, .cena.play::after { transform: none; }
.fantasma { position: absolute; right: calc(var(--pad) + var(--trilho-w)); top: 4vh; font-family: var(--font-display); font-weight: 700; font-size: clamp(8rem, 20vw, 24rem); line-height: 1; letter-spacing: -.06em; color: var(--brand-ghost); z-index: 0; pointer-events: none; user-select: none; will-change: transform; }
.ilus { position: absolute; right: calc(var(--pad) + var(--trilho-w) + 1vw); top: 50%; transform: translateY(-50%); width: clamp(240px, 26vw, 420px); aspect-ratio: 1; z-index: 0; pointer-events: none; user-select: none; opacity: 0; transition: opacity 1.2s var(--ease-in) .45s, transform 1.4s var(--ease-in) .3s; }
.cena.play .ilus { opacity: var(--ilus-o, .55); }
.ilus--forte { opacity: 0; } .cena.play .ilus--forte { opacity: 1; }
@media (prefers-color-scheme: dark) { :root:not([data-tema="claro"]) .ilus, :root:not([data-tema="claro"]) .card__img img, :root:not([data-tema="claro"]) .proj__img img { filter: invert(1) hue-rotate(180deg); } }
:root[data-tema="escuro"] .ilus, :root[data-tema="escuro"] .card__img img, :root[data-tema="escuro"] .proj__img img { filter: invert(1) hue-rotate(180deg); }
/* trilho de pontos + contadores */
.trilho { position: fixed; right: 6px; top: 50%; transform: translateY(-50%); z-index: 40; display: flex; flex-direction: column; gap: 5px; padding: 8px 4px; }
.trilho a { display: block; width: 10px; height: 10px; position: relative; text-decoration: none; }
.trilho a::before { content: ""; position: absolute; inset: 3px; background: var(--rule-control); border-radius: var(--r-pill); transition: transform .2s, background .2s; }
.trilho a.ativo::before { background: var(--brand); transform: scale(1.5); }
.num { font-family: var(--font-display); font-weight: 700; font-size: clamp(2rem, 1rem + 3vw, 4rem); line-height: 1; color: var(--brand); letter-spacing: -.03em; }
.numeros { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: var(--s-4); margin-top: var(--s-5); }
.numeros div { border-top: 2px solid var(--brand); padding-top: var(--s-3); } .numeros span { display: block; margin-top: var(--s-2); font-size: var(--t-sm); color: var(--fg-muted); line-height: 1.4; }
/* cards com imagem */
.cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: var(--s-4); margin-top: var(--s-5); }
.card { border: var(--border); border-radius: 14px; background: var(--surface); text-decoration: none; color: inherit; display: grid; grid-template-rows: auto 1fr; overflow: hidden; transition: border-color .15s, transform .15s; }
.card:hover { border-color: var(--brand); transform: translateY(-3px); }
.card__img { background: var(--bg-soft, #F7F5F2); aspect-ratio: 16/10; display: grid; place-items: center; overflow: hidden; }
.card__img img { width: 62%; height: auto; }
.card__corpo { padding: var(--s-3) var(--s-4) var(--s-4); display: grid; gap: var(--s-2); align-content: start; }
.card .n { font-family: var(--font-mono); font-size: var(--t-xs); color: var(--fg-muted); }
.card h3 { margin: 0; font-size: var(--t-md); line-height: 1.25; }
.card p { margin: 0; font-size: var(--t-sm); color: var(--fg-muted); line-height: 1.45; }
.card .meta { font-size: var(--t-xs); color: var(--fg); font-weight: 600; }
/* projetos: ficha larga com imagem ao lado */
.proj { display: grid; grid-template-columns: minmax(140px, 220px) 1fr; gap: var(--s-5); align-items: start; padding: var(--s-5) 0; border-top: 1px solid var(--hairline); }
.proj__img { aspect-ratio: 1; display: grid; place-items: center; } .proj__img img { width: 100%; }
.proj h3 { margin: 0 0 var(--s-2); font-size: var(--t-lg); line-height: 1.15; }
.proj .n { font-family: var(--font-mono); font-size: var(--t-xs); color: var(--brand); letter-spacing: .12em; text-transform: uppercase; }
.proj p { margin: var(--s-2) 0; max-width: 70ch; line-height: 1.5; }
.proj .meta { font-size: var(--t-sm); color: var(--fg-muted); }
@media (max-width: 640px) { .proj { grid-template-columns: 1fr; } .proj__img { width: 140px; } }
.tres-colunas { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: var(--s-6); margin-top: var(--s-5); }
.lista-simples { padding-left: 1.1em; margin: var(--s-2) 0; } .lista-simples li { margin: var(--s-2) 0; line-height: 1.45; }
.linha-do-tempo { border-collapse: collapse; width: 100%; margin-top: var(--s-4); }
.linha-do-tempo td { vertical-align: top; padding: var(--s-3) var(--s-3); border-top: 1px solid var(--hairline); line-height: 1.5; }
.linha-do-tempo td:first-child { font-family: var(--font-mono); font-size: var(--t-sm); color: var(--brand); white-space: nowrap; width: 8.5em; }
.pubs { list-style: none; padding: 0; margin: var(--s-4) 0 var(--s-6); }
.pubs li { display: grid; grid-template-columns: 4.2em 1fr; gap: var(--s-3); padding: var(--s-3) 0; border-top: 1px solid var(--hairline); line-height: 1.45; }
.pub__ano { font-family: var(--font-mono); color: var(--brand); font-size: var(--t-sm); } .pub__aut { font-size: var(--t-sm); color: var(--fg-muted); } .pub__veic { font-size: var(--t-sm); font-style: italic; }
.pubs--curta li { padding: var(--s-2) 0; font-size: var(--t-sm); }
.lingua { font: inherit; font-size: var(--t-sm); border: var(--border); border-radius: 999px; padding: 4px 10px; background: var(--surface); color: var(--fg); margin-left: var(--s-3); }
.fut-barra { display: flex; flex-wrap: wrap; gap: var(--s-3); align-items: center; margin-top: var(--s-5); font-size: var(--t-sm); color: var(--fg-muted); }
.pilula { border: 1px solid var(--hairline-strong); border-radius: 999px; padding: 2px 10px; }
.acoes { display: flex; flex-wrap: wrap; gap: var(--s-3); margin-top: var(--s-4); }
.tabela-wrap { overflow-x: auto; margin-top: var(--s-4); } .tabela-wrap table { border-collapse: collapse; width: 100%; font-size: var(--t-sm); }
.tabela-wrap th, .tabela-wrap td { text-align: left; padding: var(--s-2) var(--s-3); border-bottom: 1px solid var(--hairline); vertical-align: top; }
.mudo { color: var(--fg-muted); font-size: var(--t-sm); }
.doc { max-width: 74ch; } .doc p { margin: var(--s-3) 0; line-height: 1.6; } .doc h2 { margin-top: var(--s-6); }
@media (max-width: 900px) { .fantasma { font-size: clamp(6rem, 30vw, 11rem); top: auto; bottom: 0; right: var(--s-2); } .ilus { position: static; transform: none; width: min(60vw, 280px); margin: var(--s-4) 0 0; opacity: 1 !important; } .trilho { display: none; } .folio { display: none; } .cena { min-height: 0; scroll-snap-align: none; } }
@media (prefers-reduced-motion: reduce) { .rv, .casc .w i, .ilus { opacity: 1 !important; transform: none !important; transition: none !important; } .cena::before, .cena::after { transform: none !important; } }
.fig { margin: var(--s-5) 0; } .fig img { width: 100%; border-radius: 12px; border: 1px solid var(--hairline); display: block; }
.fig figcaption { font-size: var(--t-xs); color: var(--fg-muted); margin-top: var(--s-2); }
.doc ul.lista-simples li img { display: block; margin: var(--s-3) 0; max-width: 560px; border-radius: 10px; border: 1px solid var(--hairline); }
/* retrato na abertura (17/09, tarde da noite) */
.retrato { position: absolute; right: calc(var(--pad) + var(--trilho-w)); bottom: 0; height: min(72vh, 620px); width: auto; object-fit: contain; object-position: bottom right; z-index: 1; opacity: 0; transform: translateY(18px); transition: opacity 1.1s var(--ease-in) .25s, transform 1.1s var(--ease-in) .25s; mask-image: linear-gradient(to bottom, #000 82%, transparent 100%); }
.cena.play .retrato { opacity: .95; transform: none; }
@media (max-width: 1100px) { .retrato { display: none; } }
/* galeria com busca (18/09) */
.gbusca { position: sticky; top: var(--altura-topo); z-index: 30; background: color-mix(in srgb, var(--bg) 92%, transparent); backdrop-filter: blur(10px); padding: var(--s-4) 0; border-bottom: var(--border); margin-bottom: var(--s-5); }
.gbusca__linha { display: flex; gap: var(--s-3); align-items: center; flex-wrap: wrap; }
#g-q { flex: 1 1 320px; font: inherit; font-size: var(--t-md); padding: .8em 1em; border: var(--border-strong, 1.5px solid var(--hairline-strong)); border-radius: 999px; background: var(--surface); color: var(--fg); }
#g-q:focus { outline: none; border-color: var(--brand); }
#g-ordem { font: inherit; font-size: var(--t-sm); padding: .6em .8em; border: var(--border); border-radius: 999px; background: var(--surface); color: var(--fg); }
#g-conta { font-family: var(--font-mono); font-size: var(--t-xs); color: var(--fg-muted); letter-spacing: .08em; text-transform: uppercase; }
.gfaceta { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; margin-top: var(--s-3); }
.gfaceta__t { font-family: var(--font-mono); font-size: var(--t-xs); color: var(--fg-muted); text-transform: uppercase; letter-spacing: .1em; margin-right: var(--s-2); }
.gchip, .gtag { font: inherit; font-size: var(--t-xs); padding: 3px 10px; border-radius: 999px; border: 1px solid var(--hairline-strong); background: transparent; color: var(--fg-body); cursor: pointer; transition: border-color .15s, color .15s, background .15s; }
.gchip:hover, .gtag:hover { border-color: var(--brand); color: var(--brand); }
.gchip--on, .gtag--on { background: var(--brand); border-color: var(--brand); color: var(--on-brand); }
.gchip b, .gtag b { font-weight: 600; opacity: .6; }
#g-tags { display: flex; flex-wrap: wrap; gap: 6px; margin-top: var(--s-3); }
.g-grade { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: var(--s-4); margin-top: var(--s-5); }
.gcard { border: var(--border); border-radius: 14px; overflow: hidden; background: var(--surface); display: grid; grid-template-rows: auto 1fr; transition: border-color .15s, transform .15s; }
.gcard:hover { border-color: var(--brand); transform: translateY(-2px); }
.gcard__img { aspect-ratio: 16/10; background: var(--bg-soft, #F7F5F2); overflow: hidden; }
.gcard__img img { width: 100%; height: 100%; object-fit: cover; display: block; }
.gcard__img--vazia { background: repeating-linear-gradient(45deg, var(--bg-soft, #F7F5F2), var(--bg-soft, #F7F5F2) 10px, transparent 10px, transparent 20px); }
.gcard__corpo { padding: var(--s-3) var(--s-4) var(--s-4); display: grid; gap: var(--s-2); align-content: start; }
.gcard__meta { font-family: var(--font-mono); font-size: var(--t-xs); color: var(--fg-muted); }
.gcard h3 { margin: 0; font-size: var(--t-md); line-height: 1.25; }
.gcard__desc { margin: 0; font-size: var(--t-sm); color: var(--fg-body); line-height: 1.45; }
.gcard__aut { margin: 0; font-size: var(--t-xs); color: var(--fg-muted); }
.gcard__tags { display: flex; flex-wrap: wrap; gap: 4px; }
.gcard__acoes { display: flex; flex-wrap: wrap; gap: var(--s-2); margin-top: var(--s-1); }
.gcard mark { background: color-mix(in srgb, var(--brand) 22%, transparent); color: inherit; padding: 0 2px; border-radius: 3px; }
.g-mais { grid-column: 1 / -1; justify-self: center; margin-top: var(--s-4); }
#g-vazio { margin-top: var(--s-6); color: var(--fg-muted); }