/* ============================================================================
   Motion layer — calm, Framer-style motion on top of Meridian Noir.

   Every rule here is either a pure hover/decoration state, or it is scoped to
   classes that js/motion-fx.js adds at runtime (.fx on <html>, .fx-* on
   elements). With JavaScript off nothing in this file hides content.
   Animated properties are transform and opacity; the one blur is a short
   entrance on headline words only.
   ========================================================================== */

/* ---------- Lenis smooth scroll ---------- */

html.lenis, html.lenis body { height: auto; }
.lenis.lenis-smooth { scroll-behavior: auto !important; }
.lenis.lenis-smooth [data-lenis-prevent] { overscroll-behavior: contain; }
.lenis.lenis-stopped { overflow: clip; }

/* ---------- Scroll progress: a single hairline of accent ---------- */

.fx-progress {
  position: fixed;
  inset: 0 0 auto;
  height: 1px;
  z-index: 70;
  pointer-events: none;
  transform-origin: 0 50%;
  transform: scaleX(0);
  background: linear-gradient(90deg, rgba(242, 101, 34, 0), var(--accent) 70%, #ffb38a);
}

/* ---------- Header: tucks away on the way down, returns on the way up ---------- */

.fx .hdr { transition: background 0.35s var(--ease), border-color 0.35s var(--ease), transform 0.6s var(--ease-out); }
.fx .hdr.fx-hdr-hidden { transform: translateY(-100%); }

/* ---------- Nav and link micro-interactions ---------- */

.nav-menu > a:not(.btn),
.nav-drop-btn { position: relative; }
.nav-menu > a:not(.btn)::after,
.nav-drop-btn::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: -6px;
  height: 1px;
  background: rgba(255, 255, 255, 0.5);
  transform: scaleX(0);
  transform-origin: 100% 50%;
  transition: transform 0.5s var(--ease-out);
}
.nav-menu > a:not(.btn):hover::after,
.nav-drop-btn:hover::after,
.nav-drop.is-open .nav-drop-btn::after { transform: scaleX(1); transform-origin: 0 50%; }

.mega-col a,
.ftr-col a { display: inline-block; transition: color 0.2s var(--ease), transform 0.4s var(--ease-out); }
.mega-col a:hover,
.ftr-col a:hover { transform: translateX(3px); }

@media (prefers-reduced-motion: no-preference) {
  .nav-drop.is-open .mega,
  .nav-drop:hover .mega { animation: fx-drop 0.35s var(--ease-out); }
  .nav-drop.is-open .mega-col,
  .nav-drop:hover .mega-col { animation: fx-rise 0.5s var(--ease-out) both; }
  .mega-col:nth-child(2) { animation-delay: 0.03s !important; }
  .mega-col:nth-child(3) { animation-delay: 0.06s !important; }
  .mega-col:nth-child(4) { animation-delay: 0.09s !important; }
  .mega-col:nth-child(5) { animation-delay: 0.12s !important; }
}
@keyframes fx-drop { from { opacity: 0; transform: translateY(-6px); } }
@keyframes fx-rise { from { opacity: 0; transform: translateY(8px); } }

/* ---------- Buttons: a quiet magnetic pull ---------- */

.btn.fx-mag { transition: background 0.25s var(--ease), color 0.25s var(--ease),
  border-color 0.25s var(--ease), box-shadow 0.25s var(--ease); will-change: transform; }

/* ---------- Hero: light sweep + pointer spotlight ---------- */

