/* ============================================================
   hero-v2.css — Cycling keyword highlight hero
   ankitdwivedi.com — prachar-theme

   Load order: link AFTER style.css so these rules win by source
   order without needing !important.

   Naming prefix: hv2-  (hero-v2, isolated from existing pr- rules)
   ============================================================ */


/* ── @font-face: Playfair Display ─────────────────────────── */

@font-face {
    font-family: 'Playfair Display';
    src: url('../fonts/playfair-display-regular.woff2') format('woff2');
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Playfair Display';
    src: url('../fonts/playfair-display-regular-italic.woff2') format('woff2');
    font-weight: 400;
    font-style: italic;
    font-display: swap;
}

@font-face {
    font-family: 'Playfair Display';
    src: url('../fonts/playfair-display-700.woff2') format('woff2');
    font-weight: 700;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Playfair Display';
    src: url('../fonts/playfair-display-700-italic.woff2') format('woff2');
    font-weight: 700;
    font-style: italic;
    font-display: swap;
}


/* ── CSS custom properties ─────────────────────────────────── */

:root {
    --hv2-color-base:        rgba(255, 255, 255, 0.35);
    --hv2-color-orange:      #ff8a1e;
    --hv2-color-green:       #00ca61;
    --hv2-color-blue:        #5fa7ff;
    --hv2-color-pink:        #ff60d4;
    --hv2-transition-speed:  0.6s;
}


/* ── Section shell ─────────────────────────────────────────── */

.hv2-hero {
    position: relative;
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: flex-start;          /* left-aligned like the reference */
    padding: 0 clamp(1.5rem, 8vw, 9rem);
    background: #090909;
    overflow: hidden;
}


/* ── Headline ──────────────────────────────────────────────── */

.hv2-headline {
    font-family: 'Playfair Display', Georgia, serif;
    font-weight: 700;
    font-size: clamp(2rem, 5.5vw, 4.25rem); /* ~68px at 1280px wide */
    line-height: 1.18;
    letter-spacing: -0.04em;               /* ~-1.5px at 68px is -0.022em; tighter here for Playfair */
    max-width: 16em;                        /* constrains line length elegantly */
    margin: 0;

    /* Remove default UA word-spacing so our inline-block spans flow right */
    word-spacing: 0;
}


/* ── Individual word spans ──────────────────────────────────── */

/*
   Every <span class="hv2-word"> is inline (not inline-block) so text
   wraps naturally. The space character between spans in the template
   handles word spacing — no extra gap logic needed.
*/
.hv2-word {
    display: inline;
    color: var(--hv2-color-base);
    transition: color var(--hv2-transition-speed) ease,
                opacity var(--hv2-transition-speed) ease;
}

/* Keyword spans are hoverable — cursor hint */
.hv2-word.hv2-kw {
    cursor: pointer;
}

/* Active keyword group — JS adds this class on hover (desktop) or cycle (mobile) */
.hv2-word.hv2-kw-active[data-kw="ankit-dwivedi"]      { color: var(--hv2-color-orange); }
.hv2-word.hv2-kw-active[data-kw="positioning-clarity"] { color: var(--hv2-color-green);  }
.hv2-word.hv2-kw-active[data-kw="pipeline"]            { color: var(--hv2-color-blue);   }
.hv2-word.hv2-kw-active[data-kw="market-winners"]      { color: var(--hv2-color-pink);   }


/* ── Subtitle ──────────────────────────────────────────────── */

.hv2-subtitle {
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
    font-weight: 400;
    font-size: clamp(0.875rem, 1.4vw, 1.0625rem); /* 14–17px */
    color: rgba(255, 255, 255, 0.5);
    letter-spacing: 0.01em;
    margin-top: 2rem;
    line-height: 1.5;
}


/* ── Annotation container ──────────────────────────────────── */

/*
   Desktop: pinned to the bottom-right corner of the hero.
   Mobile:  flows below the subtitle in document order.
*/
.hv2-annotations {
    position: absolute;
    bottom: clamp(2rem, 5vh, 3.5rem);
    right: clamp(1.5rem, 8vw, 9rem);
    width: clamp(18rem, 30vw, 28rem);
    text-align: right;
    pointer-events: none;   /* annotations are decorative; not interactive */
}

/* Each annotation is hidden by default */
.hv2-annotation {
    display: flex;
    align-items: flex-start;
    justify-content: flex-end;
    gap: 0.5em;
    opacity: 0;
    transform: translateY(8px);
    transition: opacity var(--hv2-transition-speed) ease,
                transform var(--hv2-transition-speed) ease;

    /* Position all annotations on top of each other */
    position: absolute;
    bottom: 0;
    right: 0;
    width: 100%;
}

