/**
 * Wisefy.co interaction & motion patterns — shared across all WSpark pages.
 * Values match wisefy-co-effects.md / www.wisefy.co.
 * Loaded on every page via server inject and/or HTML <link>/<script>.
 */

:root {
  --wf-accent: #0091ad;
  --wf-button: #013ecd;
  --wf-reveal-ease: cubic-bezier(0.22, 1, 0.36, 1);
}

/* ── Nav links: scale + dual glow ── */
.nav-links a,
.site-nav a,
header nav a:not(.logo):not(.btn):not(.btn-primary):not(.cta-button),
nav ul a {
  transition:
    transform 0.22s ease,
    text-shadow 0.22s ease,
    color 0.22s ease !important;
}

.nav-links a:hover,
.site-nav a:hover,
header nav a:not(.logo):not(.btn):not(.btn-primary):not(.cta-button):hover,
nav ul a:hover {
  transform: scale(1.08) !important;
  text-shadow:
    0 0 12px rgba(255, 255, 255, 0.55),
    0 0 28px rgba(0, 145, 173, 0.45) !important;
}

.nav-links a:focus-visible,
.site-nav a:focus-visible,
header nav a:not(.logo):focus-visible,
nav ul a:focus-visible {
  outline: 2px solid var(--wf-accent) !important;
  outline-offset: 4px !important;
  border-radius: 2px;
}

.sign-up-link:hover {
  transform: scale(1.08) !important;
  text-shadow:
    0 0 12px rgba(255, 193, 7, 0.55),
    0 0 28px rgba(0, 145, 173, 0.45) !important;
}

/* ── Footer links ── */
.footer-section a,
footer a:not(.logo),
.site-footer__links a,
.site-footer__text a {
  transition: color 0.2s ease, text-shadow 0.2s ease !important;
}

.footer-section a:hover,
footer a:not(.logo):hover,
.site-footer__links a:hover,
.site-footer__text a:hover {
  color: #ffffff !important;
  text-shadow: 0 0 20px rgba(0, 145, 173, 0.35) !important;
}

.footer-section a:focus-visible,
footer a:not(.logo):focus-visible {
  outline: 2px solid var(--wf-accent) !important;
  outline-offset: 3px !important;
  border-radius: 2px;
}

.footer-section p a,
.site-footer__social-link {
  opacity: 0.9;
  display: inline-flex;
  transition: opacity 0.2s ease, transform 0.2s ease !important;
}

.footer-section p a:hover,
.site-footer__social-link:hover,
footer .social-link:hover {
  opacity: 1 !important;
  transform: translateY(-1px) !important;
}

/* ── Buttons — brightness + 1px lift ── */
.btn,
.btn-primary,
.cta-button,
.signin-button,
.signup-button,
.submit-btn,
.start-btn,
.wf-submit,
.eco-cta,
.wf-product__link,
button[type="submit"],
.modal-btn-primary,
.plan-button,
.select-plan-btn,
.next-btn,
.finish-btn,
.continue-btn,
a.btn-primary,
button.btn-primary {
  transition: filter 0.2s ease, transform 0.2s ease !important;
}

.btn:hover,
.btn-primary:hover,
.cta-button:hover,
.signin-button:hover,
.signup-button:hover,
.submit-btn:hover,
.start-btn:hover,
.wf-submit:hover,
.wf-product__link:hover,
button[type="submit"]:hover,
.modal-btn-primary:hover,
.plan-button:hover,
.select-plan-btn:hover,
.next-btn:hover:not(:disabled),
.finish-btn:hover:not(:disabled),
.continue-btn:hover,
a.btn-primary:hover,
button.btn-primary:hover {
  filter: brightness(1.08) !important;
  transform: translateY(-1px) !important;
}

.wf-submit:hover {
  filter: brightness(1.06) !important;
}

.eco-cta.scroll-reveal.is-visible:hover,
a.eco-cta:hover,
.cta-button.eco-scale:hover {
  filter: brightness(1.08) !important;
  transform: scale(1.05) !important;
  transition: filter 0.22s ease, transform 0.22s ease !important;
}

.btn:focus-visible,
.btn-primary:focus-visible,
.cta-button:focus-visible,
.signin-button:focus-visible,
.signup-button:focus-visible,
.submit-btn:focus-visible,
.start-btn:focus-visible,
.wf-submit:focus-visible,
.wf-product__link:focus-visible,
button[type="submit"]:focus-visible,
.modal-btn-primary:focus-visible,
.plan-button:focus-visible,
.select-plan-btn:focus-visible,
.eco-cta:focus-visible {
  outline: 2px solid #ffffff !important;
  outline-offset: 3px !important;
}

/* ── Cards — lift ── */
.feature-card,
.service-item,
.step,
.plan-card,
.pricing-card,
.module-card,
.dashboard-card,
.stat-card,
.info-card,
.option-item,
.wf-product,
.category-card,
.result-card,
.integration-card,
.output-card,
.tool-card {
  transition:
    transform 0.25s ease,
    border-color 0.25s ease,
    box-shadow 0.25s ease !important;
}

.feature-card:hover,
.service-item:hover,
.step:hover,
.plan-card:hover,
.pricing-card:hover,
.module-card:hover,
.dashboard-card:hover,
.stat-card:hover,
.info-card:hover,
.wf-product:hover,
.category-card:hover,
.result-card:hover,
.integration-card:hover,
.output-card:hover,
.tool-card:hover {
  transform: translateY(-3px) !important;
  box-shadow: 0 24px 56px rgba(0, 0, 0, 0.16) !important;
}

