/* ==========================================================================
   effects-3d.css – 3D-Hintergrund, Tiefenwirkung, Parallax, Tilt-Effekte
   ========================================================================== */

/* ----------------------------------------------------------
   GLOBALE 3D-SZENERIE
   Wird als fixer Hintergrund-Layer hinter allem platziert
   ---------------------------------------------------------- */
.scene-3d {
    position: fixed;
    inset: 0;
    z-index: -1;
    pointer-events: none;
    overflow: hidden;
    perspective: 1200px;
    perspective-origin: 50% 50%;
}

/* Aurora-Glow: weicher, atmender Lichtfleck im Hintergrund */
.aurora {
    position: absolute;
    border-radius: 50%;
    filter: blur(80px);
    opacity: 0.55;
    will-change: transform;
    transition: transform 1.2s var(--ease-out-quint);
}

.aurora-1 {
    width: 720px;
    height: 720px;
    top: -10%;
    left: -10%;
    background: radial-gradient(circle, rgba(59, 108, 255, 0.55) 0%, rgba(59, 108, 255, 0) 60%);
    animation: auroraFloat1 22s ease-in-out infinite;
}

.aurora-2 {
    width: 600px;
    height: 600px;
    top: 30%;
    right: -8%;
    background: radial-gradient(circle, rgba(0, 240, 255, 0.40) 0%, rgba(0, 240, 255, 0) 60%);
    animation: auroraFloat2 28s ease-in-out infinite;
}

.aurora-3 {
    width: 800px;
    height: 800px;
    bottom: -20%;
    left: 30%;
    background: radial-gradient(circle, rgba(106, 92, 255, 0.42) 0%, rgba(106, 92, 255, 0) 60%);
    animation: auroraFloat3 35s ease-in-out infinite;
}

@keyframes auroraFloat1 {
    0%, 100% { transform: translate(0, 0) scale(1); }
    33%      { transform: translate(80px, 60px) scale(1.1); }
    66%      { transform: translate(-40px, 100px) scale(0.95); }
}

@keyframes auroraFloat2 {
    0%, 100% { transform: translate(0, 0) scale(1); }
    50%      { transform: translate(-100px, 80px) scale(1.15); }
}

@keyframes auroraFloat3 {
    0%, 100% { transform: translate(0, 0) scale(1); }
    33%      { transform: translate(60px, -80px) scale(1.05); }
    66%      { transform: translate(-80px, -40px) scale(1.1); }
}

/* ----------------------------------------------------------
   3D-WIREFRAME-TUNNEL
   Mehrere Polygone gestaffelt in der Z-Tiefe – wirkt wie ein
   Blick in einen unendlichen Raum
   ---------------------------------------------------------- */
.wireframe-stack {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 1px;
    height: 1px;
    transform-style: preserve-3d;
    transform: translate(-50%, -50%);
    will-change: transform;
}

.wireframe-shape {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 600px;
    height: 600px;
    margin-left: -300px;
    margin-top: -300px;
    border: 1px solid rgba(59, 108, 255, 0.18);
    border-radius: 50%;
    opacity: 0;
    animation: tunnelFly 12s linear infinite;
    transform-style: preserve-3d;
}

.wireframe-shape::before,
.wireframe-shape::after {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: inherit;
    border: 1px dashed rgba(0, 240, 255, 0.10);
}

.wireframe-shape::before {
    transform: rotate3d(1, 0, 0, 60deg);
}

.wireframe-shape::after {
    transform: rotate3d(0, 1, 0, 60deg);
    border-color: rgba(106, 92, 255, 0.14);
}

.wireframe-shape:nth-child(1)  { animation-delay: 0s; }
.wireframe-shape:nth-child(2)  { animation-delay: -1.5s; }
.wireframe-shape:nth-child(3)  { animation-delay: -3s; }
.wireframe-shape:nth-child(4)  { animation-delay: -4.5s; }
.wireframe-shape:nth-child(5)  { animation-delay: -6s; }
.wireframe-shape:nth-child(6)  { animation-delay: -7.5s; }
.wireframe-shape:nth-child(7)  { animation-delay: -9s; }
.wireframe-shape:nth-child(8)  { animation-delay: -10.5s; }

@keyframes tunnelFly {
    0% {
        transform: translateZ(-2400px) rotateZ(0deg);
        opacity: 0;
    }
    15% {
        opacity: 0.7;
    }
    85% {
        opacity: 0.5;
    }
    100% {
        transform: translateZ(0px) rotateZ(120deg);
        opacity: 0;
    }
}

/* ----------------------------------------------------------
   FLOATING POLYGONS (im 3D-Raum schwebend)
   ---------------------------------------------------------- */
.polygon-floater {
    position: absolute;
    width: 140px;
    height: 140px;
    will-change: transform;
    pointer-events: none;
    animation: polygonFloat 18s ease-in-out infinite;
}