.fx-hero-fx {
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  overflow: hidden;
}
/* a narrow beam of light that drifts slowly across the grid */
.fx-beam {
  position: absolute;
  top: -20%;
  left: 50%;
  width: 180px;
  height: 120%;
  margin-left: -90px;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.05) 45%, rgba(255, 255, 255, 0.08) 50%, rgba(255, 255, 255, 0.05) 55%, transparent);
  transform: translateX(-60vw) rotate(18deg);
  -webkit-mask-image: linear-gradient(#000 20%, transparent 75%);
  mask-image: linear-gradient(#000 20%, transparent 75%);
  opacity: 0;
}
@media (prefers-reduced-motion: no-preference) {
  .fx-beam { animation: fx-beam 11s cubic-bezier(0.45, 0, 0.25, 1) 1.4s infinite; }
}
@keyframes fx-beam {
  0% { transform: translateX(-60vw) rotate(18deg); opacity: 0; }
  12% { opacity: 1; }
  55% { opacity: 1; }
  70%, 100% { transform: translateX(60vw) rotate(18deg); opacity: 0; }
}
.fx-hero-spot {
  position: absolute;
  width: 640px;
  height: 640px;
  left: -320px;
  top: -320px;
  border-radius: 50%;
  background: radial-gradient(closest-side, rgba(255, 255, 255, 0.045), transparent);
  opacity: 0;
  transition: opacity 0.8s var(--ease);
  will-change: transform;
}
.hero.fx-pointer .fx-hero-spot { opacity: 1; }

/* ---------- Border beam on the key card ---------- */

@property --fx-angle {
  syntax: "<angle>";
  initial-value: 0deg;
  inherits: false;
}
.fx-beam-card { position: relative; isolation: isolate; }
.fx-beam-card::before {
  content: "";
  position: absolute;
  inset: -1px;
  border-radius: inherit;
  padding: 1px;
  pointer-events: none;
  z-index: 1;
  background: conic-gradient(from var(--fx-angle), transparent 0deg, transparent 290deg,
    rgba(242, 101, 34, 0.0) 300deg, rgba(242, 101, 34, 0.9) 345deg, #ffd2b8 356deg, transparent 360deg);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  mask-composite: exclude;
  opacity: 0.85;
}
@media (prefers-reduced-motion: no-preference) {
  .fx-beam-card::before { animation: fx-spin 7s linear infinite; }
}
@keyframes fx-spin { to { --fx-angle: 360deg; } }

/* ---------- Split text ---------- */

.fx-w { display: inline-block; overflow: clip; overflow-clip-margin: 0.14em; vertical-align: top; padding-bottom: 0.08em; margin-bottom: -0.08em; }
.fx-w > span { display: inline-block; will-change: transform; }

/* ---------- Reveal upgrades (meridian.js still toggles .is-in) ---------- */

.fx [data-reveal] {
  transform: translate3d(0, 20px, 0);
  transition: opacity 1s var(--ease-out), transform 1s var(--ease-out);
}
.fx [data-reveal].is-in { transform: none; }
.fx [data-reveal].fx-settled { transition: opacity 0.3s var(--ease), border-color 0.3s var(--ease), box-shadow 0.3s var(--ease); }

/* ---------- Cards: cursor-follow border highlight (Linear / Vercel style) ---------- */

.fx-glow { position: relative; }
.fx-glow > * { position: relative; z-index: 1; }
/* soft light inside the panel */
.fx-glow::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.5s var(--ease);
  background: radial-gradient(380px circle at var(--mx, 50%) var(--my, 50%), rgba(255, 255, 255, 0.055), transparent 60%);
}
/* the hairline border brightens where the cursor is */
.fx-glow::before {
  content: "";
  position: absolute;
  inset: -1px;
  border-radius: inherit;
  padding: 1px;
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.5s var(--ease);
  background: radial-gradient(240px circle at var(--mx, 50%) var(--my, 50%), rgba(255, 255, 255, 0.5), transparent 70%);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  mask-composite: exclude;
}
.fx-glow.fx-hot::before, .fx-glow.fx-hot::after { opacity: 1; }
/* section-wide: neighbouring cards pick up a faint edge as the cursor nears */
.fx-glow-group:hover .fx-glow::before { opacity: 0.35; }
.fx-glow-group:hover .fx-glow.fx-hot::before { opacity: 1; }

/* ---------- Dark sections open out like a card becoming a page ---------- */

.fx-unfold { will-change: clip-path; }

/* ---------- Marquee: GSAP drives it so scroll speed can push it ---------- */

.fx-marquee .marquee-track { animation: none !important; will-change: transform; } /* own layer: moving it is a compositor transform, not a repaint */

/* ---------- FAQ answers ease in ---------- */

@media (prefers-reduced-motion: no-preference) {
  .faq details[open] > :not(summary) { animation: fx-rise 0.5s var(--ease-out); }
}

/* ---------- Page to page: a soft cross-fade where the browser supports it ---------- */

@media (prefers-reduced-motion: no-preference) {
  @view-transition { navigation: auto; }
  ::view-transition-old(root) { animation: fx-vt-out 0.25s var(--ease) both; }
  ::view-transition-new(root) { animation: fx-vt-in 0.45s var(--ease-out) both; }
}
@keyframes fx-vt-out { to { opacity: 0; } }
@keyframes fx-vt-in { from { opacity: 0; } }

/* ---------- Touch and reduced motion ---------- */

@media (hover: none), (pointer: coarse) {
  .fx-hero-spot { display: none; }
  .mega-col a:hover, .ftr-col a:hover { transform: none; }
}
@media (prefers-reduced-motion: reduce) {
  .fx-progress, .fx-hero-spot, .fx-beam { display: none; }
  .fx [data-reveal] { transform: none; }
  .fx .hdr.fx-hdr-hidden { transform: none; }
}