/* Ported from React Bits ParticleText.css / SpotlightCard.css, adapted for
   the portal's plain-CSS design system (uses the portal's own --bg/--card/
   --ink tokens rather than hardcoded colors). */

.particle-text {
  position: relative;
  display: block;
  width: 100%;
  height: 100%;
  overflow: hidden;
  touch-action: none;
  isolation: isolate;
}
.particle-text__canvas {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
}
.particle-text__sr {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* Full-width hero band; .hero-inner (in portal.blade.php's inline <style>)
   re-applies the page's reading-column width for the actual content. */
.site-hero {
  position: relative;
  overflow: hidden;
  background: radial-gradient(120% 140% at 15% 0%, #2a2874 0%, #1b1a55 55%, #100f36 100%);
}
.site-hero::after {
  /* Subtle vignette so particles read clearly against the gradient. */
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(60% 60% at 50% 40%, transparent 40%, rgba(16, 15, 54, 0.55) 100%);
  pointer-events: none;
}
.hero-logo {
  position: relative;
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 1.25rem;
}
.hero-logo img { width: 4.5rem; height: 4.5rem; border-radius: 50%; }
#particle-hero {
  position: relative;
  height: clamp(9rem, 20vw, 15rem);
  z-index: 1;
}
.hero-tagline {
  position: relative; z-index: 2;
  text-align: center; color: #cbc8ea; font-size: 1.02rem;
  margin: .5rem auto 0; max-width: 34rem;
}

/* Globe footer (React island, see frontend/apps/portal-widgets). */
.globe-footer {
  margin-top: 2.5rem;
  text-align: center;
  overflow: hidden;
  border-radius: 1.5rem;
}
.globe-footer h2 { color: var(--ink); font-size: clamp(1.25rem, 2.5vw, 1.6rem); margin: 0 0 .4rem; letter-spacing: -.01em; }
.globe-footer p { color: var(--muted); font-size: .95rem; margin: 0 auto; max-width: 28rem; }
.globe-footer-canvas { width: 100%; height: 1050px; position: relative; }

/* Ferrofluid — full-page ambient background (React island, see
   frontend/apps/portal-widgets). Sits behind every other section;
   pointer-events:none so it never intercepts clicks/typing. */
.ferrofluid-bg {
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
}

/* SplashCursor — full-viewport WebGL fluid overlay. pointer-events:none so it
   never blocks clicks on cards/inputs regardless of stacking order. */
.splash-cursor-canvas {
  position: fixed;
  inset: 0;
  width: 100vw;
  height: 100vh;
  pointer-events: none;
  z-index: 60;
  display: block;
  mix-blend-mode: screen;
}

/* CurvedInput */
.curved-input {
  position: relative;
  display: block;
  width: 100%;
  max-width: 100%;
  margin: 0;
}
.curved-input__svg {
  display: block;
  overflow: visible;
  width: 100%;
  height: auto;
  cursor: text;
  user-select: none;
  -webkit-user-select: none;
  -webkit-tap-highlight-color: transparent;
}
.curved-input__svg text { font-family: inherit; }
.curved-input__ring { opacity: 0; transition: opacity .25s ease; }
.curved-input:focus-within .curved-input__ring { opacity: .28; }
.curved-input__button { cursor: pointer; outline: none; }
.curved-input__button-bg { transition: filter .2s ease, opacity .2s ease; }
.curved-input__button:hover .curved-input__button-bg { filter: brightness(1.12); }
.curved-input__button:active .curved-input__button-bg { filter: brightness(.94); }
.curved-input__field {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  opacity: 0;
  border: 0;
  padding: 0;
  margin: 0;
  background: transparent;
  color: transparent;
  caret-color: transparent;
  font-size: 16px;
  pointer-events: none;
  outline: none;
}
.curved-input__status {
  margin: .6rem 0 0;
  font-size: .85rem;
  text-align: center;
  min-height: 1.2em;
}
.curved-input__status--success { color: #34d399; }
.curved-input__status--error { color: #fb7185; }

/* SpotlightCard, merged with the existing .card hover-lift. */
.card-spotlight {
  --mouse-x: 50%;
  --mouse-y: 50%;
  --spotlight-color: rgba(255, 255, 255, 0.25);
}
.card-spotlight::before {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: radial-gradient(circle at var(--mouse-x) var(--mouse-y), var(--spotlight-color), transparent 75%);
  opacity: 0;
  transition: opacity .4s ease;
  pointer-events: none;
}
.card-spotlight:hover::before,
.card-spotlight:focus-within::before {
  opacity: 1;
}