/* O Time (Home #pessoas e #estudio). Superfície clara editorial depois da Horizonte escura.
   Movimento: os quadros abrem pela fenda horizontal (o motivo da Horizonte e do footer), a frase de apoio acende com a
   rolagem, o retrato ganha cor no hover. Nenhum contêiner se move em hover, foco ou pressão (MOTION-SYSTEM.md). */
.tm { --paper: #f1ede6; --pencil: #6b5440; --line: rgb(11 15 20 / .14); position: relative; z-index: 1; overflow-x: clip; margin-top: -32px; padding: 120px max(var(--gutter), env(safe-area-inset-right)) 136px max(var(--gutter), env(safe-area-inset-left)); background: var(--paper); color: var(--ink); border-radius: 28px 28px 0 0; }
.tm__k, .tm .n { margin: 0; font: 500 12px/1.4 "JetBrains Mono", monospace; letter-spacing: .08em; text-transform: uppercase; }
.tm__k { color: var(--pencil); }
.tm picture, .tm picture img { display: block; width: 100%; height: 100%; }
.tm picture img { object-fit: cover; }

/* abertura */
.tm__open { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); column-gap: 6%; }
.tm__title { grid-column: 1 / -1; }
.tm__lead { grid-column: 2; margin-top: 40px !important; }
.tm__open .tm__k { grid-column: 1 / -1; margin-bottom: 20px; }
.tm__title { margin: 0; font-weight: 700; font-size: clamp(56px, 11vw, 168px); line-height: .9; letter-spacing: -.06em; }
.tm__title .ln { display: block; overflow: hidden; padding-bottom: .08em; margin-bottom: -.08em; }
.tm__title .ln > span { display: inline-block; transform: translateY(105%); transition: transform 1s var(--ease-out); }
.tm__title .ln + .ln > span { transition-delay: 80ms; }
.tm.is-in .tm__title .ln > span { transform: none; }
/* frase de apoio: as palavras acendem conforme a seção sobe (--r de 0 a 1, calculado no time.js) */
.tm__lead { margin: 0; max-width: 24ch; font-size: clamp(22px, 2.4vw, 34px); font-weight: 600; line-height: 1.2; letter-spacing: -.025em;
  background: linear-gradient(90deg, var(--ink) calc(var(--r, 1) * 100%), rgb(11 15 20 / .26) calc(var(--r, 1) * 100%)); -webkit-background-clip: text; background-clip: text; color: transparent; }

/* pessoas: galeria em faixas. A pessoa escolhida abre em retrato colorido com função e LinkedIn; as outras ficam em
   faixas P&B com o nome na vertical. A troca é por clique, toque ou teclado (o hover só acende a faixa, nada se desloca). */
