/* Holographic Animation Effects for TeachQuest
 * Adds a subtle holographic card effect to character backgrounds
 */

/* Main holographic container styles */
.holographic-effect {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    border-radius: 8px;
    z-index: 2;
    pointer-events: none;
    transition: all 0.5s ease;
}

/* Effect Type Classes - used to identify which effect is currently applied */
.holographic-effect.effect-type-1 {}
.holographic-effect.effect-type-2 {}
.holographic-effect.effect-type-3 {}

/* ========== EFFECT TYPE 1: CLASSIC HOLOGRAPHIC FOIL ========== */
/* Subtle horizontal shimmer like a classic holographic card */
.holographic-effect.effect-type-1::before {
    content: '';
    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.03) 25%,
        rgba(255, 255, 255, 0.05) 50%,
        rgba(255, 255, 255, 0.03) 75%,
        rgba(255, 255, 255, 0) 100%
    );
    z-index: 2;
    pointer-events: none;
    opacity: 0.4;
    animation: subtle-shimmer 5s ease-in-out infinite alternate;
}

/* Radial rainbow effect */
.holographic-effect.effect-type-1::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: radial-gradient(
        ellipse at 30% 40%, 
        rgba(255, 0, 0, 0.02) 0%,
        rgba(255, 165, 0, 0.02) 10%, 
        rgba(255, 255, 0, 0.02) 20%, 
        rgba(0, 128, 0, 0.02) 30%, 
        rgba(0, 0, 255, 0.02) 40%, 
        rgba(75, 0, 130, 0.02) 50%, 
        rgba(238, 130, 238, 0.02) 60%,
        rgba(0, 0, 0, 0) 70%
    );
    z-index: 3;
    mix-blend-mode: screen;
    pointer-events: none;
    opacity: 0.4;
    animation: subtle-rainbow 10s ease-in-out infinite alternate;
}

@keyframes subtle-shimmer {
    0% {
        opacity: 0.3;
        transform: translateX(-5px) translateY(-2px);
    }
    100% {
        opacity: 0.5;
        transform: translateX(5px) translateY(2px);
    }
}

@keyframes subtle-rainbow {
    0% {
        background-position: 0% 0%;
        filter: hue-rotate(0deg);
    }
    100% {
        background-position: 20% 20%;
        filter: hue-rotate(60deg);
    }
}

/* Overlay for effect type 1 */
.holographic-overlay.effect-type-1 {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    z-index: 3;
    background: linear-gradient(
        135deg,
        rgba(255, 255, 255, 0.01) 0%,
        rgba(70, 131, 180, 0.02) 25%,
        rgba(147, 112, 219, 0.02) 50%,
        rgba(255, 105, 180, 0.02) 75%,
        rgba(255, 215, 0, 0.01) 100%
    );
    mix-blend-mode: screen;
    opacity: 0.2;
    animation: subtle-prismatic 15s infinite alternate ease-in-out;
}

@keyframes subtle-prismatic {
    0% {
        background-position: 0% 0%;
        filter: hue-rotate(0deg);
    }
    50% {
        background-position: 100% 100%;
        filter: hue-rotate(30deg);
    }
    100% {
        background-position: 0% 0%;
        filter: hue-rotate(60deg);
    }
}

/* Light lines for effect type 1 - subtle horizontal lines like a holographic card */
.light-lines.effect-type-1 {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: repeating-linear-gradient(
        0deg,
        transparent,
        transparent 5px,
        rgba(255, 255, 255, 0.005) 5px,
        rgba(255, 255, 255, 0.005) 6px
    );
    z-index: 4;
    pointer-events: none;
    opacity: 0.2;
}

/* ========== EFFECT TYPE 2: PEARLESCENT SHIMMER ========== */
/* Pearlescent shimmer for effect type 2 */
.holographic-effect.effect-type-2::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(
        45deg,
        rgba(255, 255, 255, 0) 30%,
        rgba(255, 255, 255, 0.03) 45%,
        rgba(255, 255, 255, 0.05) 50%,
        rgba(255, 255, 255, 0.03) 55%,
        rgba(255, 255, 255, 0) 70%
    );
    z-index: 2;
    pointer-events: none;
    opacity: 0.5;
    animation: pearl-shimmer 6s ease-in-out infinite alternate;
    background-size: 200% 200%;
}

/* Gentle pearl glow */
.holographic-effect.effect-type-2::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: radial-gradient(
        circle at center,
        rgba(255, 255, 255, 0.03) 0%,
        rgba(176, 196, 222, 0.02) 40%,
        rgba(176, 224, 230, 0.01) 60%,
        rgba(255, 255, 255, 0) 70%
    );
    z-index: 2;
    mix-blend-mode: screen;
    pointer-events: none;
    opacity: 0.4;
    animation: pearl-pulse 8s ease-in-out infinite alternate;
}

@keyframes pearl-shimmer {
    0% {
        background-position: 0% 0%;
    }
    100% {
        background-position: 100% 100%;
    }
}

