/* =============================================================================
   Tenet Tecnologia · tenet.ia.br · css/golden.css
   O Otto, nosso golden: as peças dele e só elas. Carrega na /otto e na página
   Sobre do Otto, depois de base.css (a ordem das camadas está lá):
     /otto, /en/otto, /otto/sobre, /en/otto/sobre
       /css/base.css + /css/pecas.css + /css/golden.css + /css/otto.css

   Onde ele aparece, e só aí (correção do dono, 27/09):
   1. O easter egg do rodapé da /otto: o alto da cabeça dele, com as orelhas,
      espiando atrás do "O" de OTTO. Um toque, um clique ou Enter abre a foto
      num popover nativo.
   2. A página Sobre do Otto (.golden-historia): de onde vem o nome, em
      poucas linhas, com a foto dele recortada sem fundo.
   No site da Tenet (home, /en, 404, páginas legais) não entra nada daqui.

   O azul: --azul-otto é a cor da coleira dele e só existe neste arquivo e
   em img/golden/. scripts/site-tenet/conferir-azul.py barra qualquer outro.

   Sem script: o popover é <button popovertarget> + <div popover>. Abre por
   toque, clique e teclado; fecha com Esc, com toque fora e com o botão
   "fechar"; o foco volta ao "O"; o histórico não ganha entrada. A CSP
   (script-src 'none') e a política de privacidade não mudam.
   A foto do cartão tem loading="lazy": dentro do popover fechado ela não é
   desenhada, e por isso só baixa quando o cartão abre.
   ========================================================================== */

