/* ==========================================================================
   goforajob.com — design v2 layer
   Loaded after style.css. Adds the modern visual language + motion.
   Everything degrades gracefully: no rule here is required for the page to
   work, and every animation is disabled under prefers-reduced-motion.
   ========================================================================== */

:root{
  --v2-ink:#070d1c;
  --v2-ink-2:#0d1730;
  --v2-surface:rgba(255,255,255,.06);
  --v2-stroke:rgba(255,255,255,.12);
  --v2-indigo:#4f46e5;
  --v2-violet:#7c3aed;
  --v2-cyan:#06b6d4;
  --v2-amber:#f5b301;
  --v2-radius:20px;
  --v2-shadow:0 24px 60px -24px rgba(7,13,28,.45);
  --v2-ease:cubic-bezier(.22,.61,.36,1);
}

/* ---------- Animated aurora backdrop (pure CSS, zero requests) ---------- */
body.home::before,
body::before{
  content:"";
  position:fixed;
  inset:-30vh -10vw auto -10vw;
  height:90vh;
  z-index:-2;
  pointer-events:none;
  background:
    radial-gradient(60% 55% at 12% 18%, rgba(79,70,229,.30), transparent 60%),
    radial-gradient(50% 50% at 88% 12%, rgba(124,58,237,.26), transparent 62%),
    radial-gradient(45% 45% at 50% 82%, rgba(6,182,212,.18), transparent 65%);
  filter:blur(6px);
  animation:aurora 26s var(--v2-ease) infinite alternate;
}
@keyframes aurora{
  0%{transform:translate3d(0,0,0) scale(1)}
  50%{transform:translate3d(-2%,2%,0) scale(1.06)}
  100%{transform:translate3d(2%,-2%,0) scale(1.02)}
}

/* ---------- Hero ---------- */
.hero{
  position:relative;
  overflow:hidden;
  border-radius:0 0 36px 36px;
}
.hero::after{
  content:"";
  position:absolute;
  inset:auto 0 0 0;
  height:1px;
  background:linear-gradient(90deg,transparent,rgba(255,255,255,.35),transparent);
}
/* The H1 must stay bright: a dark gradient here made "Find Your … Anywhere"
   nearly invisible against the dark hero. Keep a light palette and add only a
   slow sheen on top of it. */