.polygon-floater svg {
    width: 100%;
    height: 100%;
    color: rgba(0, 240, 255, 0.6);
    filter: drop-shadow(0 0 12px rgba(0, 240, 255, 0.3));
}

.polygon-floater-1 { top: 12%; left: 8%; animation-delay: 0s; transform: rotate(15deg); }
.polygon-floater-2 { top: 60%; right: 10%; animation-delay: -3s; transform: rotate(-25deg); width: 100px; height: 100px; }
.polygon-floater-3 { bottom: 18%; left: 18%; animation-delay: -6s; transform: rotate(45deg); width: 80px; height: 80px; }
.polygon-floater-4 { top: 35%; right: 25%; animation-delay: -9s; transform: rotate(-10deg); width: 60px; height: 60px; }
.polygon-floater-5 { bottom: 30%; right: 35%; animation-delay: -12s; transform: rotate(60deg); width: 110px; height: 110px; }

@keyframes polygonFloat {
    0%, 100% {
        transform: translate3d(0, 0, 0) rotate(0deg);
    }
    25% {
        transform: translate3d(20px, -30px, 50px) rotate(8deg);
    }
    50% {
        transform: translate3d(-15px, -50px, 100px) rotate(-5deg);
    }
    75% {
        transform: translate3d(-30px, -20px, 60px) rotate(12deg);
    }
}

/* ----------------------------------------------------------
   PARTIKEL-STERNENFELD (mehrere Tiefen-Layer)
   ---------------------------------------------------------- */
.starfield {
    position: absolute;
    inset: 0;
    overflow: hidden;
}

.starfield-layer {
    position: absolute;
    inset: -10%;
    background-image:
        radial-gradient(1px 1px at 20% 30%, rgba(255,255,255,0.6), transparent),
        radial-gradient(1px 1px at 60% 70%, rgba(0,240,255,0.5), transparent),
        radial-gradient(1px 1px at 80% 10%, rgba(255,255,255,0.4), transparent),
        radial-gradient(1px 1px at 30% 80%, rgba(106,92,255,0.5), transparent),
        radial-gradient(2px 2px at 50% 50%, rgba(255,255,255,0.7), transparent),
        radial-gradient(1px 1px at 90% 60%, rgba(59,108,255,0.5), transparent),
        radial-gradient(1px 1px at 10% 50%, rgba(0,240,255,0.4), transparent);
    background-size: 600px 600px;
    background-repeat: repeat;
    will-change: transform;
}

.starfield-layer-1 {
    opacity: 0.7;
    animation: starDrift 60s linear infinite;
}

.starfield-layer-2 {
    opacity: 0.4;
    background-size: 900px 900px;
    animation: starDrift 90s linear infinite reverse;
}

.starfield-layer-3 {
    opacity: 0.25;
    background-size: 1400px 1400px;
    animation: starDrift 140s linear infinite;
}

@keyframes starDrift {
    from { transform: translate3d(0, 0, 0); }
    to   { transform: translate3d(-600px, 600px, 0); }
}

/* ----------------------------------------------------------
   3D-CARD-TILT (reagiert per JS via custom properties)
   Wir nutzen --tx (tiltX) und --ty (tiltY) die JS setzt
   ---------------------------------------------------------- */
.card,
.service-card,
.problem-card,
.branche-card,
.demo-card,
.value-card,
.compare-card,
.solution-pillar {
    transform-style: preserve-3d;
    will-change: transform;
}

[data-tilt] {
    transition: transform 0.4s var(--ease-out-quint), box-shadow 0.4s var(--ease-out-quint);
    transform-style: preserve-3d;
}

[data-tilt]:hover {
    transform: perspective(1000px) rotateX(var(--ty, 0deg)) rotateY(var(--tx, 0deg)) translateZ(8px);
    box-shadow:
        0 30px 80px rgba(0, 0, 0, 0.5),
        0 0 0 1px rgba(0, 240, 255, 0.4),
        0 0 60px rgba(59, 108, 255, 0.25);
}

/* Glanzlicht das dem Cursor folgt */
[data-tilt]::after {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: inherit;
    background: radial-gradient(
        circle at var(--mx, 50%) var(--my, 50%),
        rgba(0, 240, 255, 0.15),
        transparent 50%
    );
    opacity: 0;
    transition: opacity 0.4s ease;
    pointer-events: none;
    z-index: 1;
}

[data-tilt]:hover::after {
    opacity: 1;
}

/* Card-Inhalt soll über dem Glanzlicht liegen */
[data-tilt] > * {
    position: relative;
    z-index: 2;
}

/* ----------------------------------------------------------
   HERO-VISUAL: Logo bekommt 3D-Float und Mouse-Parallax
   ---------------------------------------------------------- */
