/* Designflux hover language (light theme). Loaded last, desktop pointers only.
   Buttons: a liquid gradient flows, a light follows the pointer, the label rolls and the arrow glides.
   Pills and chips: a soft accent glaze with an accent edge.
   Cards: they lift into an accent edge and a soft accent light under the pointer.
   Links: accent, with an underline that wipes in.
   Every colour here comes from the THEME COLOURS block at the top of base.css. */
/* the hover colours live in base.css (THEME COLOURS) and follow the accent */

@property --sp { syntax: '<number>'; inherits: false; initial-value: 0; }

@media (hover: hover) and (pointer: fine) {
  /* ---- primary buttons: a liquid gradient that flows, a light that follows the pointer, a label that rolls --- */
  .df-site .df-btn.primary .elementor-button,
  .df-site .fl-go, .df-site .fl-cc-go, .df-site .fl-ct-form .elementor-button,
  .as-send, .as-go {
    background-image: radial-gradient(circle calc(var(--sp) * 120px) at var(--bx, 50%) var(--by, 50%), rgba(255, 255, 255, 0.55), rgba(255, 255, 255, 0) 72%), linear-gradient(100deg, var(--df-hi), var(--df-mid) 40%, var(--df-gold) 70%, var(--df-mid) 90%, var(--df-hi)) !important;
    background-repeat: no-repeat !important;
    background-size: 100% 100%, 260% 100% !important;
    background-position: 0 0, 0% 50% !important;
    background-color: transparent !important;
    transition: --sp 0.45s var(--df-ease), background-position 1.1s var(--df-ease), transform 0.7s var(--df-ease), box-shadow 0.6s var(--df-ease), color 0.3s !important;
  }
  .df-site .df-btn.primary .elementor-button:hover, .df-site .df-btn.primary .elementor-button:focus-visible,
  .df-site .fl-go:hover, .df-site .fl-go:focus-visible, .df-site .fl-cc-go:hover, .df-site .fl-cc-go:focus-visible,
  .df-site .fl-ct-form .elementor-button:hover, .df-site .fl-ct-form .elementor-button:focus-visible,
  .as-send:hover, .as-send:focus-visible, .as-go:hover, .as-go:focus-visible {
    --sp: 1;
    background-position: 0 0, 100% 50% !important;
    color: var(--df-on) !important;
    transform: translateY(-3px) scale(1.025);
    box-shadow: 0 22px 38px -16px rgba(var(--df-mid-rgb), 0.75), 0 4px 10px -2px rgba(var(--df-mid-rgb), 0.35), inset 0 1px 0 rgba(255, 255, 255, 0.4) !important;
  }
  .df-site .df-btn.primary .elementor-button:active, .df-site .fl-go:active, .df-site .fl-cc-go:active, .df-site .fl-ct-form .elementor-button:active, .as-send:active, .as-go:active {
    transform: translateY(0) scale(0.97); transition-duration: 0.12s !important;
  }
  .df-site .fl-go:hover svg, .df-site .fl-cc-go:hover svg, .df-site .fl-ct-form .elementor-button:hover .elementor-button-icon, .df-site .df-btn .elementor-button:hover .elementor-button-icon { translate: 5px 0; }
  .df-site .fl-go svg, .df-site .fl-cc-go svg, .df-site .df-btn .elementor-button-icon { transition: translate 0.6s var(--df-ease); }
  .df-site .fl-go::after { display: none; }

  /* ---- the label rolls: the word slides up and its twin rises into place --------------------------- */
  .df-roll { display: inline-flex; flex-direction: column; height: 1.3em; overflow: hidden; vertical-align: bottom; }
  .df-roll > span { display: block; height: 1.3em; line-height: 1.3em; white-space: nowrap; transition: transform 0.6s var(--df-ease); }
  .df-roll > span + span { transition-delay: 0.03s; }
  .elementor-button:hover .df-roll > span, .elementor-button:focus-visible .df-roll > span { transform: translateY(-100%); }

  /* ---- the round footer button: it swells, its ring spins up and a soft glow breathes -------------- */
  .df-orb { transition: box-shadow 0.7s var(--df-ease), scale 0.7s var(--df-ease); }
  .df-orb:hover { scale: 1.08; box-shadow: 0 30px 80px -14px rgba(var(--df-hv-glow), 0.75), 0 0 0 10px rgba(var(--df-hv-glow), 0.12); }
  .df-orb:hover .go { background: #fff; color: var(--df-ac); }

  /* ---- ghost buttons, pills and chips: a mint glaze that rises, a hairline that lights ------------- */
  .df-site .df-btn.ghost .elementor-button, .df-btn-link:not(.primary) { background-image: radial-gradient(circle calc(var(--sp) * 110px) at var(--bx, 50%) var(--by, 50%), rgba(var(--df-hv-glow), 0.2), rgba(var(--df-hv-glow), 0) 70%) !important; transition: --sp 0.45s var(--df-ease), transform 0.6s var(--df-ease), border-color 0.4s, box-shadow 0.5s !important; }
  .df-site .df-btn.ghost .elementor-button:hover, .df-btn-link:not(.primary):hover { --sp: 1; border-color: rgba(var(--df-hv-glow), 0.7) !important; background-color: rgba(255, 255, 255, 0.55) !important; color: var(--df-hv-deep) !important; transform: translateY(-3px); box-shadow: 0 16px 30px -18px rgba(var(--df-hv-glow), 0.55) !important; }
  .df-fchips a:hover, .df-fchips a:focus-visible,
  .fl-tools li:hover, .lg-chip:hover, .fl-copy:hover, .df-fmail .copy:hover, .df-fmail .copy:focus, .as-tuneb:hover, .as-tuneb:focus,
  .dr-nav button:hover, .dr-nav button:focus, .fl-qc button:hover, .fl-of-k button:hover, .fl-pg button:hover {
    background: rgba(var(--df-hv-glow), 0.14) !important; border-color: rgba(var(--df-hv-glow), 0.65) !important; color: var(--df-hv-deep) !important; transform: translateY(-2px);
  }
  .df-site .fl-qc button.on:hover, .df-site .fl-of-k button.on:hover { background: rgba(var(--df-hv-glow), 0.24) !important; color: var(--df-hv-deep) !important; }
  .dr-nav button:hover svg { color: var(--df-hv-deep); }

  /* ---- cards: lift, indigo edge, warm light under the pointer ------------------------------------- */
  .sx::before, .bx::before { background: radial-gradient(440px 340px at var(--mx, 50%) var(--my, 50%), rgba(var(--df-hv-glow), 0.14), rgba(var(--df-gold-rgb), 0.12) 48%, transparent 72%); }
  .fl-of::before { background: radial-gradient(540px 380px at var(--mx, 50%) var(--my, 0%), rgba(var(--df-hv-glow), 0.13), rgba(var(--df-gold-rgb), 0.08) 48%, transparent 72%); }
  .sx, .bx { transition: transform 0.6s var(--df-ease), border-color 0.4s, box-shadow 0.6s var(--df-ease); }
  .sx:hover, .bx:hover { transform: translateY(-7px); border-color: rgba(var(--df-hv-glow), 0.55); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.85), 0 2px 4px rgba(var(--df-shadow-rgb), 0.05), 0 34px 60px -26px rgba(var(--df-hv-glow), 0.5); }
  .dp-card { transition: transform 0.6s var(--df-ease), box-shadow 0.6s var(--df-ease), border-color 0.4s; }
  .dp-card:hover { transform: translateY(-6px); border-color: rgba(var(--df-hv-glow), 0.5); box-shadow: 0 1px 2px rgba(var(--df-shadow-rgb), 0.05), 0 34px 60px -28px rgba(var(--df-hv-glow), 0.45); }
  .fl-plist button:hover b { color: var(--df-hv); }

  /* ---- links: indigo, underline wipes in ----------------------------------------------------------- */
  .df-menu a:hover, .df-menu .current-menu-item > a:hover { color: var(--df-hv); }
  .df-menu a::after { background: linear-gradient(90deg, var(--df-tint2), var(--df-hv)); height: 2px; border-radius: 2px; }
  .fl-qa summary:hover, .fl-contact a:hover, .fl-line a:hover, .df-fwork a:hover, .df-fmail .mail:hover, .df-fmail .tel:hover,
  .df-textlink a:hover, .df-proof a:hover, .as-back:hover, .as-again:hover, .lg-pop .as-more:hover, .df-top:hover, .df-live:hover {
    color: var(--df-hv) !important;
  }
  .fl-contact a:hover { border-color: var(--df-hv); }
  .fl-visit:hover { border-color: var(--df-hv); color: var(--df-hv); }
  .df-textlink a:hover { text-decoration-color: var(--df-hv); }
  .df-fnav a:hover i, .df-fnav a:focus-visible i, .df-fnav a.on i { color: var(--df-hv); }
  .df-fnav a::after { background: linear-gradient(90deg, var(--df-tint2), var(--df-hv)); }
  .df-fmail .mail { background-image: linear-gradient(90deg, var(--df-tint2), var(--df-hv)); }

  /* ---- sliders and handles ------------------------------------------------------------------------ */
  .fl-sk-range:hover::-webkit-slider-thumb, .fl-of-b input:hover::-webkit-slider-thumb { box-shadow: 0 0 0 10px rgba(var(--df-hv-glow), 0.22), 0 6px 20px rgba(var(--df-shadow-rgb), 0.16); }

  /* ---- the chat ------------------------------------------------------------------------------------ */
  .dc-chip:hover { background: rgba(var(--df-hv-glow), 0.18); border-color: rgba(var(--df-hv-glow), 0.7); color: var(--df-hv-deep); }
  .dc-human:hover { border-color: var(--df-hv); color: var(--df-hv); }
  .dc-fab:hover { background: var(--df-hv-wave); color: var(--df-on); border-color: var(--df-deep); box-shadow: 0 16px 40px -10px rgba(var(--df-hv-glow), 0.7); }
}

