/* ==================== 
   3D COMPONENTS CSS
   ==================== */

/* ==================== PERSPECTIVE & TRANSFORMS ==================== */

.preserve-3d {
    transform-style: preserve-3d;
}

.perspective {
    perspective: 1000px;
}

.perspective-deep {
    perspective: 2000px;
}

/* ==================== 3D CROSS HERO ==================== */

.cross-3d-hero {
    position: absolute;
    width: 100px;
    height: 150px;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%) rotateX(-20deg) rotateY(-30deg);
    transform-style: preserve-3d;
    animation: cross-float 6s ease-in-out infinite;
}

@keyframes cross-float {
    0%, 100% {
        transform: translate(-50%, -50%) rotateX(-20deg) rotateY(-30deg);
    }
    50% {
        transform: translate(-50%, calc(-50% - 20px)) rotateX(-15deg) rotateY(-20deg);
    }
}

.cross-3d-hero .cross-face {
    position: absolute;
    background: linear-gradient(135deg, #f59e0b 0%, #fbbf24 100%);
    box-shadow: inset 0 0 20px rgba(255, 255, 255, 0.3);
}

/* Vertical bar of the cross */
.cross-3d-hero .cross-face.front {
    width: 30px;
    height: 150px;
    left: 35px;
    top: 0;
    transform: translateZ(15px);
}

.cross-3d-hero .cross-face.back {
    width: 30px;
    height: 150px;
    left: 35px;
    top: 0;
    transform: translateZ(-15px);
    background: linear-gradient(135deg, #d97706 0%, #f59e0b 100%);
}

.cross-3d-hero .cross-face.right {
    width: 30px;
    height: 150px;
    left: 35px;
    top: 0;
    transform: rotateY(90deg) translateZ(15px);
    background: linear-gradient(135deg, #fbbf24 0%, #f59e0b 100%);
}

.cross-3d-hero .cross-face.left {
    width: 30px;
    height: 150px;
    left: 35px;
    top: 0;
    transform: rotateY(-90deg) translateZ(15px);
    background: linear-gradient(135deg, #d97706 0%, #b45309 100%);
}

/* Horizontal bar of the cross */
.cross-3d-hero .cross-face.top {
    width: 80px;
    height: 30px;
    left: 10px;
    top: 25px;
    transform: translateZ(15px);
}

.cross-3d-hero .cross-face.bottom {
    width: 80px;
    height: 30px;
    left: 10px;
    top: 25px;
    transform: translateZ(-15px);
    background: linear-gradient(135deg, #d97706 0%, #f59e0b 100%);
}

/* ==================== 3D CARDS ==================== */

.card-3d {
    transform-style: preserve-3d;
    transition: transform 0.5s ease;
}

.card-3d:hover {
    transform: translateZ(20px) rotateX(5deg) rotateY(-5deg);
}

.card-3d-tilt {
    transform-style: preserve-3d;
    transition: transform 0.3s ease;
}

/* ==================== 3D BUTTONS ==================== */

.btn-3d {
    position: relative;
    transform-style: preserve-3d;
    transition: transform 0.3s ease;
}

.btn-3d::before {
    content: '';
    position: absolute;
    inset: 0;
    background: inherit;
    filter: brightness(0.7);
    transform: translateZ(-10px);
    border-radius: inherit;
}

.btn-3d:hover {
    transform: translateZ(10px);
}

.btn-3d:active {
    transform: translateZ(5px);
}

/* ==================== 3D FLIP CARD ==================== */

.flip-card {
    perspective: 1000px;
    width: 100%;
    height: 300px;
}

.flip-card-inner {
    position: relative;
    width: 100%;
    height: 100%;
    text-align: center;
    transition: transform 0.6s;
    transform-style: preserve-3d;
}

.flip-card:hover .flip-card-inner {
    transform: rotateY(180deg);
}

.flip-card-front,
.flip-card-back {
    position: absolute;
    width: 100%;
    height: 100%;
    backface-visibility: hidden;
    border-radius: var(--radius-xl);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 2rem;
}

.flip-card-front {
    background: var(--gradient-primary);
    color: var(--white);
}

.flip-card-back {
    background: var(--white);
    color: var(--gray-800);
    transform: rotateY(180deg);
    box-shadow: var(--shadow-xl);
}

/* ==================== 3D ICON ==================== */

.icon-3d {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 80px;
    height: 80px;
    transform-style: preserve-3d;
    transition: transform 0.5s ease;
}

.icon-3d:hover {
    transform: rotateY(360deg);
}

.icon-3d-face {
    position: absolute;
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    backface-visibility: hidden;
    border-radius: var(--radius-lg);
}

.icon-3d-front {
    background: var(--gradient-primary);
    color: var(--white);
    font-size: 2rem;
}

.icon-3d-back {
    background: var(--gradient-secondary);
    color: var(--gray-900);
    font-size: 2rem;
    transform: rotateY(180deg);
}

/* ==================== 3D TEXT ==================== */

.text-3d {
    text-shadow: 
        1px 1px 0 var(--primary-dark),
        2px 2px 0 var(--primary-dark),
        3px 3px 0 var(--primary-dark),
        4px 4px 0 var(--primary-dark),
        5px 5px 10px rgba(0, 0, 0, 0.3);
}

.text-3d-light {
    text-shadow: 
        1px 1px 0 rgba(255, 255, 255, 0.5),
        2px 2px 0 rgba(255, 255, 255, 0.3),
        3px 3px 5px rgba(0, 0, 0, 0.2);
}

/* ==================== 3D BOX ==================== */

.box-3d {
    position: relative;
    width: 200px;
    height: 200px;
    transform-style: preserve-3d;
    animation: box-rotate 10s linear infinite;
}

@keyframes box-rotate {
    0% { transform: rotateX(0deg) rotateY(0deg); }
    100% { transform: rotateX(360deg) rotateY(360deg); }
}

.box-3d-face {
    position: absolute;
    width: 200px;
    height: 200px;
    background: linear-gradient(135deg, var(--primary) 0%, var(--primary-light) 100%);
    border: 2px solid rgba(255, 255, 255, 0.2);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 2rem;
    color: var(--white);
    opacity: 0.9;
}

.box-3d-front { transform: translateZ(100px); }
.box-3d-back { transform: rotateY(180deg) translateZ(100px); }
.box-3d-right { transform: rotateY(90deg) translateZ(100px); }
.box-3d-left { transform: rotateY(-90deg) translateZ(100px); }
.box-3d-top { transform: rotateX(90deg) translateZ(100px); }
.box-3d-bottom { transform: rotateX(-90deg) translateZ(100px); }

/* ==================== 3D HOVER EFFECTS ==================== */

.hover-3d {
    transition: transform 0.3s ease;
    transform-style: preserve-3d;
}

.hover-3d:hover {
    transform: perspective(1000px) rotateX(10deg) rotateY(-10deg) translateZ(20px);
}

.hover-3d-subtle {
    transition: transform 0.3s ease;
}

.hover-3d-subtle:hover {
    transform: perspective(1000px) rotateX(2deg) rotateY(-2deg) translateZ(5px);
}

/* ==================== FLOATING 3D ELEMENTS ==================== */

.float-3d {
    animation: float-3d 6s ease-in-out infinite;
    transform-style: preserve-3d;
}

@keyframes float-3d {
    0%, 100% {
        transform: translateY(0) rotateX(0deg) rotateY(0deg);
    }
    25% {
        transform: translateY(-10px) rotateX(5deg) rotateY(5deg);
    }
    50% {
        transform: translateY(-20px) rotateX(0deg) rotateY(10deg);
    }
    75% {
        transform: translateY(-10px) rotateX(-5deg) rotateY(5deg);
    }
}

/* ==================== 3D LAYERS ==================== */

.layers-3d {
    position: relative;
    transform-style: preserve-3d;
    transition: transform 0.5s ease;
}

.layers-3d:hover {
    transform: rotateX(10deg) rotateY(-10deg);
}

.layers-3d .layer {
    position: absolute;
    inset: 0;
    transition: transform 0.5s ease;
}

.layers-3d:hover .layer:nth-child(1) { transform: translateZ(30px); }
.layers-3d:hover .layer:nth-child(2) { transform: translateZ(60px); }
.layers-3d:hover .layer:nth-child(3) { transform: translateZ(90px); }

/* ==================== 3D SHADOW ==================== */

.shadow-3d {
    position: relative;
}

.shadow-3d::after {
    content: '';
    position: absolute;
    bottom: -20px;
    left: 10%;
    right: 10%;
    height: 20px;
    background: radial-gradient(ellipse at center, rgba(0, 0, 0, 0.3) 0%, transparent 70%);
    border-radius: 50%;
    transform: scaleY(0.5);
}

/* ==================== PARALLAX 3D ==================== */

.parallax-3d {
    transform-style: preserve-3d;
}

.parallax-3d-layer {
    position: absolute;
    inset: 0;
}

.parallax-3d-layer-1 { transform: translateZ(-300px) scale(2); }
.parallax-3d-layer-2 { transform: translateZ(-200px) scale(1.5); }
.parallax-3d-layer-3 { transform: translateZ(-100px) scale(1.25); }
.parallax-3d-layer-4 { transform: translateZ(0); }

/* ==================== 3D MORPHING SHAPES ==================== */

.morph-3d {
    animation: morph-3d 8s ease-in-out infinite;
}

@keyframes morph-3d {
    0%, 100% {
        border-radius: 60% 40% 30% 70% / 60% 30% 70% 40%;
        transform: rotate(0deg);
    }
    50% {
        border-radius: 30% 60% 70% 40% / 50% 60% 30% 60%;
        transform: rotate(180deg);
    }
}

/* ==================== 3D RING ==================== */

.ring-3d {
    position: relative;
    width: 200px;
    height: 200px;
    transform-style: preserve-3d;
    animation: ring-3d-spin 10s linear infinite;
}

@keyframes ring-3d-spin {
    0% { transform: rotateX(70deg) rotateZ(0deg); }
    100% { transform: rotateX(70deg) rotateZ(360deg); }
}

.ring-3d::before,
.ring-3d::after {
    content: '';
    position: absolute;
    border-radius: 50%;
    border: 3px solid var(--secondary);
}

.ring-3d::before {
    inset: 0;
}

.ring-3d::after {
    inset: 20px;
    animation: ring-3d-spin 8s linear infinite reverse;
}

/* ==================== GLASS MORPHISM 3D ==================== */

.glass-3d {
    background: rgba(255, 255, 255, 0.1);
    backdrop-filter: blur(10px);
    border: 1px solid rgba(255, 255, 255, 0.2);
    box-shadow: 
        0 8px 32px rgba(0, 0, 0, 0.1),
        inset 0 0 0 1px rgba(255, 255, 255, 0.05);
    transform-style: preserve-3d;
}

.glass-3d:hover {
    transform: translateZ(10px);
    box-shadow: 
        0 15px 45px rgba(0, 0, 0, 0.15),
        inset 0 0 0 1px rgba(255, 255, 255, 0.1);
}

/* ==================== RESPONSIVE ==================== */

@media (prefers-reduced-motion: reduce) {
    .card-3d,
    .btn-3d,
    .icon-3d,
    .box-3d,
    .float-3d,
    .ring-3d,
    .morph-3d,
    .cross-3d-hero {
        animation: none;
        transform: none;
    }
    
    .card-3d:hover,
    .btn-3d:hover,
    .hover-3d:hover,
    .hover-3d-subtle:hover {
        transform: none;
    }
}

@media (max-width: 767.98px) {
    .cross-3d-hero {
        width: 60px;
        height: 90px;
    }
    
    .box-3d,
    .box-3d-face {
        width: 120px;
        height: 120px;
    }
    
    .box-3d-front { transform: translateZ(60px); }
    .box-3d-back { transform: rotateY(180deg) translateZ(60px); }
    .box-3d-right { transform: rotateY(90deg) translateZ(60px); }
    .box-3d-left { transform: rotateY(-90deg) translateZ(60px); }
    .box-3d-top { transform: rotateX(90deg) translateZ(60px); }
    .box-3d-bottom { transform: rotateX(-90deg) translateZ(60px); }
}