/* ==========================================================================
   VRDevAI — Effect layer
   The site stays LIGHT. Effects are accents on a light surface: a soft brand
   aurora, a constellation field, glow-on-hover and gradient motion.
   Every colour still comes from brand.css. Nothing here is required for the
   content to be readable — it is all decoration.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. Hero — light surface with brand light behind it
   -------------------------------------------------------------------------- */
.hero--fx {
  isolation: isolate;
  padding-block: var(--sp-6);
  background: linear-gradient(180deg, #FBFCFF 0%, var(--white) 62%);
}
.hero--fx::before { content: none; } /* replaced by the layers below */

/* Layered aurora — cyan, violet, magenta, kept light enough for dark text */
.hero__aurora {
  position: absolute; inset: 0; z-index: -2;
  background:
    radial-gradient(40rem 28rem at 14% 6%,  rgba(33, 217, 237, 0.20), transparent 62%),
    radial-gradient(44rem 32rem at 80% 26%, rgba(122, 53, 255, 0.16), transparent 64%),
    radial-gradient(34rem 24rem at 62% 98%, rgba(195, 44, 255, 0.12), transparent 62%);
  animation: aurora-drift 22s ease-in-out infinite alternate;
}
@keyframes aurora-drift {
  from { transform: translate3d(0, 0, 0) scale(1); }
  to   { transform: translate3d(-2%, 1.5%, 0) scale(1.06); }
}

/* Faint engineering grid, faded out towards the edges */
.hero__grid-lines {
  position: absolute; inset: 0; z-index: -2;
  background-image:
    linear-gradient(rgba(7, 21, 47, 0.045) 1px, transparent 1px),
    linear-gradient(90deg, rgba(7, 21, 47, 0.045) 1px, transparent 1px);
  background-size: 64px 64px;
  mask-image: radial-gradient(circle at 50% 40%, #000 18%, transparent 76%);
  -webkit-mask-image: radial-gradient(circle at 50% 40%, #000 18%, transparent 76%);
}

/* Constellation canvas, painted by site.js */
.hero__canvas {
  position: absolute; inset: 0; z-index: -1;
  width: 100%; height: 100%;
  pointer-events: none;
}

/* Animated gradient on the headline accent */
.hero h1 .brand-gradient-text {
  background: linear-gradient(96deg, var(--tech-blue), var(--ai-violet), var(--signal-magenta), var(--tech-blue));
  background-size: 280% 100%;
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  animation: sheen 10s linear infinite;
}
@keyframes sheen {
  from { background-position: 0% 50%; }
  to   { background-position: 280% 50%; }
}

/* --------------------------------------------------------------------------
   2. Status pill — the "system online" cue, light variant
   -------------------------------------------------------------------------- */
.status {
  display: inline-flex; align-items: center; gap: 0.6em;
  padding: 0.42em 1em;
  border-radius: var(--r-pill);
  border: 1px solid rgba(8, 124, 255, 0.26);
  background: rgba(8, 124, 255, 0.06);
  font-family: ui-monospace, "SFMono-Regular", "Cascadia Mono", Menlo, Consolas, monospace;
  font-size: 0.68rem;
  font-weight: var(--fw-semibold);
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--tech-blue);
}
.status__dot {
  width: 7px; height: 7px; border-radius: 50%;
  background: var(--tech-blue);
  animation: pulse 2.4s ease-out infinite;
}
@keyframes pulse {
  0%   { box-shadow: 0 0 0 0 rgba(8, 124, 255, 0.55); }
  70%  { box-shadow: 0 0 0 9px rgba(8, 124, 255, 0); }
  100% { box-shadow: 0 0 0 0 rgba(8, 124, 255, 0); }
}

/* --------------------------------------------------------------------------
   3. Hero mark + chips — gentle life
   -------------------------------------------------------------------------- */
.hero__art img {
  filter: drop-shadow(0 0 40px rgba(33, 217, 237, 0.32)) drop-shadow(0 26px 60px rgba(122, 53, 255, 0.26));
  animation: breathe 8s ease-in-out infinite;
}
@keyframes breathe {
  0%, 100% { transform: translateY(0) scale(1); }
  50%      { transform: translateY(-12px) scale(1.02); }
}

.chip {
  backdrop-filter: blur(8px);
  background: rgba(255, 255, 255, 0.82);
  animation: float 7s ease-in-out infinite;
}
.chip--tr { animation-delay: -1.6s; }
.chip--bl { animation-delay: -3.2s; }
.chip--br { animation-delay: -4.8s; }
@keyframes float {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(-9px); }
}

/* The top tile is centred with translateX, so it needs its own keyframes —
   a plain translateY would wipe out the centring. */
.chip--top { animation: float-center 7s ease-in-out infinite; animation-delay: -2.4s; }
@keyframes float-center {
  0%, 100% { transform: translateX(-50%) translateY(0); }
  50%      { transform: translateX(-50%) translateY(-9px); }
}

/* --------------------------------------------------------------------------
   4. Section label with the bar marker
   -------------------------------------------------------------------------- */
.eyebrow--bar {
  display: inline-flex; align-items: center; gap: 0.7em;
  font-family: ui-monospace, "SFMono-Regular", "Cascadia Mono", Menlo, Consolas, monospace;
}
.eyebrow--bar::before {
  content: "";
  width: 3px; height: 1.05em;
  border-radius: 2px;
  background: var(--grad-brand);
}

/* --------------------------------------------------------------------------
   5. Glow border + cursor spotlight on cards
   -------------------------------------------------------------------------- */
.step, .card { position: relative; overflow: hidden; }

/* Gradient hairline that fades in on hover */
.step::before, .card::before {
  content: "";
  position: absolute; inset: 0;
  border-radius: inherit;
  padding: 1px;
  background: var(--grad-brand);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  opacity: 0;
  transition: opacity 0.28s var(--ease);
  pointer-events: none;
}
.step:hover::before, .card:hover::before { opacity: 1; }

/* Soft light that follows the pointer (coords set by site.js) */
.step::after, .card::after {
  content: "";
  position: absolute; inset: 0;
  background: radial-gradient(16rem 16rem at var(--mx, 50%) var(--my, 0%), rgba(8, 124, 255, 0.10), transparent 70%);
  opacity: 0;
  transition: opacity 0.28s var(--ease);
  pointer-events: none;
}
.step:hover::after, .card:hover::after { opacity: 1; }
.step:hover, .card:hover { box-shadow: 0 12px 32px rgba(8, 124, 255, 0.14), var(--shadow-md); }

/* --------------------------------------------------------------------------
   6. Case-study cards — sweep of light on hover
   -------------------------------------------------------------------------- */
.work__item { overflow: hidden; }
.work__item::before {
  content: "";
  position: absolute; inset: 0;
  background: linear-gradient(115deg, transparent 38%, rgba(255, 255, 255, 0.10) 50%, transparent 62%);
  transform: translateX(-120%);
  transition: transform 0.85s var(--ease);
  pointer-events: none;
}
.work__item:hover::before { transform: translateX(120%); }
.work__item:hover { box-shadow: 0 18px 48px rgba(8, 124, 255, 0.24), var(--shadow-lg); }
.work__item .tag { backdrop-filter: blur(6px); }

/* --------------------------------------------------------------------------
   7. CTA band — the one deliberately dark moment, with aurora
   -------------------------------------------------------------------------- */
.cta-band { isolation: isolate; }
.cta-band::before {
  content: "";
  position: absolute; inset: 0; z-index: -1;
  background:
    radial-gradient(30rem 20rem at 20% 10%, rgba(33, 217, 237, 0.20), transparent 62%),
    radial-gradient(32rem 22rem at 82% 88%, rgba(195, 44, 255, 0.20), transparent 62%);
  animation: aurora-drift 18s ease-in-out infinite alternate;
}

/* --------------------------------------------------------------------------
   8. Tech pills — brand tint on hover
   -------------------------------------------------------------------------- */
.tech li {
  transition: color 0.2s var(--ease), border-color 0.2s var(--ease), box-shadow 0.2s var(--ease), transform 0.2s var(--ease);
}
.tech li:hover {
  color: var(--tech-blue);
  border-color: rgba(8, 124, 255, 0.42);
  box-shadow: 0 4px 16px rgba(8, 124, 255, 0.14);
  transform: translateY(-2px);
}

/* --------------------------------------------------------------------------
   9. Respect reduced motion — kill every animation, keep the styling
   -------------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  .hero__aurora,
  .hero h1 .brand-gradient-text,
  .chip,
  .hero__art img,
  .status__dot,
  .cta-band::before {
    animation: none;
  }
  .hero__canvas { display: none; }
  .work__item::before { transition: none; }
}