.hero-title{
  background:linear-gradient(100deg,#ffffff 0%,#e9eeff 32%,#ffe6a8 58%,#ffffff 100%);
  background-size:220% 100%;
  -webkit-background-clip:text;
  background-clip:text;
  color:transparent;
  animation:sheen 12s linear infinite;
}
@keyframes sheen{0%{background-position:0% 50%}100%{background-position:200% 50%}}

/* Readability: the stat captions sat at ~#aebbd8/13.5px on a dark card, which
   is below WCAG AA for small text. Brighten them. */
.stat .stat-label,.stat-label{color:#cdd8f0}
.main-nav{gap:28px}
@media (max-width:900px){.main-nav{gap:18px}}

.hero-orb{
  position:absolute;
  width:420px;height:420px;border-radius:50%;
  right:-120px;top:-140px;
  background:conic-gradient(from 120deg, rgba(79,70,229,.55), rgba(6,182,212,.35), rgba(245,179,1,.30), rgba(79,70,229,.55));
  filter:blur(60px);
  opacity:.75;
  animation:floaty 18s ease-in-out infinite;
}
.hero-glow{
  position:absolute;left:-160px;bottom:-220px;width:520px;height:520px;border-radius:50%;
  background:radial-gradient(circle at 30% 30%, rgba(124,58,237,.35), transparent 65%);
  filter:blur(40px);
  animation:floaty 22s ease-in-out infinite reverse;
}
@keyframes floaty{
  0%{transform:translate3d(0,0,0)}
  50%{transform:translate3d(-24px,26px,0)}
  100%{transform:translate3d(0,0,0)}
}

/* ---------- Eyebrow pill ---------- */
.hero-eyebrow{
  display:inline-flex;align-items:center;gap:9px;
  padding:8px 15px;border-radius:999px;
  background:rgba(255,255,255,.72);
  border:1px solid rgba(11,18,32,.10);
  backdrop-filter:blur(8px);
  font-weight:700;font-size:13px;
  box-shadow:0 8px 26px -14px rgba(11,18,32,.45);
}
.hero-eyebrow .dot{
  width:8px;height:8px;border-radius:50%;background:#22c55e;
  box-shadow:0 0 0 0 rgba(34,197,94,.7);
  animation:pulse 2.2s infinite;
}
@keyframes pulse{
  0%{box-shadow:0 0 0 0 rgba(34,197,94,.55)}
  70%{box-shadow:0 0 0 12px rgba(34,197,94,0)}
  100%{box-shadow:0 0 0 0 rgba(34,197,94,0)}
}

/* ---------- Search bar ---------- */
.hero-search{
  background:rgba(255,255,255,.86);
  backdrop-filter:blur(14px);
  border:1px solid rgba(11,18,32,.08);
  border-radius:999px;
  padding:8px;
  box-shadow:var(--v2-shadow);
  transition:box-shadow .45s var(--v2-ease), transform .45s var(--v2-ease);
}
.hero-search:focus-within{
  transform:translateY(-2px);
  box-shadow:0 30px 70px -26px rgba(79,70,229,.55);
}
.search-field input{
  background:transparent;
}
.search-field{
  border-radius:999px;
  transition:background .3s var(--v2-ease);
}
.search-field:focus-within{background:rgba(79,70,229,.07)}

/* ---------- Buttons: shimmer sweep ---------- */
.btn{
  position:relative;
  overflow:hidden;
  isolation:isolate;
  transition:transform .3s var(--v2-ease), box-shadow .3s var(--v2-ease);
}
.btn::after{
  content:"";
  position:absolute;inset:0;
  background:linear-gradient(115deg,transparent 30%,rgba(255,255,255,.55) 50%,transparent 70%);
  transform:translateX(-120%);
  transition:transform .7s var(--v2-ease);
  z-index:-1;
}
.btn:hover::after{transform:translateX(120%)}
.btn:hover{transform:translateY(-2px)}
.btn-gold{box-shadow:0 14px 30px -14px rgba(245,179,1,.75)}

/* ---------- Cards ---------- */
.job-card,
.company-card,
.stat,
.faq-item,
.skill-card{
  border-radius:var(--v2-radius);
  transition:transform .38s var(--v2-ease), box-shadow .38s var(--v2-ease), border-color .38s var(--v2-ease);
  will-change:transform;
}
.job-card{position:relative;overflow:hidden}
.job-card::before{
  content:"";
  position:absolute;left:0;top:0;bottom:0;width:3px;
  background:linear-gradient(180deg,var(--v2-indigo),var(--v2-violet),var(--v2-cyan));
  transform:scaleY(0);
  transform-origin:top;
  transition:transform .45s var(--v2-ease);
}
.job-card:hover::before{transform:scaleY(1)}
.job-card:hover{
  transform:translateY(-4px);
  box-shadow:0 26px 50px -28px rgba(11,18,32,.4);
}
.company-card:hover{transform:translateY(-4px) scale(1.015);box-shadow:0 22px 44px -26px rgba(79,70,229,.5)}
.stat{transition:transform .35s var(--v2-ease)}
.stat:hover{transform:translateY(-3px)}

/* ---------- Chips ---------- */
.chip{
  transition:transform .25s var(--v2-ease), background .25s var(--v2-ease), color .25s var(--v2-ease);
}
.chip:hover{transform:translateY(-2px) scale(1.03)}

/* ---------- Staggered reveal ---------- */
.reveal-on-scroll{opacity:0;transform:translateY(22px);transition:opacity .7s var(--v2-ease), transform .7s var(--v2-ease)}
.reveal-on-scroll.is-visible{opacity:1;transform:none}
.stagger > *{opacity:0;transform:translateY(18px);transition:opacity .6s var(--v2-ease), transform .6s var(--v2-ease)}
.stagger.is-visible > *{opacity:1;transform:none}
.stagger.is-visible > *:nth-child(1){transition-delay:.02s}
.stagger.is-visible > *:nth-child(2){transition-delay:.06s}
.stagger.is-visible > *:nth-child(3){transition-delay:.10s}
.stagger.is-visible > *:nth-child(4){transition-delay:.14s}
.stagger.is-visible > *:nth-child(5){transition-delay:.18s}
.stagger.is-visible > *:nth-child(6){transition-delay:.22s}
.stagger.is-visible > *:nth-child(7){transition-delay:.26s}
.stagger.is-visible > *:nth-child(8){transition-delay:.30s}
.stagger.is-visible > *:nth-child(9){transition-delay:.34s}
.stagger.is-visible > *:nth-child(10){transition-delay:.38s}
.stagger.is-visible > *:nth-child(n+11){transition-delay:.42s}

/* ---------- Marquee (trending roles) ---------- */
.marquee{
  position:relative;overflow:hidden;
  mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent);
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent);
}
.marquee-track{display:flex;gap:12px;width:max-content;animation:marquee 42s linear infinite}
.marquee:hover .marquee-track{animation-play-state:paused}
@keyframes marquee{from{transform:translateX(0)}to{transform:translateX(-50%)}}

/* ---------- Country grid ---------- */
.country-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(230px,1fr));gap:14px}
.country-card{
  display:flex;align-items:center;gap:14px;
  padding:16px 18px;border-radius:16px;
  background:#fff;border:1px solid var(--line);
  box-shadow:0 10px 28px -22px rgba(11,18,32,.5);
  transition:transform .32s var(--v2-ease), box-shadow .32s var(--v2-ease), border-color .32s var(--v2-ease);
}
.country-card:hover{transform:translateY(-4px);border-color:rgba(79,70,229,.35);box-shadow:0 24px 46px -26px rgba(79,70,229,.5)}
.country-flag{font-size:26px;line-height:1;filter:saturate(1.05)}
.country-meta{display:flex;flex-direction:column;min-width:0}
.country-name{font-weight:750;font-size:15px;color:var(--ink)}
.country-count{font-size:12.5px;color:var(--muted)}
.country-card.is-empty{opacity:.72}

