/* ==================================================
   HERO SECTION
================================================== */

.hero {
    position: relative;
    min-height: 78vh;
    display: flex;
    align-items: center;
    overflow: hidden;
    padding-top: 110px;
    padding-bottom: 50px;
}

/* ==================================================
   BACKGROUND
================================================== */

.hero-grid-bg {
    position: absolute;
    inset: 0;

    background-image:
        linear-gradient(rgba(255,255,255,.025) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255,255,255,.025) 1px, transparent 1px);

    background-size: 50px 50px;

    mask-image:
        radial-gradient(
            circle at center,
            rgba(0,0,0,1),
            transparent 90%
        );
}

.hero-beam {
    position: absolute;

    width: 700px;
    height: 700px;

    background: var(--gradient-primary);

    filter: blur(180px);

    opacity: .12;

    right: -250px;
    top: 50%;

    transform: translateY(-50%);

    animation: beamMove 10s ease-in-out infinite;
}

.hero-bg-text {
    position: absolute;

    left: 50%;
    top: 50%;

    transform: translate(-50%, -50%);

    font-size: clamp(4rem, 9vw, 8rem);

    font-weight: 900;

    letter-spacing: 12px;

    text-transform: uppercase;

    color: transparent;

    -webkit-text-stroke: 1px rgba(139,92,246,.15);

    text-shadow:
        0 0 30px rgba(139,92,246,.12),
        0 0 80px rgba(139,92,246,.08);

    pointer-events: none;
    user-select: none;
}

/* ==================================================
   LAYOUT
================================================== */

.hero-wrapper {
    position: relative;
    z-index: 2;

    display: grid;
    grid-template-columns: 1.1fr .9fr;

    gap: 60px;

    align-items: center;
}

/* ==================================================
   CONTENT
================================================== */

.hero-tag {
    display: inline-flex;
    align-items: center;
    gap: 10px;

    padding: 10px 18px;

    border-radius: 100px;

    background: rgba(255,255,255,.03);

    border: 1px solid rgba(255,255,255,.08);

    backdrop-filter: blur(20px);

    margin-bottom: 20px;
}

.hero-tag span {
    width: 10px;
    height: 10px;

    background: var(--success);

    border-radius: 50%;

    animation: pulse 2s infinite;
}

.hero-title {
    font-size: clamp(3rem, 5vw, 4.8rem);

    line-height: .95;

    letter-spacing: -2px;

    margin-bottom: 15px;
}

.hero-subtitle {
    font-size: 1.25rem;

    color: var(--secondary);

    margin-bottom: 18px;
}

.hero-desc {
    max-width: 600px;

    font-size: 1.05rem;

    margin-bottom: 30px;
}

/* ==================================================
   BUTTONS
================================================== */

.hero-actions {
    display: flex;
    gap: 15px;

    margin-bottom: 30px;
}

/* ==================================================
   METRICS
================================================== */

.hero-metrics {
    display: flex;
    gap: 15px;

    margin-bottom: 30px;

    flex-wrap: wrap;
}

.metric-card {
    position: relative;

    min-width: 120px;

    padding: 18px;

    border-radius: 18px;

    background: rgba(255,255,255,.03);

    border: 1px solid rgba(255,255,255,.06);

    backdrop-filter: blur(20px);

    overflow: hidden;

    transition: .35s;
}

.metric-card::before {
    content: "";

    position: absolute;

    left: 0;
    top: 0;

    width: 100%;
    height: 2px;

    background: var(--gradient-primary);
}

.metric-card:hover {
    transform: translateY(-8px);

    border-color: rgba(139,92,246,.35);

    box-shadow:
        0 15px 40px rgba(139,92,246,.15);
}

.metric-card h3 {
    font-size: 1.8rem;

    margin-bottom: 4px;

    color: #fff;
}

.metric-card span {
    color: var(--text-muted);
}

/* ==================================================
   TECH STACK
================================================== */

.hero-stack {
    display: flex;
    flex-wrap: wrap;
    gap: 14px;
}

.stack-item {
    width: 62px;
    height: 62px;

    display: flex;
    align-items: center;
    justify-content: center;

    border-radius: 18px;

    background:
        linear-gradient(
            145deg,
            rgba(255,255,255,.05),
            rgba(255,255,255,.02)
        );

    border: 1px solid rgba(255,255,255,.08);

    backdrop-filter: blur(20px);

    transition: .35s;

    animation: stackFloat 6s ease-in-out infinite;
}

.stack-item:nth-child(2){animation-delay:.4s;}
.stack-item:nth-child(3){animation-delay:.8s;}
.stack-item:nth-child(4){animation-delay:1.2s;}
.stack-item:nth-child(5){animation-delay:1.6s;}
.stack-item:nth-child(6){animation-delay:2s;}

