/* ============================================================
   motion.css — cinematic layer for softhireapp.com
   Loaded once per page. Reuses existing --navy / --gold tokens.
   All keyframes transform/opacity only. Reduced-motion friendly.
   ============================================================ */

/* ---------- Reduce-motion baseline ---------- */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
    scroll-behavior: auto !important;
  }
}

/* ---------- Initial hidden states for motion-tagged elements ----------
   Ensures no flash of un-animated content while motion.js is parsing. */
[data-motion="fade"],
[data-motion="stagger"] > *,
[data-motion="split-words"] .mt-word,
[data-motion="path-draw"] path,
[data-motion="path-draw"] line,
[data-motion="path-draw"] polyline {
  opacity: 0;
}
[data-motion="fade"],
[data-motion="stagger"] > * {
  transform: translate3d(0, 16px, 0);
  transition: opacity .6s cubic-bezier(.16,1,.3,1), transform .7s cubic-bezier(.16,1,.3,1);
  will-change: opacity, transform;
}
[data-motion="fade"].is-in,
[data-motion="stagger"] > .is-in {
  opacity: 1;
  transform: translate3d(0, 0, 0);
}

[data-motion="split-words"] .mt-word {
  display: inline-block;
  transform: translate3d(0, 12px, 0);
  filter: blur(6px);
  transition: opacity .6s cubic-bezier(.16,1,.3,1), transform .7s cubic-bezier(.16,1,.3,1), filter .7s cubic-bezier(.16,1,.3,1);
  will-change: opacity, transform, filter;
}
[data-motion="split-words"] .mt-word.is-in {
  opacity: 1;
  transform: translate3d(0, 0, 0);
  filter: blur(0);
}

/* SVG path-draw primitive — applied to line/path/polyline inside */
[data-motion="path-draw"] path,
[data-motion="path-draw"] line,
[data-motion="path-draw"] polyline {
  stroke-dasharray: var(--mt-len, 1000);
  stroke-dashoffset: var(--mt-len, 1000);
  opacity: 1;
  transition: stroke-dashoffset 1.2s cubic-bezier(.16,1,.3,1);
}
[data-motion="path-draw"].is-in path,
[data-motion="path-draw"].is-in line,
[data-motion="path-draw"].is-in polyline {
  stroke-dashoffset: 0;
}

