/**
 * NEO Background Animations — Layer + CSS fuer DOM/CSS-Engines (glass/layers/calm).
 * Canvas/WebGL-Engines brauchen kein CSS. Klassen-Regeln sind unter
 * [data-neo-bg] gescoped, Keyframes (eindeutig benannt) sind global.
 */

/* Hintergrund-Animations-Layer im Hero (hinter dem Content) */
.nc-hero__bg-anim {
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  overflow: hidden;
}
/* Content/Overlay ueber der Animation */
.nc-hero__bg-anim ~ .nc-hero__content,
.nc-hero__bg-anim ~ .nc-hero__grid,
.nc-hero .nc-hero__content,
.nc-hero .nc-hero__grid { position: relative; z-index: 1; }
.nc-hero__bg-anim ~ .nc-hero__overlay { z-index: 0; }

/* ---------- Glass-Engine (DOM) ---------- */
[data-neo-bg] .gl-glow { position: absolute; border-radius: 50%; will-change: transform; }
[data-neo-bg] .gl-pane {
  position: absolute;
  border-radius: 20px;
  border: 1px solid rgba(255, 255, 255, 0.08);
  background: linear-gradient(135deg, rgba(255, 255, 255, 0.05), rgba(255, 255, 255, 0.01));
  box-shadow: 0 8px 40px rgba(0, 0, 0, 0.35), inset 0 1px 0 rgba(255, 255, 255, 0.10);
  will-change: transform;
}
[data-neo-bg] .gl-pane::before {
  content: ""; position: absolute; inset: 0; border-radius: inherit;
  background: linear-gradient(120deg, rgba(255, 255, 255, 0.13) 0%, transparent 35%);
  pointer-events: none;
}
@keyframes glDrift1 { from { transform: translate3d(0,0,0) scale(1); } to { transform: translate3d(12%, 8%, 0) scale(1.22); } }
@keyframes glDrift2 { from { transform: translate3d(0,0,0) scale(1); } to { transform: translate3d(-10%, -7%, 0) scale(1.15); } }
@keyframes glFloat1 { from { transform: translate3d(0,0,0) rotate(-1.2deg); } to { transform: translate3d(3%, 3%, 0) rotate(1deg); } }
@keyframes glFloat2 { from { transform: translate3d(0,0,0) rotate(1deg); } to { transform: translate3d(-3%, -3%, 0) rotate(-1.2deg); } }

/* ---------- Layers-Engine (SVG) ---------- */
@keyframes lyHover { from { transform: translateY(0); } to { transform: translateY(var(--amp, -12px)); } }
@keyframes lyRise {
  0% { transform: translateY(0); opacity: 0; }
  15% { opacity: 0.9; } 85% { opacity: 0.9; }
  100% { transform: translateY(-170px); opacity: 0; }
}
[data-neo-bg] .ly-layer { will-change: transform; animation: lyHover 7s ease-in-out infinite alternate; }
[data-neo-bg] .ly-dot { animation: lyRise 6s linear infinite; opacity: 0; }

/* ---------- Calm-Engine ---------- */
[data-neo-bg] .calm-a, [data-neo-bg] .calm-b { position: absolute; inset: 0; }
@keyframes calmA { from { opacity: 1; } to { opacity: 0.35; } }
@keyframes calmB { from { opacity: 0.35; } to { opacity: 1; } }
[data-neo-bg] .calm-a { animation: calmA var(--period, 20s) ease-in-out infinite alternate; }
[data-neo-bg] .calm-b { animation: calmB var(--period, 20s) ease-in-out infinite alternate; }

@media (prefers-reduced-motion: reduce) {
  [data-neo-bg] .gl-glow, [data-neo-bg] .gl-pane,
  [data-neo-bg] .ly-layer, [data-neo-bg] .ly-dot,
  [data-neo-bg] .calm-a, [data-neo-bg] .calm-b { animation: none !important; }
  [data-neo-bg] .ly-dot { opacity: 0.5; }
}

/* tom/tmob: Content + Media ueber dem Animations-Layer */
[data-neo-hero-tom] .nc-hero-tom__media,
[data-neo-hero-tom] .nc-hero-tom__content,
[data-neo-hero-tmob] .nc-hero-tmob__content,
[data-neo-hero-tmob] .nc-hero-tmob__media { position: relative; z-index: 1; }

/* ---------- Aurora-Curtains (CSS-Engine) ---------- */
[data-neo-bg] .aurora-curtains {
  position: absolute; inset: 0; overflow: hidden; background: #040a0d;
  --aurora-green: var(--neo-bg-1, #37e93d);
  --aurora-teal: var(--neo-bg-2, #18cfa4);
  --aurora-violet: var(--neo-bg-3, #6a35c9);
}
[data-neo-bg] .aurora-curtains__layer {
  position: absolute; inset: -60% -60%; will-change: transform; filter: blur(40px);
  -webkit-mask-image: linear-gradient(to bottom, #000 0%, #000 35%, transparent 85%);
          mask-image: linear-gradient(to bottom, #000 0%, #000 35%, transparent 85%);
}
[data-neo-bg] .aurora-curtains__layer--1 { opacity: .5; animation: auroraSweep1 38s linear infinite;
  background: repeating-linear-gradient(100deg, transparent 0%, color-mix(in srgb, var(--aurora-green) 55%, transparent) 6%, transparent 13%, color-mix(in srgb, var(--aurora-green) 35%, transparent) 19%, transparent 26%); }
[data-neo-bg] .aurora-curtains__layer--2 { opacity: .4; animation: auroraSweep2 52s linear infinite;
  background: repeating-linear-gradient(82deg, transparent 0%, color-mix(in srgb, var(--aurora-teal) 45%, transparent) 8%, transparent 17%, color-mix(in srgb, var(--aurora-green) 30%, transparent) 24%, transparent 33%); }
[data-neo-bg] .aurora-curtains__layer--3 { opacity: .28; animation: auroraSweep3 46s linear infinite;
  background: repeating-linear-gradient(95deg, transparent 0%, color-mix(in srgb, var(--aurora-violet) 35%, transparent) 10%, transparent 22%); }
[data-neo-bg] .aurora-curtains::before { content: ""; position: absolute; inset: 0; animation: auroraBreathe 9s ease-in-out infinite alternate;
  background: radial-gradient(ellipse 120% 70% at 50% 0%, color-mix(in srgb, var(--aurora-green) 14%, transparent), transparent 65%); }
@keyframes auroraSweep1 { from { transform: translate3d(0,0,0); } to { transform: translate3d(22%,0,0); } }
@keyframes auroraSweep2 { from { transform: translate3d(0,0,0); } to { transform: translate3d(-26%,0,0); } }
@keyframes auroraSweep3 { from { transform: translate3d(0,0,0); } to { transform: translate3d(18%,0,0); } }
@keyframes auroraBreathe { from { opacity: .55; } to { opacity: 1; } }
@media (prefers-reduced-motion: reduce) { [data-neo-bg] .aurora-curtains__layer, [data-neo-bg] .aurora-curtains::before { animation: none; } }