/* ================================
   HOMEPAGE HERO
================================ */

.hero {
    min-height: 100vh;
    padding: 180px 8% 100px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: flex-start;
    position: relative;
    overflow: hidden;
}

.hero-label {
    color: var(--accent-cyan);
    font-size: 0.78rem;
    font-weight: 700;
    letter-spacing: 3px;
    text-transform: uppercase;
    margin-bottom: 25px;
}

.hero h1 {
    max-width: 950px;
    font-size: clamp(2.8rem, 6.5vw, 6rem);
    line-height: 1.08;
    letter-spacing: -3px;
    font-weight: 700;
    color: var(--text-primary);
    margin-bottom: 28px;
}

.hero-description {
    max-width: 650px;
    color: var(--text-secondary);
    font-size: 1.1rem;
    line-height: 1.8;
    margin-bottom: 38px;
}

.hero-buttons {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 16px;
}

/* ================================
   HOMEPAGE SECTION SPACING
================================ */

.featured-projects,
.about-preview,
.contact-cta {
    padding: 110px 8%;
    position: relative;
}

.featured-projects {
    background: var(--bg-secondary);
}

.section-label {
    margin-bottom: 18px;
}

.featured-projects h2,
.about-preview h2,
.contact-cta h2 {
    font-size: clamp(2rem, 4vw, 3.5rem);
    line-height: 1.15;
    letter-spacing: -1.5px;
    margin-bottom: 22px;
    max-width: 750px;
}

.section-description,
.about-description,
.contact-cta p {
    color: var(--text-secondary);
    max-width: 650px;
    line-height: 1.8;
    margin-bottom: 40px;
}

/* ================================
   PROJECT GRID
================================ */

.projects-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 24px;
    margin: 45px 0;
}

.project-card {
    padding: 32px;
    min-height: 220px;
    background: var(--glass-bg);
    border: 1px solid var(--glass-border);
    border-radius: var(--radius-lg);
    backdrop-filter: blur(var(--glass-blur));
    -webkit-backdrop-filter: blur(var(--glass-blur));
    transition: var(--transition);
}

.project-card:hover {
    transform: translateY(-7px);
    background: var(--glass-hover);
    box-shadow: var(--shadow);
}

.project-card h3 {
    font-size: 1.35rem;
    margin-bottom: 14px;
}

.project-card p {
    color: var(--text-secondary);
    line-height: 1.7;
}

.project-card a {
    display: inline-block;
    margin-top: 22px;

    color: var(--accent-cyan);
    font-weight: 600;
    text-decoration: none;

    transition: color 0.3s ease, transform 0.3s ease;
}

.project-card a:hover {
    color: #ffffff;
    transform: translateX(5px);
}

.project-card:focus-within {
    border-color: var(--accent-cyan);
    box-shadow: 0 0 20px rgba(0, 217, 255, 0.12);
}

.project-card a:focus-visible {
    outline: 2px solid var(--accent-cyan);
    outline-offset: 5px;
}

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

@media (max-width: 700px) {
    .featured-projects,
    .about-preview,
    .contact-cta {
        padding: 75px 6%;
    }

    .projects-grid {
        grid-template-columns: 1fr;
        gap: 18px;
    }

    .project-card {
        padding: 25px;
    }
}

/* =====================================
   ARNOLD LABS — ANIMATED LIQUID BLOB
===================================== */

.hero {
    position: relative;
    isolation: isolate;
    overflow: hidden;
}

/* Main liquid shape */
.aurora-blob {
    position: absolute;
    width: min(58vw, 650px);
    height: min(48vw, 520px);
    top: 12%;
    right: 5%;
    z-index: 0;
    pointer-events: none;

    background:
        radial-gradient(ellipse at 30% 35%,
            #00e5ff 0%,
            transparent 48%),
        radial-gradient(ellipse at 70% 35%,
            #6545ff 0%,
            transparent 52%),
        radial-gradient(ellipse at 55% 75%,
            #0878ff 0%,
            transparent 55%);

    border-radius: 63% 37% 42% 58% / 43% 56% 44% 57%;

    filter: blur(12px);
    opacity: 0.8;

    animation: blobFlow 8s ease-in-out infinite alternate;
}

