/* Fine-grained aurora. Background-only blending keeps type and controls crisp.
   Inspired by https://css-tricks.com/grainy-gradients/ */
:root{--grain-opacity:.3;--aurora-opacity:1;--aurora-blur:64px;--night:#08091b}
body{background:var(--night);background-image:none;isolation:isolate}
body::before{display:none}
.ambient{position:fixed;inset:0;z-index:-1;pointer-events:none;overflow:hidden;isolation:isolate;background:radial-gradient(ellipse at 94% -5%,#a5335b66,transparent 48%),radial-gradient(ellipse at 12% 28%,#24115377,transparent 54%),radial-gradient(ellipse at 70% 98%,#12496355,transparent 55%),var(--night)}
.ambient::before{content:"";position:absolute;inset:-7%;background:url('assets/aurora.svg?v=blur2') center 35% / cover no-repeat;opacity:var(--aurora-opacity)}
.ambient::after{content:"";position:absolute;inset:0;background-image:url('assets/fine-grain.svg');background-size:180px 180px;background-repeat:repeat;filter:contrast(180%) brightness(110%);mix-blend-mode:soft-light;opacity:var(--grain-opacity)}
/* Frosted dark glass protects legibility over the brighter colour fields. */
.search-panel,.glass,.card{background:linear-gradient(125deg,#1a173b70,#0c102763);border-color:#ffffff2b;box-shadow:0 20px 65px #0306162b,inset 0 1px 0 #ffffff10;backdrop-filter:blur(24px);-webkit-backdrop-filter:blur(24px)}
.search-intro{color:#e1dbed}.quiet,.sample{color:#c2bbd0}.gate p,.gate small,.gate a{color:#c9c2d7}footer{color:#b3adc2}
@media(max-width:600px){.ambient::before{inset:-4% -42%;background-position:57% center;opacity:.88}.ambient{background:radial-gradient(ellipse at 100% 12%,#77224b55,transparent 55%),radial-gradient(ellipse at 0 52%,#28135666,transparent 65%),var(--night)}.ambient::after{background-size:160px 160px;opacity:.26}}
/* Coloured floor light is anchored to the logo, so both scale as one unit. */
.brand-stage{isolation:isolate;margin-bottom:52px}
.brand-stage::before{content:"";position:absolute;z-index:-1;left:-10%;right:-10%;bottom:-32%;height:64%;pointer-events:none;background:radial-gradient(ellipse 19% 13% at 23% 37%,#ff4079ef 0%,#ff126da3 32%,transparent 100%),radial-gradient(ellipse 29% 35% at 22% 46%,#ed087e9c 0%,#aa08aa45 55%,transparent 100%),radial-gradient(ellipse 32% 14% at 57% 49%,#492bffb3 0%,#3c20ff5c 48%,transparent 100%),radial-gradient(ellipse 27% 23% at 76% 60%,#04c9f6d9 0%,#087ee898 40%,transparent 100%),radial-gradient(ellipse 53% 35% at 65% 70%,#264cf04d,transparent 100%);filter:blur(6px);transform:rotate(3deg)}
.brand-stage::after{content:"";position:absolute;z-index:-1;left:7%;bottom:2%;width:45%;height:7%;pointer-events:none;border-radius:50%;background:radial-gradient(ellipse,#030412e6,transparent 72%);filter:blur(3px);transform:rotate(3deg)}
.brand-logo{filter:drop-shadow(0 0 7px #704cc22b)}
.gate .brand-stage{margin-bottom:60px}
/* Move the ambient flare away from the mark; the mark supplies the focal light. */
.ambient::before{opacity:.6;transform:translate(15%,-8%)}
@media(max-width:600px){.brand-stage{margin-bottom:46px}.gate .brand-stage{margin-bottom:54px}.brand-stage::before{filter:blur(4px)}.ambient::before{opacity:.48;transform:translate(20%,-10%)}}
.brand-stage::before{filter:blur(6px) saturate(1.5) brightness(1.35)}
@media(max-width:600px){.brand-stage::before{filter:blur(4px) saturate(1.5) brightness(1.35)}}
/* Feather the light layer before its rectangular paint boundary. Large desktop
   compositions otherwise expose the cyan radial gradient at the right edge. */
.brand-stage::before{
  -webkit-mask-image:radial-gradient(ellipse 50% 50% at 50% 50%,#000 52%,#000c 70%,#0005 86%,transparent 100%);
  mask-image:radial-gradient(ellipse 50% 50% at 50% 50%,#000 52%,#000c 70%,#0005 86%,transparent 100%);
}
/* The translated SVG must also fade before its own canvas ends. */
.ambient::before{
  -webkit-mask-image:radial-gradient(ellipse 50% 50% at 50% 50%,#000 55%,#000c 72%,#0005 88%,transparent 100%);
  mask-image:radial-gradient(ellipse 50% 50% at 50% 50%,#000 55%,#000c 72%,#0005 88%,transparent 100%);
}

/* Keep softness independent of SVG export settings; grain is a separate layer. */
.ambient::before{filter:blur(var(--aurora-blur))}
@media(max-width:600px){.ambient::before{--aurora-blur:40px}}