/* =================================================================
   SITE FX — "Ziben-style" immersive layer for AMDG Core
   Self-contained. Loaded after style.min.css on the portfolio page AND home.
   Brand palette kept (navy + gold). Inspired by ziben.fr interaction language:
   smooth scroll, custom cursor, animated boreal gradient, masked card reveals,
   magnetic arrows, infinite marquee, branded preloader, scroll progress.
   Works on two card systems: portfolio (.portfolio-card) + home (.sb-portfolio-card).
   Everything degrades gracefully: no-JS and reduced-motion users get a clean page.
   ================================================================= */

:root {
  --fx-teal: #4fd1c5;
  --fx-violet: #8b7bd8;
}

/* The body only "activates" FX once JS confirms support (pointer + motion). */
body.fx-on { cursor: none; }

/* ----------------------------------------------------------------
   1. SCROLL PROGRESS BAR (top hairline that fills as you scroll)
   ---------------------------------------------------------------- */
.fx-progress {
  position: fixed; top: 0; left: 0; height: 2px; width: 0%;
  background: linear-gradient(90deg, var(--gold), var(--fx-teal));
  z-index: 9999; pointer-events: none;
  box-shadow: 0 0 12px rgba(236,200,101,.55);
  transition: width .1s linear;
}

/* ----------------------------------------------------------------
   2. CUSTOM CURSOR (dot + trailing ring; "VIEW" state over cards)
   ---------------------------------------------------------------- */
.fx-cursor-dot,
.fx-cursor-ring {
  position: fixed; top: 0; left: 0; z-index: 10000;
  pointer-events: none; border-radius: 50%;
  transform: translate3d(-50%, -50%, 0);
  will-change: transform, width, height, opacity;
}
.fx-cursor-dot {
  width: 7px; height: 7px; background: var(--gold);
  transition: opacity .25s, transform .08s;
}
.fx-cursor-ring {
  width: 36px; height: 36px;
  border: 1.5px solid rgba(236,200,101,.55);
  transition: width .3s cubic-bezier(.16,1,.3,1),
              height .3s cubic-bezier(.16,1,.3,1),
              background .3s, border-color .3s, opacity .25s;
  display: grid; place-items: center;
}
.fx-cursor-ring .fx-cursor-label {
  font-family: 'Outfit', sans-serif;
  font-size: .58rem; font-weight: 700; letter-spacing: .12em;
  text-transform: uppercase; color: var(--navy);
  opacity: 0; transform: scale(.6); transition: opacity .25s, transform .25s;
  white-space: nowrap;
}
/* Hover state over interactive elements */
body.fx-cursor-hover .fx-cursor-ring {
  width: 54px; height: 54px;
  border-color: var(--gold);
  background: rgba(236,200,101,.12);
}
/* "VIEW" state over project cards */
body.fx-cursor-view .fx-cursor-ring {
  width: 88px; height: 88px;
  background: var(--gold); border-color: var(--gold);
}
body.fx-cursor-view .fx-cursor-ring .fx-cursor-label { opacity: 1; transform: scale(1); }
body.fx-cursor-view .fx-cursor-dot { opacity: 0; }

/* ----------------------------------------------------------------
   3. BOREAL ANIMATED GRADIENT behind a hero
   ---------------------------------------------------------------- */
.portfolio-hero { position: relative; overflow: hidden; }
.sb-hero { position: relative; }               /* home hero: no overflow:hidden (floating video can overhang) */
/* Boreal gradient — pure CSS (compositor-only). Two blurred layers of
   radial auroras drifting via transform keyframes. No canvas, no per-frame
   JS: this replaced a canvas version that pegged the main thread (TBT). */
