.hero,
.brand,
.signup,
.intro,
.eyebrow,
.note,
footer,
h1 em {
  transition: color 1.35s ease, text-shadow 1.35s ease, border-color 1.35s ease, background-color 1.35s ease;
}

.shade {
  transition: opacity 1.35s ease;
}

.warm-shade {
  position: absolute;
  inset: 0;
  z-index: -1;
  opacity: 0;
  background:
    radial-gradient(ellipse 58% 60% at 50% 45%, rgba(243,239,229,.70) 0%, rgba(243,239,229,.82) 52%, rgba(232,224,207,.95) 100%),
    linear-gradient(180deg, rgba(243,239,229,.18) 0%, rgba(243,239,229,.04) 48%, rgba(23,60,42,.10) 100%);
  transition: opacity 1.35s ease;
}

.cursor-glow {
  position: fixed;
  top: 0;
  left: 0;
  z-index: 0;
  width: clamp(300px, 34vw, 520px);
  aspect-ratio: 1;
  border-radius: 50%;
  pointer-events: none;
  transform: translate3d(calc(50vw - 50%), calc(50vh - 50%), 0);
  will-change: transform;
}

.cursor-glow::before,
.cursor-glow::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  transition: opacity 1.35s ease;
}

.cursor-glow::before {
  opacity: 1;
  background: radial-gradient(circle, rgba(255,253,247,.20) 0%, rgba(255,253,247,.09) 34%, rgba(255,253,247,0) 70%);
}

.cursor-glow::after {
  opacity: 0;
  background: radial-gradient(circle, rgba(23,60,42,.18) 0%, rgba(23,60,42,.075) 34%, rgba(23,60,42,0) 70%);
}

.hero.light-theme {
  color: #173c2a;
}

.hero.light-theme .shade {
  opacity: 0;
}

.hero.light-theme .warm-shade {
  opacity: 1;
}

.hero.light-theme .cursor-glow::before {
  opacity: 0;
}

.hero.light-theme .cursor-glow::after {
  opacity: 1;
}

.hero.light-theme .signup {
  text-shadow: none;
}

.hero.light-theme h1 em {
  color: #173c2a;
}

.hero.light-theme .intro {
  color: rgba(23,60,42,.76);
}

.hero.light-theme .eyebrow {
  color: #173c2a;
  background: rgba(255,253,247,.82);
  border-color: rgba(23,60,42,.24);
  box-shadow: 0 8px 30px rgba(23,60,42,.08);
}

.hero.light-theme .note {
  color: rgba(23,60,42,.82);
  font-weight: 700;
}

.hero.light-theme footer {
  color: rgba(23,60,42,.84);
  text-shadow: none;
}

.hero.light-theme footer i {
  background: #173c2a;
}

@media (prefers-reduced-motion: reduce) {
  .hero,
  .brand,
  .signup,
  .intro,
  .eyebrow,
  .note,
  footer,
  h1 em,
  .shade,
  .warm-shade {
    transition: none;
  }
}

@media (hover: none), (pointer: coarse) {
  .cursor-glow { display: none; }
}