/* Custom styles that can't be achieved with Tailwind */

/* Local font faces (DSGVO-compliant) */
@font-face {
    font-family: 'Inter';
    src: url('../fonts/inter/inter-latin-400-normal.woff2') format('woff2');
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}
@font-face {
    font-family: 'Inter';
    src: url('../fonts/inter/inter-latin-500-normal.woff2') format('woff2');
    font-weight: 500;
    font-style: normal;
    font-display: swap;
}
@font-face {
    font-family: 'Inter';
    src: url('../fonts/inter/inter-latin-600-normal.woff2') format('woff2');
    font-weight: 600;
    font-style: normal;
    font-display: swap;
}
@font-face {
    font-family: 'Inter';
    src: url('../fonts/inter/inter-latin-700-normal.woff2') format('woff2');
    font-weight: 700;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Red Hat Display';
    src: url('../fonts/red-hat-display/red-hat-display-latin-400-normal.woff2') format('woff2');
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}
@font-face {
    font-family: 'Red Hat Display';
    src: url('../fonts/red-hat-display/red-hat-display-latin-500-normal.woff2') format('woff2');
    font-weight: 500;
    font-style: normal;
    font-display: swap;
}
@font-face {
    font-family: 'Red Hat Display';
    src: url('../fonts/red-hat-display/red-hat-display-latin-600-normal.woff2') format('woff2');
    font-weight: 600;
    font-style: normal;
    font-display: swap;
}
@font-face {
    font-family: 'Red Hat Display';
    src: url('../fonts/red-hat-display/red-hat-display-latin-700-normal.woff2') format('woff2');
    font-weight: 700;
    font-style: normal;
    font-display: swap;
}

/* Font family */
body {
    font-family: 'Inter', 'Red Hat Display', sans-serif;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

h1, h2, h3, h4, h5, h6 {
    font-family: 'Red Hat Display', sans-serif;
}

/* Smooth scrolling */
html {
    scroll-behavior: smooth;
}

/* Loading spinner */
.spinner {
    border: 3px solid #f3f3f3;
    border-top: 3px solid #3498db;
    border-radius: 50%;
    width: 20px;
    height: 20px;
    animation: spin 1s linear infinite;
}

@keyframes spin {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}

/* Carousel Animation */
@keyframes carousel {
    0% {
        transform: translateX(0);
    }
    100% {
        transform: translateX(calc(-100% - 2rem));
    }
}



/* Radial layout base styles */
#radial-layout {
    position: relative;
    z-index: 10;
}

/* Mobile responsive overrides for complex positioning */
@media (max-width: 1024px) {
    /* Hide phase details by default on tablet and below */
    #radial-layout .phase-details {
        display: none !important;
    }
    
    /* Show tap hint on tablet and below */
    #radial-layout .lg\\:hidden {
        display: block !important;
    }
}

@media (max-width: 768px) {
    /* Adjust connection line positions for mobile */
    #radial-layout svg {
        transform: scale(0.7);
        transform-origin: center;
    }
}

@media (max-width: 640px) {
    /* Scale down connection lines even more */
    #radial-layout svg {
        transform: scale(0.5);
        transform-origin: center;
    }
}

@keyframes pulse-glow {
    0% {
        box-shadow: 0 0 20px rgba(37, 99, 235, 0.3);
    }
    100% {
        box-shadow: 0 0 40px rgba(37, 99, 235, 0.6);
    }
}

/* Counter container transitions removed - no longer needed */

.animate-carousel {
    animation: carousel 60s linear infinite;
    will-change: transform;
}

.animate-carousel:hover {
    animation-play-state: paused;
}

/* Carousel Container Styles */
.carousel-container {
    position: relative;
    overflow: hidden;
}

.carousel-container::before,
.carousel-container::after {
    content: '';
    position: absolute;
    top: 0;
    bottom: 0;
    width: 150px;
    z-index: 1;
    pointer-events: none;
}