/* Shimmer — gold sweep across italic accent tokens */
.mt-shimmer, [data-motion-shimmer] {
  background-image: linear-gradient(
    90deg,
    var(--gold-light, #F0B429) 0%,
    var(--gold-light, #F0B429) 35%,
    #FFE9A8 45%,
    #FFF6D9 50%,
    #FFE9A8 55%,
    var(--gold-light, #F0B429) 65%,
    var(--gold-light, #F0B429) 100%
  );
  background-size: 250% 100%;
  background-position: 100% 0;
  -webkit-background-clip: text;
          background-clip: text;
  -webkit-text-fill-color: transparent;
          color: transparent;
  transition: background-position 0s;
}
.mt-shimmer.is-shimmered, [data-motion-shimmer].is-shimmered {
  background-position: 0 0;
  transition: background-position 1.1s cubic-bezier(.22,1,.36,1);
}

/* Ken Burns */
[data-motion="kenburns"] {
  transform-origin: 50% 50%;
  animation: mt-kenburns 14s cubic-bezier(.35,0,.2,1) infinite alternate;
}
@keyframes mt-kenburns {
  from { transform: scale(1.0) translate3d(0,0,0); }
  to   { transform: scale(1.06) translate3d(-1%, -1%, 0); }
}

/* Parallax layers update their transform from JS (rAF) */
[data-motion="parallax"] { will-change: transform; }

/* ---------- Grain overlay (fixed, 3% opacity, decorative) ---------- */
.mt-grain {
  position: fixed;
  inset: 0;
  z-index: 9997;
  pointer-events: none;
  opacity: .035;
  mix-blend-mode: overlay;
  /* SVG fractal noise, inline */
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='240' height='240'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/></filter><rect width='100%25' height='100%25' filter='url(%23n)' opacity='0.9'/></svg>");
  background-size: 240px 240px;
}
@media (prefers-reduced-motion: reduce) {
  .mt-grain { display: none; }
}

/* ---------- Custom gold cursor (desktop fine-pointer only) ---------- */
.mt-cursor-dot,
.mt-cursor-ring {
  position: fixed;
  top: 0; left: 0;
  pointer-events: none;
  z-index: 10000;
  mix-blend-mode: normal;
  transform: translate3d(-50%, -50%, 0);
  will-change: transform;
}
.mt-cursor-dot {
  width: 6px; height: 6px;
  background: var(--gold, #C8960C);
  border-radius: 50%;
  box-shadow: 0 0 10px 1px rgba(240, 180, 41, .5);
  transition: opacity .2s, transform .18s cubic-bezier(.25,1,.3,1), background .2s;
}
.mt-cursor-ring {
  width: 36px; height: 36px;
  border: 1.5px solid rgba(240, 180, 41, .55);
  border-radius: 50%;
  transition: transform .22s cubic-bezier(.22,1,.36,1), opacity .22s, border-color .2s, width .22s, height .22s;
}
body.mt-cursor-expand .mt-cursor-ring {
  transform: translate3d(-50%, -50%, 0) scale(1.8);
  border-color: rgba(240, 180, 41, .9);
}
body.mt-cursor-expand .mt-cursor-dot {
  transform: translate3d(-50%, -50%, 0) scale(.4);
}
@media (hover: none), (pointer: coarse), (prefers-reduced-motion: reduce) {
  .mt-cursor-dot, .mt-cursor-ring { display: none; }
}

/* ---------- Page-load intro overlay ---------- */
#mt-intro {
  position: fixed;
  inset: 0;
  z-index: 9999;
  background: var(--navy, #020113);
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}
#mt-intro .mt-sweep {
  position: absolute;
  left: -30%;
  top: 50%;
  width: 0;
  height: 1px;
  background: linear-gradient(
    90deg,
    transparent 0%,
    rgba(240, 180, 41, .25) 20%,
    rgba(240, 180, 41, 1) 50%,
    rgba(240, 180, 41, .25) 80%,
    transparent 100%
  );
  box-shadow: 0 0 24px rgba(240, 180, 41, .6);
  transform: translateY(-50%);
  animation: mt-intro-sweep 900ms cubic-bezier(.8,0,.2,1) forwards;
}
#mt-intro .mt-wordmark {
  font-family: 'Cormorant Garamond', Georgia, serif;
  font-style: italic;
  font-weight: 500;
  font-size: clamp(32px, 5vw, 56px);
  color: var(--gold-light, #F0B429);
  opacity: 0;
  transform: scale(.96);
  letter-spacing: .01em;
  text-shadow: 0 0 40px rgba(240, 180, 41, .35);
  animation: mt-intro-wordmark 420ms 900ms cubic-bezier(.16,1,.3,1) forwards;
}
#mt-intro.mt-intro-out {
  animation: mt-intro-out 420ms 1320ms cubic-bezier(.8,0,.2,1) forwards;
}
@keyframes mt-intro-sweep {
  0%   { width: 0; left: -10%; opacity: 0; }
  30%  { opacity: 1; }
  100% { width: 130vw; left: 100%; opacity: 0; }
}
@keyframes mt-intro-wordmark {
  to { opacity: 1; transform: scale(1); }
}
@keyframes mt-intro-out {
  to { opacity: 0; visibility: hidden; transform: scale(1.04); }
}
@media (prefers-reduced-motion: reduce) {
  #mt-intro { display: none !important; }
}

/* ---------- Magnetic button affordance ---------- */
[data-motion="magnetic"] {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: transform .28s cubic-bezier(.22,1,.36,1), box-shadow .3s;
  will-change: transform;
}

/* ---------- Focus rings (accessibility) ---------- */
a:focus-visible, button:focus-visible, [data-motion]:focus-visible {
  outline: 2px solid var(--gold, #C8960C);
  outline-offset: 3px;
  border-radius: 4px;
}

/* ---------- Gold breathe (pricing "most popular" card) ---------- */
.mt-breathe {
  animation: mt-breathe 2.4s cubic-bezier(.45,.05,.55,.95) infinite;
}
@keyframes mt-breathe {
  0%, 100% { box-shadow: 0 0 0 1px rgba(200, 150, 12, .55), 0 0 30px -6px rgba(200, 150, 12, .3); }
  50%      { box-shadow: 0 0 0 1px rgba(240, 180, 41, 1),   0 0 42px -4px rgba(240, 180, 41, .55); }
}

/* ============================================================
   CINEMATIC CARD STACK — Netflix/Remotion-style entrance
   Applied to parent grid via data-motion="card-stack".
   Children animate in sequence with 3D perspective, rotation, and scale.
   ============================================================ */
[data-motion="card-stack"] {
  perspective: 1400px;
  transform-style: preserve-3d;
}
[data-motion="card-stack"] > * {
  opacity: 0;
  transform: translate3d(0, 80px, -120px) rotateX(25deg) scale(.86);
  transform-origin: 50% 100%;
  transition:
    opacity .9s cubic-bezier(.16,1,.3,1),
    transform 1.1s cubic-bezier(.16,1,.3,1);
  will-change: opacity, transform;
}
[data-motion="card-stack"] > .is-in {
  opacity: 1;
  transform: translate3d(0, 0, 0) rotateX(0deg) scale(1);
}

/* Per-card hover: 3D tilt (updated via JS mousemove), lift, inner glow */
[data-motion="tilt"] {
  position: relative;
  transform-style: preserve-3d;
  transition: transform .35s cubic-bezier(.22,1,.36,1), box-shadow .35s;
  will-change: transform;
}
[data-motion="tilt"]::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: radial-gradient(
    600px circle at var(--mx, 50%) var(--my, 50%),
    rgba(240,180,41,0.14),
    transparent 40%
  );
  opacity: 0;
  transition: opacity .35s;
  pointer-events: none;
  z-index: 1;
}
[data-motion="tilt"]:hover::before { opacity: 1; }

/* ============================================================
   HOW-IT-WORKS specific dressing
   ============================================================ */
.how-grid {
  position: relative;
  z-index: 1;
}
/* Ghost step number behind each card — huge, low opacity, counts-up */
.how-card {
  position: relative;
  overflow: hidden;
  isolation: isolate;
}
.how-card .how-num {
  position: relative;
  z-index: 2;
  transition: color .4s, text-shadow .4s, transform .4s cubic-bezier(.22,1,.36,1);
}
.how-card.is-in .how-num {
  color: var(--gold-light, #F0B429);
  text-shadow:
    0 0 24px rgba(240, 180, 41, .55),
    0 0 1px rgba(240, 180, 41, .8);
}
.how-card.is-in .how-num { animation: mt-num-birth .9s cubic-bezier(.2, .9, .2, 1.2) both; }
@keyframes mt-num-birth {
  0%   { transform: translateY(14px) scale(.6); letter-spacing: -.04em; }
  70%  { transform: translateY(-2px) scale(1.08); letter-spacing: 0; }
  100% { transform: translateY(0) scale(1); letter-spacing: -.02em; }
}

.how-card .how-icon {
  position: relative;
  transition: transform .5s cubic-bezier(.22,1,.36,1), box-shadow .5s;
}
.how-card.is-in .how-icon {
  animation: mt-icon-pulse 1.6s ease-out .2s both;
}
@keyframes mt-icon-pulse {
  0%   { box-shadow: 0 0 0 0 rgba(240, 180, 41, .45), inset 0 0 0 0 rgba(240, 180, 41, 0); transform: scale(.82); }
  35%  { box-shadow: 0 0 30px 6px rgba(240, 180, 41, .35), inset 0 0 20px 2px rgba(240, 180, 41, .12); transform: scale(1.06); }
  100% { box-shadow: 0 0 14px 2px rgba(240, 180, 41, .22), inset 0 0 0 0 rgba(240, 180, 41, 0); transform: scale(1); }
}

/* Thin vertical progress line on card left edge — draws as cards reveal */
.how-card::after {
  content: "";
  position: absolute;
  left: 0; top: 0; bottom: 0;
  width: 2px;
  background: linear-gradient(180deg,
    rgba(240,180,41,0) 0%,
    rgba(240,180,41,.8) 12%,
    rgba(240,180,41,.2) 100%);
  transform-origin: top;
  transform: scaleY(0);
  transition: transform .9s cubic-bezier(.16,1,.3,1) .2s;
}
.how-card.is-in::after { transform: scaleY(1); }

.how-card:hover { transform: translateY(-6px) rotateX(-2deg) rotateY(2deg); }

/* ============================================================
   PROBLEM SECTION dressing — image parallax, stats count-up, atmosphere
   ============================================================ */
.problem-img {
  position: relative;
  overflow: hidden;
  border-radius: 20px;
  will-change: transform;
}
.problem-img::after {
  content: "";
  position: absolute;
  inset: -20%;
  background: radial-gradient(
    ellipse at 50% 70%,
    rgba(200, 150, 12, .10),
    transparent 60%);
  pointer-events: none;
  mix-blend-mode: screen;
  opacity: .6;
}
.problem-img img {
  transition: transform 1.2s cubic-bezier(.16,1,.3,1);
  will-change: transform;
}
/* Subtle image scale-in on IO */
.problem-grid.is-in .problem-img img { animation: mt-image-birth 1.4s cubic-bezier(.16,1,.3,1) both; }
@keyframes mt-image-birth {
  0%   { transform: scale(1.08); opacity: 0; filter: saturate(.7); }
  100% { transform: scale(1);    opacity: 1; filter: saturate(1); }
}

.stat-num[data-motion="count"] {
  display: inline-block;
  font-variant-numeric: tabular-nums;
  opacity: 0;
  transform: translateY(8px);
  transition: opacity .5s, transform .6s;
}
.stat-num[data-motion="count"].is-in {
  opacity: 1;
  transform: translateY(0);
}
.stat-num[data-motion="count"].mt-flash {
  animation: mt-stat-flash .8s ease-out both;
}
@keyframes mt-stat-flash {
  0%   { text-shadow: 0 0 0 rgba(240,180,41,0); }
  40%  { text-shadow: 0 0 22px rgba(240,180,41,.65); }
  100% { text-shadow: 0 0 0 rgba(240,180,41,0); }
}

/* Paragraph stagger inside the right column of .problem-grid */
.problem-grid [data-motion="paragraph-stagger"] > * {
  opacity: 0;
  transform: translate3d(0, 14px, 0);
  transition: opacity .55s cubic-bezier(.16,1,.3,1), transform .6s cubic-bezier(.16,1,.3,1);
}
.problem-grid [data-motion="paragraph-stagger"] > .is-in {
  opacity: 1; transform: translate3d(0,0,0);
}

/* Reduced-motion friendly: kill the 3D + translate for card stacks */
@media (prefers-reduced-motion: reduce) {
  [data-motion="card-stack"] > * { transform: none !important; opacity: 1 !important; }
  [data-motion="tilt"]:hover { transform: none !important; }
  .how-card.is-in .how-num, .how-card.is-in .how-icon { animation: none !important; }
  .problem-grid.is-in .problem-img img { animation: none !important; }
}

/* ============================================================
   PROBLEM SECTION — full visual revamp (dark cinematic)
   ============================================================ */
#problem {
  background: linear-gradient(180deg, #020113 0%, #05051e 50%, #020113 100%) !important;
  color: #fff !important;
  position: relative;
  overflow: hidden;
  padding-top: 120px !important;
  padding-bottom: 140px !important;
}
/* Atmospheric gold orbs floating in the bg */
#problem::before,
#problem::after {
  content: "";
  position: absolute;
  border-radius: 50%;
  pointer-events: none;
  filter: blur(70px);
  opacity: .35;
  z-index: 0;
}
#problem::before {
  top: 8%; left: -10%;
  width: 520px; height: 520px;
  background: radial-gradient(circle, rgba(240,180,41,.55), rgba(240,180,41,0) 70%);
  animation: mt-orb-float-1 18s ease-in-out infinite alternate;
}
#problem::after {
  bottom: 10%; right: -6%;
  width: 620px; height: 620px;
  background: radial-gradient(circle, rgba(100,185,255,.28), rgba(100,185,255,0) 70%);
  animation: mt-orb-float-2 22s ease-in-out infinite alternate;
}
@keyframes mt-orb-float-1 {
  0%   { transform: translate(0,0)     scale(1); }
  100% { transform: translate(30px,-40px) scale(1.1); }
}
@keyframes mt-orb-float-2 {
  0%   { transform: translate(0,0)     scale(1); }
  100% { transform: translate(-40px,30px) scale(.92); }
}
#problem > .container { position: relative; z-index: 2; }

/* Rebuild problem-grid: stack image above, then the revamped content below,
   so we can use a completely new layout for the dark treatment. */
#problem .problem-grid {
  grid-template-columns: 0.85fr 1fr !important;
  gap: 72px !important;
  align-items: start !important;
}
#problem .problem-img {
  border-radius: 22px !important;
  aspect-ratio: 4/3 !important;
  position: relative;
  overflow: hidden;
  border: 1px solid rgba(240,180,41,.18);
  box-shadow:
    0 30px 80px rgba(0,0,0,.65),
    0 0 0 1px rgba(240,180,41,.08),
    inset 0 0 140px rgba(0,0,0,.4);
}
#problem .problem-img::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(180deg, rgba(2,1,19,0) 40%, rgba(2,1,19,.55) 100%),
    radial-gradient(ellipse at 50% 120%, rgba(240,180,41,.25), transparent 60%);
  z-index: 2;
  pointer-events: none;
}
#problem .problem-img::after {
  /* Disable the cream-era light gradient */
  display: none;
}
/* Animated diagonal gold scan line sweeping across the portrait */
#problem .problem-img .mt-scan-overlay {
  position: absolute;
  inset: 0;
  z-index: 3;
  pointer-events: none;
  overflow: hidden;
}
#problem .problem-img .mt-scan-overlay::before {
  content: "";
  position: absolute;
  left: -40%; top: -40%;
  width: 30%; height: 180%;
  background: linear-gradient(
    110deg,
    transparent 0%,
    rgba(240,180,41,0) 35%,
    rgba(240,180,41,.35) 49%,
    rgba(255,240,190,.55) 50%,
    rgba(240,180,41,.35) 51%,
    rgba(240,180,41,0) 65%,
    transparent 100%);
  transform: rotate(18deg);
  animation: mt-scan-sweep 7s cubic-bezier(.6,0,.2,1) infinite;
  mix-blend-mode: screen;
}
@keyframes mt-scan-sweep {
  0%   { left: -40%; opacity: 0; }
  10%  { opacity: 1; }
  60%  { opacity: 1; }
  70%  { left: 120%; opacity: 0; }
  100% { left: 120%; opacity: 0; }
}

