/* ============================================================
   BRAND — brand.css
   Requires tokens.css.

   The animated wordmark, in one place. Loaded by the homepage
   and every case study — it was previously duplicated inline in
   index.html and again in case-study-template.css, which meant
   retuning the glow was a two-file job.

   Markup:
     <p class="wordmark"><span class="wordmark-text">Ray Mosley</span></p>

   .wordmark          positions and sets the type
   .wordmark-text     carries the gradient and the animation
   ============================================================ */

.wordmark {
  position: relative;
  z-index: 1;
  text-align: center;
  padding: clamp(2rem, 4vw, 3rem) clamp(1.5rem, 5vw, 3rem) 0;
  font-family: var(--font-body);
  font-weight: 700;
  font-size: clamp(.85rem, 1.2vw, 1rem);
  letter-spacing: 0.9px;
  text-transform: uppercase;
}

.wordmark-text {
  display: inline-block;
  /* Cream base; radial gradient floats over it.
     Where the gradient is transparent, cream shows. */
  background-color: var(--cream);
  background-image: radial-gradient(
    ellipse 45% 45% at 50% 50%,
    #F2CE4D  0%,
    #E84010 35%,
    rgba(232,64,16,0.2) 70%,
    transparent 100%
  );
  background-size: 200% 500%;
  background-repeat: no-repeat;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  /* Orbital path: the glow wanders off-right, top-left,
     bottom-right, below, above — so it arrives from all angles */
  animation: glow-wander 22s ease-in-out infinite;
}

@keyframes glow-wander {
  0%   { background-position:  -50%  50%; }  /* off right          */
  16%  { background-position:   50%  50%; }  /* centered           */
  30%  { background-position:  140% 130%; }  /* off top-left       */
  34%  { background-position:  -40% -20%; }  /* off bottom-right   */
  50%  { background-position:   50%  50%; }  /* centered           */
  64%  { background-position:   50% 140%; }  /* off above          */
  68%  { background-position:   50% -40%; }  /* off below          */
  83%  { background-position:   50%  50%; }  /* centered           */
  95%  { background-position:  140%  50%; }  /* off left           */
  100% { background-position:  -50%  50%; }  /* off right (loop)   */
}

@media (prefers-reduced-motion: reduce) {
  .wordmark-text { animation: none; }
}