@keyframes pearl-pulse {
    0% {
        opacity: 0.2;
        transform: scale(0.99);
    }
    100% {
        opacity: 0.4;
        transform: scale(1.01);
    }
}

/* Overlay for effect type 2 */
.holographic-overlay.effect-type-2 {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    z-index: 3;
    background: linear-gradient(
        135deg,
        rgba(173, 216, 230, 0.02) 0%,
        rgba(240, 248, 255, 0.02) 50%,
        rgba(176, 196, 222, 0.02) 100%
    );
    mix-blend-mode: overlay;
    opacity: 0.3;
    animation: pearl-shift 12s infinite alternate ease-in-out;
}

@keyframes pearl-shift {
    0% {
        background-position: 0% 0%;
        filter: hue-rotate(0deg);
    }
    100% {
        background-position: 100% 100%;
        filter: hue-rotate(15deg);
    }
}

/* Light lines for effect type 2 - subtle pattern like mother of pearl */
.light-lines.effect-type-2 {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: 
        repeating-linear-gradient(60deg, 
            transparent, 
            transparent 10px, 
            rgba(255, 255, 255, 0.005) 10px, 
            rgba(255, 255, 255, 0.005) 12px
        );
    z-index: 4;
    pointer-events: none;
    opacity: 0.15;
}

/* ========== EFFECT TYPE 3: METALLIC FOIL ========== */
/* Metallic shimmer for effect type 3 */
.holographic-effect.effect-type-3::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(
        80deg,
        rgba(192, 192, 192, 0) 0%,
        rgba(192, 192, 192, 0.03) 20%,
        rgba(255, 255, 255, 0.03) 50%,
        rgba(192, 192, 192, 0.03) 80%,
        rgba(192, 192, 192, 0) 100%
    );
    z-index: 2;
    pointer-events: none;
    opacity: 0.4;
    animation: metallic-shift 7s ease-in-out infinite;
    background-size: 300% 100%;
}

/* Metallic pattern effect - very subtle */
.holographic-effect.effect-type-3::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-image: 
        repeating-linear-gradient(
            -45deg,
            transparent,
            transparent 2px,
            rgba(192, 192, 192, 0.01) 2px,
            rgba(192, 192, 192, 0.01) 3px
        );
    background-size: 10px 10px;
    z-index: 3;
    mix-blend-mode: overlay;
    pointer-events: none;
    opacity: 0.2;
}

@keyframes metallic-shift {
    0% {
        background-position: 0% 50%;
    }
    50% {
        background-position: 100% 50%;
    }
    100% {
        background-position: 0% 50%;
    }
}

/* Overlay for effect type 3 */
.holographic-overlay.effect-type-3 {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    z-index: 3;
    background: linear-gradient(
        135deg,
        rgba(192, 192, 192, 0.05) 0%,
        rgba(211, 211, 211, 0.05) 50%,
        rgba(169, 169, 169, 0.05) 100%
    );
    mix-blend-mode: overlay;
    opacity: 0.3;
}

/* Light lines for effect type 3 - subtle metal texture */
.light-lines.effect-type-3 {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(
        90deg,
        transparent 0%,
        rgba(192, 192, 192, 0.01) 45%,
        rgba(192, 192, 192, 0.01) 55%,
        transparent 100%
    );
    background-size: 100px 100%;
    z-index: 4;
    pointer-events: none;
    opacity: 0.2;
    animation: metal-highlight 5s linear infinite alternate;
}

@keyframes metal-highlight {
    0% {
        background-position: -50px 0;
    }
    100% {
        background-position: 150px 0;
    }
}

/* ========== COMMON HOVER EFFECTS FOR ALL TYPES ========== */
/* Color shift effect on hover - intensify the effect slightly on hover */
.student-background:hover .holographic-effect::before {
    opacity: 0.6;
}

.student-background:hover .holographic-effect::after {
    opacity: 0.6;
}

/* Apply effects to game modal character backgrounds */
.student-background {
    position: relative;
    z-index: 1;
    /* Ensure the background container doesn't clip its children */
    height: 100%;
    width: 100%;
    overflow: visible;
}

/* Fix for the character element */
.student-character {
    position: relative;
    z-index: 1;
    height: 100%;
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* Ensure character images display properly */
.student-character img {
    max-height: 100%;
    max-width: 100%;
    object-fit: contain;
    display: block;
    position: relative;
    z-index: 1;
}

/* Additional style for student background to ensure proper sizing */
.student-stats-section .student-background {
    height: 100%;
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    overflow: visible;
}

/* Fix for the student stats section layout */
.student-stats-section {
    position: relative;
    overflow: hidden;
    display: flex;
    flex-direction: column;
}

/* Fix for student stats overlay */
.student-stats-overlay {
    position: absolute;
    top: 15px;
    left: 15px;
    width: 320px;
    padding: 15px;
    background: linear-gradient(135deg, rgba(10, 10, 30, 0.85), rgba(20, 20, 40, 0.9));
    box-shadow: 0 0 20px rgba(0, 0, 0, 0.5), inset 0 0 15px rgba(123, 104, 238, 0.1);
    border-radius: 10px;
    border: 1px solid rgba(123, 104, 238, 0.7);
    backdrop-filter: blur(5px);
    overflow: visible;
    z-index: 50 !important; /* High z-index to ensure it's above holographic effects but below action buttons */
}

/* Fix for action buttons: ensure they're on top of the holographic layers */
.student-action-buttons {
    position: absolute;
    bottom: 20px;
    right: 20px;
    z-index: 100 !important; /* Important to make sure they're above all holographic effects */
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
    width: auto;
}

/* Make sure action button styling doesn't get overridden */
.action-button {
    position: relative;
    z-index: 101 !important; /* Even higher z-index to ensure icons and text are visible */
    backdrop-filter: blur(5px); /* Add slight blur effect to handle any transparency */
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.3); /* Add shadow for better visibility */
}

