/* ===== Orbit Seal – Main Styles ===== */

/* Brand & UI Fonts */
@font-face {
  font-family: "Bruno Ace";
  src: url("/assets/fonts/BrunoAce-Regular.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

/* Design Tokens */
:root{
  --font-brand: "Bruno Ace", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  --font-ui: system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;

  --bg1:#0f172a; /* slate-900 */
  --bg2:#0b2447;
  --bg3:#132c6b;
  --accent:#38bdf8;   /* sky-400 */
  --accent2:#34d399;  /* emerald-400 */
  --text:#cbd5e1;
  --muted:#94a3b8;    /* slate-400 */
}

/* Base / Layout */
*{ box-sizing:border-box; }
html,body{ height:100%; margin:0; }
body{
  font-family: var(--font-ui);
  color: var(--text);
  overflow:hidden;
  background: radial-gradient(1200px 700px at 50% 40%, #0f172a 0%, #0b2447 60%, #0a1831 100%);
}

/* Animated gradient sheen behind particles for subtle depth */
.bg-sheen{
  position:fixed; inset:0; z-index:0;
  background: linear-gradient(-45deg, var(--bg1), var(--bg2), var(--bg3), #0a1831);
  background-size:400% 400%;
  animation: sheen 22s ease infinite;
  opacity:.2;
}
@keyframes sheen{
  0%{background-position:0% 50%}
  50%{background-position:100% 50%}
  100%{background-position:0% 50%}
}

/* Particles canvas layer */
#particles-js{
  position:fixed; inset:0; z-index:1;
}

/* Content wrapper */
.content{
  position:relative; z-index:2;
  min-height:100%;
  display:flex; align-items:center; justify-content:center;
  padding:32px;
  text-align:center;
}

/* Card-ish center */
.hero{ position:relative; max-width:780px; width:100%; }

/* Logo + orbits container */
.logo-wrap{
  position: relative;
  width: 220px; height: 220px;
  margin: 0 auto 24px;
  display:grid; place-items:center;
  filter: drop-shadow(0 10px 30px rgba(56,189,248,.25));
}
.logo{ width:180px; height:auto; display:block; }

/* Orbit rings */
.ring{
  position:absolute; inset:0; margin:auto;
  border-radius:50%;
  border:1px dashed rgba(148,163,184,.25);
  pointer-events:none;
}
.r1{ width:220px; height:220px; }
.r2{ width:280px; height:280px; opacity:.8; }
.r3{ width:340px; height:340px; opacity:.6; }

/* Satellites (small dots) that rotate along the rings) */
.sat{
  position:absolute; top:50%; left:50%; 
  width:8px; height:8px; border-radius:50%;
  background: radial-gradient(circle at 30% 30%, #fff, var(--accent));
  box-shadow:0 0 12px rgba(56,189,248,.9);
  transform-origin:  center center; /* overridden per ring */
}
.r1 .sat{ 
  animation: orbit 26s linear infinite;
}
.r2 .sat{
  animation: orbit2 26s linear infinite;
  background: radial-gradient(circle at 30% 30%, #fff, var(--accent2));
  box-shadow:0 0 12px rgba(52,211,153,.9);
}
.r3 .sat{
  animation: orbit3 34s linear infinite;
}

@keyframes orbit  { 
	from { transform: rotate(0deg) translateX(110px); } 
	to { transform: rotate(360deg) translateX(110px); } 
}
@keyframes orbit2 { 
	from { transform: rotate(0deg) translateX(140px); }
	to { transform: rotate(360deg) translateX(140px); } 
}
@keyframes orbit3 { 
	from { transform: rotate(0deg) translateX(170px); } 
	to { transform: rotate(360deg) translateX(170px); } 
}

/* Type */
h1{
  font-family: var(--font-brand);
  font-size: clamp(2.2rem, 4vw, 3rem);
  line-height:1.15; margin: 0 0 12px;
  letter-spacing: .4px;
  color: var(--muted);
}
.claim{
  font-size: clamp(1.05rem, 2vw, 1.2rem);
  color: var(--muted);
  margin: 0 0 4px;
}
.note{ margin-top: 10px; opacity:.85; }

/* Subtle blur glow behind the center for focus */
.glow{
  position:absolute; inset:0; margin:auto; z-index:-1;
  width: 400px; height: 400px; filter: blur(80px);
  background: radial-gradient(circle at 50% 50%, rgba(56,189,248,.08), rgba(52,211,153,.18) 45%, transparent 70%);
  pointer-events:none;
}

/* Accessibility: respect reduced motion */
@media (prefers-reduced-motion: reduce){
  .bg-sheen{ animation: none }
  .sat{ animation: none }
}

/* Small footer-ish line */
.tiny{
  font-family: var(--font-brand);
  margin-top:22px; font-size:.85rem; color:#cbd5e1;
  opacity:.8;
}

/* Disable interactions (page has no UI elements for now) */
.content { pointer-events:none; }

/* Z-Order Grundordnung */
.bg-blur    { z-index: -3; }
.bg-overlay { z-index: -2; }
.bg-sheen   { z-index: -1; }
#particles-js { z-index: 0; }
.content    { position: relative; z-index: 1; }

/* Vollflächige Layer-Basis */
.bg-blur, .bg-overlay, .bg-sheen, #particles-js {
  position: fixed;
  inset: 0;
  pointer-events: none;
}

/* Statisches Hintergrundbild: AVIF/WebP/JPG mit Fallback */
.bg-blur {
  background: center / cover no-repeat;
  background-image: image-set(
    url("/assets/img/bg-tech.avif") type("image/avif"),
    url("/assets/img/bg-tech.webp") type("image/webp"),
    url("/assets/img/bg-tech.jpg") type("image/jpeg")
  );
  /* Safari älter: */
  background-image: -webkit-image-set(
    url("/assets/img/bg-tech.avif") type("image/avif"),
    url("/assets/img/bg-tech.webp") type("image/webp"),
    url("/assets/img/bg-tech.jpg") type("image/jpeg")
  );
  filter: blur(1px) brightness(0.8) saturate(1.08) contrast(1.08);
  transform: translateZ(0); /* GPU hint */
}

/* Kontrast-Overlay für bessere Lesbarkeit */
.bg-overlay {
/*  background: radial-gradient(1200px 800px at 60% 30%, rgba(10,61,94,0.35), transparent 60%),
              linear-gradient(180deg, rgba(0,0,0,0.45), rgba(0,0,0,0.75)); */
  background: linear-gradient(180deg, rgba(0,0,0,0.18), rgba(0,0,0,0.42));
}

/* Optional: bei High-DPI etwas weniger Blur nötig */
@media (min-resolution: 2dppx) {
  .bg-blur { filter: blur(4px) brightness(0.6) saturate(1.05); }
}

/* Optional: reduced motion – Partikel sanfter / aus (falls du das nutzt) */
@media (prefers-reduced-motion: reduce) {
  #particles-js { opacity: 0.3; }
}

/* === Fix: Hover / Click auf Particles wieder aktiv === */
#particles-js {
  pointer-events: auto;   /* erlaubt wieder Hover/Klick */
  z-index: 0;             /* bleibt unter Content */
}

#particles-js canvas {
  pointer-events: auto;   /* falls Canvas selbst blockiert */
}