.feature-card.scroll-reveal:not(.is-visible):hover,
.service-item.scroll-reveal:not(.is-visible):hover,
.step.scroll-reveal:not(.is-visible):hover,
.plan-card.scroll-reveal:not(.is-visible):hover,
.wf-product.scroll-reveal:not(.is-visible):hover {
  transform: none !important;
}

/* ── Form inputs — focus ring ── */
input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="file"]):not([type="hidden"]),
textarea,
select {
  transition: border-color 0.2s ease, box-shadow 0.2s ease, background 0.2s ease !important;
}

input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="file"]):not([type="hidden"]):focus,
textarea:focus,
select:focus {
  border-color: rgba(0, 0, 0, 0.72) !important;
  box-shadow: 0 0 0 3px rgba(1, 62, 205, 0.28) !important;
  outline: none !important;
}

.wf-inner-lead a,
.wf-inner-prose a,
.prose a,
.about-content a,
.help-content a {
  text-underline-offset: 0.2em;
}

.wf-inner-lead a:hover,
.wf-inner-prose a:hover,
.prose a:hover,
.about-content a:hover,
.help-content a:hover {
  text-decoration-thickness: 2px;
}

/* ── Shared footer layout (module pages were missing these styles) ── */
footer,
footer#contact {
  padding: 50px 0;
  background: rgba(0, 0, 0, 0.2);
  text-align: center;
  border-top: 1px solid rgba(255, 255, 255, 0.1);
}

footer .footer-content,
.footer-content {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: 40px;
  margin-bottom: 30px;
}

footer .footer-section,
.footer-section {
  text-align: center;
}

footer .footer-section h4,
.footer-section h4 {
  margin-bottom: 20px;
  color: #ffffff;
}

footer .footer-section p,
footer .footer-section a,
.footer-section p,
.footer-section a {
  color: rgba(255, 255, 255, 0.8);
  text-decoration: none;
  line-height: 1.8;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  min-height: 30px;
}

footer .footer-section p img,
.footer-section p img {
  width: 20px;
  height: 20px;
  flex-shrink: 0;
}

footer .footer-section a:hover,
.footer-section a:hover {
  color: #ffffff;
  text-decoration: underline;
}

/* ── Scroll-triggered reveals ── */
.scroll-reveal {
  opacity: 0;
  transform: translateY(28px);
  filter: blur(7px);
  pointer-events: none;
  transition:
    opacity 0.48s var(--wf-reveal-ease),
    transform 0.48s var(--wf-reveal-ease),
    filter 0.38s ease-out;
  transition-delay: var(--sr-delay, 0s);
}

.scroll-reveal.is-visible {
  opacity: 1 !important;
  transform: translateY(0) !important;
  filter: blur(0) !important;
  pointer-events: auto !important;
}

.feature-card.scroll-reveal,
.service-item.scroll-reveal,
.step.scroll-reveal,
.plan-card.scroll-reveal,
.pricing-card.scroll-reveal,
.module-card.scroll-reveal,
.dashboard-card.scroll-reveal,
.wf-product.scroll-reveal,
.stat-card.scroll-reveal,
.info-card.scroll-reveal,
.category-card.scroll-reveal,
.integration-card.scroll-reveal,
.output-card.scroll-reveal,
.tool-card.scroll-reveal {
  transition:
    opacity 0.48s var(--wf-reveal-ease),
    transform 0.48s var(--wf-reveal-ease),
    filter 0.38s ease-out,
    border-color 0.25s ease,
    box-shadow 0.25s ease;
  transition-delay: var(--sr-delay, 0s);
}

/* ── Hero scroll morph ── */
.home-morph,
.wf-hero-morph {
  position: absolute;
  inset: 0;
  z-index: 0;
  overflow: hidden;
  will-change: clip-path, transform;
  transform-origin: 50% 38%;
}

.home-morph .home-scrim,
.wf-hero-morph .home-scrim {
  position: absolute;
  inset: 0;
  z-index: 1;
  background: rgba(0, 0, 0, 0.3);
  pointer-events: none;
}

.home-ui,
.wf-hero-ui {
  position: relative;
  z-index: 2;
  will-change: clip-path, transform;
  transform-origin: 50% 38%;
}

.wf-morph-target {
  will-change: clip-path, transform;
  transform-origin: 50% 38%;
}

@media (max-width: 600px) {
  .home-morph,
  .wf-hero-morph,
  .home-ui,
  .wf-hero-ui,
  .wf-morph-target {
    transform-origin: 50% 32%;
  }
}

@media (prefers-reduced-motion: reduce) {
  .home-morph,
  .wf-hero-morph,
  .home-ui,
  .wf-hero-ui,
  .wf-morph-target {
    will-change: auto !important;
    clip-path: none !important;
    transform: none !important;
  }

  .scroll-reveal {
    opacity: 1 !important;
    transform: none !important;
    filter: none !important;
    transition: none !important;
    pointer-events: auto !important;
  }

  .nav-links a:hover,
  .site-nav a:hover,
  .sign-up-link:hover,
  .btn:hover,
  .btn-primary:hover,
  .cta-button:hover,
  .feature-card:hover,
  .service-item:hover,
  .step:hover,
  .plan-card:hover {
    transform: none !important;
  }
}