/* ==========================================================================
   LEGENDA DE CURSOR — bolha ancorada com ponteiro
   Prefixo: cur-
   Tokens usados: --accent --dark --light --sans --dur --ease
   ========================================================================== */

/* ---- a camada ----
   Cobre a seção e não intercepta nada. z-index 3 fica acima do .grain (1) e
   do corpo de uma dobra com mídia (2), que é a convenção do resto da casa. */
.cur-layer{position:absolute;inset:0;pointer-events:none;z-index:3}

/* ---- a nota ----
   Duas caixas, e a divisão importa:

     .cur-note  posiciona e desliza. O script só escreve --cur-x/--cur-y aqui.
     .cur-body  é o que ENTRA. É nela que vai o data-rv.

   Separar as duas não é preciosismo: [data-rv] declara `transition` para
   opacity, filter e transform, e o shorthand não se soma. Se o deslize
   morasse no mesmo elemento, o componente carregaria depois do core e
   apagaria a transição do reveal — a nota apareceria seca, contra o §5.

   E o deslize é em left/top, não em transform, porque a âncora é
   porcentagem DA CAMADA: translate em % lê a caixa do próprio elemento,
   não a do pai, então não serve. São dois elementos pequenos andando uma
   vez a cada 2,6s — o custo de não estar no compositor é teórico aqui, e a
   alternativa era calcular pixels no script para escrever um FLIP à mão. */
.cur-note{
  --cur-skin:var(--accent);
  --cur-ink:var(--light);
  --cur-radius:10px;
  --cur-max:212px;
  /* Quanto o ponteiro entra na bolha. Zero encosta a ponta no canto e lê
     como dois adesivos separados; a mordida costura os dois num objeto. */
  --cur-bite:8px;

  position:absolute;
  left:var(--cur-x,0%);
  top:var(--cur-y,0%);
  width:max-content;
  max-width:var(--cur-max);
  transition:left var(--dur) var(--ease),top var(--dur) var(--ease);
}
@media(prefers-reduced-motion:reduce){
  .cur-note{transition:none}
}

.cur-body{position:relative;display:block}

/* ---- a bolha ---- */
.cur-bubble{
  display:block;
  background:var(--cur-skin);
  color:var(--cur-ink);
  font-family:var(--sans);
  font-weight:600;
  font-size:12px;
  line-height:1.35;
  letter-spacing:.005em;
  padding:9px 12px;
  border-radius:var(--cur-radius);
}

/* ---- o ponteiro ----
   Desenho próprio, não um glifo de fonte: cursor de sistema não existe como
   caractere confiável e um ícone de biblioteca traria licença atrás.
   Nasce apontando para cima e à esquerda; cada canto o gira. */
.cur-tip{
  position:absolute;
  width:22px;height:26px;
  color:var(--cur-skin);
}
.cur-tip svg{display:block;width:100%;height:100%}

/* ---- os quatro cantos ----
   O canto QUADRADO da bolha é onde o ponteiro encosta. É a regra inteira:
   quem lê o markup descobre a direção pelo modificador, sem contar pixel. */
.cur-note-tl .cur-bubble{border-top-left-radius:0}
.cur-note-tl .cur-tip{
  left:0;top:0;
  transform:translate(calc(-100% + var(--cur-bite)),calc(-100% + var(--cur-bite)));
}

.cur-note-tr .cur-bubble{border-top-right-radius:0}
.cur-note-tr .cur-tip{
  right:0;top:0;
  transform:translate(calc(100% - var(--cur-bite)),calc(-100% + var(--cur-bite))) rotate(90deg);
}

.cur-note-br .cur-bubble{border-bottom-right-radius:0}
.cur-note-br .cur-tip{
  right:0;bottom:0;
  transform:translate(calc(100% - var(--cur-bite)),calc(100% - var(--cur-bite))) rotate(180deg);
}

.cur-note-bl .cur-bubble{border-bottom-left-radius:0}
.cur-note-bl .cur-tip{
  left:0;bottom:0;
  transform:translate(calc(-100% + var(--cur-bite)),calc(100% - var(--cur-bite))) rotate(270deg);
}

/* ---- variação de tom ----
   A segunda nota da página precisa se distinguir da primeira sem sair da
   marca. Escurecer o próprio --accent contra o --dark mantém as duas na
   mesma família — dois roxos, não roxo e azul. */
.cur-note-deep{--cur-skin:color-mix(in srgb,var(--accent) 62%,var(--dark))}

/* ---- variação de porte ----
   Bolha de canto de tela, em dobra cheia, onde 12px desaparece. */
.cur-note-lg{--cur-max:260px;--cur-radius:12px}
.cur-note-lg .cur-bubble{font-size:13px;padding:11px 14px}
.cur-note-lg .cur-tip{width:26px;height:31px}

/* ==========================================================================
   MOBILE
   A nota vive de espaço vazio, e espaço vazio é a primeira coisa que uma
   dobra perde ao estreitar. Por isso há dois recuos, nesta ordem:

     900px  encolhe. Ainda cabe, mais apertada.
     640px  desaparece. Numa tela de 375px não existe posição em que a bolha
            não cubra texto — medido, e não há --cur-max que resolva.
            Desistir é a resposta certa: a nota é anotação, não conteúdo.

   Dobra que colapsa para uma coluna ANTES de 640px (o caso do
   hero/duas-colunas-produto, que vira coluna única em 980px) usa o
   .cur-layer-desktop abaixo. Quem quiser a nota no celular de qualquer
   forma sobrescreve display no tema — mas olhe no aparelho antes.
   ========================================================================== */
@media(max-width:980px){
  .cur-layer-desktop{display:none}
}

@media(max-width:900px){
  .cur-note{--cur-max:170px;--cur-bite:6px}
  .cur-bubble{font-size:11px;padding:7px 10px}
  .cur-tip{width:18px;height:21px}
}

@media(max-width:640px){
  .cur-layer{display:none}
}