.tg { --tg-h: clamp(420px, 40vw, 560px); display: flex; gap: 10px; height: var(--tg-h); margin: 88px 0 0; padding: 0; list-style: none; }
.tg__p { position: relative; flex: 1 1 0; min-width: 0; overflow: hidden; border-radius: 6px; background: #d9d3c8; clip-path: inset(50% 0 50% 0); }
.tm.is-people .tg__p { clip-path: inset(0); transition: flex-basis .7s var(--ease-emph), clip-path 1.1s var(--ease-emph) calc(var(--i) * 80ms); }
/* a faixa aberta tem a proporção da foto (4:5): o rosto aparece inteiro, sem zoom; as outras dividem o resto */
.tg__p { transition: flex-basis .7s var(--ease-emph); }
.tg__p.is-on { flex: 0 0 calc(var(--tg-h) * .8); }
.tg__ph, .tg__ph picture { position: absolute; inset: 0; }
.tg__ph img { object-fit: cover; object-position: 50% 30%; }
.tg__ph .pb img { filter: grayscale(1) contrast(1.05); transition: transform 1s var(--ease-out); }
.tg__ph .cor { opacity: 0; transition: opacity var(--dur-reveal) var(--ease-out); }
.tg__p.is-on .tg__ph .cor { opacity: 1; }
.tg__p:not(.is-on)::after { content: ""; position: absolute; inset: 0; background: rgb(241 237 230 / .16); transition: background-color var(--dur-fast) var(--ease-out); pointer-events: none; }
@media (hover: hover) and (pointer: fine) { .tg__p:not(.is-on):hover::after { background: rgb(241 237 230 / 0); } .tg__p:not(.is-on):hover .tg__ph .pb img { transform: scale(1.04); } }
.tg__pick { position: absolute; inset: 0; z-index: 1; display: flex; align-items: flex-end; justify-content: center; padding: 0 0 18px; border: 0; background: linear-gradient(to top, rgb(11 15 20 / .55), rgb(11 15 20 / 0) 45%); color: var(--off); cursor: pointer; -webkit-tap-highlight-color: transparent; transition: opacity var(--dur-base) var(--ease-out); }
.tg__p.is-on .tg__pick { opacity: 0; pointer-events: none; }
.tg__pick:focus-visible { outline: var(--focus-ring); outline-offset: -4px; border-radius: 6px; }
.tg__v { display: inline-flex; align-items: center; gap: 10px; writing-mode: vertical-rl; transform: rotate(180deg); font-size: 15px; font-weight: 600; letter-spacing: -.01em; white-space: nowrap; }
.tg__v .n { font: 500 12px/1 "JetBrains Mono", monospace; letter-spacing: .08em; color: var(--copper-l); }
.tg__pick:active .tg__v { opacity: .72; }
.tg__info { position: absolute; left: 0; right: 0; bottom: 0; z-index: 2; display: grid; grid-template-columns: 1fr auto; align-items: end; column-gap: 16px; padding: 64px 24px 22px; background: linear-gradient(to top, rgb(11 15 20 / .78), rgb(11 15 20 / 0)); color: var(--off); opacity: 0; visibility: hidden; transform: translateY(var(--shift-md)); transition: opacity var(--dur-base) var(--ease-out), transform var(--dur-base) var(--ease-out), visibility 0s linear var(--dur-base); }
.tg__p.is-on .tg__info { opacity: 1; visibility: visible; transform: none; transition-delay: .25s, .25s, 0s; }
.tg__role { grid-column: 1; margin: 0 0 6px; font: 500 12px/1.4 "JetBrains Mono", monospace; letter-spacing: .08em; text-transform: uppercase; color: var(--copper-l); }
.tg__name { grid-column: 1; margin: 0; font-size: clamp(22px, 2.2vw, 32px); font-weight: 700; letter-spacing: -.03em; line-height: 1.05; }
.tg__in { grid-column: 2; grid-row: 1 / span 2; align-self: end; display: grid; place-items: center; width: 44px; height: 44px; border-radius: 50%; border: 1px solid rgb(245 242 237 / .4); color: var(--off); transition: background-color var(--dur-fast) var(--ease-out), border-color var(--dur-fast) var(--ease-out), color var(--dur-fast) var(--ease-out); }
.tg__in svg { width: 18px; height: 18px; fill: currentColor; transition: transform var(--dur-press) var(--ease-out); }
.tg__in:focus-visible { outline: var(--focus-ring); outline-offset: var(--focus-offset); }
@media (hover: hover) and (pointer: fine) { .tg__in:hover { background: var(--off); border-color: var(--off); color: var(--ink); } }
.tg__in:active { background: rgb(245 242 237 / .2); } .tg__in:active svg { transform: scale(.88); }

/* como trabalhamos: rótulo à esquerda, texto à direita */
.tm__how { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); column-gap: 6%; margin-top: 160px; padding-top: 32px; border-top: 1px solid var(--line); scroll-margin-top: calc(var(--header-h) + 16px); }
.tm__statement { margin: 0; max-width: 26ch; font-size: clamp(28px, 3.4vw, 52px); font-weight: 600; line-height: 1.08; letter-spacing: -.035em; }
.tm__statement .dim { color: rgb(11 15 20 / .56); }
.tm__disc { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 40px; margin: 56px 0 0; padding: 0; list-style: none; }
.tm__disc li { position: relative; display: grid; grid-template-columns: 64px 1fr; column-gap: 20px; align-items: start; padding: 24px 0 26px; border-top: 1px solid var(--line); }
/* ícones em matriz de pontos (canvas, desenhados no time.js): animam ao entrar na tela e em loop no hover */
.tm__ico { grid-row: span 2; width: 64px; height: 64px; }
.tm__disc li .n { position: absolute; top: 26px; right: 0; padding: 0; }
.tm__disc .n { color: var(--pencil); }
.tm__disc h3 { margin: 6px 0 0; font-size: 19px; letter-spacing: -.015em; }
.tm__disc p { margin: 6px 0 0; color: rgb(11 15 20 / .68); font-size: 15px; line-height: 1.55; }

