/* Typography */
:root {
    /* Responsive Font Sizes */
    --spidrweb-xs: clamp(0.64rem, 0.05vi + 0.63rem, 0.67rem);
    --spidrweb-s: clamp(0.8rem, 0.17vi + 0.76rem, 0.89rem);
    --spidrweb-r: clamp(1rem, 0.34vi + 0.91rem, 1.19rem);
    --spidrweb-m: clamp(1.25rem, 0.61vi + 1.1rem, 1.58rem);
    --spidrweb-l: clamp(1.56rem, 1vi + 1.31rem, 2.11rem);
    --spidrweb-xl: clamp(1.95rem, 1.56vi + 1.56rem, 2.81rem);
    --spidrweb-xxl: clamp(2.44rem, 2.38vi + 1.85rem, 3.75rem);
    --spidrweb-xxxl: clamp(3.05rem, 3.54vi + 2.17rem, 5rem);
    /* Service card – larger icon and title */
    --spidrweb-service-icon: clamp(3rem, 4vi + 2.5rem, 4.5rem);
    --spidrweb-service-title: clamp(1.75rem, 1.5vi + 1.5rem, 2.5rem);

    /* Color Variables - Dark Mode (Default) */
    --bg-primary: #0a0a0a;
    --bg-primary-oklch: oklch(0.08 0 0);
    --bg-card: #1a1a1a;
    --bg-card-oklch: oklch(0.15 0 0);
    --bg-code: #0f0f0f;
    --border-color: #2a2a2a;
    --border-color-oklch: oklch(0.22 0 0);
    --text-primary: #e5e5e5;
    --text-primary-oklch: oklch(0.92 0 0);
    --text-secondary: #9ca3af;
    --text-muted: #6b7280;
    --header-bg: rgba(10, 10, 10, 0.85);
    --header-bg-oklch: oklch(0.08 0 0 / 0.85);
    --logo-filter: none;
    --header-height: 4.5rem; /* fallback; set by JS for exact height */
}

/* Light Mode */
[data-theme="light"],
:root:not([data-theme="dark"]) {
    color-scheme: light;
}

[data-theme="light"] {
    --bg-primary: #ffffff;
    --bg-primary-oklch: oklch(1.0 0 0);
    --bg-card: #f9fafb;
    --bg-card-oklch: oklch(0.98 0 0);
    --bg-code: #f3f4f6;
    --border-color: #e5e7eb;
    --border-color-oklch: oklch(0.90 0 0);
    --text-primary: #111827;
    --text-primary-oklch: oklch(0.25 0 0);
    --text-secondary: #4b5563;
    --text-muted: #6b7280;
    --header-bg: rgba(255, 255, 255, 0.85);
    --header-bg-oklch: oklch(1.0 0 0 / 0.85);
    --logo-filter: brightness(0);
}

/* Respect system preference if no manual override */
@media (prefers-color-scheme: light) {
    :root:not([data-theme]) {
        --bg-primary: #ffffff;
        --bg-primary-oklch: oklch(1.0 0 0);
        --bg-card: #f9fafb;
        --bg-card-oklch: oklch(0.98 0 0);
        --bg-code: #f3f4f6;
        --border-color: #e5e7eb;
        --border-color-oklch: oklch(0.90 0 0);
        --text-primary: #111827;
        --text-primary-oklch: oklch(0.25 0 0);
        --text-secondary: #4b5563;
        --text-muted: #6b7280;
        --header-bg: rgba(255, 255, 255, 0.85);
        --header-bg-oklch: oklch(1.0 0 0 / 0.85);
        --logo-filter: brightness(0);
    }
}

* {
    font-family: 'Outfit', sans-serif;
}

h1, h2, h3, h4, h5, h6 {
    font-family: 'Montserrat', sans-serif;
    line-height: 1.1 !important;
}

/* Ensure gradient text in headings matches parent font-size exactly */
h1 .gradient-text,
h1 .gradient-text-alt,
h2 .gradient-text,
h2 .gradient-text-alt,
h3 .gradient-text,
h3 .gradient-text-alt,
h4 .gradient-text,
h4 .gradient-text-alt,
h5 .gradient-text,
h5 .gradient-text-alt,
h6 .gradient-text,
h6 .gradient-text-alt {
    font-size: 1em;
}

