/* ============================================================
   cinematic.css — SoftHire Cinematic Layer (Phase A)
   PREMIUM PASS overrides at the END of this file disable: cursor
   spotlight, page-load intro, custom cursor, italic shimmer animation,
   featured-card breathe pulse, segments badge shimmer, hover tilt,
   3D card-stack entrance — keeping only frosted nav, magic-line,
   single gentle scroll fades, Ken Burns founder, count-up, magnetic
   CTAs, glass cards (without pulse), and the D3 hero globe.
   ============================================================ */

:root {
  --ease-cine: cubic-bezier(.2, .8, .2, 1);
  --d-fast: 200ms;
  --d-ui: 320ms;
  --d-cine: 720ms;
  --c-bg: #020113;
  --c-bg-2: #0A0E1C;
  --c-bg-3: #0D1222;
  --c-gold: #C8960C;
  --c-gold-2: #E0B84A;
  --c-gold-3: #F0B429;
  --c-text: #FFFFFF;
  --c-muted: #A8B0BF;
  --c-rim-cool: rgba(100, 185, 255, .42);
}

/* ============================================================
   CURSOR SPOTLIGHT — 400px amber radial at 6% opacity on desktop
   Layers BEHIND the existing dot+ring cursor; they coexist.
   ============================================================ */
.mt-spotlight {
  position: fixed;
  left: 0; top: 0;
  width: 820px; height: 820px;
  transform: translate3d(-50%, -50%, 0);
  background: radial-gradient(
    circle at center,
    rgba(240, 180, 41, .09) 0%,
    rgba(240, 180, 41, .04) 30%,
    rgba(240, 180, 41, 0) 55%);
  pointer-events: none;
  z-index: 9996;
  mix-blend-mode: screen;
  will-change: transform;
}
body.no-spotlight .mt-spotlight,
@media (hover: none), (pointer: coarse), (prefers-reduced-motion: reduce) {
  .mt-spotlight { display: none; }
}

/* ============================================================
   STAGE LIGHTING — data-stage="warm|cool|neutral" on sections
   Renders a large radial gradient via ::before, behind content.
   ============================================================ */
section[data-stage] {
  position: relative;
  isolation: isolate;
}
section[data-stage]::before {
  content: "";
  position: absolute;
  inset: -10%;
  z-index: 0;
  filter: blur(100px);
  opacity: .55;
  pointer-events: none;
  transition: opacity .9s var(--ease-cine);
}
section[data-stage] > * { position: relative; z-index: 1; }

section[data-stage="warm"]::before {
  background:
    radial-gradient(55% 45% at 18% 20%, rgba(240, 180, 41, .22) 0%, transparent 70%),
    radial-gradient(40% 40% at 90% 85%, rgba(224, 184, 74, .12) 0%, transparent 70%);
}
section[data-stage="cool"]::before {
  background:
    radial-gradient(55% 45% at 82% 18%, rgba(100, 185, 255, .15) 0%, transparent 70%),
    radial-gradient(40% 40% at 10% 80%, rgba(200, 150, 12, .12) 0%, transparent 70%);
}
section[data-stage="neutral"]::before {
  background:
    radial-gradient(50% 45% at 50% 0%, rgba(200, 150, 12, .10) 0%, transparent 70%);
}

@media (prefers-reduced-motion: reduce) {
  section[data-stage]::before { opacity: .3; }
}

/* ============================================================
   SECTION TRANSITIONS — soft fade band between sections
   (light sweep, not a hard cut)
   ============================================================ */
section[data-stage]::after {
  content: "";
  position: absolute;
  left: 0; right: 0; top: -80px;
  height: 80px;
  background: linear-gradient(180deg, transparent 0%, var(--c-bg) 100%);
  pointer-events: none;
  z-index: 2;
}
/* Problem section keeps its own look — don't double up */
#problem::after, #hero::after { display: none; }

/* ============================================================
   HERO — cinematic vignette + parallax scaffolding
   ============================================================ */
#hero {
  position: relative;
  overflow: hidden;
}
#hero .hero-right,
#hero .hero-right > div {
  overflow: hidden;
}
#hero .hero-right img {
  will-change: transform;
  transform-origin: 50% 50%;
}
/* Vignette overlay darkening the edges of the hero image */
#hero .hero-right > div::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 4;
  pointer-events: none;
  background: radial-gradient(
    ellipse 80% 70% at 50% 50%,
    transparent 30%,
    rgba(2, 1, 19, .25) 65%,
    rgba(2, 1, 19, .75) 100%);
}

