/*
* Siemens Energy visual effects bundle
* Part of the `se-branding` shared resource
*
* Drop-in CSS for SE-styled web surfaces. Pair markup classes with se-effects.js
* for the particle canvas. Orbital timings and node-pulse cadence are canonical
* from the munich-2026 pitch deck (slide 1).
*
* Required CSS variables (consumer must define these):
* --purple e.g. #8A00E5
* --gradient-end e.g. #4D217A
* --white e.g. #FFFFFF
*
* ── Usage notes (gotchas learned the hard way) ─────────────────────────
*
* 1. .orbitals is self-positioning. It uses `position: absolute; right: -5%;
* top: 50%; transform: translateY(-50%)` and a fixed 500x500 size. Drop it
* straight into a positioned ancestor, e.g.:
*
*
* …
*
*
* DO NOT wrap it in a sized-by-content div. If you wrap with
* `` (no width), the wrapper
* collapses to 0x0, the absolute orbital child positions to the
* wrapper's top-left, and it lands fully off-screen past the right
* edge. If you must wrap (e.g. to override positioning per page), give
* the wrapper explicit `width: 500px; height: 500px`.
*
* 2. Layering. #particles is z-index 1 and .orbitals is z-index 0. They
* expect to sit ABOVE the page background. If you want to place them
* BEHIND page content (e.g. via a negatively-z-indexed wrapper),
* ensure no opaque parent (body, #root, or container) paints over the
* negative-z layer — keep the page-base colour on only.
*
* 3. Density tuning. se-effects.js defaults (60 particles, 0.15 alpha)
* are calibrated for hero / landing pages where the mesh is one of
* several decorative layers. On data-dense interior pages the mesh
* can read as "absent". Bump PARTICLE_COUNT to 100-120 and the line
* alpha to ~0.28 if you need it to register.
*/
/* ── Particle canvas ── */
#particles {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
z-index: 1;
}
/* ── Orbital rings ── */
.orbitals {
position: absolute;
width: 500px;
height: 500px;
right: -5%;
top: 50%;
transform: translateY(-50%);
z-index: 0;
opacity: 0;
animation: orbitalsIn 2s ease-out 0.3s forwards;
}
@keyframes orbitalsIn {
to { opacity: 1; }
}
.orbit {
position: absolute;
border-radius: 50%;
border: 1px solid rgba(255, 255, 255, 0.08);
}
.orbit--1 {
width: 100%;
height: 100%;
top: 0; left: 0;
animation: orbitSpin1 28s linear infinite;
}
.orbit--2 {
width: 75%;
height: 75%;
top: 12.5%; left: 12.5%;
border-style: dashed;
border-color: rgba(255, 255, 255, 0.06);
animation: orbitSpin2 16s linear infinite reverse;
}
.orbit--3 {
width: 50%;
height: 50%;
top: 25%; left: 25%;
border-color: rgba(138, 0, 229, 0.2);
animation: orbitSpin1 22s linear infinite;
}
.orbit--arc {
width: 110%;
height: 80%;
top: 10%; left: -5%;
border-color: transparent;
border-top-color: rgba(0, 210, 210, 0.25);
border-right-color: rgba(0, 210, 210, 0.12);
animation: orbitSpin2 32s linear infinite;
}
@keyframes orbitSpin1 {
to { transform: rotate(360deg); }
}
@keyframes orbitSpin2 {
to { transform: rotate(-360deg); }
}
.orbit-dot {
position: absolute;
width: 4px;
height: 4px;
border-radius: 50%;
background: rgba(255, 255, 255, 0.6);
}
.orbit--1 .orbit-dot {
top: -2px;
left: 50%;
}
.orbit--3 .orbit-dot {
bottom: -2px;
left: 30%;
}
/* ── Energy node ── */
.energy-node {
position: absolute;
width: 14px;
height: 14px;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
border-radius: 50%;
background: var(--white);
box-shadow:
0 0 12px 4px rgba(255, 255, 255, 0.6),
0 0 40px 10px rgba(138, 0, 229, 0.4),
0 0 80px 20px rgba(138, 0, 229, 0.15);
animation: nodePulse 3.2s ease-in-out infinite;
}
@keyframes nodePulse {
0%, 100% {
box-shadow:
0 0 12px 4px rgba(255, 255, 255, 0.6),
0 0 40px 10px rgba(138, 0, 229, 0.4),
0 0 80px 20px rgba(138, 0, 229, 0.15);
}
50% {
box-shadow:
0 0 16px 6px rgba(255, 255, 255, 0.8),
0 0 50px 14px rgba(138, 0, 229, 0.5),
0 0 100px 30px rgba(138, 0, 229, 0.2);
}
}
@media (max-width: 900px) {
.orbitals {
width: 350px;
height: 350px;
right: -15%;
}
}
@media (max-width: 640px) {
.orbitals {
width: 280px;
height: 280px;
right: -20%;
animation: orbitalsIn 2s ease-out 0.3s forwards;
animation-fill-mode: forwards;
}
}
/* ── Pulsing divider ── */
.divider {
width: 48px;
height: 3px;
background: var(--purple);
margin: 0 auto 2.5rem;
border-radius: 2px;
position: relative;
animation: dividerPulse 3s ease-in-out infinite;
}
.divider::after {
content: '';
position: absolute;
inset: -4px -8px;
background: var(--purple);
border-radius: 4px;
filter: blur(10px);
opacity: 0.4;
animation: dividerGlow 3s ease-in-out infinite;
}
@keyframes dividerPulse {
0%, 100% { width: 48px; opacity: 1; }
50% { width: 64px; opacity: 0.85; }
}
@keyframes dividerGlow {
0%, 100% { opacity: 0.3; filter: blur(10px); }
50% { opacity: 0.6; filter: blur(14px); }
}
/* ── Hero accent + shimmer ── */
.accent {
color: var(--purple);
position: relative;
background: linear-gradient(
90deg,
var(--purple) 0%,
var(--purple) 40%,
#c466ff 50%,
var(--purple) 60%,
var(--purple) 100%
);
background-size: 200% 100%;
-webkit-background-clip: text;
background-clip: text;
-webkit-text-fill-color: transparent;
animation: shimmer 4s ease-in-out infinite;
}
@keyframes shimmer {
0%, 100% { background-position: 100% 0; }
50% { background-position: -100% 0; }
}
/* ── Card entrance animation ── */
.project-card {
opacity: 0;
transform: translateY(24px);
animation: cardEnter 0.6s cubic-bezier(0.22, 1, 0.36, 1) forwards;
}
.project-card:nth-child(1) { animation-delay: 0.1s; }
.project-card:nth-child(2) { animation-delay: 0.2s; }
.project-card:nth-child(3) { animation-delay: 0.3s; }
.project-card:nth-child(4) { animation-delay: 0.4s; }
.project-card:nth-child(5) { animation-delay: 0.5s; }
@keyframes cardEnter {
to {
opacity: 1;
transform: translateY(0);
}
}
/* ── Reduced-motion guard ── */
@media (prefers-reduced-motion: reduce) {
.orbitals,
.orbit--1,
.orbit--2,
.orbit--3,
.orbit--arc,
.energy-node,
.divider,
.divider::after,
.accent,
.project-card {
animation: none;
}
.orbitals,
.project-card {
opacity: 1;
transform: none;
}
}