/* ============================================================
   DeppFlow — Enhancements (Effekte, Karten-Modals, Legal-Shell)
   Additiv zum NEXUS-Design. Nutzt bestehende Tokens (--cyan etc.)
   ============================================================ */

/* ── 1. Text-Reveal (Buchstaben-Slide beim Hover) ──────────── */
.text-reveal{
  display:inline-block;
  position:relative;
  overflow:hidden;
  vertical-align:top;
}
.text-reveal .tr-row{display:inline-flex;overflow:hidden;vertical-align:top}
.text-reveal .tr-char{
  display:inline-block;
  position:relative;
  will-change:transform;
  transition:transform .42s var(--ease-expo);
  transition-delay:calc(var(--tr-i,0) * 24ms);
}
.text-reveal .tr-char::after{
  content:attr(data-ch);
  position:absolute;
  left:0;top:100%;
  color:var(--cyan);
}
.text-reveal:hover .tr-char,
.text-reveal:focus-visible .tr-char{transform:translateY(-100%)}
@media (prefers-reduced-motion: reduce){
  .text-reveal .tr-char{transition:none}
  .text-reveal:hover .tr-char,.text-reveal:focus-visible .tr-char{transform:none}
}

/* ── 2. Wellen-Hintergrund (dezent, hinter Sektionsinhalt) ─── */
.has-waves{position:relative}
.has-waves > .nx-container{position:relative;z-index:1}
.waves-layer{
  position:absolute;inset:0;z-index:0;
  pointer-events:none;overflow:hidden;
  opacity:.6;
  mask-image:linear-gradient(180deg,transparent,#000 16%,#000 84%,transparent);
  -webkit-mask-image:linear-gradient(180deg,transparent,#000 16%,#000 84%,transparent);
}
.waves-layer canvas{display:block;width:100%;height:100%}
[data-theme="light"] .waves-layer{opacity:.45}
@media (prefers-reduced-motion: reduce){.waves-layer{opacity:.3}}

/* ── 3. Spotlight-Glow auf Karten (folgt dem Mauszeiger) ───── */
.spotlight{position:relative;isolation:isolate}
.spotlight::after{
  content:"";
  position:absolute;inset:0;
  border-radius:inherit;
  z-index:-1;opacity:0;
  pointer-events:none;
  transition:opacity .35s var(--ease);
  background:radial-gradient(240px 240px at var(--mx,50%) var(--my,50%),
    rgba(0,200,255,.18), rgba(139,92,246,.08) 45%, transparent 70%);
}
.spotlight:hover::after,.spotlight:focus-within::after{opacity:1}

/* ── 4. Klickbare Inhalts-Karten (Affordanz ohne Textlabel) ── */
.card-interactive{cursor:pointer}
.card-interactive:focus-visible{outline:2px solid var(--cyan);outline-offset:4px}
.card-interactive .card-plus{
  position:absolute;top:16px;right:16px;
  width:28px;height:28px;border-radius:50%;
  display:grid;place-items:center;
  border:1px solid var(--border);
  background:var(--bg-glass);
  color:var(--cyan);
  font-size:1rem;line-height:1;
  opacity:.5;transform:scale(.92);
  transition:opacity .3s var(--ease),transform .3s var(--ease-spring),background .3s var(--ease);
  z-index:3;pointer-events:none;
}
.card-interactive:hover .card-plus,
.card-interactive:focus-visible .card-plus{opacity:1;transform:scale(1);background:var(--cyan-dim)}

/* ── 5. Detail-Modal ───────────────────────────────────────── */
.df-modal-backdrop{
  position:fixed;inset:0;z-index:4000;
  display:flex;align-items:center;justify-content:center;
  padding:24px;
  background:rgba(2,4,14,.66);
  backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);
  opacity:0;transition:opacity .26s var(--ease);
}
.df-modal-backdrop.is-open{opacity:1}
.df-modal{
  position:relative;
  width:min(620px,100%);
  max-height:min(84vh,780px);overflow:auto;
  background:var(--bg-2);
  border:1px solid var(--border);
  border-radius:var(--r-xl);
  box-shadow:var(--shadow-xl);
  padding:38px 38px 32px;
  transform:translateY(16px) scale(.97);
  transition:transform .3s var(--ease-spring);
}
.df-modal::before{
  content:"";position:absolute;inset:0;border-radius:inherit;padding:1px;
  background:var(--grad-primary);opacity:.5;
  -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);
  -webkit-mask-composite:xor;mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);
  mask-composite:exclude;pointer-events:none;
}
.df-modal-backdrop.is-open .df-modal{transform:translateY(0) scale(1)}
.df-modal-body{position:relative}
.df-modal-eyebrow{
  display:inline-block;font-family:var(--font-mono);
  font-size:.72rem;letter-spacing:.18em;text-transform:uppercase;
  color:var(--cyan);margin-bottom:12px;
}
.df-modal h3{font-family:var(--font-display);font-size:clamp(1.5rem,2.6vw,2.05rem);margin:0 0 16px;color:var(--text-1)}
.df-modal p{color:var(--text-2);line-height:1.7;margin:0 0 14px}
.df-modal ul{margin:0 0 16px;padding-left:1.15em;color:var(--text-2);line-height:1.7}
.df-modal li{margin-bottom:7px}
.df-modal strong{color:var(--text-1)}
.df-modal-close{
  position:absolute;top:18px;right:18px;
  width:42px;height:42px;border-radius:50%;
  border:1px solid var(--border);background:var(--bg-glass);
  color:var(--text-1);font-size:1.4rem;line-height:1;
  display:grid;place-items:center;
  transition:background .3s var(--ease),transform .3s var(--ease);
}
.df-modal-close:hover{background:var(--cyan-dim);transform:rotate(90deg)}
body.df-modal-open{overflow:hidden}
@media (prefers-reduced-motion: reduce){
  .df-modal-backdrop,.df-modal{transition:opacity .15s linear}
  .df-modal{transform:none}
  .df-modal-close:hover{transform:none}
}
@media (max-width:560px){.df-modal{padding:28px 20px 24px}}

