/* Breadcrumbs local styles */
.breadcrumbs {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.75rem;
    color: #94a3b8;
    margin-bottom: 1.5rem;
}
.breadcrumb-link {
    color: #64748b;
    text-decoration: none;
    transition: color 0.2s ease;
}
.breadcrumb-link:hover {
    color: #FFD700;
}
.breadcrumb-separator {
    color: #475569;
    font-size: 0.65rem;
}
.breadcrumb-current {
    color: #e2e8f0;
    font-weight: 500;
}

/* Construction banner */
.construction-banner {
    background: linear-gradient(135deg, rgba(245, 158, 11, 0.1) 0%, rgba(234, 179, 8, 0.05) 100%);
    border: 1px dashed rgba(245, 158, 11, 0.4);
}

/* Animation 
   Using global fade-in-up from components.css 
*/
.delay-100 { animation-delay: 0.1s; }
.delay-200 { animation-delay: 0.2s; }
.delay-300 { animation-delay: 0.3s; }

/* 3D Mastery Icosahedron Styles */
.mastery-icosahedron-container {
    perspective: 1000px;
    width: 300px;
    height: 300px;
    position: relative;
}
.mastery-icosahedron-shape {
    width: 100%;
    height: 100%;
    position: relative;
    transform-style: preserve-3d;
    animation: rotate-mastery 20s linear infinite;
}
.mastery-face {
    position: absolute;
    width: 120px;
    height: 103.92px; /* 120 * sin(60deg) */
    left: 50%;
    top: 50%;
    margin-left: -60px;
    margin-top: -51.96px;
    background: rgba(255, 215, 0, 0.1);
    border: 1px solid rgba(255, 215, 0, 0.4);
    clip-path: polygon(50% 0%, 0% 100%, 100% 100%);
    transform-origin: 50% 50% 0;
    backface-visibility: visible;
    box-shadow: inset 0 0 20px rgba(255, 215, 0, 0.1);
    transition: all 0.3s ease;
}
.mastery-face:hover {
    background: rgba(255, 215, 0, 0.3);
    border-color: rgba(255, 215, 0, 0.8);
    box-shadow: 0 0 30px rgba(255, 215, 0, 0.5);
}

/* Coordinate transforms for 20 faces (Scaled for visual impact) */
/* Top Cap (1-5) */
.m-face-1 { transform: rotateY(0deg) rotateX(52.62deg) translateZ(90px); }
.m-face-2 { transform: rotateY(72deg) rotateX(52.62deg) translateZ(90px); }
.m-face-3 { transform: rotateY(144deg) rotateX(52.62deg) translateZ(90px); }
.m-face-4 { transform: rotateY(216deg) rotateX(52.62deg) translateZ(90px); }
.m-face-5 { transform: rotateY(288deg) rotateX(52.62deg) translateZ(90px); }

/* Middle Upper (6-10) */
.m-face-6 { transform: rotateY(36deg) rotateX(10.81deg) translateZ(90px) rotateZ(180deg); }
.m-face-7 { transform: rotateY(108deg) rotateX(10.81deg) translateZ(90px) rotateZ(180deg); }
.m-face-8 { transform: rotateY(180deg) rotateX(10.81deg) translateZ(90px) rotateZ(180deg); }
.m-face-9 { transform: rotateY(252deg) rotateX(10.81deg) translateZ(90px) rotateZ(180deg); }
.m-face-10 { transform: rotateY(324deg) rotateX(10.81deg) translateZ(90px) rotateZ(180deg); }

/* Middle Lower (11-15) */
.m-face-11 { transform: rotateY(0deg) rotateX(-10.81deg) translateZ(90px); }
.m-face-12 { transform: rotateY(72deg) rotateX(-10.81deg) translateZ(90px); }
.m-face-13 { transform: rotateY(144deg) rotateX(-10.81deg) translateZ(90px); }
.m-face-14 { transform: rotateY(216deg) rotateX(-10.81deg) translateZ(90px); }
.m-face-15 { transform: rotateY(288deg) rotateX(-10.81deg) translateZ(90px); }

/* Bottom Cap (16-20) */
.m-face-16 { transform: rotateY(36deg) rotateX(-52.62deg) translateZ(90px) rotateZ(180deg); }
.m-face-17 { transform: rotateY(108deg) rotateX(-52.62deg) translateZ(90px) rotateZ(180deg); }
.m-face-18 { transform: rotateY(180deg) rotateX(-52.62deg) translateZ(90px) rotateZ(180deg); }
.m-face-19 { transform: rotateY(252deg) rotateX(-52.62deg) translateZ(90px) rotateZ(180deg); }
.m-face-20 { transform: rotateY(324deg) rotateX(-52.62deg) translateZ(90px) rotateZ(180deg); }

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