/* ============================================================
   1877 Lab — sun.css
   O Sol: guia persistente da jornada de scroll
   ============================================================ */

#sun {
  position: fixed;
  top: 0;
  left: 0;
  width: var(--sun-size);
  aspect-ratio: 1;
  z-index: 1;
  pointer-events: none;
  will-change: transform;
  /* container transparente — o disco e a corona vivem nos pseudos,
     pra ler como LUZ (não um adesivo laranja chapado) */
  background: none;
}
/* Corona atmosférica: a luz que o sol derrama no céu ao redor.
   Extrapola o disco e funde na cena — é o que faz parecer astro, não sticker. */
#sun::before {
  content: '';
  position: absolute;
  left: 50%;
  top: 50%;
  width: 270%;
  height: 270%;
  transform: translate(-50%, -50%);
  border-radius: 50%;
  background: radial-gradient(circle,
    color-mix(in srgb, var(--sun-color) 52%, transparent) 0%,
    color-mix(in srgb, var(--sun-color) 30%, transparent) 22%,
    color-mix(in srgb, var(--sun-color) 12%, transparent) 44%,
    color-mix(in srgb, var(--sun-color) 3%, transparent) 62%,
    transparent 74%);
  filter: blur(4px);
}
/* O disco: luminosidade CONTÍNUA do núcleo branco-quente à borda profunda
   (limb darkening) — sem faixa chapada. Bloom próprio via box-shadow. */
#sun::after {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: 50%;
  background: radial-gradient(circle at 50% 45%,
    #fff6ea 0%,
    #ffdca6 13%,
    color-mix(in srgb, var(--sun-color) 68%, #ffb96a) 30%,
    var(--sun-color) 54%,
    color-mix(in srgb, var(--sun-color) 82%, #521f00) 83%,
    color-mix(in srgb, var(--sun-color) 34%, transparent) 100%);
  box-shadow:
    0 0 46px color-mix(in srgb, var(--sun-color) 34%, transparent),
    0 0 120px color-mix(in srgb, var(--sun-color) 20%, transparent);
  transition: box-shadow 0.8s ease;
}

/* Sem JS: sol estático e poético no canto superior direito */
html:not(.js) #sun {
  top: 12%;
  left: auto;
  right: 8%;
  transform: none;
}

/* Páginas internas (sem a jornada de scroll): o sol fica fixo, alto à direita,
   e só troca de cor por seção. Mantém a assinatura da marca em todo o site. */
body:not(.page-home) #sun {
  top: 15vh;
  left: auto;
  right: 4vw;
  transform: scale(0.16);
  transform-origin: 100% 0;
}

/* Movimento reduzido: mesma posição estática; cor ainda acompanha a seção */
@media (prefers-reduced-motion: reduce) {
  #sun {
    top: 12% !important;
    left: auto !important;
    right: 8% !important;
    transform: none !important;
  }
  html { scroll-behavior: auto; }
}