/* ══════════════ ATLAS WEBCRAFT — DEPTH DESIGN SYSTEM ══════════════ */
/* 3D Depth Playful (Rauno × Framer × Arc Browser) */

body { background:#0B0D14; color:#F4F5FA; font-family:Inter,system-ui,sans-serif; }
body > header { opacity:0; transition:opacity .25s ease; }
h1,h2,h3,h4 { overflow-wrap:break-word; }
/* Keine Silbentrennung in H1 (Hyphens nur via ­) */
h1, h2, h3, h4 { -webkit-hyphens: manual !important; hyphens: manual !important; }
/* Italic-Serif-Akzentwörter zusammenhalten (verhindert "Tie-|fe"-Brüche) */
h1 .font-serif, h2 .font-serif, h3 .font-serif { white-space: nowrap; }
a { text-decoration:none; }

.material-symbols-outlined { font-variation-settings:'FILL' 0,'wght' 400,'GRAD' 0,'opsz' 24; }

/* Gradient text */
.grad-text-teal { background:linear-gradient(135deg,#F4F5FA 0%,#22D3EE 90%); -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent; }
.grad-text-pink { background:linear-gradient(135deg,#A78BFA 0%,#F472B6 100%); -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent; }
.grad-bg-pill { background:linear-gradient(135deg,#A78BFA 0%,#22D3EE 100%); }
.grad-bg-pill-alt { background:linear-gradient(135deg,#F472B6 0%,#A78BFA 50%,#22D3EE 100%); }

/* Glass cards */
.glass {
  background:rgba(255,255,255,.04);
  backdrop-filter:blur(20px) saturate(160%); -webkit-backdrop-filter:blur(20px) saturate(160%);
  border:1px solid rgba(255,255,255,.08);
  box-shadow:0 4px 24px -2px rgba(0,0,0,.4), inset 0 1px 0 rgba(255,255,255,.04);
}
.glass-strong {
  background:rgba(255,255,255,.06);
  backdrop-filter:blur(28px) saturate(180%); -webkit-backdrop-filter:blur(28px) saturate(180%);
  border:1px solid rgba(255,255,255,.10);
  box-shadow:0 12px 48px -8px rgba(0,0,0,.6), inset 0 1px 0 rgba(255,255,255,.06);
}

/* Iridescent gradient border */
.iri-border { position:relative; }
.iri-border::before {
  content:''; position:absolute; inset:-1px; border-radius:inherit; padding:1px;
  background:linear-gradient(135deg,rgba(167,139,250,.6),rgba(34,211,238,.6),rgba(244,114,182,.6));
  -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);
  mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);
  -webkit-mask-composite:xor; mask-composite:exclude;
  pointer-events:none; opacity:.6;
}

/* Orbs */
.orb { position:absolute; border-radius:9999px; filter:blur(120px); opacity:.38; pointer-events:none; }
.orb-1 { width:620px; height:620px; background:#7C3AED; top:-180px; left:-140px; }
.orb-2 { width:540px; height:540px; background:#22D3EE; top:40%; right:-180px; }
.orb-3 { width:460px; height:460px; background:#F472B6; bottom:-200px; left:30%; }
@media (max-width:768px) { .orb { filter:blur(80px); opacity:.25; } }

.dot-grid { background-image:radial-gradient(rgba(255,255,255,.06) 1px,transparent 1px); background-size:24px 24px; }

/* Nav */
.glass-nav {
  background:rgba(11,13,20,.62);
  backdrop-filter:blur(28px) saturate(180%); -webkit-backdrop-filter:blur(28px) saturate(180%);
  border:1px solid rgba(255,255,255,.06);
}

/* Reveal */
.reveal { opacity:0; transform:translateY(22px); transition:opacity .8s cubic-bezier(.16,1,.3,1),transform .8s cubic-bezier(.16,1,.3,1); }
.reveal.visible { opacity:1; transform:translateY(0); }
.stagger > * { opacity:0; transform:translateY(16px); transition:opacity .6s ease,transform .6s ease; }
.stagger.visible > * { opacity:1; transform:translateY(0); }
.stagger.visible > *:nth-child(1){transition-delay:.04s}
.stagger.visible > *:nth-child(2){transition-delay:.10s}
.stagger.visible > *:nth-child(3){transition-delay:.16s}
.stagger.visible > *:nth-child(4){transition-delay:.22s}
.stagger.visible > *:nth-child(5){transition-delay:.28s}
.stagger.visible > *:nth-child(6){transition-delay:.34s}
.stagger.visible > *:nth-child(7){transition-delay:.40s}
.stagger.visible > *:nth-child(8){transition-delay:.46s}
@media (prefers-reduced-motion:reduce) { .reveal,.stagger > * { animation:none !important; transition:none !important; opacity:1 !important; transform:none !important; } }

/* Browser mockup */
.browser-card {
  position:relative; border-radius:18px; overflow:hidden;
  background:rgba(20,24,40,.7); border:1px solid rgba(255,255,255,.08);
  box-shadow:0 24px 60px -16px rgba(0,0,0,.65);
}
.browser-chrome {
  display:flex; align-items:center; gap:8px; padding:10px 14px;
  background:rgba(8,10,18,.85); border-bottom:1px solid rgba(255,255,255,.06);
}
.browser-chrome .dot { width:10px; height:10px; border-radius:9999px; }
.browser-url {
  margin-left:10px; flex:1; padding:3px 12px; border-radius:9999px;
  background:rgba(255,255,255,.04); border:1px solid rgba(255,255,255,.05);
  font-size:11px; color:rgba(255,255,255,.55); text-align:center;
  font-family:ui-monospace,monospace;
}

/* Chip */
.chip-float {
  display:inline-flex; align-items:center; gap:8px;
  padding:8px 14px; border-radius:9999px;
  background:rgba(255,255,255,.04); backdrop-filter:blur(16px);
  border:1px solid rgba(255,255,255,.08);
  font-size:13px; color:rgba(255,255,255,.88);
}
.chip-float .mi { font-size:16px; }

/* Buttons */
.btn-primary {
  display:inline-flex; align-items:center; gap:10px;
  padding:14px 26px; border-radius:9999px;
  background:linear-gradient(135deg,#A78BFA 0%,#22D3EE 100%);
  color:#0B0D14; font-weight:700; letter-spacing:-.01em;
  box-shadow:0 10px 30px -8px rgba(167,139,250,.55), 0 0 0 1px rgba(255,255,255,.12) inset;
  transition:transform .25s ease, box-shadow .25s ease;
}
.btn-primary:hover { transform:translateY(-2px); box-shadow:0 18px 42px -6px rgba(34,211,238,.5); }
.btn-ghost {
  display:inline-flex; align-items:center; gap:8px;
  padding:14px 22px; border-radius:9999px;
  background:rgba(255,255,255,.04); border:1px solid rgba(255,255,255,.12);
  color:#F4F5FA; font-weight:600;
  transition:background .2s ease, border-color .2s ease;
}
.btn-ghost:hover { background:rgba(255,255,255,.07); border-color:rgba(34,211,238,.3); }

/* Filter pills */
.filter-pill {
  padding:8px 16px; border-radius:9999px;
  font-size:12px; font-weight:500;
  background:rgba(255,255,255,.04); border:1px solid rgba(255,255,255,.08);
  color:rgba(255,255,255,.7); transition:all .2s ease; cursor:pointer;
}
.filter-pill:hover { background:rgba(255,255,255,.07); color:#fff; border-color:rgba(34,211,238,.3); }
.filter-pill.active { background:linear-gradient(135deg,#A78BFA 0%,#22D3EE 100%); color:#0B0D14; border-color:transparent; }

/* Hero browser stack animations */
.browser-stack { perspective:1200px; }
@keyframes hoverFloat { 0%,100%{transform:translateY(0) rotateY(-6deg) rotateX(2deg);} 50%{transform:translateY(-14px) rotateY(-4deg) rotateX(3deg);} }
@keyframes hoverFloat2 { 0%,100%{transform:translateY(-8px) rotateY(8deg) rotateX(-2deg);} 50%{transform:translateY(4px) rotateY(10deg) rotateX(-1deg);} }
.float-main { animation:hoverFloat 9s ease-in-out infinite; transform-style:preserve-3d; }
.float-side { animation:hoverFloat2 11s ease-in-out infinite; transform-style:preserve-3d; }
@media (max-width:768px) { .float-main,.float-side { animation:none; transform:none; } }
@media (prefers-reduced-motion:reduce) { .float-main,.float-side { animation:none !important; } }

/* Mobile menu */
#mobile-menu { display:none; }
#mobile-menu.open { display:flex; }

/* Project card hover */
.project-card { transition:transform .5s cubic-bezier(.16,1,.3,1); }
.project-card:hover { transform:translateY(-6px); }