/* Registered so the spotlight can glide after the pointer instead of jumping. */
@property --spot-x {
  syntax: "<length-percentage>";
  inherits: true;
  initial-value: 80%;
}

@property --spot-y {
  syntax: "<length-percentage>";
  inherits: true;
  initial-value: 40%;
}

/* Decorative layers behind a section (which needs position and isolation):
   a faint dot grid, the same grid lit yellow around the spotlight and, in
   the hero, a line-drawn lamp echoing the bulb in the logo. */
.stage {
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
}

/* Whatever carries [data-spotlight] holds --spot-x/--spot-y (moved by the
   pointer in JS) and themes the dots; the defaults suit dark sections. */
[data-spotlight] {
  transition: --spot-x 700ms var(--ease-out), --spot-y 700ms var(--ease-out);
}

/* "follow" stages have no resting place: the light is only on while the
   pointer is over the section (or after a tap). */
[data-spotlight="follow"] .stage-spot {
  opacity: 0;
  transition: opacity 400ms ease;
}

[data-spotlight="follow"].is-lit .stage-spot {
  opacity: 1;
}

.stage-grid,
.stage-spot {
  position: absolute;
  inset: 0;
  background-position: center;
  background-size: 26px 26px;
}

.stage-grid {
  background-image: radial-gradient(circle, var(--stage-dot, rgb(255 255 255 / 10%)) 1.2px, transparent 1.7px);
  -webkit-mask-image: radial-gradient(ellipse 85% 75% at 50% 45%, #000 25%, transparent 90%);
  mask-image: radial-gradient(ellipse 85% 75% at 50% 45%, #000 25%, transparent 90%);
}

/* A light section's stage (as in About): dark dots on paper and an amber
   spotlight. Put on the section, around its .stage. */
.stage-light {
  --stage-dot: rgb(35 39 38 / 16%);
  --stage-spot-dot: #e8b400;
  --stage-spot-size: 1.8px;
  --stage-wash: rgb(252 204 12 / 24%);
}

.stage-spot {
  --spot-dot-size: var(--stage-spot-size, 1.2px);
  background-image:
    radial-gradient(circle, var(--stage-spot-dot, rgb(252 204 12 / 80%)) var(--spot-dot-size), transparent calc(var(--spot-dot-size) + .5px)),
    radial-gradient(circle 280px at var(--spot-x, 80%) var(--spot-y, 40%), var(--stage-wash, rgb(252 204 12 / 12%)), transparent);
  background-position: center, 0 0;
  background-size: 26px 26px, auto;
  -webkit-mask-image: radial-gradient(circle 280px at var(--spot-x, 80%) var(--spot-y, 40%), #000, rgb(0 0 0 / 30%) 45%, transparent);
  mask-image: radial-gradient(circle 280px at var(--spot-x, 80%) var(--spot-y, 40%), #000, rgb(0 0 0 / 30%) 45%, transparent);
}

.cta {
  display: inline-flex;
  min-height: 56px;
  align-items: center;
  justify-content: center;
  gap: 12px;
  padding: 0 22px;
  border: 2px solid rgb(255 255 255 / 35%);
  color: var(--paper);
  font-family: var(--font-display);
  font-size: 1.45rem;
  font-weight: 700;
  line-height: 1;
  text-transform: uppercase;
  transition: background-color 180ms ease, border-color 180ms ease, color 180ms ease;
}

.cta:hover {
  border-color: var(--paper);
  background: var(--paper);
  color: var(--primary);
}

.cta--primary {
  border-color: var(--yellow);
  background: var(--yellow);
  color: var(--primary);
}

.cta svg {
  width: 20px;
  height: 20px;
  transition: translate 220ms var(--ease-out);
}

.cta:hover svg {
  translate: 4px 0;
}

/* Scroll reveals: "fade" rises in, "left"/"right" slide in from that side,
   "stagger" rises its children in turn (index set in JS), "words" lifts
   each word out of a mask. */
[data-reveal="fade"],
[data-reveal="left"],
[data-reveal="right"] {
  opacity: 0;
  transform: translateY(36px);
}

[data-reveal="left"] {
  transform: translateX(-56px);
}

[data-reveal="right"] {
  transform: translateX(56px);
}

:is([data-reveal="fade"], [data-reveal="left"], [data-reveal="right"]).is-visible {
  opacity: 1;
  transform: none;
  transition: opacity 900ms ease, transform 1100ms var(--ease-out);
}

[data-reveal="stagger"] > * {
  opacity: 0;
  transform: translateY(32px) rotate(var(--tilt, 0deg));
}

[data-reveal="stagger"].is-visible > * {
  opacity: 1;
  transform: none;
  transition:
    opacity 800ms ease calc(var(--i, 0) * 120ms),
    transform 1100ms var(--ease-out) calc(var(--i, 0) * 120ms),
    border-color 200ms ease,
    background-color 200ms ease;
}

.reveal-word {
  display: inline-block;
  overflow: hidden;
  margin-bottom: -.08em;
  padding-bottom: .08em;
  vertical-align: top;
}

.reveal-word > span {
  display: inline-block;
  transform: translateY(110%) rotate(6deg);
  transform-origin: left bottom;
}

[data-reveal="words"].is-visible .reveal-word > span {
  transform: none;
  transition: transform 1000ms var(--ease-out) calc(var(--word, 0) * 45ms);
}

@media (max-width: 680px) {
  .cta {
    flex: 1 1 auto;
    min-height: 52px;
    font-size: 1.3rem;
  }
}