/* Parallax subject drift when JS adds .mt-parallax-ready */
body.no-parallax #hero .hero-right img { transform: none !important; }

/* ============================================================
   NAV — frosted glass after scroll, magic-line underline
   ============================================================ */
#main-nav {
  transition:
    background-color var(--d-ui) var(--ease-cine),
    backdrop-filter var(--d-ui) var(--ease-cine),
    border-color var(--d-ui) var(--ease-cine),
    box-shadow var(--d-ui) var(--ease-cine);
  border-bottom: 1px solid transparent;
}
#main-nav.is-scrolled {
  background: rgba(10, 14, 28, .72) !important;
  backdrop-filter: blur(18px) saturate(140%);
  -webkit-backdrop-filter: blur(18px) saturate(140%);
  border-bottom-color: rgba(200, 150, 12, .18);
  box-shadow: 0 6px 40px -20px rgba(0, 0, 0, .8);
}

/* Magic-line underline that slides between nav links on hover */
.nav-links {
  position: relative;
}
.mt-magic-line {
  position: absolute;
  bottom: -6px;
  height: 2px;
  background: linear-gradient(90deg, var(--c-gold), var(--c-gold-3), var(--c-gold));
  box-shadow: 0 0 12px rgba(240, 180, 41, .55);
  border-radius: 2px;
  width: 0;
  left: 0;
  transition:
    left var(--d-ui) var(--ease-cine),
    width var(--d-ui) var(--ease-cine),
    opacity var(--d-ui);
  opacity: 0;
  pointer-events: none;
}

/* ============================================================
   PRIMARY CTA — gold sheen sweep + breathing glow
   Applied to .btn-gold and .nav-cta
   ============================================================ */
.btn-gold, .nav-cta {
  position: relative;
  overflow: hidden;
  isolation: isolate;
}
.btn-gold::before, .nav-cta::before {
  content: "";
  position: absolute;
  top: 0; left: -120%;
  width: 60%; height: 100%;
  background: linear-gradient(
    100deg,
    rgba(255, 255, 255, 0) 0%,
    rgba(255, 255, 255, .35) 50%,
    rgba(255, 255, 255, 0) 100%);
  transform: skewX(-20deg);
  pointer-events: none;
  z-index: 1;
  transition: left .65s var(--ease-cine);
}
.btn-gold:hover::before, .nav-cta:hover::before {
  left: 160%;
}
.btn-gold > *, .nav-cta > * { position: relative; z-index: 2; }

/* Hero primary CTA + nav Start Free get the breathing glow */
#hero .btn-gold,
.nav-cta {
  animation: mt-breathe-cta 4s ease-in-out infinite;
}
@keyframes mt-breathe-cta {
  0%, 100% { box-shadow: 0 0 0 0 rgba(240, 180, 41, 0); }
  50%      { box-shadow: 0 0 28px 2px rgba(240, 180, 41, .35); }
}
@media (prefers-reduced-motion: reduce) {
  #hero .btn-gold, .nav-cta { animation: none !important; }
  .btn-gold::before, .nav-cta::before { display: none; }
}

/* ============================================================
   HOW IT WORKS — pinned horizontal rail (desktop ≥1024)
   ============================================================ */
.how-rail-outer {
  position: relative;
  overflow: hidden;
}
.how-rail-track {
  display: flex;
  gap: 28px;
  padding: 0 8px;
  align-items: stretch;
  will-change: transform;
}
.how-rail-progress {
  position: absolute;
  left: 8%; right: 8%;
  bottom: -18px;
  height: 2px;
  background: rgba(240, 180, 41, .12);
  border-radius: 2px;
  z-index: 3;
}
.how-rail-progress::after {
  content: "";
  position: absolute;
  left: 0; top: 0; bottom: 0;
  width: var(--mt-progress, 0%);
  background: linear-gradient(90deg, var(--c-gold), var(--c-gold-3));
  box-shadow: 0 0 14px rgba(240, 180, 41, .6);
  border-radius: 2px;
  transition: width 120ms linear;
}

/* Pinned-rail card sizing & step state */
body.rail-active .how-card {
  flex: 0 0 clamp(300px, 30vw, 400px);
  transition: transform var(--d-cine) var(--ease-cine),
              opacity var(--d-cine) var(--ease-cine),
              filter var(--d-cine) var(--ease-cine);
  opacity: .3;
  transform: scale(.95);
  filter: saturate(.6);
}
body.rail-active .how-card.is-active {
  opacity: 1;
  transform: scale(1.04);
  filter: saturate(1);
}
body.rail-active .how-card.is-active .how-num {
  color: var(--c-gold-3);
  transform: scale(1.15);
  text-shadow: 0 0 34px rgba(240, 180, 41, .55);
}