/* ========== GLOWING BUTTON STYLES ========== */
.learn-more-container {
    display: flex;
    justify-content: center;
    margin-top: 30px;
}

.glowing-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 12px 30px;
    background: linear-gradient(45deg, #6f42c1, #6610f2);
    color: white;
    border-radius: 30px;
    font-weight: 600;
    text-decoration: none;
    position: relative;
    overflow: hidden;
    transition: all 0.3s ease;
    box-shadow: 0 0 15px rgba(102, 16, 242, 0.5), 
                0 0 30px rgba(102, 16, 242, 0.3), 
                0 0 45px rgba(102, 16, 242, 0.1);
    border: 2px solid rgba(255, 255, 255, 0.1);
    text-transform: uppercase;
    letter-spacing: 1px;
}

.glowing-button span {
    position: relative;
    z-index: 2;
    margin-right: 10px;
}

.glowing-button i {
    margin-left: 5px;
    position: relative;
    z-index: 2;
    transition: transform 0.3s ease;
}

.glowing-button:before {
    content: '';
    position: absolute;
    top: -5px;
    left: -5px;
    right: -5px;
    bottom: -5px;
    background: linear-gradient(45deg, #6f42c1, #6610f2, #7a43e6, #9066ff);
    background-size: 400% 400%;
    border-radius: 35px;
    z-index: 1;
    filter: blur(10px);
    opacity: 0.7;
    animation: glowing 3s ease-in-out infinite;
}

.glowing-button:hover {
    transform: translateY(-3px);
    box-shadow: 0 0 20px rgba(102, 16, 242, 0.6), 
                0 0 40px rgba(102, 16, 242, 0.4), 
                0 0 60px rgba(102, 16, 242, 0.2);
}

.glowing-button:hover i {
    transform: translateX(5px);
}

@keyframes glowing {
    0% {
        background-position: 0% 50%;
        opacity: 0.7;
    }
    50% {
        background-position: 100% 50%;
        opacity: 0.9;
    }
    100% {
        background-position: 0% 50%;
        opacity: 0.7;
    }
}

/* ========== WHAT IS TEACHQUEST PAGE STYLES ========== */
.small-hero {
    height: 0vh;
    display: flex;
    align-items: center;
    text-align: center;
}

.hero-content.centered {
    text-align: center;
    max-width: 800px;
    margin: 0 auto;
}

.content-wrapper {
    max-width: 900px;
    margin: 0 auto;
    padding: 30px 20px;
    background-color: rgba(20, 20, 40, 0.9);
    border-radius: 15px;
    border: 1px solid rgba(255, 255, 255, 0.1);
}

.guide-section {
    margin-bottom: 40px;
    padding: 20px;
    border-radius: 10px;
    background-color: rgba(30, 30, 50, 0.9);
    border: 1px solid rgba(255, 255, 255, 0.1);
}

.guide-section h3 {
    display: flex;
    align-items: center;
    margin-bottom: 15px;
    color: #6f42c1;
}

.guide-section h3 i {
    margin-right: 10px;
    font-size: 1.2em;
}

.implementation-box {
    background-color: rgba(40, 30, 80, 0.9);
    border-left: 4px solid #6f42c1;
    padding: 15px;
    margin: 20px 0;
    border-radius: 0 5px 5px 0;
}

.implementation-box h4 {
    margin-top: 0;
    color: #6f42c1;
}

.implementation-box ul {
    margin-bottom: 0;
}

.example-text {
    font-style: italic;
    text-align: center;
    margin-top: 15px;
    color: #9066ff;
}

.highlight-section {
    background: linear-gradient(135deg, rgba(40, 30, 80, 0.9), rgba(50, 30, 100, 0.9));
    border: 1px solid rgba(111, 66, 193, 0.4);
}

.daily-schedule {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.schedule-item {
    display: flex;
    align-items: flex-start;
    padding: 10px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.05);
}

.schedule-item .time {
    min-width: 120px;
    font-weight: bold;
    color: #6f42c1;
}

.cta-container {
    text-align: center;
    margin-top: 50px;
    padding: 30px;
    background: linear-gradient(135deg, rgba(50, 30, 100, 0.9), rgba(60, 30, 120, 0.9));
    border-radius: 10px;
    border: 1px solid rgba(111, 66, 193, 0.4);
}