/* ============================================================
   VP ENERGY — ANIMATED LOGO
   The gold rays rotate; the ring and lightning bolt stay upright.
   Drop this in after your main stylesheet.

   Markup:
     <a class="vplogo" href="/" aria-label="VP Energy, powered by Sunrun">
       <span class="vplogo__sun">
         <img class="vplogo__rays" src="assets/img/sun-rays.png" alt="">
         <img class="vplogo__core" src="assets/img/sun-core.png" alt="">
       </span>
       <img class="vplogo__word" src="assets/img/wordmark.png" alt="">
     </a>

   Size it with one property:   .vplogo{ --logo-h: 54px; }
   Choose a behaviour with a data attribute on the element:
     data-spin="settle"  DEFAULT — winds in once, then rests. Spins on hover.
     data-spin="hover"   never moves on its own; turns only under the cursor
     data-spin="working" fast — use for loading states, then switch back
     data-spin="drift"   continuous slow rotation (available, not recommended)
     data-spin="enter"   winds in, then drifts continuously
     data-spin="off"     completely static

   Pulse (optional, separate axis — combines with any spin value):
     data-pulse="breathe" | "halo" | "flare" | "heartbeat"   looping
     .is-pulse class                                          one shot, added from JS
   Add data-glow="on" for a slow gold breathing halo.
   ============================================================ */

.vplogo{
  display:inline-flex;
  align-items:center;
  gap:calc(var(--logo-h,54px) * 0.20);
  text-decoration:none;
  line-height:0;
  --logo-h:54px;
}

.vplogo__sun{
  position:relative;
  display:block;
  width:var(--logo-h);
  height:var(--logo-h);
  flex:0 0 auto;
}

.vplogo__rays,
.vplogo__core{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  display:block;
}

/* the rays are the only layer that ever turns */
.vplogo__rays{
  transform-origin:50% 50%;
  will-change:transform;
  /* Nothing turns at rest. Motion is a response, not a background loop. */
}

.vplogo__core{ pointer-events:none; }

.vplogo__word{
  display:block;
  height:calc(var(--logo-h) * 0.62);
  width:auto;
}

@keyframes vp-spin{ to{ transform:rotate(360deg); } }

/* ---------- behaviours ---------- */

/* SETTLE — the default. Winds in once on load, then stops completely.
   Turns again only under the cursor. Nothing moves while the visitor reads. */
.vplogo[data-spin="settle"] .vplogo__rays{
  animation:vp-wind-in 1.15s cubic-bezier(.16,.84,.28,1) both;
}
.vplogo[data-spin="settle"] .vplogo__core{
  animation:vp-core-in .8s cubic-bezier(.16,.84,.28,1) both .12s;
}
.vplogo[data-spin="settle"] .vplogo__word{
  animation:vp-word-in .8s cubic-bezier(.16,.84,.28,1) both .3s;
}
.vplogo[data-spin="settle"]:hover .vplogo__rays{
  animation:vp-spin 3.2s linear infinite;
}

.vplogo[data-spin="off"] .vplogo__rays{ animation:none; }

.vplogo[data-spin="hover"] .vplogo__rays{ animation:none; transition:transform .6s ease; }
.vplogo[data-spin="hover"]:hover .vplogo__rays{ animation:vp-spin 3.2s linear infinite; }

/* the useful one: a loading state that is still the brand */
.vplogo[data-spin="working"] .vplogo__rays{ animation:vp-spin 1.15s linear infinite; }

/* drift — continuous idle rotation. Available, but not the default:
   a permanently moving mark competes with the content for attention. */
.vplogo[data-spin="drift"] .vplogo__rays{ animation:vp-spin 48s linear infinite; }
.vplogo[data-spin="drift"]:hover .vplogo__rays,
.vplogo[data-spin="enter"]:hover .vplogo__rays{ animation-duration:6s; }

/* entrance: rays wind in, wordmark slides out from behind the sun */
.vplogo[data-spin="enter"] .vplogo__rays{
  animation:vp-wind-in 1.15s cubic-bezier(.16,.84,.28,1) both,
            vp-spin 48s linear infinite 1.15s;
}
.vplogo[data-spin="enter"] .vplogo__core{
  animation:vp-core-in .8s cubic-bezier(.16,.84,.28,1) both .12s;
}
.vplogo[data-spin="enter"] .vplogo__word{
  animation:vp-word-in .8s cubic-bezier(.16,.84,.28,1) both .3s;
}

