/* =========================================================
   PSICOTERAPIA E POPULAÇÃO LGBTQIAPN+ · "O Toque" (#lgbtqiapn)
   Releitura de A Criação de Adão: duas mãos quase se tocam em volta do
   título; no toque, uma borda de luz LGBT se desenha e vira a página do texto.
   Coreografia em js/modules/lgbt.js. Protótipo aprovado e guia em
   docs/lgbt-original/ e docs/LGBT-original.md (o comportamento do protótipo vence).

   Integração:
   - classes e ids com prefixo lgbt- (os do protótipo eram genéricos: .stage,
     .title, #glow, #line-grad… e colidiriam com o resto do site);
   - botões = componente .cta do site (o guia pede reaproveitar o "Agende sua
     sessão"); "Voltar" = variante espelhada .cta--back;
   - tokens do site: creme #F4F1EA (--c-cream-soft), verdes da página;
   - sem os resets globais do protótipo; fallback sem JavaScript no fim.
   ========================================================= */
@layer sections {
  .lgbt {
    /* tokens da seção (valores aprovados; só onde o site não tem equivalente) */
    --lgbt-text-1: #E3DECF;       /* parágrafo lead */
    --lgbt-text-2: #C9C7B6;       /* demais parágrafos */
    --lgbt-gold-1: #D2AD69;
    --lgbt-gold-3: #A9874B;
    --lgbt-gold-grad: linear-gradient(180deg, #D8B470 0%, #D2AD69 22%, #C09B58 40%, #A9874B 56%, #7E6E43 70%, rgba(70, 82, 56, .8) 80%, rgba(40, 62, 46, .4) 100%);
    --lgbt-ease: cubic-bezier(.2, .75, .2, 1);
    --lgbt-noise: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='240'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.8' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");

    position: relative;
    color: var(--c-cream-soft);
    font-family: var(--ff-garamond);
    line-height: normal;          /* o protótipo foi desenhado sem a entrelinha 1.65 do body */
    /* seção de tela cheia: a âncora alinha no topo, sob o navbar translúcido */
    scroll-margin-top: calc(-1 * (var(--nav-h) + var(--space-md)));
  }

  /* ---------- Palco ---------- */
  .lgbt-stage { position: relative; height: 100vh; height: 100svh; min-height: 600px; overflow: hidden; isolation: isolate; background: var(--c-green-deep); }
  .lgbt-stage.is-open { height: auto; min-height: 100vh; min-height: 100svh; }
  .lgbt-scene { position: absolute; inset: 0; background: radial-gradient(120% 90% at 50% 40%, #2C4B3A 0%, var(--c-green-deep) 50%, var(--c-green-night) 100%); }
  .lgbt-scene::before { content: ""; position: absolute; inset: 0; background-image: var(--lgbt-noise); opacity: .09; mix-blend-mode: overlay; }

  /* página inclinada: linhas finas LGBT com brilho branco, miolo verde e laterais creme */
  .lgbt-panel { position: absolute; left: 0; top: 0; z-index: 1; width: 100%; height: 100%; max-width: none; pointer-events: none; overflow: visible; }
  .lgbt-panel .lgbt-ln { fill: none; stroke-linecap: round; stroke-linejoin: round; }
  .lgbt-panel .lgbt-glow .lgbt-ln { stroke: #FFF4E0; stroke-width: 4.2; }              /* parte externa: o branco do site */
  .lgbt-panel .lgbt-crisp .lgbt-ln { stroke: url(#lgbt-line-grad); stroke-width: 1.9; } /* linha fina: cores LGBT */

  /* ---------- Mãos ---------- */
  .lgbt-hand { position: absolute; left: 0; top: 0; z-index: 2; pointer-events: none; will-change: transform, opacity, filter; }
  .lgbt-hand__float { animation: lgbt-float-a 7.5s ease-in-out infinite; }
  .lgbt-hand--2 .lgbt-hand__float { animation-name: lgbt-float-b; animation-delay: -2.2s; }
  @keyframes lgbt-float-a { 0%, 100% { transform: translateX(0); } 50% { transform: translateX(calc(var(--amp, 7px) * -1)); } }
  @keyframes lgbt-float-b { 0%, 100% { transform: translateX(0); } 50% { transform: translateX(var(--amp, 7px)); } }
  .lgbt-hand img { display: block; width: 100%; height: auto; max-width: none;
    filter: drop-shadow(0 26px 34px rgba(4, 14, 9, .5)) drop-shadow(0 4px 8px rgba(4, 14, 9, .25)); }

  /* ---------- Monograma (só celular): começa creme e ganha as cores no toque ---------- */
  .lgbt-logo { position: absolute; left: 0; top: 0; z-index: 3; display: none; max-width: none; pointer-events: none; overflow: visible;
    filter: drop-shadow(0 0 8px rgba(255, 240, 210, .22)); transition: filter 1s var(--lgbt-ease); }
  .lgbt-logo.lit { filter: drop-shadow(0 0 16px rgba(255, 214, 170, .7)) drop-shadow(0 0 34px rgba(160, 140, 255, .35)) brightness(1.12); }
  .lgbt-logo-halo { position: absolute; z-index: 1; display: none; width: 190px; height: 190px; margin: -95px 0 0 -95px; border-radius: 50%; pointer-events: none;
    background: radial-gradient(closest-side, rgba(236, 214, 160, .2), rgba(236, 214, 160, 0)); animation: lgbt-breathe 4.5s ease-in-out infinite; }

  /* ---------- Título + texto ---------- */
  .lgbt-content { position: absolute; left: 0; right: 0; top: var(--ty, 40%); z-index: 3; display: flex; flex-direction: column; align-items: center; padding: 0 16px; }
  .lgbt-stage.is-open .lgbt-content { position: relative; top: auto; padding: clamp(72px, 13vh, 136px) 24px clamp(72px, 11vh, 120px); }

  .lgbt-title { --gs: clamp(48px, 5.3vw, 104px); position: relative; display: flex; flex-direction: column; align-items: center; text-align: center; will-change: transform; }
  .lgbt-title::before { content: ""; position: absolute; left: 50%; top: 50%; z-index: -1; width: 140%; height: 340%; transform: translate(-50%, -50%); pointer-events: none;
    background: radial-gradient(closest-side, rgba(214, 190, 130, .13), rgba(214, 190, 130, 0)); animation: lgbt-breathe 7s ease-in-out infinite; }
  @keyframes lgbt-breathe { 0%, 100% { opacity: .7; } 50% { opacity: 1; } }
  .lgbt-gold { display: block; font-family: var(--ff-garamond); font-weight: 500; font-size: var(--gs); line-height: 1; letter-spacing: .06em; text-transform: uppercase; white-space: nowrap; padding-left: .06em;
    color: transparent; -webkit-text-fill-color: transparent;
    background-image: linear-gradient(100deg, rgba(255, 246, 222, 0) 40%, rgba(255, 246, 222, .95) 50%, rgba(255, 246, 222, 0) 60%), var(--lgbt-gold-grad);
    background-size: 300% 100%, 100% 100%; background-position: 100% 0, 0 0; background-repeat: no-repeat;
    -webkit-background-clip: text; background-clip: text; }
  .lgbt-gold.glint { animation: lgbt-glint 1.5s cubic-bezier(.45, 0, .25, 1); }
  @keyframes lgbt-glint { from { background-position: 100% 0, 0 0; } to { background-position: 0% 0, 0 0; } }
  .lgbt-sub { display: block; position: relative; margin-top: calc(var(--gs) * -.21); font-family: var(--ff-garamond); font-weight: 500; font-size: calc(var(--gs) * .3); line-height: 1.1;
    letter-spacing: .08em; text-transform: uppercase; white-space: nowrap; padding-left: .08em; color: var(--c-cream-soft); text-shadow: 0 2px 14px rgba(12, 26, 19, .75); }

  .lgbt-text { display: none; width: min(640px, 100%); margin-top: clamp(40px, 7vh, 76px); text-align: left; }
  .lgbt-text:focus { outline: none; }          /* recebe foco por script ao abrir */
  .lgbt-stage.is-open .lgbt-text { display: block; }
  .lgbt-lead { font-size: clamp(20px, 1.7vw, 25px); font-weight: 500; line-height: 1.5; color: var(--lgbt-text-1); }
  .lgbt-body { margin-top: 1.4em; font-size: clamp(17px, 1.36vw, 20px); font-weight: 500; line-height: 1.72; color: var(--lgbt-text-2); }
  .lgbt-lead + .lgbt-body { margin-top: 1.5em; }
  .lgbt-closing { display: flex; flex-direction: column; align-items: center; margin-top: clamp(40px, 6vh, 64px); text-align: center; }
  .lgbt-closing i { display: block; width: 46px; height: 1px; background: linear-gradient(90deg, var(--lgbt-gold-3), var(--lgbt-gold-1), var(--lgbt-gold-3)); }
  .lgbt-closing p { margin-top: 24px; max-width: 22em; font-style: italic; font-weight: 400; font-size: clamp(22px, 2vw, 29px); line-height: 1.35; color: var(--c-cream-soft); }
  .lgbt-rv { opacity: 0; transform: translateY(18px); transition: opacity .9s var(--lgbt-ease), transform 1s var(--lgbt-ease); }
  .lgbt-stage.is-in .lgbt-rv { opacity: 1; transform: none; transition-delay: calc(var(--d, 0) * 110ms); }
  .lgbt-closing i { transform: scaleX(0); transition: transform .9s var(--lgbt-ease); }
  .lgbt-stage.is-in .lgbt-closing i { transform: scaleX(1); transition-delay: .7s; }

  .lgbt-spark { position: absolute; z-index: 5; width: 16px; height: 16px; margin: -8px 0 0 -8px; border-radius: 50%; pointer-events: none; opacity: 0;
    background: radial-gradient(closest-side, #FFFBEF, rgba(240, 214, 160, .6) 45%, rgba(240, 214, 160, 0)); }
  .lgbt-spark.go { animation: lgbt-spark 1.1s cubic-bezier(.2, .7, .2, 1) forwards; }
  @keyframes lgbt-spark { 0% { opacity: 0; transform: scale(.2); } 18% { opacity: 1; transform: scale(1.4); } 100% { opacity: 0; transform: scale(9); } }

  /* ---------- Botões (componente .cta do site) ---------- */
  .lgbt-cta { position: absolute; left: 50%; bottom: clamp(26px, 6vh, 60px); z-index: 6; transform: translateX(-50%);
    transition: opacity .5s var(--lgbt-ease), transform .5s var(--lgbt-ease); }
  .lgbt-cta.off { opacity: 0; pointer-events: none; transform: translateX(-50%) translateY(10px); }
  .lgbt-back-wrap { display: flex; justify-content: center; margin-top: clamp(40px, 6vh, 64px); }

  /* ---------- Celular (largura < 760px, mesmo corte do JS) ---------- */
  @media (max-width: 759.98px) {
    .lgbt-title { --gs: min(11.6vw, 52px); }
    .lgbt-gold { letter-spacing: .035em; padding-left: .035em; }
    .lgbt-sub { font-size: calc(var(--gs) * .33); letter-spacing: .07em; margin-top: calc(var(--gs) * -.17); }
    .lgbt-hand { --amp: 2px; }
    .lgbt-logo, .lgbt-logo-halo { display: block; }
    .lgbt-stage.is-open .lgbt-content { padding: 92px 34px 84px; }
    .lgbt-lead { font-size: 20px; }
    .lgbt-body { font-size: 17.5px; line-height: 1.66; }
  }
  @media (prefers-reduced-motion: reduce) {
    .lgbt-hand__float, .lgbt-title::before, .lgbt-logo-halo { animation: none; }
  }

  /* ---------- Sem JavaScript: sem mãos nem animação; título e texto direto ---------- */
  html:not(.js) .lgbt-stage { height: auto; }
  html:not(.js) .lgbt-hand, html:not(.js) .lgbt-logo, html:not(.js) .lgbt-logo-halo,
  html:not(.js) .lgbt-cta, html:not(.js) .lgbt-back-wrap, html:not(.js) .lgbt-panel { display: none; }
  html:not(.js) .lgbt-content { position: relative; top: auto; padding: clamp(72px, 13vh, 136px) 24px clamp(72px, 11vh, 120px); }
  html:not(.js) .lgbt-text { display: block; }
  html:not(.js) .lgbt-rv { opacity: 1; transform: none; }
  html:not(.js) .lgbt-closing i { transform: none; }
}