/* ============================================================
   Fourfront wireframes — shared motion + hover styles
   Loaded by all 5 wireframe pages.
============================================================ */

/* ---------- Scroll-reveal ----------
   Sitewide reveal: a liquid-glass defocus that's tied to scroll position
   via GSAP ScrollTrigger (see motion.js). The CSS below only declares the
   initial "behind the glass" state so there's no flash of clear content
   before ScrollTrigger initialises — GSAP then drives all inline styles.

   `.is-visible` is the no-JS / reduced-motion fallback: if ScrollTrigger
   never loads, motion.js adds that class so content renders normally.
*/
[data-reveal] {
  opacity: 0.32;
  filter: blur(22px) saturate(1.45) brightness(1.1);
  transform: translate3d(0, 16px, 0) scale(1.018);
  will-change: opacity, filter, transform;
}
[data-reveal][data-reveal-stagger] {
  opacity: 1;
  filter: none;
  transform: none;
}
[data-reveal][data-reveal-stagger] > * {
  opacity: 0.32;
  filter: blur(14px) saturate(1.35) brightness(1.07);
  transform: translate3d(0, 10px, 0) scale(1.01);
}
[data-reveal].is-visible,
[data-reveal][data-reveal-stagger].is-visible > * {
  opacity: 1;
  filter: none;
  transform: none;
}
[data-reveal][data-reveal-stagger].is-visible > *:nth-child(1) { transition-delay: 0ms; }
[data-reveal][data-reveal-stagger].is-visible > *:nth-child(2) { transition-delay: 100ms; }
[data-reveal][data-reveal-stagger].is-visible > *:nth-child(3) { transition-delay: 200ms; }
[data-reveal][data-reveal-stagger].is-visible > *:nth-child(4) { transition-delay: 300ms; }
[data-reveal][data-reveal-stagger].is-visible > *:nth-child(5) { transition-delay: 400ms; }
[data-reveal][data-reveal-stagger].is-visible > *:nth-child(6) { transition-delay: 500ms; }

/* ---------- CTA hover states ---------- */
.wf-btn {
  transition:
    transform 220ms cubic-bezier(0.16, 1, 0.3, 1),
    background-color 220ms ease,
    border-color 220ms ease,
    color 220ms ease,
    box-shadow 220ms ease;
}
.wf-btn .chip {
  transition:
    transform 280ms cubic-bezier(0.16, 1, 0.3, 1),
    background-color 220ms ease,
    border-color 220ms ease;
}
.wf-btn .chip svg {
  transition: transform 280ms cubic-bezier(0.16, 1, 0.3, 1);
}

/* Lift + chip slide on hover */
.wf-btn:hover {
  transform: translateY(-1px);
  box-shadow: 0 6px 18px rgba(0,0,0,0.10);
}
.wf-btn:hover .chip {
  transform: translateX(3px);
}
.wf-btn:active {
  transform: translateY(0);
  box-shadow: 0 2px 6px rgba(0,0,0,0.08);
}

/* Inverse-on-press flash for primary buttons */
.wf-btn.primary:hover {
  background: #000;
  border-color: #000;
}
.wf-btn.primary:hover .chip {
  background: rgba(255,255,255,0.08);
}

/* Outline buttons fill on hover */
.wf-btn.ghost:hover,
.wf-btn:not(.primary):not(.inverse):not(.on-dark):hover {
  background: var(--wf-ink-1, #072C22);
  color: #fff;
  border-color: var(--wf-ink-1, #072C22);
}
.wf-btn:not(.primary):not(.inverse):not(.on-dark):hover .chip {
  border-color: #fff;
}
.wf-btn:not(.primary):not(.inverse):not(.on-dark):hover .chip svg path {
  stroke: #fff;
}

/* On-dark buttons: invert to white on hover */
.wf-btn.on-dark:hover {
  background: #fff;
  color: var(--wf-ink-1, #072C22);
  border-color: #fff;
}
.wf-btn.on-dark:hover .chip {
  border-color: var(--wf-ink-1, #072C22);
}
.wf-btn.on-dark:hover .chip svg path {
  stroke: var(--wf-ink-1, #072C22);
}

/* Inverse stays inverse but lifts */
.wf-btn.inverse:hover {
  background: #fff;
  color: var(--wf-ink-1, #072C22);
  box-shadow: 0 8px 24px rgba(0,0,0,0.15);
}

/* ---------- Inline text link hover ---------- */
.wf-link {
  transition: color 200ms ease, border-color 200ms ease;
}
.wf-link:hover {
  color: var(--wf-ink-2, #2B4731);
  border-bottom-color: var(--wf-ink-1, #072C22);
}

/* ---------- Card hover lift (for case-card, service-card, etc) ---------- */
.case-card,
.service-card,
.team-card,
.partner-mini-card,
.stat-card,
.value-card,
.pillar-card,
.fit-card,
.kern-card,
.model-card,
.tool-chip {
  transition:
    transform 280ms cubic-bezier(0.16, 1, 0.3, 1),
    box-shadow 280ms cubic-bezier(0.16, 1, 0.3, 1),
    border-color 220ms ease;
}
.case-card:hover,
.service-card:hover,
.partner-mini-card:hover,
.stat-card:hover,
.value-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 10px 28px rgba(0,0,0,0.08);
}
/* Cards on dark BG get a soft glow instead of dark shadow */
.kern-card:hover,
.model-card:hover,
.service-card:hover,
.value-card:hover {
  box-shadow: 0 10px 28px rgba(0,0,0,0.25);
  border-color: rgba(255,255,255,0.18);
}

/* mini-case float loops removed — mini-cases now live inside .case-marquee */

/* ---------- Reduced motion: turn everything off ---------- */
@media (prefers-reduced-motion: reduce) {
  [data-reveal],
  [data-reveal][data-reveal-stagger] > * {
    opacity: 1 !important;
    filter: none !important;
    transform: none !important;
    transition: none !important;
  }
  .wf-btn, .wf-btn .chip, .wf-btn .chip svg,
  .case-card, .service-card, .team-card, .partner-mini-card,
  .stat-card, .value-card, .pillar-card, .fit-card,
  .kern-card, .model-card, .tool-chip, .mini-case {
    transition: none !important;
    animation: none !important;
  }
}