--- START OF FILE style.css ---
@import url('https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@400;500;600;700;800&family=Plus+Jakarta+Sans:wght@300;400;500;600;700&display=swap');

/* Global fixed background using the provided Sukuna illustration */
body {
    font-family: 'Plus Jakarta Sans', sans-serif;
    position: relative;
    background-color: #080202;
    min-height: 100%;
}

body::before {
    content: '';
    position: fixed;
    inset: 0;
    /* References your uploaded image saved as sukuna.png */
    background-image: url('sukuna.png'); 
    background-size: cover;
    background-position: center top;
    background-repeat: no-repeat;
    /* Darkened filter so high-contrast text is perfectly visible */
    filter: brightness(0.25) contrast(1.1) saturate(0.9);
    z-index: -1;
    pointer-events: none;
}

h1, h2, h3, h4, .font-heading {
    font-family: 'Space Grotesk', sans-serif;
}

/* Sharp stylized borders */
.stark-border {
    border: 1.5px solid rgba(239, 68, 68, 0.35);
}

.stark-border-focus:hover {
    border-color: rgba(239, 68, 68, 0.85);
}

/* Sukuna's spinning domain radial wheel effect */
@keyframes spin-slow {
    from {
        transform: rotate(0deg);
    }
    to {
        transform: rotate(360deg);
    }
}

.animate-spin-slow {
    animation: spin-slow 25s linear infinite;
}

/* Smooth Cycling for Portfolio Item 7 */
.portfolio-7-img-1 { animation: cycle1 9s infinite; }
.portfolio-7-img-2 { animation: cycle2 9s infinite; }
.portfolio-7-img-3 { animation: cycle3 9s infinite; }

@keyframes cycle1 {
    0%, 28% { opacity: 1; }
    33%, 95% { opacity: 0; }
    100% { opacity: 1; }
}
@keyframes cycle2 {
    0%, 28% { opacity: 0; }
    33%, 61% { opacity: 1; }
    66%, 100% { opacity: 0; }
}
@keyframes cycle3 {
    0%, 61% { opacity: 0; }
    66%, 95% { opacity: 1; }
    100% { opacity: 0; }
}
--- END OF FILE style.css ---