/* Typography Utility Classes */
.text-spidrweb-xs { font-size: var(--spidrweb-xs); }
.text-spidrweb-s { font-size: var(--spidrweb-s); }
.text-spidrweb-r { font-size: var(--spidrweb-r); }
.text-spidrweb-m { font-size: var(--spidrweb-m); }
.text-spidrweb-l { font-size: var(--spidrweb-l); }
.text-spidrweb-xl { font-size: var(--spidrweb-xl); }
.text-spidrweb-xxl { font-size: var(--spidrweb-xxl); }
.text-spidrweb-xxxl { font-size: var(--spidrweb-xxxl); }
.text-spidrweb-service-icon { font-size: var(--spidrweb-service-icon); }
.text-spidrweb-service-title { font-size: var(--spidrweb-service-title); }

/* Service card titles: override gradient-text’s 1.1em so the title size is used */
.service-card h3.text-spidrweb-service-title,
.service-card h3.gradient-text,
.service-card h3.gradient-text-alt {
    font-size: var(--spidrweb-service-title) !important;
}

/* Service card icons: same override so the icon size is used, not gradient 1.1em */
.service-card .text-spidrweb-service-icon,
.service-card i.gradient-text.text-spidrweb-service-icon,
.service-card i.gradient-text-alt.text-spidrweb-service-icon {
    font-size: var(--spidrweb-service-icon) !important;
}

/* Performance: Optimize font rendering */
body {
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-rendering: optimizeLegibility;
}

/* Accessibility: Screen reader only class */
.sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border-width: 0;
}

.sr-only:focus {
    position: static;
    width: auto;
    height: auto;
    padding: inherit;
    margin: inherit;
    overflow: visible;
    clip: auto;
    white-space: normal;
}

/* Base Styles */
body {
    background-color: var(--bg-primary);
    background-color: var(--bg-primary-oklch);
    color: var(--text-primary);
    color: var(--text-primary-oklch);
    transition: background-color 0.3s ease, color 0.3s ease;
}

/* Gradient Text */
.gradient-text {
    background: linear-gradient(135deg, #b82ea1, #bb2fc2, #a62ccd, #9129d7, #7c26e1, #6521eb, #4b19f5, #230aff);
    background: linear-gradient(135deg, 
        oklch(0.55 0.25 330), 
        oklch(0.56 0.26 320), 
        oklch(0.54 0.27 310), 
        oklch(0.52 0.28 300), 
        oklch(0.50 0.29 290), 
        oklch(0.48 0.30 280), 
        oklch(0.46 0.31 270), 
        oklch(0.44 0.32 260));
    @supports (color: color(display-p3 1 1 1)) {
        background: linear-gradient(135deg, 
            color(display-p3 0.72 0.18 0.63), 
            color(display-p3 0.73 0.18 0.76), 
            color(display-p3 0.65 0.17 0.80), 
            color(display-p3 0.57 0.16 0.84), 
            color(display-p3 0.49 0.15 0.88), 
            color(display-p3 0.40 0.13 0.92), 
            color(display-p3 0.30 0.10 0.96), 
            color(display-p3 0.14 0.04 1.0));
    }
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    /* Compensate for browser rendering quirk where background-clip: text renders text ~10% smaller */
    font-size: 1.1em !important;
    display: inline;
    line-height: inherit;
    vertical-align: baseline;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

.gradient-text-alt {
    background: linear-gradient(315deg, #302A9B, #37F486);
    background: linear-gradient(315deg, 
        oklch(0.35 0.20 280), 
        oklch(0.75 0.20 160));
    @supports (color: color(display-p3 1 1 1)) {
        background: linear-gradient(315deg, 
            color(display-p3 0.19 0.17 0.61), 
            color(display-p3 0.22 0.96 0.53));
    }
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    /* Compensate for browser rendering quirk where background-clip: text renders text ~10% smaller */
    font-size: 1.1em !important;
    display: inline;
    line-height: inherit;
    vertical-align: baseline;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}


/* Gradient Backgrounds */
.gradient-bg-primary {
    background: linear-gradient(135deg, #b82ea1, #bb2fc2, #a62ccd, #9129d7, #7c26e1, #6521eb, #4b19f5, #230aff);
    background: linear-gradient(135deg, 
        oklch(0.55 0.25 330), 
        oklch(0.56 0.26 320), 
        oklch(0.54 0.27 310), 
        oklch(0.52 0.28 300), 
        oklch(0.50 0.29 290), 
        oklch(0.48 0.30 280), 
        oklch(0.46 0.31 270), 
        oklch(0.44 0.32 260));
    @supports (color: color(display-p3 1 1 1)) {
        background: linear-gradient(135deg, 
            color(display-p3 0.72 0.18 0.63), 
            color(display-p3 0.73 0.18 0.76), 
            color(display-p3 0.65 0.17 0.80), 
            color(display-p3 0.57 0.16 0.84), 
            color(display-p3 0.49 0.15 0.88), 
            color(display-p3 0.40 0.13 0.92), 
            color(display-p3 0.30 0.10 0.96), 
            color(display-p3 0.14 0.04 1.0));
    }
}

.gradient-bg-secondary {
    background: linear-gradient(315deg, #302A9B, #37F486);
    background: linear-gradient(315deg, 
        oklch(0.35 0.20 280), 
        oklch(0.75 0.20 160));
    @supports (color: color(display-p3 1 1 1)) {
        background: linear-gradient(315deg, 
            color(display-p3 0.19 0.17 0.61), 
            color(display-p3 0.22 0.96 0.53));
    }
}

/* Card Component */
.card {
    background-color: var(--bg-card);
    background-color: var(--bg-card-oklch);
    border: 1px solid var(--border-color);
    border: 1px solid var(--border-color-oklch);
    transition: background-color 0.3s ease, border-color 0.3s ease;
}

/* Neon Glow Effect on Hover */
.card:hover {
    box-shadow: 
        0 0 15px rgba(184, 46, 161, 0.25),
        0 0 30px rgba(184, 46, 161, 0.12),
        0 0 45px rgba(35, 10, 255, 0.06);
    box-shadow: 
        0 0 15px oklch(0.55 0.25 330 / 0.25),
        0 0 30px oklch(0.55 0.25 330 / 0.12),
        0 0 45px oklch(0.44 0.32 260 / 0.06);
    border-color: rgba(184, 46, 161, 0.35);
    border-color: oklch(0.55 0.25 330 / 0.35);
}

/* Service Card with Subtle Gradient Shine */
.card.service-card {
    position: relative;
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.03) 0%, rgba(255, 255, 255, 0.01) 50%, rgba(255, 255, 255, 0) 100%);
    background-color: var(--bg-card);
    background-color: var(--bg-card-oklch);
    overflow: hidden;
}

[data-theme="light"] .card.service-card {
    background: linear-gradient(135deg, rgba(0, 0, 0, 0.02) 0%, rgba(0, 0, 0, 0.01) 50%, rgba(0, 0, 0, 0) 100%);
}

.card.service-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 1px;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.1), transparent);
    opacity: 0.5;
}