.fx-gradient {
  position: absolute; inset: 0; z-index: 0; pointer-events: none;
  overflow: hidden; background: var(--navy);
}
.fx-gradient span {
  position: absolute; inset: -30%; display: block;
  will-change: transform; backface-visibility: hidden;
}
.fx-gradient .fx-gradient-l1 {
  background:
    radial-gradient(38% 50% at 28% 38%, rgba(236,200,101,.30), transparent 70%),
    radial-gradient(42% 55% at 82% 18%, rgba(236,200,101,.16), transparent 70%);
  filter: blur(34px);
  animation: fx-grad-drift-a 26s ease-in-out infinite alternate;
}
.fx-gradient .fx-gradient-l2 {
  background:
    radial-gradient(46% 60% at 72% 60%, rgba(79,209,197,.22), transparent 72%),
    radial-gradient(40% 50% at 50% 22%, rgba(139,123,216,.18), transparent 72%);
  filter: blur(40px);
  animation: fx-grad-drift-b 32s ease-in-out infinite alternate;
}
@keyframes fx-grad-drift-a {
  0%   { transform: translate3d(-4%, -3%, 0) scale(1.05); }
  100% { transform: translate3d(5%, 4%, 0) scale(1.15); }
}
@keyframes fx-grad-drift-b {
  0%   { transform: translate3d(4%, 3%, 0) scale(1.12); }
  100% { transform: translate3d(-5%, -4%, 0) scale(1.02); }
}
/* keep all home hero content above the canvas */
.sb-hero > .sb-hero-inner,
.sb-hero > .trust-bar,
.sb-hero > .sb-hero-scroll { position: relative; z-index: 2; }

/* Soft vignette so the gradient melts into the navy (portfolio hero only) */
.portfolio-hero::after {
  content: ''; position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background:
    radial-gradient(120% 80% at 50% -10%, transparent 40%, var(--navy) 100%),
    linear-gradient(180deg, transparent 60%, var(--navy) 100%);
}
.portfolio-hero > .container { position: relative; z-index: 2; }

/* Kicker gets a soft live pulse (portfolio hero) */
.portfolio-hero-kicker::after {
  content: ''; display: inline-block; width: 6px; height: 6px;
  margin-left: .6rem; border-radius: 50%; background: var(--fx-teal);
  box-shadow: 0 0 0 0 rgba(79,209,197,.7);
  animation: fx-live-pulse 2.4s ease-out infinite;
}
@keyframes fx-live-pulse {
  0%   { box-shadow: 0 0 0 0 rgba(79,209,197,.6); }
  70%  { box-shadow: 0 0 0 9px rgba(79,209,197,0); }
  100% { box-shadow: 0 0 0 0 rgba(79,209,197,0); }
}

/* ----------------------------------------------------------------
   4. CARD ENHANCEMENTS (masked reveal + sheen + arrow badge)
      Supports portfolio cards (.portfolio-card) + home cards (.sb-portfolio-card)
   ---------------------------------------------------------------- */
.portfolio-card.fx-card, .sb-portfolio-card.fx-card { position: relative; }

/* Image masked reveal: clip-path wipes up when the card enters view */
.fx-card .portfolio-card-thumb img,
.fx-card .portfolio-card-ba-side img,
.fx-card .sb-portfolio-img {
  clip-path: inset(0 0 100% 0);
  transform: scale(1.04);
  transition: clip-path .6s cubic-bezier(.16,1,.3,1),
              transform .6s cubic-bezier(.16,1,.3,1);
}
.fx-card.fx-in .portfolio-card-thumb img,
.fx-card.fx-in .portfolio-card-ba-side img,
.fx-card.fx-in .sb-portfolio-img {
  clip-path: inset(0 0 0% 0);
  transform: scale(1);
}
/* keep the existing :hover zoom working on top of the revealed state */
.fx-card.fx-in:hover .portfolio-card-thumb img,
.fx-card.fx-in:hover .portfolio-card-ba-side img { transform: scale(1.05); }

/* Diagonal gold sheen sweep on hover.
   Portfolio uses ::before on the thumb; home gets ::after on .sb-portfolio-img
   (its ::before is already used by the existing design). */
.fx-card .portfolio-card-thumb,
.fx-card .portfolio-card-ba,
.fx-card .sb-portfolio-img { position: relative; overflow: hidden; }
.fx-card .portfolio-card-thumb::before,
.fx-card .portfolio-card-ba::before,
.fx-card .sb-portfolio-img::after {
  content: ''; position: absolute; inset: 0; z-index: 4; pointer-events: none;
  background: linear-gradient(115deg, transparent 30%,
              rgba(236,200,101,.28) 48%, rgba(255,255,255,.18) 52%, transparent 70%);
  transform: translateX(-120%); transition: transform .9s cubic-bezier(.16,1,.3,1);
}
.fx-card:hover .portfolio-card-thumb::before,
.fx-card:hover .portfolio-card-ba::before,
.fx-card:hover .sb-portfolio-img::after { transform: translateX(120%); }