/* Mobile / reduce-motion / no-rail: preserve the existing card-stack grid */
@media (max-width: 1023px) {
  body.rail-active .how-card {
    flex: 1 1 auto;
    opacity: 1;
    transform: none;
    filter: none;
  }
  .how-rail-track { flex-wrap: wrap; }
  .how-rail-progress { display: none; }
}
body.no-rail .how-card {
  flex: 1 1 auto !important;
  opacity: 1 !important;
  transform: none !important;
  filter: none !important;
}
body.no-rail .how-rail-progress { display: none; }

/* ============================================================
   SOLUTIONS TABS — magic-line under active tab + panel crossfade
   ============================================================ */
.seg-tabs {
  position: relative;
}
.mt-seg-line {
  position: absolute;
  bottom: 0;
  height: 2px;
  background: linear-gradient(90deg, var(--c-gold), var(--c-gold-3));
  box-shadow: 0 0 12px rgba(240, 180, 41, .55);
  border-radius: 2px;
  width: 0;
  left: 0;
  transition: left var(--d-ui) var(--ease-cine), width var(--d-ui) var(--ease-cine);
  pointer-events: none;
}

.seg-panel {
  transition:
    opacity var(--d-ui) var(--ease-cine),
    transform var(--d-ui) var(--ease-cine);
}
.seg-panel:not(.active) {
  display: block !important;
  position: absolute;
  inset: 0;
  opacity: 0;
  transform: translateY(8px);
  pointer-events: none;
}
.seg-panel.active {
  opacity: 1;
  transform: translateY(0);
  position: relative;
  pointer-events: auto;
  z-index: 2;
}
.seg-panel.mt-leaving {
  opacity: 0;
  transform: translateY(-8px);
  pointer-events: none;
}

/* Visual card "Hiring from" pill shimmer */
.seg-vis-badge {
  position: relative;
  overflow: hidden;
}
.seg-panel.active .seg-vis-badge::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(
    100deg,
    transparent 20%,
    rgba(240, 180, 41, .3) 50%,
    transparent 80%);
  transform: translateX(-100%);
  animation: mt-badge-shimmer 1.2s var(--ease-cine) .3s both;
}
@keyframes mt-badge-shimmer {
  to { transform: translateX(100%); }
}

/* ============================================================
   MARKETS — Netflix-style title cards
   ============================================================ */
.mkt-card {
  /* Extend the existing motion.css tilt behavior */
  background:
    linear-gradient(180deg, rgba(255,255,255,.02) 0%, rgba(255,255,255,.01) 100%),
    var(--c-bg-3) !important;
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  padding: 28px 20px !important;
}
.mkt-card .mkt-flag {
  position: relative;
  font-size: 40px !important;
  filter: drop-shadow(0 4px 14px rgba(0, 0, 0, .5));
  transition: transform var(--d-ui) var(--ease-cine);
}
.mkt-card:hover .mkt-flag {
  transform: scale(1.08) translateY(-2px);
}
.mkt-card .mkt-name {
  font-family: 'Cormorant Garamond', serif;
  font-size: 20px !important;
  font-weight: 600;
  letter-spacing: -.01em;
  margin-top: 14px !important;
}
.mkt-card .mkt-note {
  font-size: 11px !important;
  color: var(--c-muted) !important;
  letter-spacing: .04em;
  text-transform: uppercase;
}
/* Hover rim-light + legal drawer */
.mkt-card:hover {
  box-shadow:
    0 20px 60px -20px var(--c-rim-cool),
    inset 0 0 0 1px rgba(240, 180, 41, .35) !important;
}

/* ============================================================
   FOUNDER — Ken Burns slow zoom on the portrait
   ============================================================ */
.founder-photo img {
  animation: mt-kenburns-slow 24s ease-in-out infinite alternate;
  will-change: transform;
}
@keyframes mt-kenburns-slow {
  0%   { transform: scale(1.0) translate3d(0, 0, 0); }
  100% { transform: scale(1.05) translate3d(-1.5%, -2%, 0); }
}
@media (prefers-reduced-motion: reduce) {
  .founder-photo img { animation: none !important; }
}

/* Gold serif divider line above the quote (draws 0→100%) */
.founder-quote-divider {
  height: 1px;
  background: linear-gradient(90deg, var(--c-gold-3), transparent);
  transform-origin: left;
  transform: scaleX(0);
  transition: transform 1.1s var(--ease-cine);
  margin-bottom: 18px;
}
.founder-quote-divider.is-in { transform: scaleX(1); }