/* Inner flowing light */
.blob-core {
    position: absolute;
    inset: 12% 10%;

    background: radial-gradient(
        ellipse at center,
        rgba(0, 220, 255, 0.5),
        rgba(100, 50, 255, 0.2) 45%,
        transparent 72%
    );

    border-radius: 40% 60% 65% 35% / 60% 40% 60% 40%;

    animation: coreFlow 6s ease-in-out infinite alternate;
}

/* Shape movement */
@keyframes blobFlow {
    0% {
        border-radius: 63% 37% 42% 58% / 43% 56% 44% 57%;
        transform: translate(0, 0) rotate(0deg) scale(1);
    }

    50% {
        border-radius: 35% 65% 60% 40% / 55% 35% 65% 45%;
        transform: translate(-45px, 35px) rotate(15deg) scale(1.08);
    }

    100% {
        border-radius: 55% 45% 35% 65% / 35% 65% 35% 65%;
        transform: translate(35px, -25px) rotate(-12deg) scale(0.94);
    }
}

@keyframes coreFlow {
    from {
        transform: rotate(0deg) scale(0.85);
    }

    to {
        transform: rotate(35deg) scale(1.2);
    }
}

/* Keep text and buttons above the blob */
.hero > p,
.hero > h1,
.hero > .hero-buttons {
    position: relative;
    z-index: 2;
}

@media (max-width: 700px) {
    .aurora-blob {
        width: 95vw;
        height: 75vw;
        top: 10%;
        right: -25%;
        opacity: 0.55;
    }
}

@media (prefers-reduced-motion: reduce) {
    .aurora-blob,
    .blob-core,
    .aurora-blob::before,
    .aurora-blob::after {
        animation: none !important;
    }
}
/* AURORA LIGHT TRAILS */

.aurora-blob::before,
.aurora-blob::after {
    content: "";
    position: absolute;
    inset: 10%;
    border-radius: inherit;
    pointer-events: none;
    mix-blend-mode: screen;
}

.aurora-blob::before {
    background: linear-gradient(
        120deg,
        transparent 35%,
        rgba(0, 230, 255, 0.65) 48%,
        rgba(110, 75, 255, 0.5) 54%,
        transparent 68%
    );

    filter: blur(12px);
    animation: lightTrailOne 7s ease-in-out infinite alternate;
}

.aurora-blob::after {
    background: linear-gradient(
        35deg,
        transparent 40%,
        rgba(0, 150, 255, 0.45) 50%,
        transparent 62%
    );

    filter: blur(18px);
    animation: lightTrailTwo 9s ease-in-out infinite alternate;
}

@keyframes lightTrailOne {
    from {
        transform: translateX(-35px) rotate(-12deg);
        opacity: 0.25;
    }

    to {
        transform: translateX(35px) rotate(12deg);
        opacity: 0.8;
    }
}

@keyframes lightTrailTwo {
    from {
        transform: translateY(25px) rotate(8deg);
        opacity: 0.2;
    }

    to {
        transform: translateY(-25px) rotate(-8deg);
        opacity: 0.65;
    }
}

/* ANIMATED HERO IDENTITY */

/* =================================
   ARNOLD LABS — VERTICAL TITLE SLIDER
================================= */

.hero-label {
    min-height: 24px;
    overflow: hidden;
}

#rotating-title {
    display: inline-block;
    color: var(--accent-cyan);
    will-change: transform, opacity;
}

/* Current title exits upwards */
#rotating-title.slide-out {
    animation: slideOut 0.4s ease-in forwards;
}

/* New title enters from below */
#rotating-title.slide-in {
    animation: slideIn 0.45s ease-out forwards;
}

@keyframes slideOut {
    from {
        transform: translateY(0);
        opacity: 1;
    }

    to {
        transform: translateY(-100%);
        opacity: 0;
    }
}

@keyframes slideIn {
    from {
        transform: translateY(100%);
        opacity: 0;
    }

    to {
        transform: translateY(0);
        opacity: 1;
    }
}