/*
Theme Name: AICraft Future Theme
Author: cleverman
Description: Tema futurista AI neon
Version: 1.0
*/

body, html {

    margin: 0;

    padding: 0;

    overflow-x: hidden;

    font-family: "Segoe UI", sans-serif;

    color: white;

}

 

#bg3d {

    position: fixed;

    top: 0;

    left: 0;

    width: 100%;

    height: 100%;

    z-index: -1;

}

 

/* HEADER */

.header {

    width: 100%;

    padding: 20px 60px;

    display: flex;

    justify-content: space-between;

    align-items: center;

    backdrop-filter: blur(8px);

}

 

.logo {

    font-size: 1.8rem;

    font-weight: bold;

    color: #8df0ff;

    text-decoration: none;

    text-shadow: 0 0 20px #00eaff;

}

 

.menu {

    list-style: none;

    display: flex;

    gap: 30px;

}

 

.menu a {

    color: #d7faff;

    text-decoration: none;

    font-size: 1.1rem;

    transition: 0.2s;

}

 

.menu a:hover {

    color: #00eaff;

    text-shadow: 0 0 10px #00eaff;

}

 

/* HERO */

.hero {

    margin-top: 18vh;

    text-align: center;

}

 

.hero h1 {

    font-size: 4rem;

    text-shadow: 0 0 30px #00eaff;

}

 

.hero p {

    font-size: 1.4rem;

    opacity: 0.8;

}

 

/* SLIDER 3D */

.slider3d {

    margin-top: 120px;

    display: flex;

    justify-content: center;

}

 

.slider {

    width: 70%;

    height: 350px;

    perspective: 1200px;

    position: relative;

}

 

.slide {

    width: 100%;

    height: 100%;

    position: absolute;

    border-radius: 20px;

    background-size: cover;

    background-position: center;

    box-shadow: 0 0 25px #00eaffa8;

    animation: rotateSlides 12s infinite linear;

    backface-visibility: hidden;

}

 

/* Exemplu imagini – tu le poți schimba */

.s1 { background-image: url('https://picsum.photos/1200/800?1'); }

.s2 { background-image: url('https://picsum.photos/1200/800?2'); }

.s3 { background-image: url('https://picsum.photos/1200/800?3'); }

 

/* Animatie 3D slider */

@keyframes rotateSlides {

    0% { transform: rotateY(0deg) translateZ(0px); opacity: 1; }

    33% { transform: rotateY(60deg) translateZ(80px); opacity: 0.8; }

    66% { transform: rotateY(-60deg) translateZ(80px); opacity: 0.8; }

    100% { transform: rotateY(0deg) translateZ(0px); opacity: 1; }

}