/* ═══ HireMaze shared marketing FX — ambient hero animations, cursor, colour palette ═══
   Loaded on every marketing page (except home, which has its own inline copy).
   All accent visuals read rgba(var(--accent-rgb),…) so they recolour with the palette. */

/* ---- Ambient hero layers (injected behind the first <section>) ---- */
.sfx-ambient{position:absolute;inset:0;z-index:0;pointer-events:none;overflow:hidden;}
.sfx-aurora{position:absolute;left:50%;top:-20%;width:160%;height:150%;transform:translateX(-50%);pointer-events:none;
  filter:blur(90px) saturate(140%);opacity:.5;
  background:
    radial-gradient(28% 38% at 28% 32%, rgba(var(--accent-rgb,94,228,240),.5), transparent 60%),
    radial-gradient(26% 34% at 72% 42%, rgba(123,184,154,.34), transparent 62%),
    conic-gradient(from 0deg at 50% 42%, rgba(var(--accent-rgb,94,228,240),.26), rgba(123,184,154,.12), rgba(94,228,240,.22), rgba(var(--accent-rgb,94,228,240),.26));
  animation:sfxAurora 44s linear infinite;}
@keyframes sfxAurora{to{transform:translateX(-50%) rotate(360deg);}}
.sfx-blob{position:absolute;width:520px;height:520px;left:6%;top:12%;opacity:.55;pointer-events:none;
  background:radial-gradient(circle at 50% 50%,rgba(var(--accent-rgb,94,228,240),.16),transparent 68%);
  filter:blur(28px);border-radius:42% 58% 63% 37%/41% 44% 56% 59%;animation:sfxBlob 20s ease-in-out infinite alternate;}
@keyframes sfxBlob{0%{border-radius:42% 58% 63% 37%/41% 44% 56% 59%;transform:rotate(0) scale(1);}
  50%{border-radius:60% 40% 33% 67%/63% 34% 66% 37%;}
  100%{border-radius:35% 65% 55% 45%/55% 62% 38% 45%;transform:rotate(18deg) scale(1.08);}}
.sfx-orb{position:absolute;border-radius:50%;filter:blur(70px);pointer-events:none;opacity:.42;will-change:translate;}
.sfx-orb.o1{width:420px;height:420px;left:-120px;top:6%;background:radial-gradient(circle,rgba(var(--accent-rgb,94,228,240),.26),transparent 70%);animation:sfxDrift1 26s ease-in-out infinite alternate;}
.sfx-orb.o2{width:360px;height:360px;right:-100px;top:34%;background:radial-gradient(circle,rgba(123,184,154,.16),transparent 70%);animation:sfxDrift2 32s ease-in-out infinite alternate;}
@keyframes sfxDrift1{from{transform:translate(0,0) scale(1);}to{transform:translate(70px,40px) scale(1.15);}}
@keyframes sfxDrift2{from{transform:translate(0,0) scale(1.1);}to{transform:translate(-60px,-50px) scale(.95);}}
.sfx-grid{position:absolute;inset:0;pointer-events:none;
  background-image:linear-gradient(rgba(255,255,255,.025) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.025) 1px,transparent 1px);
  background-size:56px 56px;
  -webkit-mask-image:radial-gradient(ellipse 100% 100% at 30% 20%, #000 40%, transparent 85%);
  mask-image:radial-gradient(ellipse 100% 100% at 30% 20%, #000 40%, transparent 85%);}
.sfx-spot{position:absolute;inset:0;pointer-events:none;opacity:0;transition:opacity .5s ease;
  background-image:linear-gradient(rgba(var(--accent-rgb,94,228,240),.55) 1px,transparent 1px),linear-gradient(90deg,rgba(var(--accent-rgb,94,228,240),.55) 1px,transparent 1px);
  background-size:56px 56px;
  -webkit-mask-image:radial-gradient(220px 220px at var(--mx,-999px) var(--my,-999px), #000 0%, transparent 70%);
  mask-image:radial-gradient(220px 220px at var(--mx,-999px) var(--my,-999px), #000 0%, transparent 70%);}
.sfx-host:hover .sfx-spot{opacity:1;}

/* ---- Grain (fixed, page-wide) ---- */
.sfx-grain{position:fixed;inset:0;z-index:60;pointer-events:none;opacity:.045;mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  background-size:160px 160px;}

/* ---- Custom cursor ring ---- */
.sfx-cursor{position:fixed;top:0;left:0;z-index:190;pointer-events:none;width:26px;height:26px;border-radius:50%;
  border:1.5px solid rgba(var(--accent-rgb,94,228,240),.55);transform:translate(-50%,-50%);transition:opacity .2s ease;}
.sfx-cursor.hide{opacity:0;}

/* ---- Colour palette (injected into the .hm-nav navbar) ---- */
.hm-palette{position:relative;flex-shrink:0;}
.hm-palette-btn{display:inline-flex;align-items:center;justify-content:center;width:38px;height:38px;border-radius:999px;
  background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.14);cursor:pointer;transition:background .2s,border-color .2s,transform .2s;}
.hm-palette-btn:hover{background:rgba(255,255,255,.1);border-color:rgba(255,255,255,.28);transform:translateY(-1px);}
.hm-palette-btn .sw{width:15px;height:15px;border-radius:50%;background:linear-gradient(135deg,var(--cyan-bright,#5EE4F0),var(--cyan-deep,#0B63C0));box-shadow:inset 0 0 0 1px rgba(255,255,255,.25);}
.hm-palette-pop{position:absolute;top:calc(100% + 12px);right:0;width:252px;background:#101112;border:1px solid rgba(255,255,255,.12);
  border-radius:12px;padding:14px;box-shadow:0 24px 54px rgba(0,0,0,.55);opacity:0;visibility:hidden;transform:translateY(-6px);
  transition:opacity .2s ease,transform .2s ease,visibility .2s;z-index:1001;}
.hm-palette.open .hm-palette-pop{opacity:1;visibility:visible;transform:translateY(0);}
.hm-palette-label{font-family:'IBM Plex Mono',monospace;font-size:.6rem;letter-spacing:.14em;text-transform:uppercase;color:#7E838C;margin-bottom:10px;}
.hm-palette-label b{color:var(--cyan-bright,#5EE4F0);font-weight:500;}
.hm-palette-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(26px,1fr));gap:8px;}
.hm-palette-sw{width:26px;height:26px;border-radius:50%;cursor:pointer;padding:0;background:var(--sw);border:1px solid rgba(255,255,255,.16);
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.12);transition:transform .18s;}
.hm-palette-sw:hover{transform:scale(1.14);}
.hm-palette-sw[aria-pressed="true"]{box-shadow:0 0 0 2px #101112,0 0 0 4px var(--sw);}
@media (max-width:900px){.hm-palette{display:none;}}

@media (prefers-reduced-motion:reduce){
  .sfx-aurora,.sfx-blob,.sfx-orb{animation:none;}
  .sfx-spot,.sfx-cursor{display:none;}
}