.hero-visual {
    transform-style: preserve-3d;
    perspective: 1000px;
}

.hero-visual .hero-logo-svg {
    transform: rotateY(var(--mx-tilt, 0deg)) rotateX(var(--my-tilt, 0deg));
    transition: transform 0.4s var(--ease-out-quint);
    transform-origin: center;
}

/* ----------------------------------------------------------
   PARALLAX-SCROLL
   Hintergrundebenen bewegen sich langsamer als der Vordergrund
   ---------------------------------------------------------- */
.parallax-bg {
    will-change: transform;
}

[data-parallax-speed] {
    transition: transform 0.1s linear;
    will-change: transform;
}

/* ----------------------------------------------------------
   SECTION DIVIDER (perspektivische Wellenform)
   ---------------------------------------------------------- */
.section-divider {
    position: relative;
    height: 80px;
    overflow: hidden;
}

.section-divider svg {
    position: absolute;
    width: 200%;
    left: -50%;
    height: 100%;
}

.section-divider path {
    fill: none;
    stroke: var(--color-accent);
    stroke-width: 1;
    opacity: 0.2;
    animation: dividerFlow 12s ease-in-out infinite;
}

@keyframes dividerFlow {
    0%, 100% { transform: translateX(0); }
    50%      { transform: translateX(-100px); }
}

/* ----------------------------------------------------------
   SECTION ENTRY ANIMATION (Sections fliegen aus der Tiefe)
   ---------------------------------------------------------- */
.section {
    position: relative;
}

/* Sanfter Glow-Akzent zwischen Sections */
.section::before {
    content: "";
    position: absolute;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 60%;
    height: 1px;
    background: linear-gradient(90deg, transparent, rgba(0, 240, 255, 0.3), transparent);
    opacity: 0;
}

.section.has-divider::before {
    opacity: 1;
}

/* ----------------------------------------------------------
   GLOWING BUTTON ENHANCEMENT
   ---------------------------------------------------------- */
.btn-primary {
    position: relative;
    overflow: hidden;
    isolation: isolate;
}

.btn-primary::before {
    content: "";
    position: absolute;
    top: -50%;
    left: -100%;
    width: 60%;
    height: 200%;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.15), transparent);
    transform: skewX(-20deg);
    transition: left 0.6s var(--ease-out-quint);
    pointer-events: none;
}

.btn-primary:hover::before {
    left: 130%;
}

/* ----------------------------------------------------------
   ENHANCED SERVICE CARD ICON (3D bewegung)
   ---------------------------------------------------------- */
.service-card .service-card-icon {
    position: relative;
    transform-style: preserve-3d;
    transition: transform 0.5s var(--ease-out-quint);
}

.service-card:hover .service-card-icon {
    transform: rotateY(15deg) translateZ(10px);
}

.service-card .service-card-icon::before {
    content: "";
    position: absolute;
    inset: -4px;
    border-radius: inherit;
    background: linear-gradient(135deg, var(--color-primary-light), var(--color-accent), var(--color-violet));
    opacity: 0;
    z-index: -1;
    filter: blur(12px);
    transition: opacity 0.4s ease;
}

.service-card:hover .service-card-icon::before {
    opacity: 0.45;
}

/* ----------------------------------------------------------
   TIMELINE ENHANCEMENT
   ---------------------------------------------------------- */
.timeline::after {
    content: "";
    position: absolute;
    left: 0.75rem;
    top: 0;
    bottom: 0;
    width: 1px;
    background: linear-gradient(180deg, transparent, var(--color-accent) 50%, transparent);
    opacity: 0;
    animation: timelineGlowSweep 6s ease-in-out infinite;
}

@keyframes timelineGlowSweep {
    0%, 100% { opacity: 0; transform: translateY(-30%); }
    50%      { opacity: 0.6; transform: translateY(30%); }
}

/* ----------------------------------------------------------
   REDUCED MOTION
   ---------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
    .aurora,
    .wireframe-shape,
    .polygon-floater,
    .starfield-layer,
    .timeline::after {
        animation: none !important;
    }

    [data-tilt]:hover {
        transform: none !important;
    }

    .scene-3d {
        opacity: 0.4;
    }
}

/* ----------------------------------------------------------
   PERFORMANCE: Auf Mobile reduzierte Effekte
   ---------------------------------------------------------- */
@media (max-width: 768px) {
    .wireframe-shape:nth-child(n+5) { display: none; }
    .polygon-floater-2,
    .polygon-floater-4 { display: none; }
    .aurora-3 { display: none; }
    .starfield-layer-3 { display: none; }
}

@media (max-width: 480px) {
    .scene-3d {
        opacity: 0.6;
    }
    .polygon-floater { display: none; }
    [data-tilt]:hover {
        transform: none;
    }
}