.carousel-container::before {
    left: 0;
    background: linear-gradient(to right, 
        rgba(255, 255, 255, 1) 0%,
        rgba(255, 255, 255, 0.7) 50%,
        rgba(255, 255, 255, 0) 100%
    );
}

.carousel-container::after {
    right: 0;
    background: linear-gradient(to left, 
        rgba(255, 255, 255, 1) 0%,
        rgba(255, 255, 255, 0.7) 50%,
        rgba(255, 255, 255, 0) 100%
    );
}

/* 
linear-gradient(to right, 
        rgba(238, 245, 255, 1) 0%,
        rgba(238, 245, 255, 0.7) 50%,
        rgba(238, 245, 255, 0) 100%
    );

*/

/*linear-gradient(to left, 
        rgba(238, 243, 255, 1) 0%,
        rgba(238, 243, 255, 0.7) 50%,
        rgba(238, 243, 255, 0) 100%)
*/

/* Role Text Animation */
/* Removed CSS-only role text animation in favor of accessible JS-driven text swap */

/* Glassy nav when scrolled */
#main-nav.nav-glass {
    backdrop-filter: saturate(140%) blur(10px);
    -webkit-backdrop-filter: saturate(140%) blur(10px);
    background: rgba(255, 255, 255, 0.65);
    border-bottom: 1px solid rgba(255, 255, 255, 0.25);
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.04);
}

/* Reduced motion: simplify hero animation */
@media (prefers-reduced-motion: reduce) {
    #floating-nodes, #silos-lines, #pcube-lines {
        display: none !important;
    }
    #central-node {
        opacity: 1 !important;
        transform: translate(50%, 50%) scale(1) !important;
        transition: none !important;
    }
    .animate-carousel {
        animation: none !important;
    }
}

/* Feature card styling */
.feature-card {
    border: 1px solid transparent;
    /* Gradient hairline border */
    background: linear-gradient(#ffffff, #ffffff) padding-box,
                linear-gradient(135deg, rgba(59,130,246,0.35), rgba(99,102,241,0.25)) border-box;
    box-shadow: 0 10px 20px rgba(2, 6, 23, 0.06);
    transition: transform 250ms ease, box-shadow 250ms ease, background-color 250ms ease, border-color 250ms ease;
}
.feature-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 16px 36px rgba(37, 99, 235, 0.18);
}

/* Sticky bottom CTA */
#sticky-cta {
    position: fixed;
    left: 50%;
    bottom: 16px;
    transform: translateX(-50%) translateY(16px);
    opacity: 0;
    pointer-events: none;
    z-index: 60;
    transition: transform 200ms ease, opacity 200ms ease;
}
#sticky-cta.show {
    transform: translateX(-50%) translateY(0);
    opacity: 1;
    pointer-events: auto;
}

/* Accessible sliding role text */
.role-text-container {
    display: inline-block;
    position: relative;
    height: 1.5em;
    vertical-align: middle;
}
.role-text {
    display: inline-block;
    transition: transform 400ms cubic-bezier(0.22, 1, 0.36, 1), opacity 400ms ease;
    will-change: transform, opacity;
}
.role-text.no-transition {
    transition: none !important;
}
.role-text.slide-out {
    transform: translateY(28px);
    opacity: 0;
}
.role-text.pre-enter {
    transform: translateY(-28px);
    opacity: 0;
}
.role-text.slide-in {
    transform: translateY(0);
    opacity: 1;
}