/* Problem h2 + paragraphs for dark */
#problem .problem-h2 { color: #fff !important; font-size: clamp(34px, 3.4vw, 54px) !important; line-height: 1.1 !important; }
#problem .problem-h2 em { color: var(--gold-light, #F0B429) !important; }
#problem .problem-p { color: rgba(255,255,255,.72) !important; font-size: 17px !important; line-height: 1.75 !important; }
#problem .problem-p strong { color: #fff !important; font-weight: 600 !important; }
#problem .eyebrow { color: var(--gold-light, #F0B429) !important; }

/* Stats revamp — oversized, each with ghost numeral backdrop */
#problem .problem-stat {
  border-top: 1px solid rgba(240,180,41,.18) !important;
  margin-top: 48px !important;
  padding-top: 40px !important;
  gap: 48px !important;
  flex-wrap: wrap;
}
#problem .stat-item {
  position: relative;
  flex: 1;
  min-width: 160px;
  padding: 8px 0;
}
#problem .stat-item::before {
  content: "";
  position: absolute;
  top: -8px;
  left: 0;
  width: 32px;
  height: 2px;
  background: linear-gradient(90deg, var(--gold-light, #F0B429), transparent);
}
#problem .stat-num {
  font-size: clamp(44px, 4.6vw, 72px) !important;
  color: var(--gold-light, #F0B429) !important;
  text-shadow: 0 0 30px rgba(240,180,41,.25);
  position: relative;
  z-index: 2;
  font-weight: 500 !important;
  letter-spacing: -.02em;
}
#problem .stat-lbl {
  color: rgba(255,255,255,.55) !important;
  font-size: 12px !important;
  letter-spacing: .04em !important;
  margin-top: 6px;
  max-width: 200px;
  line-height: 1.5;
}

