/* Site-wide motion and depth (static/js/motion.js adds the classes).
   Uses the individual translate/rotate/scale properties, not transform, so it
   stacks on top of each page's own transforms and hover effects instead of
   replacing them. Everything is off for prefers-reduced-motion. */

/* ---------- scroll reveal ----------
   motion.js marks only elements that start below the first screen, so the
   page is complete at rest and nothing above the fold ever blinks. */
.fx-reveal { opacity: 0; translate: 0 28px; }
.fx-reveal.fx-in {
  opacity: 1; translate: 0 0;
  transition: opacity .7s cubic-bezier(.2, .7, .2, 1), translate .7s cubic-bezier(.2, .7, .2, 1);
  transition-delay: var(--fx-delay, 0s);
}

/* ---------- 3D cards ---------- */
.fx-card { transform-style: preserve-3d; will-change: rotate; }
/* Transitions are set inline by motion.js, appended to the card's own ones. */
.fx-card.fx-hover {
  translate: 0 -8px;
  box-shadow: 0 22px 40px -18px rgba(0, 0, 0, .55), 0 0 0 1px rgba(255, 215, 0, .35);
}
/* Soft light that follows the pointer across the card. */
.fx-glare {
  position: absolute; inset: 0; border-radius: inherit; pointer-events: none; z-index: 5;
  background: radial-gradient(420px circle at var(--fx-x, 50%) var(--fx-y, 50%), rgba(255, 255, 255, .22), transparent 45%);
  opacity: 0; transition: opacity .35s ease; mix-blend-mode: soft-light;
}
.fx-card.fx-hover > .fx-glare { opacity: 1; }

/* ---------- buttons ---------- */
.btn-gold, .project-card__btn, .card-cta {
  transition: translate .25s ease, box-shadow .25s ease, background-color .25s ease, color .25s ease;
}
.btn-gold:hover, .project-card__btn:hover, .card-cta:hover {
  translate: 0 -2px; box-shadow: 0 10px 22px -10px rgba(0, 0, 0, .6);
}
.project-card__btn:hover { background: var(--gold); color: var(--green); border-color: var(--gold); }

/* ---------- reading progress ---------- */
.fx-progress {
  position: fixed; top: 0; left: 0; right: 0; height: 3px; z-index: 200; pointer-events: none;
  background: linear-gradient(90deg, #f2b800, var(--gold), #fff3a0); transform-origin: left; transform: scaleX(0);
  box-shadow: 0 0 10px rgba(255, 215, 0, .6);
}

/* ---------- header ---------- */
.site-header.fx-scrolled { box-shadow: 0 8px 24px -16px rgba(0, 0, 0, .7); }
.site-nav__list > .nav-item > .nav-link { position: relative; overflow: hidden; }
.site-nav__list > .nav-item > .nav-link::after {
  content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: 2px; background: var(--gold);
  scale: 0 1; transform-origin: left; transition: scale .3s ease;
}
.site-nav__list > .nav-item:hover > .nav-link::after,
.site-nav__list > .nav-item:focus-within > .nav-link::after,
.site-nav__list > .nav-item > .nav-link[aria-current]::after { scale: 1 1; }

/* ---------- home banner ---------- */
.home-hero__slide { transition: transform .9s cubic-bezier(.65, 0, .35, 1); }
.home-hero__slide.is-active { animation: fx-kenburns 7s ease-out both; }
@keyframes fx-kenburns { from { background-size: 104%; } to { background-size: 100%; } }

@media (prefers-reduced-motion: reduce) {
  .fx-reveal, .fx-reveal.fx-in { opacity: 1; translate: none; transition: none; }
  .fx-card, .fx-card.fx-hover { rotate: none !important; translate: none; transition: none; }
  .fx-glare { display: none; }
  .home-hero__slide, .home-hero__slide.is-active { animation: none; transition: none; }
}

/* ---------- click-to-hold for moving blocks (motion.js) ----------
   They never pause on hover any more; only a click holds them. */
.marquee:hover .marquee__track, .lx-logocols:hover .lx-logocol__track, .lx-sectors__strip:hover .lx-sectors__track { animation-play-state: running; }
.is-held .marquee__track, .lx-logocols.is-held .lx-logocol__track, .lx-sectors__strip.is-held .lx-sectors__track { animation-play-state: paused !important; }
[data-marquee], .lx-logocols, .lx-sectors__strip, [data-carousel], [data-hero] { cursor: pointer; }
.lx-sectors__strip .lx-shot { cursor: zoom-in; }
.ulf-hold-chip {
  position: absolute; z-index: 20; right: 12px; top: 12px; padding: 6px 12px; border-radius: 999px;
  background: rgba(50, 63, 47, .92); color: #fff; font: 700 12px/1.2 'Manrope', sans-serif; letter-spacing: .02em;
  box-shadow: 0 8px 18px -10px rgba(0, 0, 0, .6); pointer-events: none;
}
.ulf-hold-chip::before { content: ''; display: inline-block; width: 8px; height: 10px; margin-right: 7px; vertical-align: -1px;
  border-left: 3px solid #ffd700; border-right: 3px solid #ffd700; box-sizing: border-box; }
.ulf-hold-chip[hidden] { display: none; }
/* keep the chip out of the faded edges of masked strips */
.lx-logocols > .ulf-hold-chip { top: 16%; }
.lx-sectors__strip > .ulf-hold-chip, [data-marquee] > .ulf-hold-chip { right: 9%; }