/* =========================================================
   RESUME BUTTON FX  —  delightful hover for every resume link
   • Gemini-style 4-point sparkles that pop in, rotate & twinkle
   • A glowing colored comet that traces the button's border
   Self-contained: decorate any element with .has-resume-fx and
   drop in a <span class="rfx">…</span> (resume-fx.js does this).
   Colors inherit the page theme via the --rfx-* custom props.
   ========================================================= */

/* Animatable conic angle (Chrome/Safari/FF115+). Falls back to a
   static glow ring where @property is unsupported. */
@property --rfx-angle {
  syntax: '<angle>';
  initial-value: 0deg;
  inherits: false;
}

/* Theme hooks — override per page if the accent differs.
   Defaults tuned to the warm coral site theme. */
.has-resume-fx {
  --rfx-c1: #ff6a3d;   /* coral   */
  --rfx-c2: #ffb24d;   /* amber   */
  --rfx-c3: #ff5da2;   /* pink    */
  --rfx-spark: #ffd9a8;
  --rfx-star: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 0c.55 7.2 4.8 11.45 12 12-7.2.55-11.45 4.8-12 12-.55-7.2-4.8-11.45-12-12 7.2-.55 11.45-4.8 12-12z' fill='%23fff'/%3E%3C/svg%3E");
  position: relative;
  isolation: isolate;
}

/* FX layer — sits on top of the button, never intercepts clicks */
.rfx {
  position: absolute;
  inset: 0;
  border-radius: inherit;
  pointer-events: none;
  z-index: 1;
}

/* ---- Animated comet stroke ---------------------------------- */
.rfx__stroke {
  position: absolute;
  inset: -1px;
  border-radius: inherit;
  padding: 1.7px;                       /* = stroke thickness */
  background: conic-gradient(
    from var(--rfx-angle),
    transparent 0deg 175deg,
    var(--rfx-c2) 235deg,
    var(--rfx-c1) 285deg,
    var(--rfx-c3) 330deg,
    transparent 360deg
  );
  -webkit-mask:
    linear-gradient(#000 0 0) content-box,
    linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
          mask-composite: exclude;
  opacity: 0;
  transition: opacity .4s ease;
}

/* ---- Sparkles ----------------------------------------------- */
.rfx__spark {
  position: absolute;
  width: 13px;
  height: 13px;
  opacity: 0;
  transform: scale(.2);
  will-change: transform, opacity;
}
.rfx__spark i {
  display: block;
  width: 100%;
  height: 100%;
  background: var(--rfx-spark);
  -webkit-mask: var(--rfx-star) center / contain no-repeat;
          mask: var(--rfx-star) center / contain no-repeat;
  filter: drop-shadow(0 0 4px color-mix(in srgb, var(--rfx-c2) 70%, transparent));
}
/* placement + per-sparkle size/colour */
.rfx__spark.s1 { top: -7px;   left: 12%;  width: 14px; height: 14px; }
.rfx__spark.s2 { top: -9px;   right: 16%; width: 10px; height: 10px;
  --rfx-spark: #ffc9e6; }
.rfx__spark.s3 { bottom: -8px; left: 22%; width: 9px;  height: 9px;
  --rfx-spark: #ffe2b0; }
.rfx__spark.s4 { top: 38%;    right: -8px; width: 11px; height: 11px;
  --rfx-spark: #ffd9a8; }
.rfx__spark.s5 { bottom: -7px; right: 26%; width: 8px; height: 8px;
  --rfx-spark: #ffd0c0; }

/* ---- Hover orchestration ------------------------------------ */
@media (prefers-reduced-motion: no-preference) {
  .has-resume-fx:hover .rfx__stroke,
  .has-resume-fx:focus-visible .rfx__stroke {
    opacity: 1;
    animation: rfx-orbit 2.4s linear infinite;
  }
  .has-resume-fx:hover .rfx__spark,
  .has-resume-fx:focus-visible .rfx__spark {
    animation:
      rfx-pop .55s cubic-bezier(.34,1.56,.64,1) forwards,
      rfx-twinkle 2.6s ease-in-out .55s infinite;
  }
  .has-resume-fx:hover .rfx__spark i,
  .has-resume-fx:focus-visible .rfx__spark i {
    animation: rfx-spin 5s linear infinite;
  }
  /* staggered entrances */
  .has-resume-fx:hover .rfx__spark.s1 { animation-delay: 0s,    .55s; }
  .has-resume-fx:hover .rfx__spark.s2 { animation-delay: .07s, .62s; }
  .has-resume-fx:hover .rfx__spark.s3 { animation-delay: .14s, .69s; }
  .has-resume-fx:hover .rfx__spark.s4 { animation-delay: .10s, .65s; }
  .has-resume-fx:hover .rfx__spark.s5 { animation-delay: .18s, .73s; }
}

/* Reduced-motion: show a calm static glow, no movement */
@media (prefers-reduced-motion: reduce) {
  .has-resume-fx:hover .rfx__stroke,
  .has-resume-fx:focus-visible .rfx__stroke {
    opacity: .7;
    background: none;
    box-shadow: 0 0 0 1.5px color-mix(in srgb, var(--rfx-c1) 55%, transparent);
  }
}

@keyframes rfx-orbit { to { --rfx-angle: 360deg; } }

@keyframes rfx-pop {
  0%   { opacity: 0; transform: scale(.2) translateY(4px); }
  55%  { opacity: 1; transform: scale(1.25) translateY(-2px); }
  100% { opacity: .92; transform: scale(1) translateY(0); }
}
/* keep entrance end-state while twinkle takes over */
@keyframes rfx-twinkle {
  0%, 100% { opacity: .55; transform: scale(.85); }
  50%      { opacity: 1;   transform: scale(1.12); }
}
@keyframes rfx-spin {
  to { transform: rotate(360deg); }
}