/* Licence to Finish · cursor de luz projetada
   Um ponto de luz preciso e uma poça de luz quente que segue a mão com atraso curto e
   clareia o trecho que está sendo lido, sobre a noite polar da página. Só mouse; toque,
   impressão e teclado ficam com o comportamento nativo. O gradiente é fixo e a posição
   muda só por transform (camada composta, sem repintar a página). O pico da luz é
   limitado para o texto claro continuar em WCAG AA sob ela (ver tools/gate_007.py). */
.light-pool,.light-cursor,.light-pulse{position:fixed;left:0;top:0;pointer-events:none!important;user-select:none}

/* a poça: abaixo do índice aberto (z 10), acima do conteúdo e da faixa de leitura */
.light-pool{z-index:9;width:620px;height:620px;margin:-310px 0 0 -310px;opacity:0;transition:opacity .45s ease;mix-blend-mode:screen;
  background:radial-gradient(circle closest-side,#f6d1a817 0,#f6d1a812 22%,#e6b07c0a 52%,transparent 100%)}
.has-light-cursor .light-pool{opacity:1}

/* o ponto: núcleo dourado e um anel fino de gelo */
.light-cursor{z-index:100;width:0;height:0;visibility:hidden}
.has-light-cursor .light-cursor{visibility:visible}
.light-cursor::before{content:'';position:absolute;left:-3px;top:-3px;width:6px;height:6px;border-radius:50%;background:#f6d1a8;box-shadow:0 0 0 1px #0d1a2b40,0 0 10px 2px #e6b07ccc}
.light-cursor::after{content:'';position:absolute;left:-11px;top:-11px;width:22px;height:22px;border-radius:50%;border:1px solid #e9eef2b3;box-shadow:0 0 0 1px #0d1a2b33;transition:transform .18s ease,border-color .18s ease}
.light-cursor.is-link::after{transform:scale(1.55);border-color:#e6b07c}
.light-cursor.is-down::after{transform:scale(.7)}
.light-pulse{z-index:100;width:22px;height:22px;margin:-11px 0 0 -11px;border-radius:50%;border:1px solid #f6d1a8;animation:light-pulse .7s ease-out forwards}
@keyframes light-pulse{from{opacity:.9;transform:var(--at) scale(1)}to{opacity:0;transform:var(--at) scale(4.2)}}

/* sublinhado de luz: traço quente sob a linha lida, mais forte onde está o ponteiro. Mora no
   <main> (z 4, abaixo da faixa de leitura, z 5); só posição e largura mudam, o gradiente segue
   --x. Fica 3 px abaixo da descendente, então não cobre a letra */
.light-line{position:absolute;left:0;top:0;z-index:4;width:0;height:2px;margin-top:-1px;border-radius:2px;pointer-events:none!important;opacity:0;
  background:radial-gradient(150px 3px at var(--x,50%) 50%,#f6d1a8 0,#e6b07cb3 45%,#e6b07c00 100%),linear-gradient(90deg,#e6b07c00 0,#e6b07c4d 10%,#e6b07c4d 90%,#e6b07c00 100%);
  box-shadow:0 0 9px #e6b07c33;
  transition:opacity .2s ease,transform .16s cubic-bezier(.2,.7,.2,1),width .16s cubic-bezier(.2,.7,.2,1)}
.light-line::after{content:'';position:absolute;left:0;right:0;top:-7px;height:16px;background:radial-gradient(120px 8px at var(--x,50%) 50%,#f6d1a833,#f6d1a800 100%)}
.light-line.is-on{opacity:1}
.light-line.is-jump{transition:none}

@media(hover:hover) and (pointer:fine){html.has-light-cursor,html.has-light-cursor *{cursor:none!important}}
@media(prefers-reduced-motion:reduce){.light-pool,.light-cursor::after{transition:none}.light-pulse{display:none}}
@media print{.light-pool,.light-cursor,.light-pulse,.light-line{display:none!important}}