/* Nocturnal iridescent background — trial on notes.html only.
   Ported from otro/acevedology-assembly/portfolio/assets/site/surfaces.css
   (approved geometry; texture is byte-identical to /card's locked asset). */

body.professional.theme-nocturnal {
  background:
    radial-gradient(circle at 17% 10%, rgba(70, 72, 122, 0.15), transparent 26rem),
    radial-gradient(circle at 90% 92%, rgba(24, 92, 112, 0.11), transparent 30rem),
    linear-gradient(145deg, #05060a 0%, #090b11 44%, #07080e 100%);
  background-attachment: fixed;
}

/* Keep real content above the fixed background layers. */
body.theme-nocturnal > header.masthead,
body.theme-nocturnal > main,
body.theme-nocturnal > .wrap {
  position: relative;
  z-index: 1;
}

.site-background {
  position: fixed;
  z-index: 0;
  inset: 0;
  overflow: hidden;
  pointer-events: none;
}

.site-background__ambient,
.site-background__reveal,
.site-background__veil,
.site-background__grain {
  position: absolute;
  inset: 0;
  pointer-events: none;
}

.site-background__ambient {
  z-index: 0;
  background-image: url("../professional/texture-iridescent-master.png");
  background-repeat: no-repeat;
  background-position: 60% 54%;
  background-size: 200vw;
  opacity: 0.1;
  filter: saturate(0.82) contrast(1.14) brightness(0.74) blur(0.4px);
  mix-blend-mode: screen;
  -webkit-mask-image: radial-gradient(ellipse 42% 66% at 12% 52%, #000 0 40%, rgba(0, 0, 0, 0.8) 56%, transparent 76%);
  mask-image: radial-gradient(ellipse 42% 66% at 12% 52%, #000 0 40%, rgba(0, 0, 0, 0.8) 56%, transparent 76%);
  transform: scale(1.04);
}

.site-background__reveal {
  z-index: 1;
  background-image: url("../professional/texture-iridescent-master.png");
  background-repeat: no-repeat;
  background-position: 60% 54%;
  background-size: 200vw;
  opacity: 0.38;
  filter: saturate(1.05) contrast(1.1) brightness(0.92);
  mix-blend-mode: screen;
  -webkit-mask-image:
    radial-gradient(circle 230px at var(--mx) var(--my), #000 0 18%, rgba(0, 0, 0, 0.84) 36%, rgba(0, 0, 0, 0.28) 67%, transparent 100%),
    linear-gradient(90deg, #000 0 30%, rgba(0, 0, 0, 0.38) 46%, transparent 60%);
  mask-image:
    radial-gradient(circle 230px at var(--mx) var(--my), #000 0 18%, rgba(0, 0, 0, 0.84) 36%, rgba(0, 0, 0, 0.28) 67%, transparent 100%),
    linear-gradient(90deg, #000 0 30%, rgba(0, 0, 0, 0.38) 46%, transparent 60%);
  -webkit-mask-composite: source-in;
  mask-composite: intersect;
  transition: opacity 0.6s ease;
}

.site-background__veil {
  z-index: 2;
  opacity: 0.9;
  background:
    radial-gradient(ellipse 42% 15% at 28% 18%, rgba(160, 138, 216, 0.09), transparent 68%),
    radial-gradient(ellipse 38% 13% at 37% 73%, rgba(55, 126, 148, 0.08), transparent 66%),
    linear-gradient(75deg, transparent 12%, rgba(182, 163, 232, 0.022) 38%, rgba(75, 90, 133, 0.042) 52%, transparent 86%);
  filter: blur(3px);
}

.site-background__veil::before,
.site-background__veil::after {
  position: absolute;
  width: 62vw;
  height: 18vw;
  min-height: 130px;
  border: 1px solid rgba(187, 195, 224, 0.055);
  border-radius: 50%;
  background: linear-gradient(180deg, rgba(206, 213, 229, 0.025), rgba(93, 73, 143, 0.028));
  box-shadow: inset 0 0 70px rgba(129, 103, 183, 0.025);
  content: "";
  filter: blur(0.6px);
  transform: rotate(-15deg) skewX(-16deg);
}

.site-background__veil::before {
  top: 12vh;
  left: -10vw;
}

.site-background__veil::after {
  bottom: 7vh;
  left: 5vw;
  opacity: 0.68;
  transform: rotate(11deg) skewX(18deg);
}

.site-background__grain {
  z-index: 3;
  opacity: 0.12;
  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='.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.20'/%3E%3C/svg%3E");
  mix-blend-mode: soft-light;
}

@media (max-width: 860px) {
  .site-background__ambient,
  .site-background__reveal {
    background-position: 60% 88%;
    background-size: 240vw;
    opacity: 0.08;
  }

  .site-background__reveal {
    opacity: 0.26;
  }
}

@media (prefers-reduced-motion: reduce) {
  .site-background__reveal {
    display: none;
  }
}