/* keyboard focus */
.df-site :focus-visible { outline-color: var(--df-hv); }

/* the cursor follows the same palette: indigo dot, indigo ring, midnight label disc */
.df-cd, .df-sp { background: var(--df-ac); }
.df-cur { border-color: rgba(var(--df-hv-glow), 0.55); }
.df-cur.hot { background: rgba(var(--df-hv-glow), 0.12); border-color: rgba(var(--df-hv-glow), 0.8); }
.df-cur.lbl { background: var(--df-deep); border-color: var(--df-deep); }
.df-cur.lbl span { color: var(--df-on); }
.df-cur.txt { background: var(--df-ac); border-color: var(--df-ac); }

/* the discipline list: clearer when resting, and a soft teal wash that slides in on hover */
.fl-sv-l button { color: rgba(var(--df-ink-rgb), 0.58); }
@media (hover: hover) and (pointer: fine) and (min-width: 901px) {
  .fl-sv-l button { transition: color 0.4s, padding 0.55s var(--df-ease), background 0.5s; background: linear-gradient(90deg, rgba(var(--df-hv-glow), 0), rgba(var(--df-hv-glow), 0)); }
  .fl-sv-l button::before { content: ""; position: absolute; left: 0; top: 14px; bottom: 14px; width: 3px; border-radius: 3px; background: linear-gradient(var(--df-gold), var(--df-hv)); transform: scaleY(0); transform-origin: 50% 50%; transition: transform 0.55s var(--df-ease); }
  .fl-sv-l button:hover:not(.on) { color: var(--df-hv-deep); padding-left: 18px; background: linear-gradient(90deg, rgba(var(--df-hv-glow), 0.13), rgba(var(--df-hv-glow), 0) 85%); }
  .fl-sv-l button:hover:not(.on)::before { transform: scaleY(1); }
  .fl-sv-l button:hover:not(.on) i { color: var(--df-hv); font-weight: 700; }
  .fl-sv-l button:hover:not(.on) b { letter-spacing: -0.015em; }
  .fl-sv-l button b { transition: letter-spacing 0.55s var(--df-ease); }
  .fl-sv-l button.on::before { transform: scaleY(1); }
}
/* the theme paints buttons crimson on hover; this list never takes a fill colour, only the gradient above */
.df-site .fl-sv-l button, .df-site .fl-sv-l button:hover, .df-site .fl-sv-l button:focus, .df-site .fl-sv-l button:active { background-color: transparent; box-shadow: none; }
@media (prefers-reduced-motion: reduce) { .df-roll > span, .df-site .fl-go, .df-site .fl-cc-go, .as-send, .as-go { transition: none !important; } .elementor-button:hover .df-roll > span { transform: none; } }