/* ---------- Photo cards (free stock, lazy) ---------- */
.photo-card{
  position:relative;border-radius:var(--v2-radius);overflow:hidden;
  min-height:190px;display:flex;align-items:flex-end;
  background:linear-gradient(135deg,var(--v2-indigo),var(--v2-violet));
  color:#fff;box-shadow:var(--v2-shadow);
}
.photo-card img{
  position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
  transition:transform .9s var(--v2-ease);
}
.photo-card:hover img{transform:scale(1.06)}
.photo-card .photo-body{
  position:relative;z-index:2;padding:20px;
  background:linear-gradient(180deg,transparent,rgba(7,13,28,.82));
  width:100%;
}
.photo-card .photo-body h3{margin:0 0 4px;font-size:19px}
.photo-card .photo-body p{margin:0;font-size:13.5px;opacity:.9}
.photo-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:16px}

/* ---------- Trust strip ---------- */
.trust-strip{
  display:flex;flex-wrap:wrap;gap:10px 22px;align-items:center;justify-content:center;
  padding:16px 0;font-size:13px;color:var(--muted)
}
.trust-strip b{color:var(--ink)}

/* ---------- Sticky CTA polish ---------- */
.mobile-cta{box-shadow:0 -10px 30px -12px rgba(11,18,32,.35)}
.mcta{transition:background .25s var(--v2-ease), transform .25s var(--v2-ease)}
.mcta:active{transform:scale(.97)}

/* ---------- Skeleton shimmer ---------- */
.skeleton{
  position:relative;overflow:hidden;background:#eef2f8;border-radius:12px;
}
.skeleton::after{
  content:"";position:absolute;inset:0;
  background:linear-gradient(90deg,transparent,rgba(255,255,255,.85),transparent);
  animation:shimmer 1.4s infinite;
}
@keyframes shimmer{from{transform:translateX(-100%)}to{transform:translateX(100%)}}

/* ---------- Section headers ---------- */
.section-eyebrow{
  letter-spacing:.14em;text-transform:uppercase;font-size:11.5px;font-weight:800;
  color:var(--v2-indigo)
}
.section-title{letter-spacing:-.02em}

/* ---------- Accessibility ---------- */
a:focus-visible,button:focus-visible,input:focus-visible,select:focus-visible,[tabindex]:focus-visible{
  outline:3px solid rgba(79,70,229,.65);
  outline-offset:2px;
  border-radius:8px;
}

/* ---------- Country rail (homepage) ---------- */
.country-rail{
  display:grid;grid-template-columns:repeat(auto-fill,minmax(190px,1fr));gap:14px;
}
.country-tile{
  position:relative;display:block;border-radius:16px;overflow:hidden;
  background:var(--g4j-surface,#12121a);border:1px solid var(--g4j-line,rgba(255,255,255,.08));
  text-decoration:none;color:inherit;isolation:isolate;
  transition:transform .4s cubic-bezier(.22,1,.36,1),box-shadow .4s ease,border-color .3s ease;
  will-change:transform;
}
.country-tile:hover{transform:translateY(-6px);box-shadow:0 18px 40px rgba(0,0,0,.45);border-color:rgba(212,175,55,.45)}
.country-tile-img{
  display:block;width:100%;height:118px;object-fit:cover;
  filter:saturate(.72) contrast(1.05);opacity:.85;
  transition:transform .55s cubic-bezier(.22,1,.36,1),opacity .4s ease,filter .4s ease;
}
.country-tile:hover .country-tile-img{transform:scale(1.07);opacity:1;filter:saturate(1) contrast(1.05)}
.country-tile-body{display:block;padding:12px 14px 14px;position:relative}
.country-tile-body::before{
  content:"";position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(180deg,rgba(0,0,0,.55),transparent 60%);
}
.country-tile-name{display:block;font-weight:650;font-size:.98rem;line-height:1.25;margin-bottom:3px}
.country-tile-flag{margin-right:2px}
.country-tile-count{display:block;font-size:.8rem;opacity:.62}
@media (max-width:560px){
  .country-rail{grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:10px}
  .country-tile-img{height:92px}
}

/* ---------- Motion-off ---------- */
@media(prefers-reduced-motion:reduce){
  *,*::before,*::after{
    animation-duration:.001ms !important;
    animation-iteration-count:1 !important;
    transition-duration:.001ms !important;
  }
  .reveal-on-scroll,.stagger > *{opacity:1 !important;transform:none !important}
  body::before{animation:none}
}