/* Ensure problem-img parent gets proper depth feel */
#problem .problem-grid.is-in .problem-img { box-shadow: 0 40px 90px rgba(0,0,0,.7), 0 0 120px rgba(240,180,41,.08); }

@media (max-width: 900px) {
  #problem .problem-grid { grid-template-columns: 1fr !important; gap: 48px !important; }
  #problem .problem-stat { gap: 32px !important; }
}

/* ============================================================
   MARKETS — country grid as card-stack
   ============================================================ */
.markets-grid {
  perspective: 1200px;
  position: relative;
}
/* Card hover tilt handled by JS via data-motion="tilt" */
.mkt-card {
  position: relative;
  overflow: hidden;
  transition: transform .35s cubic-bezier(.22,1,.36,1), border-color .35s, box-shadow .35s;
}
.mkt-card::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: radial-gradient(
    420px circle at var(--mx, 50%) var(--my, 50%),
    rgba(240,180,41,.18),
    transparent 45%);
  opacity: 0;
  transition: opacity .35s;
  pointer-events: none;
  z-index: 1;
}
.mkt-card:hover::before { opacity: 1; }
.mkt-card:hover {
  border-color: rgba(240,180,41,.4) !important;
  box-shadow: 0 24px 60px rgba(0,0,0,.45), 0 0 0 1px rgba(240,180,41,.1);
}
.mkt-card > * { position: relative; z-index: 2; }