/* ============================================================
   PRICING — dark stage + glassmorphic cards, featured lift + glow
   Overrides the original cream/light-theme pricing section so the
   glass cards render correctly against a cinematic dark backdrop.
   ============================================================ */
#pricing {
  background:
    linear-gradient(180deg, #05051a 0%, #020113 60%, #05051a 100%) !important;
  color: #fff !important;
}
#pricing .pricing-h2 { color: #fff !important; }
#pricing .pricing-sub { color: rgba(255,255,255,.55) !important; }
#pricing .plan-name { color: var(--c-gold-3, #F0B429) !important; }
#pricing .plan-price { color: #fff !important; }
#pricing .plan-period { color: rgba(255,255,255,.55) !important; }
#pricing .plan-divider { border-color: rgba(255,255,255,.08) !important; }
#pricing .plan-feat { color: rgba(255,255,255,.8) !important; }
/* Featured card: cancel the original dark navy solid bg — the glass below
   takes over. Keep text white, which is already correct. */
#pricing .plan-card.featured { background: initial !important; }

/* "Most Popular" badge — darker backing now that featured is glass */
#pricing .plan-badge {
  background: linear-gradient(90deg, #C8960C, #E6B025, #C8960C);
  color: #07070F;
  box-shadow: 0 6px 22px -4px rgba(240, 180, 41, .4);
}

/* Pay-per-hire box on the dark bg */
#pricing .pph-box {
  background: rgba(255, 255, 255, .04) !important;
  border: 1px solid rgba(240, 180, 41, .18) !important;
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  color: #fff !important;
}
#pricing .pph-body { color: rgba(255,255,255,.7) !important; }
#pricing .pph-title { color: #fff !important; }
#pricing .pph-icon { color: var(--c-gold-3, #F0B429) !important; }
#pricing .btn-contact {
  background: transparent !important;
  border: 1px solid rgba(240, 180, 41, .4) !important;
  color: #fff !important;
}
#pricing .btn-contact:hover {
  background: rgba(240, 180, 41, .08) !important;
  border-color: var(--c-gold-3) !important;
}

/* Make the check bullet visible against dark bg (stays gold) */

.plan-card {
  background:
    linear-gradient(180deg, rgba(255,255,255,.045) 0%, rgba(255,255,255,.01) 100%) !important;
  backdrop-filter: blur(14px) saturate(120%);
  -webkit-backdrop-filter: blur(14px) saturate(120%);
  border: 1px solid rgba(255, 255, 255, .08) !important;
  transition:
    transform var(--d-cine) var(--ease-cine),
    box-shadow var(--d-cine) var(--ease-cine),
    border-color var(--d-cine);
  position: relative;
  isolation: isolate;
}
.plan-card:hover {
  transform: translateY(-6px);
  border-color: rgba(240, 180, 41, .25) !important;
  box-shadow: 0 40px 80px -30px rgba(0, 0, 0, .6);
}
.plan-card.featured {
  transform: translateY(-12px);
  border-color: rgba(240, 180, 41, .45) !important;
  box-shadow:
    0 0 0 1px rgba(240, 180, 41, .35),
    0 50px 100px -30px rgba(0, 0, 0, .7),
    0 0 80px -20px rgba(240, 180, 41, .25);
  animation: mt-featured-pulse 6s ease-in-out infinite;
}
@keyframes mt-featured-pulse {
  0%, 100% { box-shadow:
    0 0 0 1px rgba(240, 180, 41, .35),
    0 50px 100px -30px rgba(0, 0, 0, .7),
    0 0 60px -20px rgba(240, 180, 41, .18); }
  50%      { box-shadow:
    0 0 0 1px rgba(240, 180, 41, .55),
    0 50px 100px -30px rgba(0, 0, 0, .7),
    0 0 110px -20px rgba(240, 180, 41, .4); }
}
.plan-card.featured:hover {
  transform: translateY(-16px) rotateY(1.5deg);
}
@media (prefers-reduced-motion: reduce) {
  .plan-card.featured { animation: none !important; }
}

.plan-price {
  display: inline-flex;
  align-items: baseline;
  gap: 2px;
}
.plan-price .mt-count {
  font-variant-numeric: tabular-nums;
}

/* ============================================================
   FOOTER / FINAL CTA — warm radial stage light + clock pulse
   ============================================================ */
footer#contact {
  position: relative;
  isolation: isolate;
}
footer#contact::before {
  content: "";
  position: absolute;
  inset: -10% -10% auto -10%;
  height: 420px;
  background: radial-gradient(
    ellipse 60% 80% at 50% 0%,
    rgba(240, 180, 41, .14) 0%,
    transparent 65%);
  filter: blur(60px);
  z-index: 0;
  pointer-events: none;
}