/* Gradient primary button */
.btn-primary {
    background-image: linear-gradient(135deg, #3b82f6, #6366f1);
    color: white;
    box-shadow: 0 10px 20px rgba(59, 130, 246, 0.25);
    transition: transform 200ms ease, box-shadow 200ms ease, filter 200ms ease;
}
.btn-primary:hover {
    filter: brightness(1.05);
    transform: translateY(-1px);
    box-shadow: 0 16px 36px rgba(59, 130, 246, 0.35);
}

/* Nav link active underline */
.nav-link {
    position: relative;
}
.nav-link::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: -6px;
    margin: 0 auto;
    height: 2px;
    width: 0%;
    border-radius: 2px;
    background: linear-gradient(90deg, #60a5fa, #3b82f6);
    transition: width 200ms ease;
}
.nav-link:hover::after,
.nav-link.active::after {
    width: 100%;
}

/* Hero subtle noise overlay */
.hero-noise {
    background-image: radial-gradient(rgba(0,0,0,0.03) 1px, transparent 1px);
    background-size: 3px 3px;
    opacity: 0.5;
    pointer-events: none;
    z-index: 0;
}

/* Footer gradient divider */
.footer-gradient {
    position: relative;
}
.footer-gradient::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 1px;
    background: linear-gradient(90deg, transparent, rgba(99,102,241,0.5), rgba(59,130,246,0.5), transparent);
    opacity: 0.5;
}

/* Focus ring improvements */
a:focus-visible,
button:focus-visible,
input:focus-visible,
textarea:focus-visible,
select:focus-visible {
    outline: 2px solid #3b82f6;
    outline-offset: 2px;
    box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.25);
}

/* Reveal-on-scroll removed */

/* Hero parallax elements */
.parallax {
    will-change: transform;
}

/* Graph animation performance helpers */
.graph-node {
    will-change: transform;
}

/* Modern glass badge styling for the central logo node */
#central-node {
    background: linear-gradient(180deg, rgba(255,255,255,0.92), rgba(245,248,255,0.88));
    border: 1px solid rgba(255, 255, 255, 0.75);
    box-shadow:
        0 14px 28px rgba(59,130,246,0.22),
        0 4px 10px rgba(2, 6, 23, 0.12),
        inset 0 0 0 1px rgba(255,255,255,0.6),
        inset 0 -6px 12px rgba(2, 6, 23, 0.08);
    backdrop-filter: saturate(145%) blur(8px);
    -webkit-backdrop-filter: saturate(145%) blur(8px);
}

#central-node::before {
    /* Thin conic accent ring around the badge */
    content: "";
    position: absolute;
    inset: -4px;
    border-radius: 9999px;
    background: conic-gradient(
        from 0deg,
        rgba(59,130,246,0.20),
        rgba(99,102,241,0.18),
        rgba(59,130,246,0.20)
    );
    -webkit-mask: radial-gradient(closest-side, transparent calc(100% - 2px), black 100%);
    mask: radial-gradient(closest-side, transparent calc(100% - 2px), black 100%);
    filter: blur(0.2px);
    opacity: 0.35;
    pointer-events: none;
}

#central-node::after {
    /* Soft glossy highlight */
    content: "";
    position: absolute;
    inset: 2px;
    border-radius: 9999px;
    background: radial-gradient(ellipse at 30% 20%, rgba(255,255,255,0.9), rgba(255,255,255,0) 60%);
    pointer-events: none;
    opacity: 0.9;
}

#central-node img {
    filter: drop-shadow(0 2px 4px rgba(59,130,246,0.25));
}

/* Radial layout central node - same styling as graph navigation */
#radial-central-node {
    background: linear-gradient(180deg, rgba(255,255,255,0.95), rgba(245,248,255,0.92));
    border: 1px solid rgba(255, 255, 255, 0.75);
    box-shadow:
        0 14px 28px rgba(59,130,246,0.22),
        0 4px 10px rgba(2, 6, 23, 0.12),
        inset 0 0 0 1px rgba(255,255,255,0.6),
        inset 0 -6px 12px rgba(2, 6, 23, 0.08);
}

#radial-central-node::before {
    /* Thin conic accent ring around the badge */
    content: "";
    position: absolute;
    inset: -4px;
    border-radius: 9999px;
    background: conic-gradient(
        from 0deg,
        rgba(59,130,246,0.20),
        rgba(99,102,241,0.18),
        rgba(59,130,246,0.20)
    );
    -webkit-mask: radial-gradient(closest-side, transparent calc(100% - 2px), black 100%);
    mask: radial-gradient(closest-side, transparent calc(100% - 2px), black 100%);
    filter: blur(0.2px);
    opacity: 0.35;
    pointer-events: none;
}