/* ── 6. Neon-Glow-Rahmen (am Haupt-Button) ─────────────────── */
.nx-btn.neon-glow{position:relative;z-index:0;overflow:visible}
.nx-btn.neon-glow::after{
  content:"";position:absolute;inset:-2px;border-radius:inherit;z-index:-1;
  padding:2px;
  background:conic-gradient(from 0deg,
    transparent 0deg,var(--cyan) 90deg,var(--purple) 200deg,transparent 320deg);
  -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);
  -webkit-mask-composite:xor;mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);
  mask-composite:exclude;
  opacity:0;transition:opacity .4s var(--ease);
  animation:nx-neon-spin 5s linear infinite;
}
.nx-btn.neon-glow:hover::after,.nx-btn.neon-glow:focus-visible::after{opacity:1}
@keyframes nx-neon-spin{to{transform:rotate(360deg)}}
@media (prefers-reduced-motion: reduce){.nx-btn.neon-glow::after{animation:none}}

/* ── 7. Legal-Seiten (Datenschutz / Impressum) im nx-Stil ──── */
.nx-legal{max-width:820px;margin:0 auto}
.nx-legal-card{
  background:var(--bg-card);
  border:1px solid var(--border);
  border-radius:var(--r-xl);
  box-shadow:var(--shadow-lg);
  padding:clamp(28px,4vw,52px);
}
.nx-legal-card h2{
  font-family:var(--font-display);
  font-size:clamp(1.2rem,2vw,1.5rem);
  color:var(--text-1);
  margin:36px 0 12px;
}
.nx-legal-card h2:first-of-type{margin-top:0}
.nx-legal-card p,.nx-legal-card li{color:var(--text-2);line-height:1.75}
.nx-legal-card a{color:var(--cyan)}
.nx-legal-card code{font-family:var(--font-mono);font-size:.9em;background:var(--bg-glass);padding:2px 6px;border-radius:6px}
.nx-legal-card small{color:var(--text-3)}

/* ── 8. 3D-Hintergrund site-wide ───────────────────────────── */
/* Hero-Canvas wird zum fixierten Vollbild-Hintergrund hinter allem */
#hero-canvas.nx-hero-canvas{
  position:fixed;inset:0;
  width:100vw;height:100vh;
  z-index:-1;
}
/* Sektions-Hintergründe durchscheinen lassen, damit Sterne überall sichtbar sind */
.nx-section-alt,
.nx-stats-section{background:linear-gradient(180deg,rgba(255,255,255,.03),transparent)}
.nx-section-dark{background:rgba(5,10,24,.34)}
.nx-footer{background:rgba(5,10,24,.55)}
[data-theme="light"] .nx-section-alt,
[data-theme="light"] .nx-stats-section{background:linear-gradient(180deg,rgba(0,0,0,.03),transparent)}
[data-theme="light"] .nx-section-dark{background:rgba(255,255,255,.45)}
[data-theme="light"] .nx-footer{background:rgba(255,255,255,.6)}