/* =========================================================
   THOMPSON SORTED — MOTION LAYER (pairs with js/fx.js)
   Scroll progress bar, headline word reveals, card fly-in,
   cursor glow and button sheen. Hidden states are only ever
   added by JS, so with JS off (or reduced motion) everything
   simply sits there, fully visible.
   ========================================================= */

.fx-progress {
  position: fixed;
  top: 0; left: 0; right: 0;
  height: 3px;
  background: linear-gradient(90deg, var(--teal-dark), var(--teal) 60%, #5cc4ba);
  transform: scaleX(0);
  transform-origin: 0 50%;
  z-index: 9999;
  pointer-events: none;
}

/* Headline word reveal: each word rises out of a mask */
.fx-w {
  display: inline-block;
  overflow: hidden;
  vertical-align: bottom;
  padding-bottom: 0.14em;
  margin-bottom: -0.14em;
}
.fx-w > span {
  display: inline-block;
  transform: translateY(110%);
  transition: transform .8s cubic-bezier(.2, .7, .2, 1);
  transition-delay: calc(var(--i, 0) * 70ms);
}
.fx-words-in .fx-w > span { transform: none; }

/* Soft light sweep across a heading once it has landed */
.fx-sweep { position: relative; overflow: hidden; }
.fx-sweep::after {
  content: "";
  position: absolute;
  top: -10%; bottom: -10%;
  left: -30%;
  width: 22%;
  background: linear-gradient(105deg, transparent, rgba(31, 138, 130, .20), transparent);
  transform: skewX(-18deg);
  pointer-events: none;
  animation: fx-sweep .9s ease-in-out forwards;
}
@keyframes fx-sweep { from { left: -30%; } to { left: 115%; } }

/* Cards fly up into view; JS only adds this to cards below the fold */
.fx-reveal {
  opacity: 0;
  transform: translateY(26px);
  transition: opacity .65s ease, transform .65s cubic-bezier(.2, .7, .2, 1);
  will-change: opacity, transform;
}
.fx-reveal.fx-in { opacity: 1; transform: none; }

/* Cursor-tracked teal glow inside cards */
.fx-card { position: relative; }
.fx-card::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: radial-gradient(380px circle at var(--mx, 50%) var(--my, 50%),
              rgba(31, 138, 130, .12), transparent 65%);
  opacity: 0;
  transition: opacity .35s ease;
  pointer-events: none;
}
.fx-card:hover::after { opacity: 1; }

/* Button sheen sweep on hover */
.btn { position: relative; overflow: hidden; }
.btn::before {
  content: "";
  position: absolute;
  top: 0; bottom: 0;
  left: -75%;
  width: 50%;
  background: linear-gradient(105deg, transparent, rgba(255, 255, 255, .35), transparent);
  transform: skewX(-20deg);
  transition: left .6s ease;
  pointer-events: none;
}
.btn:hover::before { left: 125%; }

@media (prefers-reduced-motion: reduce) {
  .fx-progress { display: none; }
  .fx-w > span { transform: none !important; transition: none !important; }
  .fx-reveal { opacity: 1 !important; transform: none !important; transition: none !important; }
  .fx-card::after, .fx-sweep::after, .btn::before { display: none; }
}