/**
 * Minecraft Challenge - 3D Blocks and Animations
 * Advanced 3D CSS for Minecraft-themed elements
 */

/* 3D Block Base Styles */
.minecraft-block {
    position: relative;
    width: 50px;
    height: 50px;
    transform-style: preserve-3d;
    transform: rotateX(-20deg) rotateY(45deg);
    transition: transform 0.5s ease;
}

.minecraft-block:hover {
    transform: rotateX(-15deg) rotateY(45deg) scale(1.1);
}

.minecraft-block .face {
    position: absolute;
    width: 50px;
    height: 50px;
    background-size: cover;
    image-rendering: pixelated;
    box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.2);
}

/* Block Face Positions */
.minecraft-block .front {
    transform: translateZ(25px);
}

.minecraft-block .back {
    transform: translateZ(-25px) rotateY(180deg);
}

.minecraft-block .right {
    transform: translateX(25px) rotateY(90deg);
}

.minecraft-block .left {
    transform: translateX(-25px) rotateY(-90deg);
}

.minecraft-block .top {
    transform: translateY(-25px) rotateX(90deg);
}

.minecraft-block .bottom {
    transform: translateY(25px) rotateX(-90deg);
}

/* Block Types */
.minecraft-block.dirt .face {
    background-image: linear-gradient(135deg, #3D2817 25%, #2a1c10 50%, #3D2817 75%);
}

.minecraft-block.dirt .top {
    background-image: linear-gradient(135deg, #507D2A 25%, #3B5D1F 50%, #507D2A 75%);
}

.minecraft-block.dirt .side {
    background-image: linear-gradient(to bottom, #507D2A 0%, #507D2A 20%, #3D2817 20%, #3D2817 100%);
}

.minecraft-block.stone .face {
    background-image: linear-gradient(135deg, #7D7D7D 25%, #5A5A5A 50%, #7D7D7D 75%);
}

.minecraft-block.diamond .face {
    background-image: linear-gradient(135deg, #7D7D7D 25%, #5A5A5A 50%, #7D7D7D 75%), radial-gradient(circle at 30% 30%, #5cbdff 0%, transparent 15%), radial-gradient(circle at 70% 70%, #5cbdff 0%, transparent 15%);
}

.minecraft-block.gold .face {
    background-image: linear-gradient(135deg, #7D7D7D 25%, #5A5A5A 50%, #7D7D7D 75%), radial-gradient(circle at 30% 30%, #ffcc00 0%, transparent 15%), radial-gradient(circle at 70% 70%, #ffcc00 0%, transparent 15%);
}

.minecraft-block.emerald .face {
    background-image: linear-gradient(135deg, #7D7D7D 25%, #5A5A5A 50%, #7D7D7D 75%), radial-gradient(circle at 30% 30%, #50c878 0%, transparent 15%), radial-gradient(circle at 70% 70%, #50c878 0%, transparent 15%);
}

.minecraft-block.redstone .face {
    background-image: linear-gradient(135deg, #7D7D7D 25%, #5A5A5A 50%, #7D7D7D 75%), radial-gradient(circle at 30% 30%, #ff3300 0%, transparent 15%), radial-gradient(circle at 70% 70%, #ff3300 0%, transparent 15%);
}

.minecraft-block.tnt .face {
    background-image: linear-gradient(135deg, #ff3300 25%, #cc0000 50%, #ff3300 75%);
}

.minecraft-block.tnt .top {
    background-image: linear-gradient(135deg, #ff3300 25%, #cc0000 50%, #ff3300 75%), radial-gradient(circle at center, #ffffff 0%, transparent 30%);
}

.minecraft-block.tnt .bottom {
    background-image: linear-gradient(135deg, #cc0000 25%, #990000 50%, #cc0000 75%);
}

.minecraft-block.chest .front {
    background-image: linear-gradient(135deg, #a67c52 25%, #8c6239 50%, #a67c52 75%), linear-gradient(to bottom, transparent 40%, #000000 40%, #000000 60%, transparent 60%);
}

.minecraft-block.chest .side {
    background-image: linear-gradient(135deg, #a67c52 25%, #8c6239 50%, #a67c52 75%);
}

.minecraft-block.chest .top {
    background-image: linear-gradient(135deg, #a67c52 25%, #8c6239 50%, #a67c52 75%), linear-gradient(to right, transparent 40%, #000000 40%, #000000 60%, transparent 60%);
}

/* Animated Blocks */
.minecraft-block.rotating {
    animation: block-rotate 10s linear infinite;
}

.minecraft-block.floating {
    animation: block-float 3s ease-in-out infinite alternate;
}

.minecraft-block.glowing .face {
    animation: block-glow 2s ease-in-out infinite alternate;
}

/* Block Container */
.block-container {
    perspective: 800px;
    width: 50px;
    height: 50px;
    margin: 20px;
    display: inline-block;
}

/* Block Animations */
@keyframes block-rotate {
    0% { transform: rotateX(-20deg) rotateY(0deg); }
    100% { transform: rotateX(-20deg) rotateY(360deg); }
}

@keyframes block-float {
    0% { transform: rotateX(-20deg) rotateY(45deg) translateY(0); }
    100% { transform: rotateX(-20deg) rotateY(45deg) translateY(-10px); }
}

@keyframes block-glow {
    0% { filter: brightness(1); }
    100% { filter: brightness(1.5) drop-shadow(0 0 5px rgba(255, 255, 255, 0.7)); }
}

/* Block Breaking Animation */
.minecraft-block.breaking {
    animation: block-break 1s forwards;
}

.minecraft-block.breaking .face {
    animation: block-crack 1s forwards;
}

@keyframes block-break {
    0% { transform: rotateX(-20deg) rotateY(45deg) scale(1); }
    50% { transform: rotateX(-20deg) rotateY(45deg) scale(1.1); }
    100% { transform: rotateX(-20deg) rotateY(45deg) scale(0); }
}

@keyframes block-crack {
    0% { background-blend-mode: normal; }
    20% { background-blend-mode: overlay; background-image: repeating-linear-gradient(45deg, rgba(255,255,255,0.1) 0px, rgba(255,255,255,0.1) 2px, transparent 2px, transparent 4px), var(--original-texture); }
    40% { background-blend-mode: overlay; background-image: repeating-linear-gradient(45deg, rgba(255,255,255,0.2) 0px, rgba(255,255,255,0.2) 3px, transparent 3px, transparent 6px), var(--original-texture); }
    60% { background-blend-mode: overlay; background-image: repeating-linear-gradient(45deg, rgba(255,255,255,0.3) 0px, rgba(255,255,255,0.3) 4px, transparent 4px, transparent 8px), var(--original-texture); }
    80% { background-blend-mode: overlay; background-image: repeating-linear-gradient(45deg, rgba(255,255,255,0.4) 0px, rgba(255,255,255,0.4) 5px, transparent 5px, transparent 10px), var(--original-texture); }
    100% { background-blend-mode: overlay; background-image: repeating-linear-gradient(45deg, rgba(255,255,255,0.5) 0px, rgba(255,255,255,0.5) 6px, transparent 6px, transparent 12px), var(--original-texture); }
}

/* 3D Item Display */
.minecraft-item-display {
    perspective: 800px;
    width: 100px;
    height: 100px;
    position: relative;
    margin: 20px auto;
}

.minecraft-item {
    position: absolute;
    width: 100%;
    height: 100%;
    transform-style: preserve-3d;
    animation: item-rotate 10s linear infinite;
}

.minecraft-item img {
    position: absolute;
    width: 64px;
    height: 64px;
    top: 50%;
    left: 50%;
    margin: -32px 0 0 -32px;
    backface-visibility: visible;
    image-rendering: pixelated;
}

.minecraft-item .front {
    transform: translateZ(32px);
}

.minecraft-item .back {
    transform: rotateY(180deg) translateZ(32px);
}

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

/* 3D Text Effects */
.minecraft-3d-text {
    font-family: 'Minecraft', 'Press Start 2P', monospace;
    color: #FFFFFF;
    text-shadow: 
        2px 2px 0 #000000,
        -2px -2px 0 #000000,
        2px -2px 0 #000000,
        -2px 2px 0 #000000,
        0px 2px 0 #000000,
        2px 0px 0 #000000,
        0px -2px 0 #000000,
        -2px 0px 0 #000000;
    transform: perspective(500px) rotateX(10deg);
    display: inline-block;
    transition: all 0.3s ease;
}

.minecraft-3d-text:hover {
    transform: perspective(500px) rotateX(10deg) scale(1.1);
    text-shadow: 
        2px 2px 0 #000000,
        -2px -2px 0 #000000,
        2px -2px 0 #000000,
        -2px 2px 0 #000000,
        0px 2px 0 #000000,
        2px 0px 0 #000000,
        0px -2px 0 #000000,
        -2px 0px 0 #000000,
        0 0 10px rgba(255, 255, 255, 0.7);
}

/* Color Variants */
.minecraft-3d-text.gold {
    color: #FFAA00;
}

.minecraft-3d-text.diamond {
    color: #00FFFF;
}

.minecraft-3d-text.emerald {
    color: #00FF00;
}

.minecraft-3d-text.redstone {
    color: #FF0000;
}

/* 3D Button */
.minecraft-3d-button {
    position: relative;
    display: inline-block;
    padding: 10px 20px;
    background-color: #8B8B8B;
    border: 2px solid #373737;
    border-bottom: 4px solid #373737;
    color: #FFFFFF;
    font-family: 'Minecraft', 'Press Start 2P', monospace;
    font-size: 16px;
    text-align: center;
    text-decoration: none;
    text-shadow: 2px 2px 0 #373737;
    cursor: pointer;
    transition: all 0.1s ease;
    transform: perspective(500px) rotateX(10deg);
    transform-origin: bottom center;
    image-rendering: pixelated;
}

.minecraft-3d-button:hover {
    background-color: #A0A0A0;
    transform: perspective(500px) rotateX(5deg) translateY(-2px);
}

.minecraft-3d-button:active {
    border-bottom: 2px solid #373737;
    transform: perspective(500px) rotateX(10deg) translateY(2px);
}

/* Color Variants */
.minecraft-3d-button.green {
    background-color: #54A246;
    border-color: #3F7A32;
    text-shadow: 2px 2px 0 #3F7A32;
}

.minecraft-3d-button.green:hover {
    background-color: #61B750;
}

.minecraft-3d-button.blue {
    background-color: #5454FC;
    border-color: #3F3FBC;
    text-shadow: 2px 2px 0 #3F3FBC;
}

.minecraft-3d-button.blue:hover {
    background-color: #6161FF;
}

.minecraft-3d-button.red {
    background-color: #A23F3F;
    border-color: #7A3232;
    text-shadow: 2px 2px 0 #7A3232;
}

.minecraft-3d-button.red:hover {
    background-color: #B74F4F;
}

/* 3D Card Effect */
.minecraft-3d-card {
    position: relative;
    width: 100%;
    height: 100%;
    transition: transform 0.6s;
    transform-style: preserve-3d;
}

.card-container {
    perspective: 1000px;
}

.card-container:hover .minecraft-3d-card {
    transform: rotateY(180deg);
}

.card-front, .card-back {
    position: absolute;
    width: 100%;
    height: 100%;
    backface-visibility: hidden;
    border-radius: 10px;
    box-shadow: 0 4px 8px rgba(0,0,0,0.3);
}

.card-back {
    transform: rotateY(180deg);
    background-color: #3F3F3F;
    padding: 15px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}

/* Enchantment Glint Effect */
.enchantment-glint {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(
        135deg,
        rgba(255, 255, 255, 0) 0%,
        rgba(255, 255, 255, 0) 40%,
        rgba(255, 255, 255, 0.3) 50%,
        rgba(255, 255, 255, 0) 60%,
        rgba(255, 255, 255, 0) 100%
    );
    background-size: 200% 200%;
    animation: enchantment-sweep 2s linear infinite;
    pointer-events: none;
}

@keyframes enchantment-sweep {
    0% { background-position: -200% -200%; }
    100% { background-position: 200% 200%; }
}

/* Isometric Grid */
.isometric-grid {
    transform: rotateX(60deg) rotateZ(45deg);
    transform-style: preserve-3d;
}

.isometric-grid .grid-item {
    transform-style: preserve-3d;
    transform: translateZ(0);
    transition: transform 0.3s ease;
}

.isometric-grid .grid-item:hover {
    transform: translateZ(20px);
}

/* Minecraft Fonts */
/* Using web-safe fonts instead of missing Minecraft font */
@import url('https://fonts.googleapis.com/css2?family=VT323&display=swap');

@font-face {
    font-family: 'Minecraft';
    src: url('https://fonts.googleapis.com/css2?family=VT323&display=swap');
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}

.minecraft-font {
    font-family: 'Minecraft', 'Press Start 2P', monospace;
    image-rendering: pixelated;
}