.footer-clocks .mt-clock-time {
  position: relative;
}
/* Pulse the colons */
.footer-clocks .mt-clock-time {
  --colon-opacity: 1;
}
.footer-clocks .mt-clock-pulse {
  animation: mt-colon-pulse 1s steps(2, start) infinite;
}
@keyframes mt-colon-pulse {
  0%   { opacity: 1; }
  50%  { opacity: .35; }
  100% { opacity: 1; }
}
@media (prefers-reduced-motion: reduce) {
  .footer-clocks .mt-clock-pulse { animation: none !important; opacity: 1 !important; }
}

/* ============================================================
   GLOBAL DISABLE FLAGS
   ============================================================ */
body.no-grain .mt-grain { display: none !important; }
body.no-spotlight .mt-spotlight { display: none !important; }
body.no-parallax [data-motion="parallax"] { transform: none !important; }

/* ============================================================
   PREMIUM PASS — restraint overrides
   Discipline > decoration. Linear/Stripe/Vercel bar.
   ============================================================ */

/* Page-load intro overlay: gone */
#mt-intro { display: none !important; }

/* Custom cursor + spotlight: gone */
.mt-cursor-dot, .mt-cursor-ring, .mt-spotlight { display: none !important; }

/* Italic shimmer animation: gold COLOR only, no gradient sweep */
.mt-shimmer, [data-motion-shimmer],
[data-motion="split-words"] em.mt-shimmer {
  background: none !important;
  -webkit-background-clip: initial !important;
          background-clip: initial !important;
  -webkit-text-fill-color: initial !important;
          color: var(--c-gold-3, #F0B429) !important;
  animation: none !important;
  transition: none !important;
}

/* Split-words: legible whole-element fade-up. No more word-level blur. */
[data-motion="split-words"] {
  opacity: 0;
  transform: translate3d(0, 14px, 0);
  filter: none !important;
  transition: opacity .55s cubic-bezier(.16,1,.3,1), transform .6s cubic-bezier(.16,1,.3,1);
  will-change: opacity, transform;
}
[data-motion="split-words"].is-in {
  opacity: 1;
  transform: translate3d(0, 0, 0);
}
/* Belt-and-suspenders: any leftover .mt-word spans render as plain inline */
[data-motion="split-words"] .mt-word {
  opacity: 1 !important;
  transform: none !important;
  filter: none !important;
  display: inline !important;
}

/* Featured pricing card: keep elevation + gold border + shadow, kill pulse */
.plan-card.featured { animation: none !important; }

/* Segments badge shimmer: gone */
.seg-panel.active .seg-vis-badge::after { display: none !important; }

/* Hover tilt: removed across ALL cards. Native cursor, no 3D rotate.
   Replace with a single 1px gold border for affordance. */
[data-motion="tilt"]:hover,
.mkt-card:hover,
.how-card:hover,
.comm-perk:hover,
.guide-card:hover,
.service-suite:hover,
.seg-suite-card:hover {
  transform: translateY(-2px) !important;
}
[data-motion="tilt"]::before { display: none !important; }
.mkt-card::before { display: none !important; }
.mkt-card:hover {
  border-color: rgba(240,180,41,.45) !important;
  box-shadow: none !important;
}

/* Cursor-tracking gold glow on cards: gone (used --mx/--my JS vars) */

/* CTA breathing glow on the hero CTA + nav: tone down — keep gentle hover
   sheen for affordance, kill the constant pulse */
#hero .btn-gold, .nav-cta { animation: none !important; }

/* 3D card-stack entrance: convert to simple stagger fade-up everywhere
   it appears outside the pinned How-It-Works rail. */
[data-motion="card-stack"]:not(.how-rail-track) > * {
  transform: translate3d(0, 16px, 0) !important;
  opacity: 0 !important;
  filter: none !important;
  transition: opacity .55s cubic-bezier(.16,1,.3,1), transform .6s cubic-bezier(.16,1,.3,1) !important;
}
[data-motion="card-stack"]:not(.how-rail-track) > .is-in {
  transform: translate3d(0, 0, 0) !important;
  opacity: 1 !important;
}

/* Footer live clocks: remove from layout */
.footer-clocks { display: none !important; }

/* Hero corner brackets feel like portfolio. Kill on desktop too — keep
   the simple gold rim from the existing hero-globe-stage. */
@media (min-width: 769px) {
  .hero-right::before, .hero-right::after { display: none !important; }
}