/* ======================================
   TECH ANIMATIONS — PROJECT SECTION
   ====================================== */

/* Neon palette */
:root {
    --neon-cyan:   #00d4ff;
    --neon-purple: #7b2fff;
    --neon-green:  #00ff88;
    --neon-glow-c: rgba(0, 212, 255, 0.35);
    --neon-glow-p: rgba(123, 47, 255, 0.25);
    --neon-glow-g: rgba(0, 255, 136, 0.25);
}

/* ======================================
   SECTION WRAPPER
   ====================================== */
#projetos {
    position: relative;
    overflow: hidden;
    padding-top: 5rem;
    padding-bottom: 5rem;
}

/* Moving grid background */
#projetos::before {
    content: '';
    position: absolute;
    inset: 0;
    background-image:
        linear-gradient(rgba(0, 212, 255, 0.045) 1px, transparent 1px),
        linear-gradient(90deg, rgba(0, 212, 255, 0.045) 1px, transparent 1px);
    background-size: 50px 50px;
    pointer-events: none;
    z-index: 0;
    animation: gridDrift 25s linear infinite;
}

@keyframes gridDrift {
    from { background-position: 0 0; }
    to   { background-position: 50px 50px; }
}

/* Floating corner accent – top-left */
#projetos::after {
    content: '';
    position: absolute;
    top: -120px;
    left: -120px;
    width: 400px;
    height: 400px;
    background: radial-gradient(circle, rgba(0, 212, 255, 0.08) 0%, transparent 70%);
    pointer-events: none;
    z-index: 0;
    animation: floatBlob 8s ease-in-out infinite alternate;
}

@keyframes floatBlob {
    from { transform: translate(0, 0); }
    to   { transform: translate(40px, 30px); }
}

#projetos > * {
    position: relative;
    z-index: 1;
}

/* heading keeps default styles from 3-typography.css */

/* ======================================
   CARD — entry reveal animation (keyframe-based so hover
   transitions are never delayed by the stagger)
   ====================================== */
.projects__card {
    opacity: 0;
    transform: translateY(55px) scale(0.96);
    /* hover-only transitions — NO delay here */
    transition:
        box-shadow   0.4s ease,
        border-color 0.4s ease;
    will-change: opacity, transform;
    border-radius: 12px;
    border: 1px solid rgba(0, 212, 255, 0.12);
    overflow: hidden;
}

@keyframes cardReveal {
    from { opacity: 0; transform: translateY(55px) scale(0.96); }
    to   { opacity: 1; transform: translateY(0)   scale(1);    }
}

.projects__card.card-revealed {
    animation: cardReveal 0.75s cubic-bezier(0.25, 0.46, 0.45, 0.94) both;
}

/* Staggered animation-delay (only during reveal; no effect on hover) */
.projects__card:nth-child(1).card-revealed { animation-delay: 0s;    }
.projects__card:nth-child(2).card-revealed { animation-delay: 0.15s; }
.projects__card:nth-child(3).card-revealed { animation-delay: 0.30s; }
.projects__card:nth-child(4).card-revealed { animation-delay: 0.45s; }
.projects__card:nth-child(5).card-revealed { animation-delay: 0.60s; }

/* ======================================
   CARD — hover neon glow
   ====================================== */
.projects__card:hover {
    border-color: rgba(0, 212, 255, 0.55);
    box-shadow:
        0 0 0 1px rgba(0, 212, 255, 0.4),
        0 0 20px var(--neon-glow-c),
        0 0 50px var(--neon-glow-p),
        0 20px 50px rgba(0, 0, 0, 0.35);
    /* transform handled by JS tilt; animation keeps final state */
}

/* Prevent double transition while JS tilt is active */
.projects__card.is-tilting {
    transition:
        box-shadow 0.3s ease,
        border-color 0.3s ease;
}

/* ======================================
   PROJECT ID BADGE  (via ::after)
   ====================================== */
.projects__card::after {
    content: attr(data-project-id);
    position: absolute;
    top: 12px;
    right: 12px;
    background: rgba(0, 0, 0, 0.55);
    border: 1px solid rgba(0, 212, 255, 0.5);
    color: var(--neon-cyan);
    font-size: 0.68rem;
    font-weight: 700;
    padding: 0.25rem 0.55rem;
    border-radius: 4px;
    font-family: 'Courier New', monospace;
    letter-spacing: 0.18em;
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    z-index: 10;
    opacity: 0;
    transition: opacity 0.3s ease;
    pointer-events: none;
}

.projects__card:hover::after {
    opacity: 1;
}

/* ======================================
   CARD IMAGE WRAPPER
   ====================================== */
.card__image-wrapper {
    position: relative;
    overflow: hidden;
}

.card__covers {
    width: 100%;
    height: 220px;
    object-fit: cover;
    display: block;
    transition: transform 0.55s ease, filter 0.55s ease;
    filter: saturate(0.75) brightness(0.92);
}

.projects__card:hover .card__covers {
    transform: scale(1.07);
    filter: saturate(1.1) brightness(1.06);
}

/* Light sweep on hover */
.card__image-wrapper::before {
    content: '';
    position: absolute;
    top: 0;
    left: -80%;
    width: 55%;
    height: 100%;
    background: linear-gradient(
        100deg,
        transparent 0%,
        rgba(0, 212, 255, 0.14) 50%,
        transparent 100%
    );
    transform: skewX(-15deg);
    pointer-events: none;
    z-index: 2;
    opacity: 0;
}