/* Floating arrow badge that springs in on hover (skips coming-soon cards) */
.fx-card:not(.portfolio-card--soon) .fx-arrow-badge {
  position: absolute; top: 14px; right: 14px; z-index: 5;
  width: 42px; height: 42px; border-radius: 50%;
  display: grid; place-items: center;
  background: var(--gold); color: var(--navy);
  opacity: 0; transform: scale(.4) rotate(-35deg);
  transition: opacity .4s cubic-bezier(.16,1,.3,1), transform .4s cubic-bezier(.16,1,.3,1);
  box-shadow: 0 8px 24px rgba(236,200,101,.35);
}
.fx-card:not(.portfolio-card--soon):hover .fx-arrow-badge {
  opacity: 1; transform: scale(1) rotate(0deg);
}
.fx-arrow-badge svg { width: 18px; height: 18px; stroke: currentColor; fill: none; stroke-width: 2.5; }

/* Accent glow border keyed to a per-card accent colour */
.fx-card { --card-accent: var(--gold); }
.fx-card:hover {
  border-color: var(--card-accent) !important;
  box-shadow: 0 18px 50px -12px color-mix(in srgb, var(--card-accent) 30%, transparent) !important;
}

/* ----------------------------------------------------------------
   5. INFINITE MARQUEE band
   ---------------------------------------------------------------- */
.fx-marquee {
  background: var(--bg-alt);
  border-top: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
  overflow: hidden; padding: var(--sp-md) 0;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent);
          mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent);
}
.fx-marquee-track {
  display: flex; width: max-content; gap: 0;
  animation: fx-marquee-scroll 38s linear infinite;
}
.fx-marquee:hover .fx-marquee-track { animation-play-state: paused; }
.fx-marquee-item {
  display: inline-flex; align-items: center;
  font-family: 'Cormorant Garamond', 'Fraunces', Georgia, serif;
  font-size: 1.9rem; font-weight: 600; font-style: italic;
  color: var(--text); padding: 0 1.4rem; white-space: nowrap;
}
.fx-marquee-item::after {
  content: '✦'; font-style: normal; font-size: .9rem;
  color: var(--gold); margin-left: 2.8rem;
}
@keyframes fx-marquee-scroll {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}

/* ----------------------------------------------------------------
   6. MAGNETIC elements (JS drives translate; CSS just smooths return)
   ---------------------------------------------------------------- */
.fx-magnetic { transition: transform .35s cubic-bezier(.16,1,.3,1); will-change: transform; }

/* ----------------------------------------------------------------
   7. BRANDED PRELOADER
   ---------------------------------------------------------------- */
.fx-preloader {
  /* Disabled — pages load directly with no branded overlay. */
  display: none !important;
}
.fx-preloader.fx-done { opacity: 0; visibility: hidden; }
.fx-preloader-logo {
  width: 64px; height: 64px;
  animation: fx-pre-float 2.4s ease-in-out infinite;
  filter: drop-shadow(0 0 18px rgba(236,200,101,.35));
}
@keyframes fx-pre-float {
  0%,100% { transform: translateY(0) scale(1); }
  50%     { transform: translateY(-8px) scale(1.04); }
}
.fx-preloader-word {
  font-family: 'Outfit', sans-serif; font-size: .7rem; font-weight: 600;
  letter-spacing: .42em; text-transform: uppercase; color: var(--text-muted);
  padding-left: .42em;
}
.fx-preloader-bar {
  width: 180px; height: 2px; background: rgba(255,255,255,.1);
  border-radius: 2px; overflow: hidden;
}
.fx-preloader-bar span {
  display: block; height: 100%; width: 0%;
  background: linear-gradient(90deg, var(--gold), var(--fx-teal));
  transition: width .25s ease;
}

/* ----------------------------------------------------------------
   8. ACCESSIBILITY / FALLBACKS
   ---------------------------------------------------------------- */
@media (hover: none), (pointer: coarse) {
  .fx-cursor-dot, .fx-cursor-ring { display: none !important; }
  body.fx-on { cursor: auto; }
}
@media (prefers-reduced-motion: reduce) {
  .fx-gradient span { animation: none !important; }
  .fx-marquee-track { animation: none; transform: none; }
  .fx-card .portfolio-card-thumb img,
  .fx-card .portfolio-card-ba-side img,
  .fx-card .sb-portfolio-img { clip-path: none; transform: none; }
  .fx-card .portfolio-card-thumb::before,
  .fx-card .portfolio-card-ba::before,
  .fx-card .sb-portfolio-img::after { display: none; }
  .portfolio-hero-kicker::after { animation: none; }
  .fx-preloader { display: none; }
}