/* Intro aura — soft organic backdrop behind the opening name and About section only.
   Pearl in light mode, charcoal in dark mode. Fades out fully before Selected Projects. */
#portfolio-root #about { position: relative; }
#portfolio-root #about > .intro-sticky { z-index: 1; }
/* The previous flat ambient wash is replaced by the aura (it would otherwise veil it). */
#portfolio-root #about > .intro-sticky::after { opacity: 0 !important; }

#portfolio-root #about > .intro-aura {
  --aura-img: url("assets/aura-pearl.webp");
  --aura-o: .92;
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  overflow: clip;
  /* Full strength through the intro, then dissolves to nothing at the end of the section. */
  -webkit-mask-image: linear-gradient(to bottom, #000 0, #000 calc(100% - 85svh), transparent calc(100% - 8svh));
          mask-image: linear-gradient(to bottom, #000 0, #000 calc(100% - 85svh), transparent calc(100% - 8svh));
}
#portfolio-root[data-theme="dark"] #about > .intro-aura {
  --aura-img: url("assets/aura-charcoal.webp");
  --aura-o: .88;
}

#portfolio-root #about .intro-aura-view {
  position: sticky;
  top: 0;
  height: 100svh;
  width: 100%;
  overflow: hidden;
  opacity: var(--aura-o);
  transition: opacity .6s ease;
  /* Soft edges so the image melts into the page colour on every side. */
  -webkit-mask-image: radial-gradient(ellipse 78% 72% at 54% 44%, #000 42%, transparent 100%);
          mask-image: radial-gradient(ellipse 78% 72% at 54% 44%, #000 42%, transparent 100%);
}

#portfolio-root #about .intro-aura-view i {
  position: absolute;
  inset: -12% -10%;
  background: var(--aura-img) 50% 44% / max(128%, 290svh) auto no-repeat;
  will-change: transform;
  backface-visibility: hidden;
}
#portfolio-root #about .intro-aura-view i:nth-child(1) {
  animation: introAuraDriftA 46s ease-in-out infinite alternate;
}
#portfolio-root #about .intro-aura-view i:nth-child(2) {
  opacity: .34;
  transform: scaleX(-1);
  animation: introAuraDriftB 62s ease-in-out infinite alternate;
}

@keyframes introAuraDriftA {
  0%   { transform: translate3d(-1.5%, 0, 0) scale(1.02) rotate(0deg); }
  50%  { transform: translate3d(1.2%, -1.6%, 0) scale(1.07) rotate(-1.2deg); }
  100% { transform: translate3d(2.4%, 1.2%, 0) scale(1.04) rotate(.8deg); }
}
@keyframes introAuraDriftB {
  0%   { transform: scaleX(-1) translate3d(2%, 1%, 0) scale(1.05) rotate(1deg); }
  100% { transform: scaleX(-1) translate3d(-2.5%, -1.5%, 0) scale(1.1) rotate(-1.4deg); }
}

/* Phones, tablets and short screens: the intro scrolls normally, so the aura covers
   the intro block and fades before the projects heading. Name layout is untouched. */
#portfolio-root.compact-layout #about > .intro-aura {
  -webkit-mask-image: linear-gradient(to bottom, #000 0, #000 62%, transparent 97%);
          mask-image: linear-gradient(to bottom, #000 0, #000 62%, transparent 97%);
}
#portfolio-root.compact-layout #about .intro-aura-view {
  position: absolute;
  inset: 0;
  height: auto;
  -webkit-mask-image: radial-gradient(ellipse 95% 70% at 55% 30%, #000 40%, transparent 100%);
          mask-image: radial-gradient(ellipse 95% 70% at 55% 30%, #000 40%, transparent 100%);
}
#portfolio-root.compact-layout #about .intro-aura-view i {
  inset: 0 -45% auto -45%;
  height: 88%;
  background-position: 58% 18%;
  background-size: cover;
  -webkit-mask-image: linear-gradient(to bottom, #000 0, #000 55%, transparent 100%);
          mask-image: linear-gradient(to bottom, #000 0, #000 55%, transparent 100%);
}

@media (prefers-reduced-motion: reduce) {
  #portfolio-root #about .intro-aura-view i { animation: none !important; }
}