/* Architecture, motion and real project stories */
:root { --warm-white:#edf0e9; --muted-silver:#a6b2aa; }
body { background:radial-gradient(ellipse at 75% 4%,#1c3d2a3b,transparent 34%),linear-gradient(180deg,#070b09,#080b0a 45%,#050706); }
.container { max-width:1280px; gap:72px; padding-top:130px; }
.architecture-hero { display:grid; grid-template-columns:1.05fr 1fr; align-items:center; gap:20px; padding:15px 16px 0; min-height:650px; background:none; border:0; border-radius:0; overflow:visible; }
.architecture-hero::before,.architecture-hero::after { content:none; }
.hero-copy { position:relative; z-index:2; padding:30px 0; animation:copyArrive .9s var(--ease-out) both; }
.architecture-hero .hero-eyebrow { text-align:left; display:flex; align-items:center; gap:12px; font-size:9px; letter-spacing:1.5px; margin-bottom:25px; }
.eyebrow-line { display:block; width:25px; height:1px; background:var(--accent-color); }
.architecture-hero h1 { background:none; -webkit-text-fill-color:var(--warm-white); font-size:clamp(64px,7.3vw,100px); line-height:.98; font-weight:600; letter-spacing:-6px; margin-bottom:28px; }
.name-second { display:block; color:var(--accent-color); -webkit-text-fill-color:var(--accent-color); }.name-period { color:#658c75; -webkit-text-fill-color:#658c75; }
.hero-statement { max-width:420px; font-weight:400; font-size:22px; line-height:1.4; letter-spacing:-.65px; margin:0 0 18px; }
.architecture-hero .subtitle { text-align:left; max-width:460px; margin:0; font-size:13px; line-height:1.85; color:var(--text-muted); }
.architecture-hero .hero-actions { justify-content:flex-start; margin:28px 0; gap:22px; }
.hero-social-row { display:flex; align-items:center; gap:22px; }.hero-social-row a { display:flex; gap:7px; align-items:center; font-size:11px; color:var(--text-muted); transition:color .2s; }.hero-social-row a:hover { color:var(--accent-color); }.hero-social-row i { font-size:15px; }
.architecture-scene { position:relative; width:100%; aspect-ratio:600 / 550; perspective:900px; isolation:isolate; animation:sceneArrive 1.2s var(--ease-out) .2s both; }
.architecture-scene::before { content:''; position:absolute; inset:5% 0 5%; border-radius:50%; background:radial-gradient(ellipse,#83d6ad17,transparent 70%); filter:blur(25px); pointer-events:none; }
.scene-perspective { position:absolute; inset:0 0 30px; transform:rotateX(var(--scene-y,0deg)) rotateY(var(--scene-x,0deg)); transition:transform .18s ease-out; transform-style:preserve-3d; }
.scene-orbit { position:absolute; left:50%; top:50%; width:73%; height:73%; border:1px solid #c2efd515; border-radius:50%; transform:translate(-50%,-50%); pointer-events:none; }.orbit-one { height:60%; transform:translate(-50%,-50%) rotate(-30deg); border-color:#b2e8cd25; }.orbit-two { width:90%; height:36%; transform:translate(-50%,-50%) rotate(30deg); }.orbit-three { width:52%; height:91%; transform:translate(-50%,-50%) rotate(45deg); border-style:dashed; border-color:#b2e8cd10; }
.scene-connections { position:absolute; inset:0; width:100%; height:100%; pointer-events:none; }.connection-packets { animation:packetTravel 9s linear infinite; }
.scene-core { position:absolute; left:50%; top:50%; transform:translate(-50%,-50%); display:flex; flex-direction:column; align-items:center; justify-content:center; width:36%; aspect-ratio:1; border:1px solid #bff6dc4a; border-radius:32px; background:radial-gradient(circle at 50% 0%,#65857520,transparent 75%),linear-gradient(145deg,#1c3026e6,#0b1412f0); color:var(--accent-color); cursor:pointer; box-shadow:0 25px 70px #0006,0 0 60px #6eb99615,inset 0 1px #d3ffe12b; transition:border-color .3s,box-shadow .3s; }
.scene-core:hover { border-color:#bff6dcaa; box-shadow:0 25px 70px #0006,0 0 60px #6eb99635; }.scene-core svg { width:48%; margin-bottom:7px; filter:drop-shadow(0 0 12px #bff6dc40); }.scene-core strong { font:600 13px 'JetBrains Mono',monospace; letter-spacing:2px; }.scene-core small { color:#a2beae; font:7px 'JetBrains Mono',monospace; letter-spacing:1.2px; margin-top:8px; }
.core-ring { position:absolute; inset:-12px; border:1px solid #bff6dc19; border-radius:42px; pointer-events:none; animation:coreHalo 4s ease-in-out infinite; }
.scene-node { position:absolute; display:flex; align-items:center; gap:10px; width:34%; padding:14px 12px; border:1px solid #d3ffe128; border-radius:14px; background:linear-gradient(135deg,#2b3d332b,#131d1899); backdrop-filter:blur(18px); -webkit-backdrop-filter:blur(18px); color:var(--warm-white); box-shadow:0 10px 30px #0004,inset 0 1px #ffffff0a; cursor:pointer; text-align:left; transition:border-color .3s,background .3s; animation:nodeFloat 7s ease-in-out infinite; }
.scene-node:hover { border-color:#bff6dc66; background:#24372bd9; }.scene-node strong { display:block; font-size:12px; font-weight:600; }.scene-node small { display:block; font:6px 'JetBrains Mono',monospace; letter-spacing:.9px; color:var(--text-muted); margin-top:4px; }.node-icon { display:grid; place-items:center; flex-shrink:0; width:32px; height:32px; border:1px solid #bff6dc1a; border-radius:9px; background:#bff6dc08; color:var(--accent-color); font:20px 'JetBrains Mono',monospace; }.node-link { margin-left:auto; font-size:11px; color:var(--text-muted); }
.node-homarr { top:15%; left:0; }.node-jellyfin { top:15%; right:0; animation-delay:-2s; }.node-proxmox { bottom:21%; left:0; animation-delay:-4s; }.node-friday { bottom:21%; right:0; animation-delay:-1s; }.node-friday .node-icon { font-size:15px; }
.scene-bottom { position:absolute; left:50%; bottom:4%; transform:translateX(-50%); display:flex; gap:8px; align-items:center; color:#b3c6bb; white-space:nowrap; font:7px 'JetBrains Mono',monospace; letter-spacing:1px; border:1px solid #bff6dc1a; padding:10px 13px; border-radius:30px; background:#0c17118c; }.scene-status-dot { width:4px; height:4px; background:var(--accent-color); border-radius:50%; box-shadow:0 0 10px #bff6dc80; }
.scene-caption { display:flex; justify-content:space-between; gap:12px; position:absolute; bottom:0; left:7%; right:7%; font:7px 'JetBrains Mono',monospace; letter-spacing:.7px; color:#869d90; }
.hero-system-bar { grid-column:1 / -1; display:flex; justify-content:space-between; gap:28px; align-items:center; border-top:1px solid var(--glass-border); padding:26px 0; margin-top:24px; }
.system-label { display:block; font:8px 'JetBrains Mono',monospace; color:var(--text-muted); letter-spacing:1px; margin-bottom:9px; }.uptime-display { color:var(--accent-color); font:12px 'JetBrains Mono',monospace; font-weight:400; font-variant-numeric:tabular-nums; }.hero-stack { display:flex; gap:20px; flex-wrap:wrap; font:8px 'JetBrains Mono',monospace; color:var(--text-muted); letter-spacing:.7px; }.scroll-cue { display:flex; gap:18px; align-items:center; color:var(--text-muted); font:8px 'JetBrains Mono',monospace; letter-spacing:.7px; }.scroll-cue>span:last-child { color:var(--accent-color); font-size:17px; animation:scrollHint 3s ease-in-out infinite; }
.uptime-counter { display:flex; flex-wrap:wrap; gap:9px; align-items:center; opacity:1; }.uptime-reference { width:100%; color:var(--text-muted); font-size:9px; line-height:1.5; }
.aetherion-project { grid-column:1 / -1; display:grid; grid-template-columns:1.3fr 1fr; border-color:#c9ded330; background:radial-gradient(ellipse at 100% 0%,#728c7914,transparent 60%),#0d1210; }
.aetherion-project .project-cover { height:100%; min-height:480px; border-right:1px solid #bff6dc15; }.aetherion-project .project-cover img { object-fit:cover; object-position:46% center; }.aetherion-project .visual-project-copy { padding:38px; align-self:center; }.aetherion-project h3 { font-size:48px; letter-spacing:-2px; margin-bottom:16px; }.project-title-dot { color:var(--accent-color); }.aetherion-project .aetherion-lead { color:var(--warm-white); font-size:17px; line-height:1.5; margin-bottom:15px; }.project-live-link { display:inline-flex; align-items:center; gap:12px; color:var(--accent-color); font-size:12px; border-bottom:1px solid #bff6dc4d; padding:8px 0; margin-top:20px; }.project-live-link:hover { color:#fff; }
.visual-project-grid { grid-template-columns:1.12fr 1fr; gap:28px; }.homarr-project { margin-top:60px; }.showcase-section { padding-top:0; }.showcase-heading { margin-bottom:40px; }.showcase-heading h2 { font-size:clamp(32px,4vw,48px); letter-spacing:-2px; }
#about { background:none; border:0; border-top:1px solid var(--glass-border); border-radius:0; box-shadow:none; padding:60px 16px; }#about:hover { transform:none; }#about::before { content:none; }#about .content { display:grid; grid-template-columns:.75fr 1.25fr; gap:20px 55px; }#about .section-title { grid-row:span 3; max-width:270px; font-size:32px; line-height:1.2; margin-bottom:0; }#about .section-title>i { display:block; font-size:22px; margin-bottom:24px; }#about .content>p { margin:0; }#about .philosophy-principles { grid-column:2; margin-top:5px; }
#homelab { border-radius:24px; padding:40px; }#homelab .status-panel { background:linear-gradient(135deg,#07100c,#111f16); box-shadow:inset 0 1px #bff6dc16,0 20px 70px #0003; }#projects { background:none; border:0; border-radius:0; box-shadow:none; padding:10px 0; }#projects::before { content:none; }#projects:hover { transform:none; }.project-catalog { grid-template-columns:repeat(3,minmax(0,1fr)); }.catalog-card { min-height:260px; }
@keyframes packetTravel { to { stroke-dashoffset:-374; } }
@keyframes nodeFloat { 0%,100% { transform:translateY(0); }50% { transform:translateY(-9px); } }
@keyframes coreHalo { 0%,100% { opacity:.35; }50% { opacity:1; } }
@keyframes sceneArrive { from { opacity:0; transform:translateY(25px); }to { opacity:1; transform:none; } }
@keyframes copyArrive { from { opacity:0; transform:translateX(-18px); }to { opacity:1; transform:none; } }
@keyframes scrollHint { 0%,100% { transform:translateY(0); }50% { transform:translateY(4px); } }
@media(max-width:1050px) { .architecture-hero h1 { font-size:80px; }.scene-node { padding:11px 9px; gap:7px; }.node-icon { width:25px; height:25px; font-size:17px; }.node-link { display:none; }.scene-core strong { font-size:10px; }.hero-stack { gap:12px; }.aetherion-project .visual-project-copy { padding:28px; }.aetherion-project .project-cover { min-height:450px; } }
@media(max-width:800px) { .container { gap:45px; }.architecture-hero { grid-template-columns:1fr; gap:10px; padding:0 8px; }.hero-copy { padding:12px 0; }.architecture-hero h1 { font-size:clamp(68px,13vw,100px); letter-spacing:-4px; }.hero-statement { font-size:23px; max-width:500px; }.architecture-hero .subtitle { max-width:520px; }.architecture-scene { max-width:580px; margin:12px auto 0; }.scene-node { padding:16px 12px; }.node-icon { width:32px; height:32px; }.node-link { display:block; }.scene-core strong { font-size:13px; }.hero-system-bar { flex-wrap:wrap; gap:22px; margin-top:10px; }.scroll-cue { display:none; }.hero-stack { justify-content:flex-end; flex:1; }.aetherion-project { grid-template-columns:1fr; }.aetherion-project .project-cover { min-height:0; height:340px; }.aetherion-project .project-cover img { object-fit:cover; object-position:center; }.aetherion-project .visual-project-copy { padding:30px; }.project-catalog { grid-template-columns:repeat(2,minmax(0,1fr)); }#about .content { grid-template-columns:1fr; gap:20px; }#about .section-title { grid-row:auto; max-width:none; }#about .section-title>i { display:inline-block; margin-bottom:0; }#about .philosophy-principles { grid-column:1; } }
@media(max-width:500px) { .container { padding-top:110px; gap:40px; }.architecture-hero .hero-eyebrow { font-size:7px; letter-spacing:1.1px; }.architecture-hero h1 { font-size:75px; }.hero-statement { font-size:20px; line-height:1.4; }.architecture-hero .subtitle { font-size:12px; }.hero-social-row { margin-top:8px; }.architecture-scene { margin-top:20px; }.scene-node { padding:10px 8px; gap:6px; border-radius:10px; }.scene-node strong { font-size:9px; }.scene-node small { font-size:5px; letter-spacing:.5px; }.node-icon { width:22px; height:22px; border-radius:6px; font-size:14px; }.node-friday .node-icon { font-size:11px; }.node-link { display:none; }.scene-core { border-radius:23px; width:35%; }.core-ring { border-radius:30px; inset:-8px; }.scene-core strong { font-size:8px; letter-spacing:1px; }.scene-core small { font-size:5px; letter-spacing:.5px; margin-top:5px; }.scene-core svg { width:45%; margin-bottom:3px; }.scene-bottom { font-size:5px; letter-spacing:.5px; padding:7px 10px; }.scene-caption { left:2%; right:2%; font-size:5px; }.hero-system-bar { flex-direction:column; align-items:flex-start; gap:19px; }.hero-stack { justify-content:flex-start; font-size:7px; gap:16px; }.uptime-display { font-size:11px; }.aetherion-project .project-cover { height:auto; aspect-ratio:1.5; }.aetherion-project h3 { font-size:38px; }.aetherion-project .visual-project-copy { padding:25px; }.project-catalog { grid-template-columns:1fr; }#homelab { padding:24px; }#about { padding:30px 8px; }.showcase-heading h2 { font-size:33px; }.visual-project-grid { gap:22px; } }
@media(prefers-reduced-motion:reduce) { .scene-node,.scene-core .core-ring,.connection-packets,.architecture-scene,.hero-copy,.scroll-cue>span:last-child { animation:none; }.scene-perspective { transform:none!important; transition:none; } }
.architecture-hero h1 { text-align:left; }.hero-copy,.hero-system-bar { width:100%; }