.card.service-card::after {
    content: '';
    position: absolute;
    top: -50%;
    left: -50%;
    width: 200%;
    height: 200%;
    background: radial-gradient(circle, rgba(255, 255, 255, 0.05) 0%, transparent 70%);
    opacity: 0;
    transition: opacity 0.3s ease;
    pointer-events: none;
}

.card.service-card:hover::after {
    opacity: 1;
}

/* Color Swatch */
.color-swatch {
    width: 100%;
    height: 120px;
    border-radius: 8px;
    margin-bottom: 12px;
}

/* Code Block */
.code-block {
    background-color: var(--bg-code);
    border: 1px solid var(--border-color);
    border: 1px solid var(--border-color-oklch);
    border-radius: 8px;
    padding: 1rem;
    font-family: 'Courier New', monospace;
    font-size: 0.875rem;
    overflow-x: auto;
}

/* Navigation */
.nav-sticky {
    position: sticky;
    top: 20px;
}

/* Mobile Hamburger Menu */
.hamburger-button {
    position: relative !important;
    z-index: 50 !important;
    cursor: pointer !important;
}

.hamburger-line {
    width: 24px !important;
    height: 3px !important;
    background-color: var(--text-primary) !important;
    background-color: var(--text-primary-oklch) !important;
    transition: all 0.3s ease !important;
    transform-origin: center !important;
    display: block !important;
    border-radius: 2px !important;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1) !important;
    opacity: 1 !important;
    visibility: visible !important;
}

#mobile-menu-button.active .hamburger-line:nth-child(1) {
    transform: rotate(45deg) translate(6px, 6px);
}

#mobile-menu-button.active .hamburger-line:nth-child(2) {
    opacity: 0;
    transform: translateX(-10px);
}

#mobile-menu-button.active .hamburger-line:nth-child(3) {
    transform: rotate(-45deg) translate(6px, -6px);
}