@keyframes vp-wind-in{
  from{ transform:rotate(-200deg) scale(.55); opacity:0; }
  to  { transform:rotate(0deg)    scale(1);   opacity:1; }
}
@keyframes vp-core-in{
  from{ transform:scale(.4); opacity:0; }
  to  { transform:scale(1);  opacity:1; }
}
@keyframes vp-word-in{
  from{ transform:translateX(-14px); opacity:0; }
  to  { transform:translateX(0);     opacity:1; }
}

/* optional halo — use sparingly, it draws a lot of attention */
.vplogo[data-glow="on"] .vplogo__sun{
  animation:vp-glow 4.5s ease-in-out infinite;
  border-radius:50%;
}
@keyframes vp-glow{
  0%,100%{ filter:drop-shadow(0 0 0 rgba(244,191,10,0)); }
  50%    { filter:drop-shadow(0 0 12px rgba(244,191,10,.45)); }
}


/* ============================================================
   PULSE
   Two ways to use these. Looping (data-pulse) keeps going forever,
   which costs the same attention that continuous spin does — see the
   note at the bottom. One-shot (.is-pulse, added from JS) fires once
   to mark a moment, then the logo goes quiet again. Prefer the latter.
   ============================================================ */

/* --- looping variants: set data-pulse on the .vplogo element --- */
.vplogo[data-pulse="breathe"]   .vplogo__sun{ animation:vp-breathe 3.4s ease-in-out infinite; }
.vplogo[data-pulse="halo"]      .vplogo__sun{ animation:vp-halo 3.4s ease-in-out infinite; }
.vplogo[data-pulse="flare"]     .vplogo__rays{ animation:vp-flare 2.8s ease-in-out infinite; }
.vplogo[data-pulse="heartbeat"] .vplogo__sun{ animation:vp-heartbeat 2.4s ease-in-out infinite; }

/* legacy alias */
.vplogo[data-glow="on"] .vplogo__sun{ animation:vp-halo 4.5s ease-in-out infinite; }

/* --- one-shot: add the class, remove it when the animation ends --- */
.vplogo.is-pulse .vplogo__sun{ animation:vp-pulse-once 1.05s cubic-bezier(.22,.9,.3,1) 1; }

@keyframes vp-breathe{
  0%,100%{ transform:scale(1); }
  50%    { transform:scale(1.07); }
}
@keyframes vp-halo{
  0%,100%{ filter:drop-shadow(0 0 0 rgba(244,191,10,0)); }
  50%    { filter:drop-shadow(0 0 14px rgba(244,191,10,.5)); }
}
@keyframes vp-flare{
  0%,100%{ filter:brightness(1); }
  50%    { filter:brightness(1.55); }
}
@keyframes vp-heartbeat{
  0%   { transform:scale(1);     filter:drop-shadow(0 0 0 rgba(244,191,10,0)); }
  8%   { transform:scale(1.085); filter:drop-shadow(0 0 10px rgba(244,191,10,.42)); }
  17%  { transform:scale(1); }
  25%  { transform:scale(1.06);  filter:drop-shadow(0 0 8px rgba(244,191,10,.32)); }
  36%  { transform:scale(1);     filter:drop-shadow(0 0 0 rgba(244,191,10,0)); }
  100% { transform:scale(1); }
}
@keyframes vp-pulse-once{
  0%  { transform:scale(1);    filter:drop-shadow(0 0 0 rgba(244,191,10,0)); }
  28% { transform:scale(1.12); filter:drop-shadow(0 0 16px rgba(244,191,10,.55)); }
  100%{ transform:scale(1);    filter:drop-shadow(0 0 0 rgba(244,191,10,0)); }
}

/* ---------- accessibility ---------- */
/* Anyone who has asked their system to reduce motion gets a static logo. */
@media (prefers-reduced-motion:reduce){
  .vplogo__rays,
  .vplogo__core,
  .vplogo__word,
  .vplogo__sun,
  .vplogo.is-pulse .vplogo__sun{
    animation:none !important;
    transform:none !important;
    opacity:1 !important;
    filter:none !important;
  }
}