/* ==========================================================
   HOME2 -- a deliberately different design direction, isolated
   entirely to this page. Nothing here touches index.html or
   any shared component outside these new rules.
========================================================== */

/* ---------- Centered-logo nav ---------- */
.home2-header .nav-container {
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    align-items: center;
    gap: 2rem;
}

.home2-header .logo {
    justify-self: center;
}

.home2-nav-left,
.home2-nav-right {
    display: flex;
    align-items: center;
    gap: 2.5rem;
}

/* Both groups hug the logo (inner edge of their own grid column) rather
   than the outer screen edge. Without this, any leftover space from
   unequal link-text length on each side collects right next to the
   logo instead of the far edges, making the gap beside the logo look
   uneven depending on how long "About" vs "Behind the Beak" etc. are. */
.home2-nav-left {
    justify-content: flex-end;
    margin-right: clamp(2rem, 5vw, 4.5rem);
}

.home2-nav-right {
    justify-content: flex-start;
    margin-left: clamp(2rem, 5vw, 4.5rem);
}

.home2-header .main-nav a {
    color: rgba(255, 255, 255, .72);
    text-decoration: none;
    font-weight: 600;
    font-size: .95rem;
}

.home2-header .main-nav a:hover {
    color: #fff;
}

@media (max-width: 900px) {
    .home2-header .nav-container {
        grid-template-columns: auto 1fr auto;
    }

    /* Used to permanently hide the left nav group below 900px -- a leftover
       from before the hamburger menu existed. Since components.css now
       turns .main-nav into a fixed full-screen overlay at this width, this
       rule was fighting the mobile menu: it baked display:none onto the
       left panel so toggling .active could never show it, silently
       dropping Home / About / Services / Portfolio from the mobile menu. */
}

/* ---------- DDL-style inverted hero ---------- */
.home2-hero {
    position: relative;
    min-height: 100vh;
    display: flex;
    align-items: flex-end;
    overflow: hidden;
    background: #000;
}

.home2-hero-image {
    position: absolute;
    inset: 0;
    z-index: 1;
}

.home2-hero-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center 30%;
    filter: saturate(1.05) contrast(1.02);
}

.home2-hero-image::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, rgba(0, 0, 0, .15) 0%, rgba(0, 0, 0, 0) 35%, rgba(0, 0, 0, .55) 100%);
}

.home2-hero-inner {
    position: relative;
    z-index: 3;
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    padding: 0 clamp(24px, 6vw, 96px) clamp(48px, 6vw, 88px);
}

.home2-hero-tag {
    display: inline-block;
    margin-bottom: 1.5rem;
    padding: .5rem 1.1rem;
    border-radius: 999px;
    border: 1px solid rgba(255, 255, 255, .3);
    color: #fff;
    font-size: .78rem;
    font-weight: 700;
    letter-spacing: .16em;
    text-transform: uppercase;
    backdrop-filter: blur(6px);
    background: rgba(255, 255, 255, .06);
}

.home2-hero-headline {
    /* Positioned directly as a sibling of .home2-hero-image (see HTML)
       so the blend backdrop it sees includes the photo, not just
       whatever is painted inside a wrapper. This is the load-bearing
       fix -- nesting this inside a z-indexed wrapper isolates it from
       the image entirely and the blend mode has nothing to react to. */
    position: absolute;
    z-index: 2;
    left: clamp(24px, 6vw, 96px);
    bottom: clamp(190px, 24vw, 270px);
    max-width: 90vw;
    font-size: clamp(3.6rem, 10vw, 9.5rem);
    line-height: .84;
    letter-spacing: -.045em;
    font-weight: 800;
    margin: 0;
    /* The signature effect: a colorful gradient (not flat white) run
       through mix-blend-mode so it reads as vivid and image-reactive
       across BOTH bright and dark parts of the photo. Flat white only
       inverts noticeably against light backgrounds -- over dark areas
       it just looks like faded grey text, which is why this needs a
       gradient fill rather than a solid color. */
    background: linear-gradient(100deg, #ffffff 0%, #7dd8ff 30%, #0b9496 55%, #ff8a5c 85%, #ffffff 100%);
    background-size: 180% 180%;
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    mix-blend-mode: difference;
    animation: home2GradientShift 10s ease-in-out infinite;
    pointer-events: none;
}

@keyframes home2GradientShift {
    0%, 100% { background-position: 0% 50%; }
    50% { background-position: 100% 50%; }
}

.home2-hero-headline span {
    display: block;
}

.home2-hero-side {
    position: absolute;
    right: clamp(24px, 6vw, 96px);
    bottom: clamp(190px, 24vw, 270px);
    max-width: 240px;
    text-align: right;
}

.home2-hero-side ul {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: .5rem;
}

.home2-hero-side li {
    color: rgba(255, 255, 255, .82);
    font-size: .95rem;
    font-weight: 500;
}

.home2-hero-bottom {
    margin-top: auto;
    display: grid;
    grid-template-columns: 1fr auto;
    align-items: flex-end;
    gap: 2rem;
}

.home2-hero-intro {
    max-width: 480px;
    color: rgba(255, 255, 255, .82);
    font-size: 1.05rem;
    line-height: 1.75;
}

/* ---------- Typewriter tagline ---------- */
.home2-typewriter-line {
    display: flex;
    align-items: baseline;
    gap: .5rem;
    margin-top: 1.25rem;
    font-size: 1.15rem;
    font-weight: 600;
    color: #fff;
}

.home2-typewriter-line .tw-prefix {
    color: rgba(255, 255, 255, .6);
    font-weight: 500;
}

.home2-typewriter-text {
    color: var(--color-teal);
}

.home2-typewriter-cursor {
    display: inline-block;
    width: 2px;
    height: 1.1em;
    background: var(--color-red);
    animation: home2CursorBlink 1s step-end infinite;
}

@keyframes home2CursorBlink {
    0%, 100% { opacity: 1; }
    50% { opacity: 0; }
}

@media (max-width: 700px) {
    .home2-hero-bottom {
        grid-template-columns: 1fr;
    }

    .home2-hero-headline {
        bottom: clamp(320px, 60vw, 400px);
    }

    .home2-hero-side {
        position: static;
        max-width: none;
        text-align: left;
        margin-bottom: 2rem;
    }
}