/* ============================================================================
   TriggerFlex Engines — base styles. These are STRUCTURAL (they make the engines
   work). Colours/fonts here are neutral placeholders — override the :root tokens
   with your brand and restyle freely. Nothing here is copied from a paid theme.
   ========================================================================== */
:root {
  --flex-bg: #0E0D0C;      /* page background            */
  --flex-fg: #F3ECDD;      /* text                       */
  --flex-accent: #C2A878;  /* single accent (brass)      */
  --flex-line: rgba(243, 236, 221, .14);
  --flex-radius: 14px;
}

/* Reveal: hide reveal targets until JS wires them, so there's no flash of the
   final state before the animation runs. TriggerFlex removes .flex-prep on init. */
.flex-prep [data-flex-reveal],
.flex-prep [data-flex-stagger] > * { opacity: 0; }

/* A generic full-viewport-ish stage, handy for heroes / trail zones. */
.flex-stage { position: relative; min-height: 88vh; overflow: hidden; }

/* ENGINE 4 — Snap: the section is one viewport tall; the track is a horizontal
   flex row of full-bleed slides that GSAP drags through and snaps. */
[data-flex-snap] { position: relative; height: 100vh; overflow: hidden; }
[data-flex-snap] .flex-snap-track { display: flex; height: 100%; width: max-content; will-change: transform; }
[data-flex-snap] [data-flex-snap-slide] { flex: 0 0 100vw; height: 100vh; position: relative; overflow: hidden; }

/* ENGINE 3 — Stack: cards are relatively-positioned blocks; JS pins + scales them. */
[data-flex-stack] { position: relative; }
[data-flex-stack] [data-flex-stack-card] { will-change: transform; transform-origin: center top; }

/* ENGINE 5 — Image Trail: the zone is the mouse area; each image is an absolutely
   positioned box painted with a background-image. Resize .flex-trail-img to taste. */
[data-flex-trail] { position: relative; overflow: hidden; }
[data-flex-trail] [data-flex-trail-img] {
  position: absolute; top: 0; left: 0;
  width: 225px; height: 170px;              /* <- the knob: trail image size */
  border-radius: 10px; background-size: cover; background-position: 50% 50%;
  pointer-events: none; will-change: transform, opacity;
}

/* ENGINE 8 — Hover-Reveal: the floating image that tracks the cursor over a list. */
.flex-hover-cursor {
  position: absolute; top: 0; left: 0; width: 300px; height: 220px; margin: -110px 0 0 -150px;
  border-radius: 12px; background-size: cover; background-position: 50% 50%;
  pointer-events: none; z-index: 5; will-change: transform, opacity;
}

/* ENGINE 6 — Throwable: the bin, and the chips that fall into it. */
[data-flex-throwable] { position: relative; min-height: 60vh; overflow: hidden; }
[data-flex-throwable] [data-flex-throwable-item] {
  display: inline-flex; align-items: center; justify-content: center;
  padding: 14px 26px; border: 1px solid var(--flex-accent); border-radius: 40px;
  color: var(--flex-fg); font-size: 15px; white-space: nowrap; user-select: none;
}

/* Magnetic targets just need to be transform-friendly. */
[data-flex-magnetic] { display: inline-flex; will-change: transform; }

/* ENGINE 9 — Kinetic Type: lines clip the rise, chars are the moving pieces. */
[data-flex-kinetic] .fx-kline { display: block; overflow: hidden; }
[data-flex-kinetic] .fx-kchar { display: inline-block; will-change: transform; }

/* ENGINE 10 — Mosaic: children are the tiles JS scatters and reassembles. */
[data-flex-mosaic] > * { will-change: transform; }

/* ENGINE 11 — Spotlight: put a .flex-spot-layer (background-image) inside; the
   radial mask follows the cursor via the --mx/--my vars JS sets. */
[data-flex-spotlight] { position: relative; overflow: hidden; }
[data-flex-spotlight] .flex-spot-layer {
  position: absolute; inset: 0; background-size: cover; background-position: 50% 50%;
  -webkit-mask-image: radial-gradient(circle 190px at var(--mx,50%) var(--my,50%), #000 0, rgba(0,0,0,.15) 60%, transparent 72%);
          mask-image: radial-gradient(circle 190px at var(--mx,50%) var(--my,50%), #000 0, rgba(0,0,0,.15) 60%, transparent 72%);
}

/* ENGINE 12 — Marquee: the wrapper hides overflow; JS duplicates + loops the inner. */
[data-flex-marquee] { overflow: hidden; white-space: nowrap; }
[data-flex-marquee] > * { display: inline-block; white-space: nowrap; will-change: transform; }

/* ENGINE 13 — Velocity Skew */
[data-flex-skew] { will-change: transform; }

/* ENGINE 14 — Scroll Wipe: stack two images; mark the top one to be clipped open. */
[data-flex-wipe] { position: relative; }
[data-flex-wipe] [data-flex-wipe-top] { clip-path: inset(0 100% 0 0); }