.projects__card:hover .card__image-wrapper::before {
    opacity: 1;
    animation: imageSweep 0.65s ease forwards;
}

@keyframes imageSweep {
    0%   { left: -80%; }
    100% { left: 140%;  }
}

/* Subtle scanlines overlay */
.card__image-wrapper::after {
    content: '';
    position: absolute;
    inset: 0;
    background: repeating-linear-gradient(
        0deg,
        transparent,
        transparent 3px,
        rgba(0, 0, 0, 0.04) 3px,
        rgba(0, 0, 0, 0.04) 4px
    );
    pointer-events: none;
    z-index: 1;
    opacity: 0;
    transition: opacity 0.4s ease;
}

.projects__card:hover .card__image-wrapper::after {
    opacity: 1;
}

/* ======================================
   CARD TITLE neon highlight
   ====================================== */
.card__title {
    transition: color 0.35s ease, text-shadow 0.35s ease;
}

.projects__card:hover .card__title {
    color: var(--neon-cyan);
    text-shadow: 0 0 18px rgba(0, 212, 255, 0.45);
}

/* ======================================
   CORNER BRACKET DECORATIONS
   ====================================== */
.card__corner {
    position: absolute;
    width: 20px;
    height: 20px;
    pointer-events: none;
    z-index: 5;
    opacity: 0;
    transition: opacity 0.35s ease;
}

.projects__card:hover .card__corner { opacity: 1; }

.card__corner--tl {
    top: 7px; left: 7px;
    border-top:  2px solid var(--neon-cyan);
    border-left: 2px solid var(--neon-cyan);
    box-shadow: -2px -2px 8px var(--neon-glow-c);
}
.card__corner--tr {
    top: 7px; right: 7px;
    border-top:   2px solid var(--neon-purple);
    border-right: 2px solid var(--neon-purple);
    box-shadow: 2px -2px 8px var(--neon-glow-p);
}
.card__corner--bl {
    bottom: 7px; left: 7px;
    border-bottom: 2px solid var(--neon-green);
    border-left:   2px solid var(--neon-green);
    box-shadow: -2px 2px 8px var(--neon-glow-g);
}
.card__corner--br {
    bottom: 7px; right: 7px;
    border-bottom: 2px solid var(--neon-cyan);
    border-right:  2px solid var(--neon-cyan);
    box-shadow: 2px 2px 8px var(--neon-glow-c);
}

/* ======================================
   SKILL BADGE micro-animation
   ====================================== */
.card__skills .skills__item {
    transition:
        transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1),
        box-shadow 0.3s ease,
        border-color 0.3s ease;
}

.card__skills .skills__item:hover {
    transform: translateY(-5px) rotate(8deg);
    box-shadow: 0 6px 18px var(--neon-glow-c);
    border-color: rgba(0, 212, 255, 0.55);
}

/* ======================================
   DARK THEME — glass morphism cards
   ====================================== */
:root[data-theme='dark'] .projects__card {
    background: rgba(20, 20, 26, 0.82);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
}

:root[data-theme='dark'] #projetos::before {
    background-image:
        linear-gradient(rgba(0, 212, 255, 0.07) 1px, transparent 1px),
        linear-gradient(90deg, rgba(0, 212, 255, 0.07) 1px, transparent 1px);
}

/* ======================================
   LIGHT THEME ADAPTATIONS
   ====================================== */
:root[data-theme='light'] #projetos::before {
    background-image:
        linear-gradient(rgba(60, 60, 180, 0.035) 1px, transparent 1px),
        linear-gradient(90deg, rgba(60, 60, 180, 0.035) 1px, transparent 1px);
}

:root[data-theme='light'] .projects__card {
    border-color: rgba(100, 100, 200, 0.18);
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.07);
}

:root[data-theme='light'] .projects__card:hover {
    border-color: rgba(0, 100, 220, 0.5);
    box-shadow:
        0 0 0 1px rgba(0, 100, 220, 0.35),
        0 0 20px rgba(0, 100, 220, 0.15),
        0 0 45px rgba(100, 0, 200, 0.10),
        0 20px 45px rgba(0, 0, 0, 0.12);
}

:root[data-theme='light'] .projects__card:hover .card__title {
    color: #0066cc;
    text-shadow: 0 0 16px rgba(0, 100, 200, 0.35);
}

:root[data-theme='light'] .projects__card::after {
    background: rgba(240, 240, 255, 0.85);
    border-color: rgba(0, 100, 200, 0.45);
    color: #0055aa;
}

:root[data-theme='light'] .card__corner--tl,
:root[data-theme='light'] .card__corner--br {
    border-color: #0066cc;
    box-shadow: none;
}
:root[data-theme='light'] .card__corner--tr,
:root[data-theme='light'] .card__corner--bl {
    border-color: #6600cc;
    box-shadow: none;
}

:root[data-theme='light'] .card__image-wrapper::before {
    background: linear-gradient(
        100deg,
        transparent 0%,
        rgba(0, 100, 220, 0.10) 50%,
        transparent 100%
    );
}

/* ======================================
   RESPONSIVE — disable 3D tilt on touch
   ====================================== */
@media (hover: none) {
    .projects__card:hover {
        transform: none;
    }
    .projects__card.card-revealed:hover {
        transform: none;
    }
}