/* =========================================================
   VENTUREEX — Base reset + Ray-field canvas + Custom cursor
   ========================================================= */
*,*::before,*::after{ box-sizing: border-box; }
html{ background: var(--void); }
.parsec{
  margin:0;
  background: var(--void);
  color: var(--starlight);
  font-family: var(--font-body);
  font-size: var(--fs-body);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}
.parsec img{ max-width:100%; display:block; }
.parsec a{ color: inherit; text-decoration: none; }
.parsec ul{ list-style: none; margin:0; padding:0; }
.parsec button{ font: inherit; }

.parsec .container{
  max-width: var(--container);
  margin-inline: auto;
  padding-inline: clamp(1.25rem, 4vw, 2.5rem);
  position: relative;
}

/* ---------- Ray-field canvas host ---------- */
.rayfield-host{
  position: absolute;
  inset: 0;
  overflow: hidden;
  z-index: 0;
}
.rayfield-host canvas{
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
}
.rayfield-host::after{
  /* vignette so rays never fight the text */
  content:"";
  position:absolute; inset:0;
  background: radial-gradient(60% 55% at 50% 38%, transparent 0%, rgba(0,0,0,.35) 60%, var(--void) 100%);
  pointer-events:none;
}
.rayfield-host.rayfield-faint{ opacity:.45; }

/* starfield twinkle layer, sits above canvas rays, below vignette */
.starlayer{
  position:absolute; inset:0;
  background-image:
    radial-gradient(1px 1px at 10% 20%, #fff, transparent),
    radial-gradient(1px 1px at 80% 10%, #fff, transparent),
    radial-gradient(1.5px 1.5px at 40% 70%, #fff, transparent),
    radial-gradient(1px 1px at 65% 85%, #fff, transparent),
    radial-gradient(1px 1px at 90% 60%, #fff, transparent),
    radial-gradient(1.5px 1.5px at 25% 45%, #fff, transparent);
  background-repeat: no-repeat;
  opacity:.5;
  animation: twinkle 6s ease-in-out infinite;
  pointer-events:none;
}
@keyframes twinkle{ 0%,100%{opacity:.35;} 50%{opacity:.75;} }

/* ---------- Custom cursor ---------- */
.parsec-cursor{
  position: fixed;
  top:0; left:0;
  width: 28px; height: 28px;
  margin-left:-14px; margin-top:-14px;
  border-radius: 50%;
  border: 1.5px solid var(--ion-cyan);
  pointer-events: none;
  z-index: 9999;
  mix-blend-mode: screen;
  transition: width .25s var(--ease-out), height .25s var(--ease-out),
              margin .25s var(--ease-out), border-color .25s var(--ease-out),
              background .25s var(--ease-out), opacity .2s ease;
  will-change: transform;
}
.parsec-cursor-dot{
  position: fixed;
  top:0; left:0;
  width: 5px; height: 5px;
  margin-left:-2.5px; margin-top:-2.5px;
  border-radius: 50%;
  background: var(--ion-cyan);
  pointer-events: none;
  z-index: 9999;
  will-change: transform;
}
.parsec-cursor.is-hover{
  width: 64px; height: 64px;
  margin-left:-32px; margin-top:-32px;
  border-color: var(--ray-violet);
  background: radial-gradient(circle, var(--ray-violet-soft), transparent 70%);
}
.parsec-cursor.is-down{ width:20px; height:20px; margin-left:-10px; margin-top:-10px; }
@media (hover:none), (pointer:coarse){
  .parsec-cursor, .parsec-cursor-dot{ display:none; }
}

/* ---------- Page-wide scrolling starfield background ---------- */
.bg-stars{
  position: fixed;
  inset: -10% 0 0 0;
  height: 120%;
  z-index: 0;
  pointer-events: none;
  will-change: transform;
}
.bg-stars-far{
  background-image:
    radial-gradient(1px 1px at 8% 12%, rgba(237,239,247,.55), transparent),
    radial-gradient(1px 1px at 22% 38%, rgba(237,239,247,.4), transparent),
    radial-gradient(1.5px 1.5px at 35% 8%, rgba(237,239,247,.6), transparent),
    radial-gradient(1px 1px at 48% 55%, rgba(237,239,247,.4), transparent),
    radial-gradient(1px 1px at 62% 22%, rgba(237,239,247,.5), transparent),
    radial-gradient(1.5px 1.5px at 75% 62%, rgba(237,239,247,.55), transparent),
    radial-gradient(1px 1px at 88% 15%, rgba(237,239,247,.4), transparent),
    radial-gradient(1px 1px at 15% 78%, rgba(237,239,247,.45), transparent),
    radial-gradient(1px 1px at 58% 85%, rgba(237,239,247,.4), transparent),
    radial-gradient(1.5px 1.5px at 92% 80%, rgba(237,239,247,.5), transparent);
  background-repeat: repeat;
  background-size: 420px 420px;
  opacity: .5;
  animation: bg-twinkle 8s ease-in-out infinite;
}
.bg-stars-near{
  background-image:
    radial-gradient(1.5px 1.5px at 12% 25%, rgba(0,255,56,.55), transparent),
    radial-gradient(2px 2px at 40% 65%, rgba(255,255,255,.4), transparent),
    radial-gradient(1.5px 1.5px at 68% 15%, rgba(255,255,255,.6), transparent),
    radial-gradient(2px 2px at 85% 45%, rgba(0,255,56,.45), transparent),
    radial-gradient(1.5px 1.5px at 25% 88%, rgba(255,255,255,.35), transparent);
  background-repeat: repeat;
  background-size: 640px 640px;
  opacity: .4;
  animation: bg-twinkle 11s ease-in-out infinite reverse;
}
@keyframes bg-twinkle{ 0%,100%{ opacity:.3; } 50%{ opacity:.7; } }
@media (prefers-reduced-motion: reduce){ .bg-stars{ display:none; } }

/* ---------- Hero "orb" canvas host (particle jellyfish sphere) ---------- */
.orb-host{
  position: absolute;
  inset: 0;
  overflow: hidden;
  z-index: 0;
}
.orb-host canvas{
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
}
.orb-host::after{
  content:"";
  position:absolute; inset:0;
  background: radial-gradient(55% 50% at 68% 42%, transparent 0%, rgba(0,0,0,.25) 62%, var(--void) 100%);
  pointer-events:none;
}