.stack-item:hover {
    transform: translateY(-8px);

    border-color: var(--primary);

    box-shadow:
        0 10px 30px rgba(139,92,246,.2);
}

.stack-item img,
.stack-item i {
    font-size: 30px;
}

/* ==================================================
   IMAGE AREA
================================================== */

.hero-visual {
    position: relative;

    display: flex;
    justify-content: center;
    align-items: center;
}

.hero-orb {
    position: absolute;

    width: 500px;
    height: 500px;

    border-radius: 50%;

    background: var(--gradient-primary);

    opacity: .22;

    filter: blur(150px);

    animation: orbFloat 8s ease-in-out infinite;
}

.hero-visual::after {
    content: "";

    position: absolute;

    width: 350px;
    height: 350px;

    border-radius: 50%;

    border: 1px solid rgba(255,255,255,.04);

    animation: rotateRing 20s linear infinite;
}

.hero-visual img {
    position: relative;

    z-index: 3;

    max-height: 620px;

    object-fit: contain;

    filter:
        drop-shadow(0 0 40px rgba(139,92,246,.15));

    animation:
        imageFloat 6s ease-in-out infinite;
}

/* ==================================================
   FEATURED PROJECT CARD
================================================== */

.project-card {
    position: absolute;

    top: 70px;
    right: -20px;

    width: 280px;

    padding: 22px;

    background:
        linear-gradient(
            180deg,
            rgba(139,92,246,.08),
            rgba(22,27,34,.85)
        );

    border: 1px solid rgba(255,255,255,.08);

    backdrop-filter: blur(30px);

    border-radius: 22px;

    box-shadow: var(--shadow-lg);

    z-index: 5;

    animation: cardFloat 8s ease-in-out infinite;
}

.card-badge {
    display: inline-flex;

    padding: 6px 12px;

    border-radius: 50px;

    background: rgba(139,92,246,.15);

    color: var(--primary);

    font-size: .8rem;

    margin-bottom: 12px;
}

.project-card h4 {
    margin-bottom: 12px;
}

.project-tech {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;

    margin-top: 15px;
}

.project-tech span {
    padding: 6px 10px;

    border-radius: 50px;

    background: rgba(255,255,255,.05);

    font-size: .8rem;
}

/* ==================================================
   ANIMATIONS
================================================== */

@keyframes pulse {
    0% { box-shadow: 0 0 0 0 rgba(34,197,94,.5); }
    70% { box-shadow: 0 0 0 10px rgba(34,197,94,0); }
    100% { box-shadow: 0 0 0 0 rgba(34,197,94,0); }
}

@keyframes beamMove {
    0%,100% { transform: translateY(-50%) scale(1); }
    50% { transform: translateY(-50%) scale(1.1); }
}

@keyframes imageFloat {
    0%,100% { transform: translateY(0); }
    50% { transform: translateY(-12px); }
}

@keyframes orbFloat {
    0%,100% { transform: translate(0,0); }
    50% { transform: translate(30px,-20px); }
}

@keyframes cardFloat {
    0%,100% { transform: translateY(0); }
    50% { transform: translateY(-10px); }
}

@keyframes stackFloat {
    0%,100% { transform: translateY(0); }
    50% { transform: translateY(-5px); }
}

@keyframes rotateRing {
    from { transform: rotate(0deg); }
    to { transform: rotate(360deg); }
}

/* ==================================================
   TABLET
================================================== */

@media (max-width: 992px){

    .hero{
        min-height:auto;
        padding-top:130px;
    }

    .hero-wrapper{
        grid-template-columns:1fr;
        gap:50px;
    }

    /* IMAGE FIRST */
    .hero-visual{
        order:1;
    }

    .hero-content{
        order: 2;
        text-align:center;
    }

    .hero-tag{
        display: none;
    }

    .hero-desc{
        margin-inline:auto;
    }

    .hero-actions,
    .hero-metrics,
    .hero-stack{
        justify-content:center;
    }

    .project-card{
        position:relative;

        top:auto;
        right:auto;

        width:100%;

        margin-top:20px;
    }
}

/* ==================================================
   MOBILE
================================================== */

@media (max-width:576px){

    .hero{
        padding-top:110px;
        padding-bottom:40px;
    }

    .hero-bg-text{
        font-size:3rem;
        letter-spacing:4px;
    }

    .hero-title{
        font-size:2.8rem;
    }

    .hero-subtitle{
        font-size:1rem;
    }

    /* .hero-actions{
        flex-direction:column;
    } */

    .hero-actions .btn{
        width:100%;
    }

    .hero-metrics{
        justify-content:center;
    }

    .metric-card{
        flex:1;
        min-width:95px;
    }

    .hero-visual img{
        max-height:350px;
    }

    .stack-item{
        width:55px;
        height:55px;
    }
}