/* The Profile backdrop deliberately reuses the approved canonical tube scene.
   The photograph stays in place until the Three.js renderer has completed setup. */
.profile-page .portfolio-hero-backdrop.profile-neon-tube-hero {
  isolation: isolate;
  overflow: hidden;
}

.profile-neon-tube-hero__canvas,
.profile-neon-tube-hero__noise {
  height: 100%;
  inset: 0;
  pointer-events: none;
  position: absolute;
  width: 100%;
}

.profile-neon-tube-hero__canvas {
  display: block;
  opacity: 0;
  z-index: 0;
}

.profile-neon-tube-hero__noise {
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 180 180' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.82' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  opacity: 0;
  z-index: 1;
}

.profile-page .portfolio-hero-backdrop.profile-neon-tube-hero.profile-neon-tube-hero--ready {
  background: radial-gradient(ellipse at 73% 54%, #082935 0, #02090c 40%, #010304 100%) !important;
}

.profile-page .portfolio-hero-backdrop.profile-neon-tube-hero.profile-neon-tube-hero--ready .profile-neon-tube-hero__canvas {
  opacity: 1;
}

.profile-page .portfolio-hero-backdrop.profile-neon-tube-hero.profile-neon-tube-hero--ready .profile-neon-tube-hero__noise {
  opacity: .045;
}

.profile-page .portfolio-hero-backdrop.profile-neon-tube-hero.profile-neon-tube-hero--ready::after {
  background: linear-gradient(90deg, rgba(1, 4, 5, .76) 0%, rgba(1, 4, 5, .46) 43%, rgba(1, 4, 5, .06) 72%, transparent 100%);
  content: "";
  inset: 0;
  pointer-events: none;
  position: absolute;
  z-index: 2;
}

@media (max-width: 760px) {
  .profile-page .portfolio-hero-backdrop.profile-neon-tube-hero.profile-neon-tube-hero--ready::after {
    background: linear-gradient(180deg, rgba(1, 4, 5, .72) 0%, rgba(1, 4, 5, .56) 56%, rgba(1, 4, 5, .22) 100%);
  }
}