#radial-central-node::after {
    /* Soft glossy highlight */
    content: "";
    position: absolute;
    inset: 2px;
    border-radius: 9999px;
    background: radial-gradient(ellipse at 30% 20%, rgba(255,255,255,0.9), rgba(255,255,255,0) 60%);
    pointer-events: none;
    opacity: 0.9;
}

#radial-central-node img {
    filter: drop-shadow(0 2px 4px rgba(59,130,246,0.25));
}

/* Mobile menu defaults and transitions */
#mobile-menu {
    /* Fallback if Tailwind translate utilities are unavailable */
    transform: translateX(100%);
    transition: translate 300ms ease;
}
#mobile-menu.open {
    transform: translateX(0);
}

/* Soft rotating gradient glow behind the central logo */
@keyframes spin-very-slow {
    from { transform: translate(-50%, -50%) rotate(0deg); }
    to   { transform: translate(-50%, -50%) rotate(360deg); }
}
.glow-gradient {
    position: absolute;
    left: 50%;
    top: 50%;
    width: 320px;
    height: 320px;
    transform: translate(-50%, -50%);
    border-radius: 9999px;
    pointer-events: none;
    background: radial-gradient(
        closest-side at 50% 50%,
        rgba(59,130,246,0.25) 0%,
        rgba(99,102,241,0.15) 55%,
        rgba(59,130,246,0.00) 100%
    );
    filter: blur(20px);
    opacity: 0.2;
    animation: spin-very-slow 18s linear infinite;
}

/* Scaled up glow gradient for radial section logo */
.glow-gradient-radial {
    position: absolute;
    left: 50%;
    top: 50%;
    width: 240px; /* Base size for mobile */
    height: 240px;
    transform: translate(-50%, -50%);
    border-radius: 9999px;
    pointer-events: none;
    background: radial-gradient(
        closest-side at 50% 50%,
        rgba(59,130,246,0.25) 0%,
        rgba(99,102,241,0.15) 55%,
        rgba(59,130,246,0.00) 100%
    );
    filter: blur(20px);
    opacity: 0;
    animation: spin-very-slow 18s linear infinite;
}

/* Responsive glow gradient sizing */
@media (min-width: 640px) {
    .glow-gradient-radial {
        width: 320px;
        height: 320px;
        filter: blur(25px);
    }
}

@media (min-width: 768px) {
    .glow-gradient-radial {
        width: 400px;
        height: 400px;
        filter: blur(28px);
    }
}

@media (min-width: 1024px) {
    .glow-gradient-radial {
        width: 480px;
        height: 480px;
        filter: blur(30px);
    }
}

/* Fade-in animation for scroll-triggered elements */
.fade-in-element {
    opacity: 0;
    transform: translateY(20px);
    transition: opacity 0.8s ease-out, transform 0.8s ease-out;
}

.fade-in-element.fade-in {
    opacity: 1;
    transform: translateY(0);
}

/* Animated inset ring for phase blocks when connected */
.phase-block-connected {
    position: relative;
    overflow: hidden;
}

