/* Visual effects layer: liquid glass, 3D tilt and scroll reveal.
   Paired with fx.js. Tint and strength come from the custom properties
   below so each site can match its own palette. */
:root {
  --fx-glass-tint: 255, 255, 255;   /* rgb of the glass body */
  --fx-glass-a: 0.16;               /* body opacity */
  --fx-glass-edge: 0.38;            /* rim highlight opacity */
  --fx-glass-blur: 16px;
  --fx-header-tint: 27, 33, 84;     /* rgb of the scrolled header */
  --fx-header-a: 0.72;
  --fx-shadow: 17, 21, 60;           /* rgb of drop shadows */
}

/* ── Liquid glass ─────────────────────────────────────────── */
.fx-glass {
  position: relative;
  isolation: isolate;
  background-color: rgba(var(--fx-glass-tint), var(--fx-glass-a));
  background-image: linear-gradient(135deg, rgba(255, 255, 255, 0.22), rgba(255, 255, 255, 0.02) 55%, rgba(255, 255, 255, 0.10));
  -webkit-backdrop-filter: blur(var(--fx-glass-blur)) saturate(170%);
  backdrop-filter: blur(var(--fx-glass-blur)) saturate(170%);
  border-color: rgba(255, 255, 255, var(--fx-glass-edge));
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.55),
    inset 0 -10px 20px -14px rgba(255, 255, 255, 0.35),
    0 10px 30px rgba(var(--fx-shadow), 0.18);
}
/* Specular highlight that follows the pointer (fx.js sets --fx-mx/--fx-my). */
.fx-glass::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  pointer-events: none;
  background: radial-gradient(180px circle at var(--fx-mx, 25%) var(--fx-my, 0%), rgba(255, 255, 255, 0.30), transparent 65%);
  mix-blend-mode: soft-light;
  z-index: 1;
}

/* Header that becomes glass once content scrolls beneath it. */
.fx-header-glass {
  background-color: rgba(var(--fx-header-tint), var(--fx-header-a)) !important;
  -webkit-backdrop-filter: blur(18px) saturate(180%);
  backdrop-filter: blur(18px) saturate(180%);
  box-shadow: inset 0 -1px 0 rgba(255, 255, 255, 0.14), 0 8px 24px rgba(var(--fx-shadow), 0.22) !important;
}

/* Browsers without backdrop-filter get a solid, still readable surface. */
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .fx-glass { background-color: rgba(var(--fx-glass-tint), 0.85); }
  .fx-header-glass { background-color: rgba(var(--fx-header-tint), 0.96) !important; }
}

/* ── 3D tilt ─────────────────────────────────────────────── */
.fx-tilt.fx-tilt {
  transform: perspective(900px) rotateX(var(--fx-rx, 0deg)) rotateY(var(--fx-ry, 0deg)) translateY(var(--fx-lift, 0px));
  transform-style: preserve-3d;
  transition: transform 0.2s ease-out, box-shadow 0.3s ease, opacity 0.6s ease;
  will-change: transform;
}
.fx-tilt.fx-tilt:hover {
  --fx-lift: -6px;
  box-shadow: 0 22px 44px -12px rgba(var(--fx-shadow), 0.35);
}
.fx-glare {
  position: absolute;
  inset: 0;
  border-radius: inherit;
  pointer-events: none;
  z-index: 2;
  opacity: 0;
  background: radial-gradient(260px circle at var(--fx-mx, 50%) var(--fx-my, 50%), rgba(255, 255, 255, 0.28), transparent 60%);
  transition: opacity 0.3s ease;
}
.fx-tilt:hover > .fx-glare { opacity: 1; }

/* ── Scroll reveal ───────────────────────────────────────── */
.fx-js .fx-reveal {
  opacity: 0;
  transform: translateY(22px);
  transition: opacity 0.7s ease var(--fx-delay, 0ms), transform 0.7s cubic-bezier(0.2, 0.7, 0.2, 1) var(--fx-delay, 0ms);
}
.fx-js .fx-reveal.fx-in { opacity: 1; transform: none; }
/* A tilt card that also reveals keeps its tilt transform once visible. */
.fx-js .fx-reveal.fx-in.fx-tilt {
  transform: perspective(900px) rotateX(var(--fx-rx, 0deg)) rotateY(var(--fx-ry, 0deg)) translateY(var(--fx-lift, 0px));
}

@media (prefers-reduced-motion: reduce) {
  .fx-tilt.fx-tilt, .fx-js .fx-reveal { transform: none !important; transition: none !important; opacity: 1 !important; }
}

/* ── ThriveWorks specifics ───────────────────────────────── */
/* Glass hero controls sit on the dark video overlay. */
.hero-headline.fx-glass, .hero-btn.fx-glass { border-radius: 14px; }
.hero-btn.fx-glass { border-radius: 999px; }
.hero-btn.fx-glass:hover { background-color: rgba(255, 255, 255, 0.92); color: var(--navy); }
.proof-stat.fx-glass { --fx-glass-a: 0.06; --fx-glass-edge: 0.22; border-radius: 16px; padding: 18px 16px; }

/* Mission, Vision and Values: separate rounded cards, and headings in navy.
   Gold on the tan card measured about 1.3:1, well under the 3:1 minimum. */
.mvv-grid { gap: 18px; overflow: visible; border-radius: 0; }
.mvv-card { border-radius: 14px; border-right: 0; background: linear-gradient(160deg, #dcc58e, #cfb072); box-shadow: 0 10px 28px -14px rgba(27, 33, 84, 0.45); }
.mvv-card h3 { color: var(--navy); font-weight: 600; }
.program-card { border-radius: 14px; }
@media (max-width: 768px) { .mvv-grid { gap: 14px; } }