/* Roadmap pills — stagger slide-in from left */
.mkt-roadmap[data-motion="stagger"] > * {
  transform: translate3d(-24px, 0, 0);
}
.mkt-roadmap[data-motion="stagger"] > .is-in {
  transform: translate3d(0,0,0);
}

/* ============================================================
   COMMUNITY perks — slide-in card-stack
   ============================================================ */
.comm-perks {
  perspective: 1000px;
}
.comm-perks[data-motion="card-stack"] > * {
  transform: translate3d(-60px, 0, -60px) rotateY(-8deg);
}
.comm-perks[data-motion="card-stack"] > .is-in {
  transform: translate3d(0,0,0) rotateY(0);
}
.comm-perk {
  position: relative;
  overflow: hidden;
  transition: transform .35s cubic-bezier(.22,1,.36,1), border-color .35s, box-shadow .35s, background .35s;
}
.comm-perk::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: linear-gradient(90deg,
    rgba(240,180,41,.12) 0%,
    rgba(240,180,41,.04) 50%,
    transparent 100%);
  opacity: 0;
  transition: opacity .35s;
  pointer-events: none;
  z-index: 1;
}
.comm-perk:hover::before { opacity: 1; }
.comm-perk:hover {
  transform: translateX(6px);
  border-color: rgba(240,180,41,.3) !important;
}
.comm-perk > * { position: relative; z-index: 2; }

.perk-icon {
  transition: transform .35s cubic-bezier(.22,1,.36,1), color .35s;
}
.comm-perk:hover .perk-icon {
  transform: rotate(-8deg) scale(1.1);
  color: var(--gold-light, #F0B429) !important;
}