.phase-block-connected::before {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: 0.5rem;
    padding: 2px;
    background: linear-gradient(45deg, #3B82F6, #1D4ED8, #3B82F6);
    background-size: 200% 200%;
    animation: gradient-shift 2s ease-in-out infinite;
    opacity: 0;
    transition: opacity 0.6s ease-out;
}

.phase-block-connected::after {
    content: '';
    position: absolute;
    inset: 2px;
    background: white;
    border-radius: 0.375rem;
    z-index: -1;
}

.phase-block-connected.ring-visible::before {
    opacity: 1;
}

@keyframes gradient-shift {
    0% { background-position: 0% 50%; }
    50% { background-position: 100% 50%; }
    100% { background-position: 0% 50%; }
}

/* Staggered delays for different elements */
.fade-in-element[data-delay="0"] { transition-delay: 0ms; }
.fade-in-element[data-delay="200"] { transition-delay: 200ms; }
.fade-in-element[data-delay="400"] { transition-delay: 400ms; }
.fade-in-element[data-delay="600"] { transition-delay: 600ms; }
.fade-in-element[data-delay="800"] { transition-delay: 800ms; }
.fade-in-element[data-delay="1000"] { transition-delay: 1000ms; }
.fade-in-element[data-delay="1200"] { transition-delay: 1200ms; }

/* Neon glow trails with colored shadows */
.connection-line {
    opacity: 0;
    stroke-dasharray: 1000;
    stroke-dashoffset: 1000;
    transition: opacity 0.6s ease-out, stroke-dashoffset 1.2s ease-out;
    stroke-width: 3;
}

/* Individual line colors with proper glow */
#line1 {
    filter: drop-shadow(0 0 8px #3B82F6) drop-shadow(0 0 16px #3B82F6);
}

#line2 {
    filter: drop-shadow(0 0 8px #8B5CF6) drop-shadow(0 0 16px #8B5CF6);
}

#line3 {
    filter: drop-shadow(0 0 8px #10B981) drop-shadow(0 0 16px #10B981);
}

#line4 {
    filter: drop-shadow(0 0 8px #EC4899) drop-shadow(0 0 16px #EC4899);
}

#line5 {
    filter: drop-shadow(0 0 8px #F59E0B) drop-shadow(0 0 16px #F59E0B);
}

.connection-line.animate-line {
    opacity: 1;
    stroke-dashoffset: 0;
    animation: neonGlowPulse 4s ease-in-out infinite;
}

/* Neon glow pulsing animation with enhanced glow */
@keyframes neonGlowPulse {
    0%, 100% { 
        stroke-width: 3;
        opacity: 0.9;
    }
    25% {
        stroke-width: 4;
        opacity: 1;
    }
    50% { 
        stroke-width: 5;
        opacity: 1;
    }
    75% {
        stroke-width: 4;
        opacity: 1;
    }
}

/* Enhanced glow for each line during animation */
#line1.animate-line {
    filter: drop-shadow(0 0 12px #3B82F6) drop-shadow(0 0 24px #3B82F6) drop-shadow(0 0 36px #3B82F6);
}

#line2.animate-line {
    filter: drop-shadow(0 0 12px #8B5CF6) drop-shadow(0 0 24px #8B5CF6) drop-shadow(0 0 36px #8B5CF6);
}

#line3.animate-line {
    filter: drop-shadow(0 0 12px #10B981) drop-shadow(0 0 24px #10B981) drop-shadow(0 0 36px #10B981);
}

#line4.animate-line {
    filter: drop-shadow(0 0 12px #EC4899) drop-shadow(0 0 24px #EC4899) drop-shadow(0 0 36px #EC4899);
}

#line5.animate-line {
    filter: drop-shadow(0 0 12px #F59E0B) drop-shadow(0 0 24px #F59E0B) drop-shadow(0 0 36px #F59E0B);
}

/* Data packet dots with colored glow - initially hidden */
.data-packet {
    opacity: 0;
    r: 3;
    fill: #60A5FA;
}

/* Colored packets with proper glow */
.data-packet.packet-blue {
    fill: #60A5FA;
    filter: drop-shadow(0 0 6px #3B82F6) drop-shadow(0 0 12px #3B82F6);
}

.data-packet.packet-purple {
    fill: #A78BFA;
    filter: drop-shadow(0 0 6px #8B5CF6) drop-shadow(0 0 12px #8B5CF6);
}

.data-packet.packet-emerald {
    fill: #34D399;
    filter: drop-shadow(0 0 6px #10B981) drop-shadow(0 0 12px #10B981);
}

.data-packet.packet-pink {
    fill: #F472B6;
    filter: drop-shadow(0 0 6px #EC4899) drop-shadow(0 0 12px #EC4899);
}

.data-packet.packet-orange {
    fill: #FB923C;
    filter: drop-shadow(0 0 6px #F59E0B) drop-shadow(0 0 12px #F59E0B);
}

/* Staggered delays for connection lines */
.connection-line[data-delay="400"] { transition-delay: 0ms; }
.connection-line[data-delay="600"] { transition-delay: 200ms; }
.connection-line[data-delay="800"] { transition-delay: 400ms; }
.connection-line[data-delay="1000"] { transition-delay: 600ms; }
.connection-line[data-delay="1200"] { transition-delay: 800ms; }

/* Animated text for closing statement */
.animated-text {
    opacity: 0;
    transform: translateY(20px);
    transition: opacity 0.8s ease-out, transform 0.8s ease-out;
    display: inline-block;
    margin-right: 0.5rem;
    min-height: 1.2em; /* Ensure consistent height even when empty */
}

.animated-text.visible {
    opacity: 1;
    transform: translateY(0);
}

/* Bokeh particles layer */
@keyframes bokeh-float {
    0%   { transform: translate3d(0, 0, 0) scale(1); }
    50%  { transform: translate3d(10px, -12px, 0) scale(1.06); }
    100% { transform: translate3d(0, 0, 0) scale(1); }
}
.bokeh-layer { pointer-events: none; }
.bokeh-dot {
    position: absolute;
    border-radius: 9999px;
    background: radial-gradient(
        circle at 35% 35%,
        rgba(168, 85, 247, 0.85) 0%, /* violet-500 */
        rgba(59, 130, 246, 0.55) 45%, /* blue-500 */
        rgba(59, 130, 246, 0.00) 75%
    );
    filter: blur(1.5px);
    opacity: 0.15;
    animation: bokeh-float 10s ease-in-out infinite;
    will-change: transform;
    mix-blend-mode: overlay;
    box-shadow: 0 0 24px rgba(59,130,246,0.35);
}
.bokeh-sm { width: 24px; height: 24px; filter: blur(2.5px); }
.bokeh-md { width: 40px; height: 40px; filter: blur(4px); }
.bokeh-lg { width: 64px; height: 64px; filter: blur(6px); }
.bokeh-xl { width: 88px; height: 88px; filter: blur(8px); }

/* Stagger helpers */
.delay-0 { animation-delay: 0s; }
.delay-1 { animation-delay: 1s; }
.delay-2 { animation-delay: 2s; }
.delay-3 { animation-delay: 3s; }
.delay-4 { animation-delay: 4s; }
.delay-5 { animation-delay: 5s; }

/* Reduced motion: freeze decorative animations */
@media (prefers-reduced-motion: reduce) {
    .glow-gradient { animation: none; opacity: 0.6; }
    .glow-gradient-radial { animation: none; opacity: 0.6; }
    .bokeh-dot { animation: none; }
}

/* Device frame styles */
.device-frame {
    display: inline-block;
    padding: 4px;
    border-radius: 8px;
    background: linear-gradient(180deg, #0f172a, #0b1220);
    border: 1px solid rgba(255, 255, 255, 0.08);
    box-shadow: 0 20px 40px rgba(2, 6, 23, 0.35), inset 0 0 0 1px rgba(255, 255, 255, 0.02);
}
.device-frame.tight {
    padding: 0;
    overflow: hidden;
}
.device-screen {
    display: block;
    width: 100%;
    height: auto;
    border-radius: 8px;
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.06);
}
.tilt {
    transform: perspective(1200px) rotateY(-6deg) rotateX(1deg);
    transition: transform 400ms ease, box-shadow 400ms ease;
}
.tilt:hover {
    transform: perspective(1200px) rotateY(-4deg) rotateX(0deg) translateY(-2px) scale(1.02);
}

/* Alternate tilt direction for staggered layout */
.tilt-left {
    transform: perspective(1200px) rotateY(6deg) rotateX(1deg);
    transition: transform 400ms ease, box-shadow 400ms ease;
}
.tilt-left:hover {
    transform: perspective(1200px) rotateY(4deg) rotateX(0deg) translateY(-2px) scale(1.02);
}