@layer golden {

  /* ------------------------------------------------------------ o azul dele */
  :root {
    /* o turquesa da coleira dele na foto (29.jpg),
       tirado da própria foto. Contra o fundo: 4,2:1 no claro e 9,1:1 no
       escuro (é desenho, não texto: o mínimo é 3:1). O app usa o mesmo par
       (painel/src/estilo/vazios.css, --golden-coleira). */
    --azul-otto: light-dark(#1f8290, #5cc3cf);
    /* o caramelo do pelo dele: a silhueta (img/golden/app-fila-vazia.svg,
       orelha.svg) e a luz quente atrás da foto na página Sobre */
    --golden: #c98a45;
  }
  @supports not (color: light-dark(#000, #fff)) {
    :root { --azul-otto: #1f8290; }
    @media (prefers-color-scheme: dark) { :root { --azul-otto: #5cc3cf; } }
  }

  /* ------------------------------------------------ easter egg do rodapé
     <div class="rodape-gigante golden-rodape">
       <svg class="rodape-letras" viewBox="-2 -2 528 164" aria-hidden="true">…TTO…</svg>
       <button class="golden-o" type="button" popovertarget="otto-golden"
               aria-label="Ver a foto do Otto, nosso golden">
         <svg class="golden-orelha" viewBox="0 0 587 440" …>…img/golden/orelha.svg…</svg>
         <svg class="golden-o-letra" viewBox="-2 -2 140 164" …>…o O…</svg>
       </button>
     </div>
     As letras TTO ficam no SVG de sempre (aria-hidden); o primeiro O é o
     botão, desenhado por cima, na mesma escala: o botão tem 140/528 da
     largura, a mesma fração do O no viewBox das letras. A cabeça dele (o
     alto da silhueta tirada da foto, orelhas ao vento, de perfil para a
     direita) fica atrás do O, que é cheio da cor do fundo e por isso a
     esconde; só o cocuruto e as orelhas, acima da borda, aparecem. Em
     repouso ela é discreta (no celular não há hover); no hover e no foco
     ganha cor e sobe 6 px. */
  .rodape-gigante.golden-rodape {
    /* a folga de cima é onde a cabeça dele aparece: 30 unidades do viewBox das
       letras (528 de largura), mais os 6 px da subida. No próprio bloco ela
       é medida em % (da largura); no O, em cqi (a largura deste bloco), e
       por isso o O e as letras andam juntos em qualquer tela. */
    container-type: inline-size;
    block-size: auto;
    padding-top: calc(30 / 528 * 100% + 8px);
  }
  /* mostra só o alto das letras (62%), como a TENET gigante das outras páginas */
  .golden-rodape > .rodape-letras { display: block; margin-bottom: calc(-62 / 528 * 100%); }

  .golden-o {
    position: absolute; z-index: 1;
    left: 0; top: calc(30 / 528 * 100cqi + 8px);
    inline-size: calc(140 / 528 * 100%);
    aspect-ratio: 140 / 164;
    margin: 0; padding: 0; border: 0; background: none;
    color: var(--tinta-4);
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
    border-radius: 30% / 26%;
  }
  .golden-o-letra {
    position: relative; z-index: 1;
    display: block; inline-size: 100%; block-size: auto;
  }
  /* o O cheio da cor do rodapé esconde a orelha; o contorno é o das letras */
  .golden-o-letra .o-fora {
    fill: var(--fundo); stroke: var(--linha-forte); stroke-width: 1;
    vector-effect: non-scaling-stroke;
    transition: stroke .2s var(--ease-ui);
  }
  .golden-o-letra .o-dentro {
    fill: none; stroke: var(--linha-forte); stroke-width: 1;
    vector-effect: non-scaling-stroke;
    transition: stroke .2s var(--ease-ui);
  }
  /* a cabeça tem 587 x 440 no viewBox dela, desenhada em poucas curvas
     (a cabeça e as duas orelhas caídas); aqui ocupa 60% da largura do O e
     espia por cima do meio dele. Em repouso fica apagada, e acende no
     hover e no foco. */
  .golden-orelha {
    position: absolute; z-index: 0;
    left: 20%; top: calc(-32 / 164 * 100%);
    inline-size: 60%; block-size: auto; aspect-ratio: 587 / 440;
    overflow: visible;
    transition: translate .45s var(--ease-saida);
  }
  .golden-orelha path {
    fill: var(--golden); fill-opacity: .4;
    transition: fill-opacity .25s var(--ease-ui);
  }
  .golden-o:is(:hover, :focus-visible) { color: var(--tinta-2); }
  .golden-o:is(:hover, :focus-visible) .golden-orelha { translate: 0 -6px; }
  .golden-o:is(:hover, :focus-visible) .golden-orelha path { fill-opacity: .9; }
  .golden-o:is(:hover, :focus-visible) :is(.o-fora, .o-dentro) { stroke: var(--borda-campo); }
  .golden-o:focus-visible { outline: 2px solid var(--otto); outline-offset: 6px; }
  /* aberto, o O fica aceso até o cartão fechar */
  .golden-o:has(+ .golden-cartao:popover-open),
  .golden-rodape:has(+ .golden-cartao:popover-open) .golden-o { color: var(--tinta-2); }

  /* ------------------------------------------------ o cartão com a foto
     <div class="golden-cartao" id="otto-golden" popover>
       <picture>…img/golden/otto-recorte.avif e .webp, loading="lazy"…</picture>
       <p>Este é o Otto, nosso golden. O produto leva o nome dele.</p>
       <button class="botao botao-fantasma botao-pequeno" type="button"
               popovertarget="otto-golden" popovertargetaction="hide">fechar</button>
     </div> */
  .golden-cartao {
    inline-size: min(360px, 100vw - 32px);
    max-block-size: calc(100dvh - 32px);
    margin: auto; padding: 10px 10px 14px;
    overflow: auto;
    border: 1px solid var(--linha-forte);
    border-radius: 24px;
    background: var(--sup-1);
    color: var(--tinta);
    box-shadow: 0 1px 2px rgb(0 0 0 / .08), 0 30px 80px -24px rgb(0 0 0 / .55);
  }
  .golden-cartao:popover-open { display: grid; gap: 14px; }
  /* a foto é o recorte dele sem fundo (852 x 1000 com alfa): em vez de
     paisagem, a mesma luz quente da página Sobre, e as bordas do recorte
     (embaixo e à direita) somem aos poucos */
  .golden-cartao picture {
    display: block; inline-size: 100%;
    border-radius: 16px;
    background: radial-gradient(closest-side at 45% 42%,
      light-dark(rgb(201 138 69 / .30), rgb(201 138 69 / .20)) 0%,
      light-dark(rgb(201 138 69 / .12), rgb(201 138 69 / .07)) 60%,
      rgb(201 138 69 / 0) 100%), var(--sup-2);
  }
  .golden-cartao img {
    display: block; inline-size: 100%; block-size: auto;
    aspect-ratio: 852 / 1000;
    -webkit-mask-image: linear-gradient(to bottom, #000 80%, transparent 99%),
                        linear-gradient(to left, transparent 0, #000 12%);
    mask-image: linear-gradient(to bottom, #000 80%, transparent 99%),
                linear-gradient(to left, transparent 0, #000 12%);
    -webkit-mask-composite: source-in; mask-composite: intersect;
  }
  .golden-cartao p {
    padding-inline: 6px;
    font-family: var(--serif); font-optical-sizing: auto; font-weight: 380;
    font-size: 1.1875rem; line-height: 1.3; letter-spacing: -.01em;
    color: var(--tinta); text-wrap: balance;
  }
  .golden-cartao .botao { justify-self: end; margin-right: 4px; }
  .golden-cartao::backdrop {
    background: rgb(10 8 6 / .55);
    -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
  }
  @media (prefers-reduced-transparency: reduce) {
    .golden-cartao::backdrop { background: rgb(10 8 6 / .88); -webkit-backdrop-filter: none; backdrop-filter: none; }
  }

  /* entrada suave; sem movimento, ele só aparece */
  @media (prefers-reduced-motion: no-preference) {
    .golden-cartao {
      transition: opacity .28s var(--ease-saida), scale .38s var(--ease-saida),
                  display .38s allow-discrete, overlay .38s allow-discrete;
      opacity: 0; scale: .96;
    }
    .golden-cartao:popover-open { opacity: 1; scale: 1; }
    @starting-style { .golden-cartao:popover-open { opacity: 0; scale: .96; } }
    .golden-cartao::backdrop { transition: opacity .28s, display .28s allow-discrete, overlay .28s allow-discrete; opacity: 0; }
    .golden-cartao:popover-open::backdrop { opacity: 1; }
    @starting-style { .golden-cartao:popover-open::backdrop { opacity: 0; } }
  }
  /* com movimento reduzido, a orelha fica parada */
  @media (prefers-reduced-motion: reduce) {
    .golden-orelha { transition: none; }
    .golden-o:is(:hover, :focus-visible) .golden-orelha { translate: none; }
  }

  /* ------------------------------------------------- a página Sobre do Otto
     otto/sobre.html e en/otto/sobre.html, com link só no rodapé da /otto.
     Poucas linhas e a foto dele; tom de "de onde vem o nome". A foto é a dele
     recortada sem fundo (img/golden/otto-recorte.webp, 852 x 1000 com
     transparência): sem moldura, com uma luz quente atrás e uma sombra
     macia; as bordas do recorte (embaixo e à direita) somem aos poucos.
     <article class="golden-historia">
       <figure class="golden-historia-retrato">
         <div class="golden-historia-sombra"><picture>…avif e webp, loading="eager"…</picture></div>
         <figcaption>…</figcaption>
       </figure>
       <div class="golden-historia-texto">
         <p class="rotulo">Sobre o nome</p>
         <h1 class="golden-historia-titulo">O nome é dele.</h1>
         <p>…</p>
         <p class="golden-assinatura">André</p>
       </div>
     </article> */
  .golden-historia {
    display: grid; gap: clamp(28px, 4vw, 56px);
    grid-template-columns: minmax(0, 1fr);
    align-items: start;
  }
  .golden-historia-retrato {
    position: relative; isolation: isolate;
    display: grid; gap: 14px; justify-items: center;
    inline-size: min(100%, 340px); justify-self: center;
  }
  /* a luz quente atrás dele: o caramelo do pelo, bem aberto */
  .golden-historia-retrato::before {
    content: ""; position: absolute; z-index: -1;
    inset: 2% -14% 8% -8%;
    border-radius: 50%;
    background: radial-gradient(closest-side,
      light-dark(rgb(201 138 69 / .30), rgb(201 138 69 / .20)) 0%,
      light-dark(rgb(201 138 69 / .12), rgb(201 138 69 / .07)) 55%,
      rgb(201 138 69 / 0) 100%);
  }
  /* a sombra fica num invólucro: no próprio <img> a máscara a cortaria
     na caixa da foto e desenharia um retângulo */
  .golden-historia-sombra {
    inline-size: 100%;
    filter: drop-shadow(0 22px 28px light-dark(rgb(60 36 12 / .16), rgb(0 0 0 / .45)))
            drop-shadow(0 2px 3px rgb(0 0 0 / .08));
  }
  .golden-historia-sombra picture { display: block; }
  .golden-historia-retrato img {
    display: block; inline-size: 100%; block-size: auto;
    -webkit-mask-image: linear-gradient(to bottom, #000 78%, transparent 99%),
                        linear-gradient(to left, transparent 0, #000 14%);
    mask-image: linear-gradient(to bottom, #000 78%, transparent 99%),
                linear-gradient(to left, transparent 0, #000 14%);
    -webkit-mask-composite: source-in; mask-composite: intersect;
  }
  .golden-historia-texto { display: grid; gap: 18px; max-inline-size: 34ch; }
  .golden-historia-titulo {
    font-family: var(--serif); font-optical-sizing: auto; font-weight: 370;
    font-size: var(--t-h2); line-height: 1.04; letter-spacing: -.02em;
    color: var(--tinta); text-wrap: balance;
  }
  .golden-historia-texto p:not(.rotulo) {
    font-size: var(--t-lede); line-height: 1.55; color: var(--tinta-2);
  }
  .golden-historia-texto .golden-assinatura {
    font-family: var(--serif); font-style: italic; font-weight: 360;
    color: var(--tinta-3);
  }
  .golden-historia-retrato figcaption {
    font-family: var(--mono); font-size: var(--t-rotulo); font-stretch: var(--mono-l);
    letter-spacing: .04em; color: var(--tinta-3);
  }
  @media (min-width: 820px) {
    .golden-historia {
      grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr);
      grid-template-areas: "retrato texto";
      column-gap: clamp(40px, 6vw, 96px);
      align-items: center;
    }
    .golden-historia-retrato { grid-area: retrato; inline-size: min(100%, 460px); }
    .golden-historia-texto { grid-area: texto; }
  }
}