/* Active annotation — JS adds this class */
.hv2-annotation.hv2-annotation-active {
    opacity: 1;
    transform: translateY(0);
    position: relative; /* take document flow when active so container sizes to it */
}

.hv2-annotation-icon {
    font-style: normal;
    flex-shrink: 0;
    line-height: 1.5;
    font-size: 0.875rem;
}

.hv2-annotation-text {
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
    font-size: clamp(0.75rem, 1.1vw, 0.875rem); /* 12–14px */
    font-style: italic;
    line-height: 1.55;
    font-weight: 400;
}

/* Annotation text colors match keyword colors */
.hv2-annotation[data-annotation="ankit-dwivedi"]      .hv2-annotation-text,
.hv2-annotation[data-annotation="ankit-dwivedi"]      .hv2-annotation-icon {
    color: var(--hv2-color-orange);
}
.hv2-annotation[data-annotation="positioning-clarity"] .hv2-annotation-text,
.hv2-annotation[data-annotation="positioning-clarity"] .hv2-annotation-icon {
    color: var(--hv2-color-green);
}
.hv2-annotation[data-annotation="pipeline"]            .hv2-annotation-text,
.hv2-annotation[data-annotation="pipeline"]            .hv2-annotation-icon {
    color: var(--hv2-color-blue);
}
.hv2-annotation[data-annotation="market-winners"]      .hv2-annotation-text,
.hv2-annotation[data-annotation="market-winners"]      .hv2-annotation-icon {
    color: var(--hv2-color-pink);
}


/* ── Reduced-motion override ────────────────────────────────── */
/*
   When the user prefers reduced motion:
   - All keyword words stay at full brightness simultaneously (no cycling).
   - The JS skips the interval entirely (see hero-v2.js).
   - Annotations are all hidden; no single one is "active" (no cycling to follow).
   - Transitions are removed so there is zero movement.
*/
@media (prefers-reduced-motion: reduce) {
    .hv2-word {
        transition: none;
    }

    /* Show all keywords highlighted at once */
    .hv2-word.hv2-kw[data-kw="ankit-dwivedi"]       { color: var(--hv2-color-orange); }
    .hv2-word.hv2-kw[data-kw="positioning-clarity"]  { color: var(--hv2-color-green);  }
    .hv2-word.hv2-kw[data-kw="pipeline"]             { color: var(--hv2-color-blue);   }
    .hv2-word.hv2-kw[data-kw="market-winners"]       { color: var(--hv2-color-pink);   }

    .hv2-annotation {
        transition: none;
    }

    /* Annotations stay hidden; there is no active cycle to attach to */
    .hv2-annotations {
        display: none;
    }
}


/* ── Responsive: 768px (tablet) ─────────────────────────────── */

@media (max-width: 768px) {
    .hv2-hero {
        padding: 0 1.5rem;
        /* Give room for the in-flow annotation below */
        padding-bottom: 3rem;
    }

    .hv2-headline {
        font-size: clamp(1.75rem, 6vw, 2.75rem); /* ~44px target */
        letter-spacing: -0.03em;
        max-width: 100%;
    }

    .hv2-subtitle {
        margin-top: 1.5rem;
    }

    /*
       On mobile the annotation block moves out of absolute positioning
       and flows in the document below the subtitle. The absolute
       annotations are stacked; JS still switches active class so the
       correct one is visible.
    */
    .hv2-annotations {
        position: relative;
        bottom: auto;
        right: auto;
        width: 100%;
        text-align: left;
        margin-top: 1.5rem;
        pointer-events: none;
    }

    .hv2-annotation {
        justify-content: flex-start;
        text-align: left;
        position: absolute;
        bottom: auto;
        top: 0;
        left: 0;
        right: 0;
    }

    /* Keep active annotation in flow on mobile */
    .hv2-annotation.hv2-annotation-active {
        position: relative;
        top: auto;
    }
}


/* ── Responsive: 480px (small phone) ──────────────────────── */

@media (max-width: 480px) {
    .hv2-headline {
        font-size: clamp(1.5rem, 7.5vw, 2rem); /* ~32px target */
        letter-spacing: -0.025em;
        line-height: 1.22;
    }

    .hv2-subtitle {
        font-size: 0.8125rem;
        margin-top: 1.25rem;
    }

    .hv2-annotation-text {
        font-size: 0.75rem;
    }
}