/* celular: composição própria, em duas colunas desencontradas, com nomes legíveis */
@media (max-width: 899px), (max-height: 559px) {
  .tm { padding-top: 88px; padding-bottom: 96px; border-radius: 22px 22px 0 0; }
  .tm__open { grid-template-columns: 1fr; row-gap: 24px; }
  .tm__lead { grid-column: 1; margin-top: 0 !important; }
  .tm__open .tm__k { margin-bottom: 0; }
  .tm__title { font-size: clamp(56px, 18vw, 104px); }
  .tm__lead { max-width: 20ch; font-size: clamp(21px, 6vw, 28px); }
  .tm__how { grid-template-columns: 1fr; row-gap: 24px; margin-top: 104px; }
  .tm__statement { font-size: clamp(26px, 7.6vw, 36px); }
  .tm__disc { grid-template-columns: 1fr; margin-top: 32px; }
}
@media (max-width: 899px), (max-height: 559px) { .tg { --tg-h: 440px; margin-top: 48px; gap: 8px; } .tg__info { padding: 56px 18px 18px; } }
/* celular (≤ 559 px, desde 06/11): ticker horizontal (time.js). A faixa vai de borda a borda e rola por baixo (rolagem
   nativa, barra oculta); cartões em retrato 4:5 (58vw: sempre há um cartão pelo menos 83% na tela e a ponta do próximo), P&B, com o nome embaixo. O cartão aberto cresce até a largura da tela,
   ainda em 4:5 (a foto inteira, sem recorte), ganha cor e mostra função, nome, LinkedIn e o botão de fechar.
   A troca de tamanho é largura/altura em 420 ms só no toque; nada se move em hover. Sem JS: a mesma lista, rolada à mão. */