/* Mobile Menu Animation */
#mobile-menu {
    animation: slideDown 0.3s ease;
}

@keyframes slideDown {
    from {
        opacity: 0;
        transform: translateY(-10px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* iOS-style Glass Effect */
header.header-glass {
    background: var(--header-bg) !important;
    background: var(--header-bg-oklch) !important;
    backdrop-filter: blur(20px) saturate(180%) !important;
    -webkit-backdrop-filter: blur(20px) saturate(180%) !important;
    border-bottom: 1px solid var(--border-color) !important;
    border-bottom: 1px solid var(--border-color-oklch) !important;
    box-shadow: 0 1px 0 0 rgba(0, 0, 0, 0.05) inset !important;
    transition: background-color 0.3s ease, border-color 0.3s ease;
}

[data-theme="light"] header.header-glass {
    box-shadow: 0 1px 0 0 rgba(0, 0, 0, 0.05) inset !important;
}

/* Fallback for browsers that don't support backdrop-filter */
@supports not (backdrop-filter: blur(20px)) {
    header.header-glass {
        background: var(--bg-primary) !important;
        background: var(--bg-primary-oklch) !important;
        opacity: 0.95;
    }
}

/* Mobile Menu Glass Effect */
.mobile-menu-glass {
    background: var(--header-bg) !important;
    background: var(--header-bg-oklch) !important;
    backdrop-filter: blur(20px) saturate(180%) !important;
    -webkit-backdrop-filter: blur(20px) saturate(180%) !important;
    border-radius: 12px;
    margin-top: 0.5rem;
    padding: 1rem !important;
    border: 1px solid var(--border-color);
    border: 1px solid var(--border-color-oklch);
    transition: background-color 0.3s ease, border-color 0.3s ease;
}

/* Theme Toggle Button */
.theme-toggle {
    position: relative;
    width: 48px;
    height: 48px;
    border-radius: 50%;
    border: 1px solid var(--border-color);
    border: 1px solid var(--border-color-oklch);
    background: var(--bg-card);
    background: var(--bg-card-oklch);
    color: var(--text-primary);
    color: var(--text-primary-oklch);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.3s ease;
}

.theme-toggle:hover {
    border-color: var(--border-color);
    transform: scale(1.05);
}

.theme-toggle svg {
    width: 20px;
    height: 20px;
    transition: opacity 0.3s ease, transform 0.3s ease;
}

.theme-toggle .sun-icon {
    position: absolute;
    opacity: 0;
    transform: rotate(90deg);
}

.theme-toggle .moon-icon {
    position: absolute;
    opacity: 1;
    transform: rotate(0deg);
}

[data-theme="light"] .theme-toggle .sun-icon {
    opacity: 1;
    transform: rotate(0deg);
}

[data-theme="light"] .theme-toggle .moon-icon {
    opacity: 0;
    transform: rotate(-90deg);
}

/* Logo filter for light mode */
.logo-img {
    filter: var(--logo-filter);
    transition: filter 0.3s ease;
}

/* Navigation Links */
.dark-mode-link {
    color: var(--text-primary);
    color: var(--text-primary-oklch);
}

[data-theme="light"] .dark-mode-link {
    color: var(--text-primary);
    color: var(--text-primary-oklch);
}

[data-theme="light"] .dark-mode-link:hover {
    color: var(--text-primary);
    opacity: 0.8;
}

/* Text Colors - Use CSS variables where possible */
.text-gray-400 {
    color: var(--text-secondary);
}

.text-gray-500 {
    color: var(--text-muted);
}

.text-gray-300 {
    color: var(--text-secondary);
}

.text-white {
    color: var(--text-primary);
    color: var(--text-primary-oklch);
}

/* Scroll Progress Bar Background */
.scroll-progress-container {
    background: rgba(255, 255, 255, 0.05);
}

[data-theme="light"] .scroll-progress-container {
    background: rgba(0, 0, 0, 0.05);
}

/* Border Colors */
.border-gray-800 {
    border-color: var(--border-color);
    border-color: var(--border-color-oklch);
}

.border-gray-900 {
    border-color: var(--border-color);
    border-color: var(--border-color-oklch);
}

/* Footer and Header Text Colors */
footer h4,
footer .text-white {
    color: var(--text-primary);
    color: var(--text-primary-oklch);
}

footer a:hover {
    color: var(--text-primary);
    color: var(--text-primary-oklch);
    opacity: 0.9;
}

/* Scroll Progress Bar */
.scroll-progress-container {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 3px;
    background: rgba(255, 255, 255, 0.05);
    overflow: hidden;
    z-index: 100;
}

.scroll-progress-bar {
    height: 100%;
    width: 0%;
    background: linear-gradient(90deg, #b82ea1, #bb2fc2, #a62ccd, #9129d7, #7c26e1, #6521eb, #4b19f5, #230aff, #302A9B, #37F486);
    background: linear-gradient(90deg, 
        oklch(0.55 0.25 330), 
        oklch(0.56 0.26 320), 
        oklch(0.54 0.27 310), 
        oklch(0.52 0.28 300), 
        oklch(0.50 0.29 290), 
        oklch(0.48 0.30 280), 
        oklch(0.46 0.31 270), 
        oklch(0.44 0.32 260), 
        oklch(0.35 0.20 280), 
        oklch(0.75 0.20 160));
    background-size: 200% 100%;
    animation: gradient-shift 3s ease infinite;
    transition: width 0.15s ease-out;
    box-shadow: 0 0 8px rgba(184, 46, 161, 0.6), 0 0 4px rgba(35, 10, 255, 0.4);
    box-shadow: 0 0 8px oklch(0.55 0.25 330 / 0.6), 0 0 4px oklch(0.44 0.32 260 / 0.4);
}

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

/* Interactive Gradient Orb */
.gradient-orb {
    position: absolute;
    width: 400px;
    height: 400px;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    background: radial-gradient(circle, rgba(184, 46, 161, 0.6) 0%, rgba(35, 10, 255, 0.4) 30%, rgba(55, 244, 134, 0.3) 60%, transparent 100%);
    border-radius: 50%;
    filter: blur(60px);
    transition: left 0.3s ease-out, top 0.3s ease-out;
    pointer-events: none;
    z-index: 1;
    animation: orb-pulse 4s ease-in-out infinite;
}

@keyframes orb-pulse {
    0%, 100% {
        transform: translate(-50%, -50%) scale(1);
        opacity: 0.9;
    }
    50% {
        transform: translate(-50%, -50%) scale(1.1);
        opacity: 1;
    }
}

/* Hero animated gradient background (Spidrweb palette) */
.hero-with-gradient {
    width: 100vw;
    max-width: 100vw;
    position: relative;
    left: 50%;
    margin-left: -50vw;
    min-height: calc(100vh - var(--header-height));
    height: calc(100vh - var(--header-height));
}

.hero-with-gradient .gradient-bg {
    --hero-color-bg1: rgb(26, 10, 46);
    --hero-color-bg2: rgb(10, 17, 50);
    --hero-color1: 184, 46, 161;
    --hero-color2: 48, 42, 155;
    --hero-color3: 55, 244, 134;
    --hero-color4: 124, 38, 225;
    --hero-color5: 75, 25, 245;
    --hero-color-interactive: 140, 100, 255;
    --hero-circle-size: 80%;
    --hero-blending: hard-light;
    width: 100%;
    height: 100%;
    position: absolute;
    inset: 0;
    overflow: hidden;
    background: linear-gradient(40deg, var(--hero-color-bg1), var(--hero-color-bg2));
}

.hero-with-gradient .hero-overlay {
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, 0.75);
    z-index: 5;
    pointer-events: none;
}

/* Light mode: lighter hero gradient and blobs, light overlay */
[data-theme="light"] .hero-with-gradient .gradient-bg {
    --hero-color-bg1: rgb(245, 240, 255);
    --hero-color-bg2: rgb(230, 238, 255);
    --hero-color1: 200, 140, 220;
    --hero-color2: 120, 110, 200;
    --hero-color3: 100, 220, 170;
    --hero-color4: 160, 130, 235;
    --hero-color5: 130, 100, 245;
    --hero-color-interactive: 170, 150, 255;
    background: linear-gradient(40deg, var(--hero-color-bg1), var(--hero-color-bg2));
}

[data-theme="light"] .hero-with-gradient .hero-overlay {
    background: rgba(255, 255, 255, 0.3);
}

/* Hero always has dark background in dark mode – in light mode force dark text for contrast */
[data-theme="light"] .hero-with-gradient .hero-content,
[data-theme="light"] .hero-with-gradient .hero-content h1,
[data-theme="light"] .hero-with-gradient .hero-content p {
    color: #1f2937;
}

[data-theme="light"] .hero-with-gradient .hero-content .text-gray-400 {
    color: #4b5563;
}

.hero-with-gradient .gradient-bg svg {
    position: absolute;
    top: 0;
    left: 0;
    width: 0;
    height: 0;
}

.hero-with-gradient .gradient-bg .gradients-container {
    filter: url(#goo) blur(40px);
    width: 100%;
    height: 100%;
}

@keyframes hero-moveInCircle {
    0% { transform: rotate(0deg); }
    50% { transform: rotate(180deg); }
    100% { transform: rotate(360deg); }
}

@keyframes hero-moveVertical {
    0% { transform: translateY(-50%); }
    50% { transform: translateY(50%); }
    100% { transform: translateY(-50%); }
}

@keyframes hero-moveHorizontal {
    0% { transform: translateX(-50%) translateY(-10%); }
    50% { transform: translateX(50%) translateY(10%); }
    100% { transform: translateX(-50%) translateY(-10%); }
}

.hero-with-gradient .gradient-bg .g1 {
    position: absolute;
    background: radial-gradient(circle at center, rgba(var(--hero-color1), 0.8) 0, rgba(var(--hero-color1), 0) 50%) no-repeat;
    mix-blend-mode: var(--hero-blending);
    width: var(--hero-circle-size);
    height: var(--hero-circle-size);
    top: calc(50% - var(--hero-circle-size) / 2);
    left: calc(50% - var(--hero-circle-size) / 2);
    transform-origin: center center;
    animation: hero-moveVertical 30s ease infinite;
    opacity: 1;
}

.hero-with-gradient .gradient-bg .g2 {
    position: absolute;
    background: radial-gradient(circle at center, rgba(var(--hero-color2), 0.8) 0, rgba(var(--hero-color2), 0) 50%) no-repeat;
    mix-blend-mode: var(--hero-blending);
    width: var(--hero-circle-size);
    height: var(--hero-circle-size);
    top: calc(50% - var(--hero-circle-size) / 2);
    left: calc(50% - var(--hero-circle-size) / 2);
    transform-origin: calc(50% - 400px);
    animation: hero-moveInCircle 20s reverse infinite;
    opacity: 1;
}

.hero-with-gradient .gradient-bg .g3 {
    position: absolute;
    background: radial-gradient(circle at center, rgba(var(--hero-color3), 0.8) 0, rgba(var(--hero-color3), 0) 50%) no-repeat;
    mix-blend-mode: var(--hero-blending);
    width: var(--hero-circle-size);
    height: var(--hero-circle-size);
    top: calc(50% - var(--hero-circle-size) / 2 + 200px);
    left: calc(50% - var(--hero-circle-size) / 2 - 500px);
    transform-origin: calc(50% + 400px);
    animation: hero-moveInCircle 40s linear infinite;
    opacity: 1;
}

.hero-with-gradient .gradient-bg .g4 {
    position: absolute;
    background: radial-gradient(circle at center, rgba(var(--hero-color4), 0.8) 0, rgba(var(--hero-color4), 0) 50%) no-repeat;
    mix-blend-mode: var(--hero-blending);
    width: var(--hero-circle-size);
    height: var(--hero-circle-size);
    top: calc(50% - var(--hero-circle-size) / 2);
    left: calc(50% - var(--hero-circle-size) / 2);
    transform-origin: calc(50% - 200px);
    animation: hero-moveHorizontal 40s ease infinite;
    opacity: 0.7;
}

.hero-with-gradient .gradient-bg .g5 {
    position: absolute;
    background: radial-gradient(circle at center, rgba(var(--hero-color5), 0.8) 0, rgba(var(--hero-color5), 0) 50%) no-repeat;
    mix-blend-mode: var(--hero-blending);
    width: calc(var(--hero-circle-size) * 2);
    height: calc(var(--hero-circle-size) * 2);
    top: calc(50% - var(--hero-circle-size));
    left: calc(50% - var(--hero-circle-size));
    transform-origin: calc(50% - 800px) calc(50% + 200px);
    animation: hero-moveInCircle 20s ease infinite;
    opacity: 1;
}

.hero-with-gradient .gradient-bg .interactive {
    position: absolute;
    background: radial-gradient(circle at center, rgba(var(--hero-color-interactive), 0.8) 0, rgba(var(--hero-color-interactive), 0) 50%) no-repeat;
    mix-blend-mode: var(--hero-blending);
    width: 100%;
    height: 100%;
    top: -50%;
    left: -50%;
    opacity: 0.7;
}