/* ============================================================
   HARMOS FX layer (assets/fx.css)
   ------------------------------------------------------------
   Purely additive "wow" effects: marquees, aurora hero, cursor
   glow, tilt cards, shine buttons, scroll progress, transitions.
   Remove the <link> to this file + fx.js to switch everything off.
   All motion is disabled under prefers-reduced-motion.
   ============================================================ */

/* ---------- Page enter / leave transition ---------- */
.fx-ready main { animation: fx-page-in .6s cubic-bezier(.2,.8,.2,1) both; }
.fx-leaving main, .fx-leaving .site-footer { opacity: 0; transform: translateY(-6px); filter: blur(4px);
  transition: opacity .22s ease, transform .22s ease, filter .22s ease; }
@keyframes fx-page-in {
  from { opacity: 0; transform: translateY(8px); filter: blur(6px); }
  to   { opacity: 1; transform: none; filter: none; }
}

/* ---------- Scroll progress (top edge, every page) ---------- */
.fx-progress {
  position: fixed; top: 0; left: 0; z-index: 80;
  height: 2px; width: 100%;
  transform-origin: 0 50%; transform: scaleX(var(--fx-scroll, 0));
  background: linear-gradient(90deg, #6f20ef, #b786ff 60%, #fff);
  box-shadow: 0 0 14px rgba(139,61,255,.8);
  pointer-events: none;
}

/* ---------- Cursor spotlight (desktop only) ---------- */
.fx-cursor {
  position: fixed; left: 0; top: 0; z-index: 1;
  width: 560px; height: 560px; margin: -280px 0 0 -280px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(139,61,255,.13), rgba(139,61,255,.04) 40%, transparent 68%);
  pointer-events: none;
  transform: translate3d(var(--fx-mx, -999px), var(--fx-my, -999px), 0);
  transition: opacity .4s ease;
  mix-blend-mode: screen;
}
/* ---------- Subpage hero: aurora + structural grid + node canvas ---------- */
.page-hero { overflow: hidden; }
.fx-aurora { position: absolute; inset: 0; z-index: -1; pointer-events: none; overflow: hidden; }
.fx-aurora i {
  position: absolute; border-radius: 50%; filter: blur(80px); opacity: .35;
  mix-blend-mode: screen; animation: fx-float 18s ease-in-out infinite alternate;
}
.fx-aurora i:nth-child(1) { width: 46vw; height: 46vw; left: -8vw; top: -22vw; background: #6f20ef; }
.fx-aurora i:nth-child(2) { width: 38vw; height: 38vw; right: -6vw; top: -14vw; background: #b786ff; opacity: .28; animation-duration: 23s; animation-delay: -6s; }
.fx-aurora i:nth-child(3) { width: 30vw; height: 30vw; left: 35vw; top: 4vw; background: #3a1d8f; animation-duration: 27s; animation-delay: -12s; }
@keyframes fx-float {
  0%   { transform: translate(0, 0) scale(1); }
  50%  { transform: translate(6vw, 4vw) scale(1.15); }
  100% { transform: translate(-4vw, 7vw) scale(.92); }
}
.fx-grid {
  position: absolute; left: -50%; right: -50%; bottom: -10%; height: 70%; z-index: -1;
  pointer-events: none;
  background-image:
    linear-gradient(rgba(183,134,255,.16) 1px, transparent 1px),
    linear-gradient(90deg, rgba(183,134,255,.16) 1px, transparent 1px);
  background-size: 64px 64px;
  transform: perspective(520px) rotateX(62deg);
  transform-origin: 50% 100%;
  -webkit-mask-image: linear-gradient(to top, rgba(0,0,0,.9), transparent 85%);
  mask-image: linear-gradient(to top, rgba(0,0,0,.9), transparent 85%);
  animation: fx-grid-run 3.5s linear infinite;
}
@keyframes fx-grid-run { to { background-position: 0 64px, 0 0; } }

/* Hero title: word rise-in + animated gradient sheen */
.fx-words .w { display: inline-block; overflow: hidden; vertical-align: top; padding-bottom: .08em; }
.fx-words .w > span {
  display: inline-block; transform: translateY(110%) rotate(4deg); opacity: 0;
  animation: fx-word .9s cubic-bezier(.2,.85,.2,1) forwards;
  animation-delay: calc(var(--wi) * 70ms + 120ms);
}
@keyframes fx-word { to { transform: none; opacity: 1; } }
.fx-sheen-text {
  background: linear-gradient(100deg, #fff 0%, #fff 38%, #d9c2ff 46%, #9b5cff 50%, #d9c2ff 54%, #fff 62%, #fff 100%);
  background-size: 260% 100%;
  -webkit-background-clip: text; background-clip: text; color: transparent;
  display: inline-block; animation: fx-sheen 6s linear infinite;
}
@keyframes fx-sheen { from { background-position: 130% 0; } to { background-position: -130% 0; } }
.page-hero .eyebrow, .page-hero .lede, .page-hero .actions, .page-hero > .btn, .page-hero > p:not(.eyebrow) {
  animation: fx-fade-up .9s cubic-bezier(.2,.8,.2,1) both .45s;
}
.page-hero .eyebrow { animation-delay: 0s; }
@keyframes fx-fade-up { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }

/* ---------- Marquee (generic) ---------- */
.fx-marquee {
  --fx-gap: 48px;
  position: relative; overflow: hidden; display: flex; user-select: none;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
  mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
}
.fx-track {
  display: flex; flex-shrink: 0; align-items: center; gap: var(--fx-gap);
  padding-right: var(--fx-gap);
  animation: fx-scroll var(--fx-dur, 40s) linear infinite;
  animation-direction: var(--fx-dir, normal);
}
.fx-marquee:hover .fx-track.pausable { animation-play-state: paused; }
@keyframes fx-scroll { to { transform: translateX(-100%); } }

/* Project reel (home) */
.fx-reel-wrap { padding: clamp(50px, 7vw, 90px) 0; background: #050506; }
.fx-reel-wrap .head { width: min(980px, calc(100% - 48px)); margin: 0 auto 26px; }
.fx-reel-wrap .head .eyebrow {
  margin: 0 0 10px; color: var(--purple-soft); font-size: 10px; font-weight: 760;
  letter-spacing: .28em; text-transform: uppercase;
}
.fx-reel-wrap .head h2 { margin: 0; font-size: clamp(24px, 3.2vw, 36px); letter-spacing: -.04em; font-weight: 560; }
.fx-reel { --fx-gap: 18px; }
.fx-reel + .fx-reel { margin-top: 18px; }
.fx-tile {
  position: relative; flex-shrink: 0; width: clamp(240px, 26vw, 360px); aspect-ratio: 16 / 10;
  border-radius: 16px; overflow: hidden; border: 1px solid rgba(255,255,255,.1);
  background: #0c0c0f; text-decoration: none; color: #fff;
  transition: transform .45s cubic-bezier(.2,.8,.2,1), border-color .3s;
}
.fx-tile img { width: 100%; height: 100%; object-fit: cover; display: block;
  filter: saturate(.85) brightness(.8); transition: transform .8s cubic-bezier(.2,.8,.2,1), filter .4s; }
.fx-tile::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(to top, rgba(5,5,6,.92), rgba(5,5,6,.1) 55%, transparent);
}
.fx-tile b {
  position: absolute; left: 16px; right: 16px; bottom: 14px; z-index: 1;
  font-size: 14px; font-weight: 600; letter-spacing: -.01em;
}
.fx-tile b small { display: block; margin-bottom: 4px; color: var(--purple-soft);
  font-size: 9.5px; font-weight: 760; letter-spacing: .22em; text-transform: uppercase; }
.fx-tile:hover { transform: translateY(-6px) scale(1.02); border-color: rgba(183,134,255,.6); }
.fx-tile:hover img { transform: scale(1.08); filter: saturate(1.1) brightness(1); }

/* Logo belt (tools page) */
.fx-belt { padding: 22px 0; border-block: 1px solid rgba(255,255,255,.07); background: rgba(12,12,15,.6); }
.fx-belt .fx-track { --fx-gap: 64px; }
.fx-belt .lg { display: flex; align-items: center; gap: 12px; color: #cfcbd8; white-space: nowrap;
  font-size: 13px; letter-spacing: .14em; text-transform: uppercase; opacity: .75; transition: opacity .3s; }
.fx-belt .lg:hover { opacity: 1; }
.fx-belt .lg img { height: 30px; width: auto; }
.fx-belt .lg.white img { background: #fff; border-radius: 6px; padding: 3px 6px; }
.fx-belt .star { color: var(--purple-soft); }

/* Slim ticker above every footer */
.fx-ticker { padding: 14px 0; border-top: 1px solid rgba(255,255,255,.06); background: #08080a; }
.fx-ticker .fx-track { --fx-gap: 28px; }
.fx-ticker span { color: #8d8896; font-size: 11px; font-weight: 600; letter-spacing: .32em;
  text-transform: uppercase; white-space: nowrap; }
.fx-ticker i { font-style: normal; font-size: 10px; color: var(--purple-soft); opacity: .8; }

/* Home hero: 3D structural frame canvas */
.fx-tower { position: absolute; inset: 0; z-index: 1; pointer-events: none; }

/* ---------- Tilt + glare cards ---------- */
.fx-tilt {
  transform-style: preserve-3d;
  transform: perspective(900px) rotateX(var(--fx-rx, 0deg)) rotateY(var(--fx-ry, 0deg)) translateY(var(--fx-lift, 0px));
  transition: transform .5s cubic-bezier(.2,.8,.2,1), border-color .25s ease, box-shadow .4s ease !important;
  position: relative; overflow: hidden;
}
.fx-tilt.fx-on { --fx-lift: -4px; transition: transform .08s linear, border-color .25s ease, box-shadow .4s ease !important;
  box-shadow: 0 24px 60px -20px rgba(111,32,239,.45); }
.fx-tilt::before {
  content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none; z-index: 2;
  background: radial-gradient(420px circle at var(--fx-gx, 50%) var(--fx-gy, 50%), rgba(183,134,255,.18), transparent 45%);
  opacity: 0; transition: opacity .3s;
}
.fx-tilt.fx-on::before { opacity: 1; }
/* Animated border beam on hover */
.fx-tilt::after {
  content: ""; position: absolute; inset: 0; border-radius: inherit; padding: 1px; pointer-events: none; z-index: 3;
  background: conic-gradient(from var(--fx-ang, 0deg), transparent 0 70%, #b786ff 80%, #fff 85%, #8b3dff 90%, transparent 100%);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor; mask-composite: exclude;
  opacity: 0; transition: opacity .3s;
}
.fx-tilt.fx-on::after { opacity: 1; animation: fx-spin 2.4s linear infinite; }
@property --fx-ang { syntax: "<angle>"; inherits: false; initial-value: 0deg; }
@keyframes fx-spin { to { --fx-ang: 360deg; } }
.family-card.fx-on img { transform: translateZ(30px) scale(1.06); }
.family-card img { transition: transform .5s cubic-bezier(.2,.8,.2,1); }

/* ---------- Buttons: shine sweep + magnetic ---------- */
.btn { position: relative; overflow: hidden; isolation: isolate; }
.btn::after {
  content: ""; position: absolute; top: 0; bottom: 0; left: -60%; width: 40%; z-index: -1;
  background: linear-gradient(100deg, transparent, rgba(255,255,255,.35), transparent);
  transform: skewX(-20deg); transition: left .6s ease;
}
.btn:hover::after { left: 130%; }
.fx-mag { transition: transform .25s cubic-bezier(.2,.8,.2,1), filter .2s ease !important; }

/* ---------- Section headings: underline draw ---------- */
.section h2[data-reveal] { position: relative; display: inline-block; }
.section h2[data-reveal]::after {
  content: ""; position: absolute; left: 0; bottom: -6px; height: 2px; width: 100%;
  background: linear-gradient(90deg, #8b3dff, transparent);
  transform: scaleX(0); transform-origin: 0 50%;
  transition: transform 1s cubic-bezier(.2,.8,.2,1) .25s;
}
.section h2[data-reveal].visible::after { transform: scaleX(1); }
.section h2[data-reveal] + .sub { margin-top: 10px; }
.section-inner > h2[data-reveal] { display: table; }
.section-inner[style*="center"] > h2[data-reveal], .proof h2 { margin-left: auto; margin-right: auto; }

/* ---------- Stats: glowing numbers ---------- */
.stat .n { text-shadow: 0 0 30px rgba(139,61,255,.45); }

/* ---------- Timeline: line fills as you scroll ---------- */
.timeline::after {
  content: ""; position: absolute; left: 9px; top: 6px; width: 2px;
  height: calc((100% - 12px) * var(--fx-tl, 0));
  background: linear-gradient(#b786ff, #6f20ef);
  box-shadow: 0 0 12px rgba(139,61,255,.8); border-radius: 2px;
}

/* ---------- Home: family-section background glow ---------- */
#family { position: relative; }
#family::before {
  content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background: radial-gradient(50% 60% at 50% 40%, rgba(111,32,239,.12), transparent 70%);
}

/* ---------- Reduced motion: everything calm ---------- */
@media (prefers-reduced-motion: reduce) {
  .fx-ready main, .fx-words .w > span, .page-hero .eyebrow, .page-hero .lede { animation: none !important; opacity: 1; transform: none; }
  .fx-aurora i, .fx-grid, .fx-track, .fx-sheen-text { animation: none !important; }
  .fx-marquee { overflow-x: auto; }
  .fx-cursor { display: none; }
  .fx-tilt { transform: none !important; }
}
@media (hover: none), (pointer: coarse) {
  .fx-cursor { display: none; }
}
@media (max-width: 760px) {
  .fx-grid { background-size: 44px 44px; }
  .fx-belt .fx-track { --fx-gap: 30px; }
  .fx-belt .lg img { height: 24px; }
}

/* ---------- Home hero side panels: project map (right) ---------- */
.fx-map {
  position: absolute; z-index: 3; pointer-events: none;
  border: 1px solid rgba(183,134,255,.16); border-radius: 14px;
  background: rgba(12,11,16,.42);
  -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
  opacity: calc((1 - var(--finish, 0)) * .82);
  box-shadow: 0 20px 60px -30px rgba(111,32,239,.6);
}
.fx-map { right: clamp(90px, 7vw, 120px); bottom: 7vh; width: 300px; padding: 10px 12px 12px; }
.fx-map .hd { display: flex; justify-content: space-between; margin-bottom: 6px;
  color: #8d8896; font: 600 9.5px ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; letter-spacing: .16em; text-transform: uppercase; }
.fx-map .hd .n { color: var(--purple-soft); }
.fx-map canvas { display: block; width: 100%; height: 130px; }
@media (max-width: 1100px), (max-height: 760px) {
  .fx-map { display: none; }
}