/* SHEQ Hero Journey — scoped styles.
   Every rule is namespaced under #shj-journey or an #shj- id.
   Nothing here touches body, section, h1/h2, .btn etc. globally —
   those tag/class names are used constantly by Flatsome itself. */

:root{
  --shj-ink:#fff;
  --shj-dim:rgba(255,255,255,0.72);
  --shj-bg:#08090a;
  --shj-sans:"Inter Tight","Inter",-apple-system,BlinkMacSystemFont,"Segoe UI",Arial,sans-serif;
}

#shj-journey{ position:relative; z-index:9005; overflow:visible; }
#shj-journey, #shj-journey *{ box-sizing:border-box; }

#shj-journey section{
  min-height:100vh; display:flex; flex-direction:column;
  justify-content:center; align-items:center; text-align:center;
  padding:0 6vw; position:relative; z-index:3;
  will-change:opacity,transform;
  font-family:var(--shj-sans);
}
#shj-journey .shj-inner{ max-width:52rem; }

#shj-journey h1, #shj-journey h2{
  font-weight:700; line-height:1.04; letter-spacing:-0.035em; margin:0 0 1.35rem;
  color:var(--shj-ink); text-wrap:balance; text-shadow:0 2px 40px rgba(0,0,0,0.75);
}
#shj-journey h1{ font-size:clamp(2.5rem,6.6vw,5.1rem); }
#shj-journey h2{ font-size:clamp(2.1rem,5.6vw,4.3rem); }
#shj-journey p.shj-sub{
  font-size:clamp(0.95rem,1.45vw,1.14rem); font-weight:400; line-height:1.6;
  color:var(--shj-dim); margin:0 auto; max-width:38rem;
  text-shadow:0 2px 24px rgba(0,0,0,0.8);
}

#shj-journey .shj-actions{ display:flex; gap:0.75rem; margin-top:2.2rem; flex-wrap:wrap; justify-content:center; }
#shj-journey .shj-btn{
  font-family:var(--shj-sans); font-size:0.95rem; font-weight:600; letter-spacing:-0.01em;
  padding:0.9rem 1.9rem; border-radius:4px; cursor:pointer; border:1px solid transparent;
  display:inline-block; text-decoration:none;
}
#shj-journey .shj-btn.shj-solid{ background:#fff; color:#0c0d0e; }
#shj-journey .shj-btn.shj-ghost{
  background:rgba(255,255,255,0.06); color:#fff; border-color:rgba(255,255,255,0.28);
  backdrop-filter:blur(6px);
}

/* ---- the fixed layer, appended to <body> by JS ---- */
#shj-root{ transition:opacity .4s ease; }
#shj-scene{ position:fixed; inset:0; z-index:9000; background:#08090a; }
#shj-scene canvas{ display:block; width:100%; height:100%;
  filter: contrast(1.14) saturate(0.82) brightness(0.97); }

#shj-scrim{ position:fixed; inset:0; z-index:9001; pointer-events:none;
  background:
    radial-gradient(ellipse 82% 66% at 50% 50%, rgba(0,0,0,0) 0%, rgba(4,5,6,0.70) 100%),
    linear-gradient(180deg, rgba(4,5,6,0.52) 0%, rgba(4,5,6,0.14) 30%, rgba(4,5,6,0.22) 62%, rgba(4,5,6,0.78) 100%);
}
#shj-grain{ position:fixed; inset:-50%; z-index:9002; pointer-events:none; opacity:0.055;
  background-image:var(--shj-grain); animation:shjShift .7s steps(3) infinite; }
@keyframes shjShift{0%{transform:translate(0,0)}33%{transform:translate(-2%,1%)}66%{transform:translate(1%,-2%)}}

#shj-cue{ position:fixed; left:50%; bottom:2.1rem; transform:translateX(-50%); z-index:9006;
  font-family:var(--shj-sans); font-size:0.72rem; font-weight:500; letter-spacing:0.16em; text-transform:uppercase;
  color:rgba(255,255,255,0.5); display:flex; flex-direction:column; align-items:center; gap:0.55rem;
  transition:opacity .6s ease; pointer-events:none; }
#shj-cue .shj-bar{ width:1px; height:2rem; background:linear-gradient(180deg,rgba(255,255,255,0.7),transparent);
  animation:shjDrop 2.2s ease-in-out infinite; }
@keyframes shjDrop{0%,100%{transform:scaleY(.3);transform-origin:top;opacity:.35}
                    50%{transform:scaleY(1);transform-origin:top;opacity:.9}}

#shj-pct{ position:fixed; right:1.9rem; bottom:1.9rem; z-index:9006;
  font-family:var(--shj-sans); font-size:0.78rem; font-weight:600;
  color:rgba(255,255,255,0.42); font-variant-numeric:tabular-nums; pointer-events:none; }

#shj-nav{ position:fixed; left:1.9rem; top:50%; transform:translateY(-50%); z-index:9006;
  display:flex; flex-direction:column; gap:0.95rem; pointer-events:none; }
#shj-nav span{ font-family:var(--shj-sans); font-size:0.68rem; font-weight:500; letter-spacing:0.13em; text-transform:uppercase;
  color:rgba(255,255,255,0.22); transition:color .4s ease, transform .4s ease; }
#shj-nav span.on{ color:rgba(255,255,255,0.92); transform:translateX(3px); }

/* The loading screen itself is NOT styled here — it's output as fully
   inline styles via the plugin's wp_body_open hook (sheq-hero-journey.php),
   specifically so it never has to wait for this stylesheet to load. */

#shj-motion{ position:fixed; left:50%; bottom:2rem; transform:translateX(-50%); z-index:9011; display:none;
  font-family:var(--shj-sans); font-size:0.85rem; font-weight:600; color:#0c0d0e; background:#fff;
  border:0; border-radius:4px; padding:.8rem 1.5rem; cursor:pointer; }
#shj-motion.show{ display:block; }

@media (max-width:760px){
  #shj-nav{ display:none; }
  #shj-pct{ right:1.1rem; bottom:1.1rem; }
}