/* General page and section styling */
html { scroll-behavior: smooth; }

.nav-hidden {
    transform: translateY(-100%);
}

.hero-pattern {
    background-color: #19212d;
    background-image:
        radial-gradient(circle, rgba(0, 240, 255, 0.1) 0%, rgba(13, 17, 23, 0.8) 70%),
        url('https://www.transparenttextures.com/patterns/cubes.png');
    background-repeat: repeat;
    background-size: auto;
    background-position: center;
    opacity: 1!important;
    z-index: 0 !important;
}

.project-card, .education-card, .philosophy-card, .testimonial-card {
    transition: transform 0.3s ease-in-out, box-shadow 0.3s ease-in-out;
}
.project-card:hover, .education-card:hover, .philosophy-card:hover, .testimonial-card:hover {
    transform: translateY(-8px);
    box-shadow: 0 10px 20px -3px rgba(0,240,255,0.2), 0 4px 6px -2px rgba(0,240,255,0.1);
}
.skill-tag {
    opacity: 0.7;
    transition: opacity 0.2s ease-in-out, transform 0.2s ease-in-out;
}
.skill-tag.active {
    opacity: 1;
    transform: scale(1.01);
    animation: text-glow 1.5s ease-in-out infinite alternate;
    box-shadow: 0 0 1px 1px rgba(231, 101, 228, 0.6), 0 0 16px 4px rgba(231, 101, 228, 0.4);
    background-color: rgba(231, 101, 228, 0.2);
}

.timeline-line {
    position: absolute;
    left: 50%;
    top: 0;
    bottom: 0;
    width: 4px;
    background: linear-gradient(to bottom, #00F0FF, #E765E4);
    transform: translateX(-2px);
    border-radius: 2px;
}
@media (max-width: 767px) {
    .timeline-line {
        left: 20px;
    }
}
/*
* PCB Hover Effect
*/
.pcb-effect {
    position: relative;
    /* Hide any overflowing pseudo-elements */
    overflow: hidden;
    /* Smooth transition for the color and the trace effect */
    transition: color 0.3s ease;
}
.pcb-effect::before,
.pcb-effect::after {
    content: '';
    position: absolute;
    left: 0;
    /* Start the trace effect off-screen to the right */
    transform: translateX(100%);
    width: 100%;
    height: 5px; /* Trace thickness */
    transition: transform 0.4s ease-in-out;
}

/* Bottom trace */
.pcb-effect::after {
    bottom: 0;
    background: repeating-linear-gradient(
        90deg,
        #00F0FF 0%,
        #00F0FF 5px,
        transparent 5px,
        transparent 10px
    );
    /* To make the two traces slightly different */
    transition-delay: 0.1s;
}
/* Hover state: move the traces into view */
.pcb-effect:hover::before,
.pcb-effect:hover::after {
    transform: translateX(0);
}
/* Hover state: change the text color to match */
.pcb-effect:hover {
    color: #00F0FF;
}

.glow-hover {
    transition: text-shadow 0.3s ease-in-out, color 0.3s ease-in-out;
}
.glow-hover:hover {
    color: #00F0FF; /* Match the PCB trace color */
    text-shadow: 0 0 2px rgba(0, 240, 255, 0.6), 0 0 6px rgba(0, 240, 255, 0.4);
}

.glow-gradient {
    /* Set the base text color to a light color that complements the glow */
    color: #fff;
    /* Layered text shadows to create the gradient effect */
    text-shadow: 
        /* Cyan shadow on one side (e.g., left) */
        -2px 0 10px rgba(0, 240, 255, 0.8),
        -2px 0 20px rgba(0, 240, 255, 0.6),
        
        /* Magenta shadow on the other side (e.g., right) */
        2px 0 10px rgba(231, 101, 228, 0.8),
        2px 0 20px rgba(231, 101, 228, 0.6);
}

.text-gradient {
    /* Set the background to a linear gradient from cyan to magenta */
    background-image: linear-gradient(90deg, #00F0FF, #ffffff 60%, #E765E4 80%);

    /* Clip the background to the text, making the gradient only visible inside the letters */
    background-clip: text;
    -webkit-background-clip: text; /* For Safari/old Chrome compatibility */

    /* Make the text transparent so the background shows through */
    color: transparent;

    /* To ensure the background doesn't repeat */
    background-repeat: no-repeat;
}


.text-gradient-subtle-turn {
    /* Subtle diagonal gradient from bottom-left to top-right */
    background-image: linear-gradient(80deg, #00F0FF 20%,#E765E4 75%);

    background-clip: text;
    -webkit-background-clip: text;
    color: transparent;

}
.text-gradprojects {
    /* Set the background to a linear gradient from cyan to magenta */
    background-image: linear-gradient(120deg, #00F0FF, #E765E4 80%);

    /* Clip the background to the text, making the gradient only visible inside the letters */
    background-clip: text;
    -webkit-background-clip: text; /* For Safari/old Chrome compatibility */

    /* Make the text transparent so the background shows through */
    color: transparent;

    /* To ensure the background doesn't repeat */
    background-repeat: no-repeat;
}

.project-section {
    opacity: 0;
    transform: translateY(50px);
    transition: opacity 1s ease-out, transform 1s ease-out;
}
.project-section.is-visible {
    opacity: 1;
    transform: translateY(0);
}
.project-image-container {
    transition: transform 0.3s ease-in-out;
}
.project-image-container:hover {
    transform: scale(1.05); /* Subtle zoom on hover */
}
.project-details {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.7s ease-in-out, padding 0.7s ease-in-out;
    padding-top: 0;
}
.project-details.is-expanded {
    max-height: 2000px; /* or more */
    padding-top: 2rem;
}
.expand-button {
    transition: transform 0.3s ease-in-out;
}
.expand-button.is-expanded {
    transform: rotate(180deg);
}

.hidden-skill {
    opacity: 0;
    visibility: hidden;
    height: 0; /* Ensures the hidden skills don't take up vertical space */
    overflow: hidden;
    transition: opacity 0.5s ease-in-out, height 0.5s ease-in-out;
}

.visible-skill {
    opacity: 1;
    visibility: visible;
    height: auto; /* Restores the skills' natural height */
    transition: opacity 0.5s ease-in-out, height 0.5s ease-in-out;
}


.tab-outer-container {
    position: relative;
    transition: height 0.5s ease-in-out;
}
.tab-content {
    transition: opacity 0.5s ease-in-out;
}
.tab-header-active {
    @apply text-pcb-subtleb border-pcb-subtleb;
}


.project-text-wrapper {
    background-color: rgba(183, 4, 4, 0.5);
    padding: 20px;
    border-radius: 8px;
}

.project-description {
  text-shadow: 1px 1px 4px rgba(0, 0, 0, 0.6);
}