/*
 * Approved Acevedology nocturnal environment.
 *
 * The rendered values below are copied from the locked prototype at
 * assets/design-inputs/nocturnal-card-approved/nocturnal-card-approved.html.
 * Only the production-safe texture URL and the content wrapper name differ.
 */

:root {
  --void: #06070b;
  --night: #090b12;
  --graphite: #10131b;
  --graphite-2: #171b25;
  --ink: #f0f2f6;
  --ink-soft: #c1c7d0;
  --ink-muted: #818a98;
  --line: rgba(185, 198, 218, 0.18);
  --line-bright: rgba(224, 232, 245, 0.30);
  --indigo: #5157a8;
  --violet: #7d5dc1;
  --lavender: #b6a3e8;
  --petroleum: #1d6177;
  --cyan: #77c2de;
  --mx: 70vw;
  --my: 45vh;
}

body.professional.theme-nocturnal {
  min-height: 100svh;
  overflow-x: hidden;
  background:
    radial-gradient(circle at 17% 10%, rgba(70,72,122,.15), transparent 26rem),
    radial-gradient(circle at 90% 92%, rgba(24,92,112,.11), transparent 30rem),
    linear-gradient(145deg, #05060a 0%, #090b11 44%, #07080e 100%);
  background-attachment: fixed;
  color: var(--ink);
}

.theme-nocturnal ::selection {
  background: rgba(125,93,193,.34);
  color: white;
}

.nocturnal-stage {
  position: relative;
  isolation: isolate;
  min-height: 100svh;
  overflow: hidden;
}

.ambient,
.reveal,
.veil,
.grain {
  position: fixed;
  inset: 0;
  pointer-events: none;
}

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

.reveal {
  z-index: -4;
  background-image: url("../professional/texture-iridescent-master.png");
  background-repeat: no-repeat;
  background-position: 60% 54%;
  background-size: 200vw;
  opacity: .38;
  filter: saturate(1.05) contrast(1.1) brightness(.92);
  mix-blend-mode: screen;
  -webkit-mask-image:
    radial-gradient(circle 230px at var(--mx) var(--my), #000 0 18%, rgba(0,0,0,.84) 36%, rgba(0,0,0,.28) 67%, transparent 100%),
    linear-gradient(90deg, #000 0 30%, rgba(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,.84) 36%, rgba(0,0,0,.28) 67%, transparent 100%),
    linear-gradient(90deg, #000 0 30%, rgba(0,0,0,.38) 46%, transparent 60%);
  mask-composite: intersect;
  transition: opacity .6s ease;
}

.veil {
  z-index: -3;
  opacity: .9;
  background:
    radial-gradient(ellipse 42% 15% at 28% 18%, rgba(160,138,216,.09), transparent 68%),
    radial-gradient(ellipse 38% 13% at 37% 73%, rgba(55,126,148,.08), transparent 66%),
    linear-gradient(75deg, transparent 12%, rgba(182,163,232,.022) 38%, rgba(75,90,133,.042) 52%, transparent 86%);
  filter: blur(3px);
}

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

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

.veil::after {
  left: 5vw;
  bottom: 7vh;
  transform: rotate(11deg) skewX(18deg);
  opacity: .68;
}

.grain {
  z-index: 20;
  opacity: .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) {
  .ambient,
  .reveal {
    background-position: 60% 88%;
    background-size: 240vw;
    opacity: .08;
  }

  .reveal {
    opacity: .26;
  }
}

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