.tg__x { display: none; }
@media (max-width: 559px) {
  .tg { --tg-w: 58vw; --tg-open: calc(100vw - 2 * max(var(--gutter), env(safe-area-inset-left))); flex-direction: row; align-items: flex-start; gap: 12px; height: auto;
    margin-left: calc(-1 * max(var(--gutter), env(safe-area-inset-left))); margin-right: calc(-1 * max(var(--gutter), env(safe-area-inset-right)));
    padding: 0 max(var(--gutter), env(safe-area-inset-right)) 0 max(var(--gutter), env(safe-area-inset-left));
    overflow-x: auto; overscroll-behavior-x: contain; scrollbar-width: none; -webkit-tap-highlight-color: transparent; }
  .tg::-webkit-scrollbar { display: none; }
  .tg.is-manual { scroll-snap-type: x mandatory; scroll-padding-inline: max(var(--gutter), env(safe-area-inset-left)); }
  .tg.is-manual .tg__p { scroll-snap-align: start; }
  .tg__p, .tg__p.is-on { flex: none; width: var(--tg-w); height: calc(var(--tg-w) * 1.25); }
  .tg__p.is-on { width: var(--tg-open); height: calc(var(--tg-open) * 1.25); }
  .tg__p, .tm.is-people .tg__p { transition: width .42s var(--ease-out), height .42s var(--ease-out), clip-path 1.1s var(--ease-emph) calc(var(--i) * 80ms); }
  .tg__p.is-snap { transition: none !important; }
  .tg__ph img { object-position: 50% 30%; }
  .tg__pick { align-items: flex-end; justify-content: flex-start; padding: 0 16px 16px; background: linear-gradient(to top, rgb(11 15 20 / .62), rgb(11 15 20 / 0) 50%); }
  .tg__pick:focus-visible { outline-offset: -3px; }
  .tg__v { writing-mode: horizontal-tb; transform: none; font-size: 17px; }
  .tg__info { padding: 72px 18px 18px; }
  .tg__p.is-on .tg__info { transition-delay: .16s, .16s, 0s; }
  /* fechar: cápsula escura no canto, entra junto com as informações */
  .tg.is-ticker .tg__x { position: absolute; top: 12px; right: 12px; z-index: 3; display: grid; place-items: center; width: 44px; height: 44px; padding: 0; border: 1px solid rgb(245 242 237 / .32); border-radius: 50%;
    background: rgb(11 15 20 / .5); color: var(--off); cursor: pointer; -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
    opacity: 0; visibility: hidden; transition: opacity var(--dur-base) var(--ease-out), visibility 0s linear var(--dur-base), background-color var(--dur-fast) var(--ease-out); }
  .tg.is-ticker .tg__p.is-on .tg__x { opacity: 1; visibility: visible; transition-delay: .16s, 0s, 0s; }
  .tg__x svg { width: 18px; height: 18px; transition: transform var(--dur-press) var(--ease-out); }
  .tg__x:focus-visible { outline: var(--focus-ring); outline-offset: 2px; }
  .tg__x:active { background: rgb(11 15 20 / .72); } .tg__x:active svg { transform: scale(.88); }
}
/* sem JS ou com movimento reduzido: tudo visível, sem máscara */
html:not(.js) .tg__p { clip-path: none; }
html:not(.js) .tg__info { opacity: 1; visibility: visible; transform: none; }
html:not(.js) .tm__title .ln > span { transform: none; }
@media (prefers-reduced-motion: reduce) {
  .tg__p { clip-path: none !important; transition: none !important; }
  .tm__title .ln > span { transform: none !important; transition: none !important; }
  .tg__ph .cor, .tg__info { transition-duration: 1ms !important; }
}

/* Curva de transição para o footer (03/11/2026, pedido do usuário; referência observada em onform.studio, ".footer-curve").
   Elipse 150% mais larga que a tela, com altura = 7,84 × profundidade: assim a borda dela cruza a linha do papel exatamente nas
   laterais da tela (profundidade 0 nas bordas, máxima no centro) e o arco é contínuo de ponta a ponta, sem "ombros".
   O achatamento com a rolagem é scaleY ancorado na linha do papel (87,24% da altura): todas as profundidades encolhem juntas,
   então o arco continua tocando as bordas em qualquer momento. Só transform. A parte de cima fica dentro do O Time (mesma cor)
   e atrás do conteúdo (z-index -1 no contexto do .tm, que já está acima do footer). */
.tm::after { content: ""; position: absolute; z-index: -1; left: 50%; bottom: calc(-1 * var(--curve, 96px)); width: 150%; height: calc(var(--curve, 96px) * 7.84); border-radius: 50%; background: var(--paper); transform: translateX(-50%); transform-origin: 50% 87.24%; pointer-events: none; }
@media (max-width: 899px), (max-height: 559px) { .tm { --curve: 44px; } }
@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) {
    .tm { view-timeline: --tm-saida block; }
    .tm::after { animation: tm-curva linear both; animation-timeline: --tm-saida; animation-range: exit 0% exit 100%; }
    @keyframes tm-curva { to { transform: translateX(-50%) scaleY(.3); } }
  }
}