.hero {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 3rem;
    padding: 8rem 3rem 4rem;
    max-width: 1200px;
    margin: 0 auto;
    text-align: left;
}

.hero-text {
    max-width: 600px;
}

.hero-badge {
    display: inline-block;
    background: rgba(192, 132, 252, 0.12);
    border: 1px solid rgba(192, 132, 252, 0.3);
    color: var(--color-light-purple);
    padding: 0.4rem 1rem;
    border-radius: 999px;
    font-size: 0.9rem;
    margin-bottom: 1.5rem;
}

.hero-heading {
    font-size: 2.5rem;
    font-weight: 800;
    margin: 0 0 0.5rem;
}

.hero-name {
    background: linear-gradient(90deg, var(--color-purple), var(--color-turquoise));
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
}

.hero-role {
    font-size: 1.5rem;
    font-weight: 600;
    color: var(--color-text);
    margin: 0 0 1.5rem;
    min-height: 2rem;
}

.hero-role #typed-role {
    color: var(--color-turquoise);
}

.hero-role .cursor {
    display: inline-block;
    width: 2px;
    height: 1.2rem;
    background-color: var(--color-turquoise);
    margin-left: 2px;
    vertical-align: middle;
    animation: blink 1s step-end infinite;
}

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

/* A short, high-contrast opening line carries the positioning on its own,
   so the paragraph beneath it becomes optional detail rather than something
   the reader has to get through. Two sizes also stop the block reading as
   one undifferentiated slab of text. */
.hero-lead {
    font-size: 1.15rem;
    line-height: 1.5;
    color: var(--color-text);
    margin: 0 0 0.85rem;
}

.hero-lead em {
    font-style: normal;
    color: var(--color-turquoise);
}

.hero-bio {
    color: rgba(229, 225, 240, 0.78);
    font-size: 0.98rem;
    line-height: 1.7;
    margin: 0 0 1.1rem;
    /* ~65 characters per line is the readable range; without a cap the text
       stretches the full 600px of .hero-text and gets harder to scan. */
    max-width: 52ch;
}

/* The origin story, marked out by an accent rule rather than by more text.
   Reads as an aside to the paragraphs above - interesting, but deliberately
   not the headline. */
.hero-note {
    margin: 0;
    padding-left: 0.9rem;
    border-left: 2px solid rgba(45, 212, 191, 0.5);
    color: rgba(229, 225, 240, 0.62);
    font-size: 0.88rem;
    line-height: 1.6;
    max-width: 48ch;
}

/* --- Photo + soft-skill orbit --- */

.hero-photo {
    flex-shrink: 0;
}

.photo-orbit {
    position: relative;
    width: 480px;
    height: 480px;
}

/* A static dashed ring that traces the SAME radius the chips actually
   orbit along (44%, matching .orbit-spoke's width and the trig radius
   in Home.razor) - it doesn't rotate itself, just marks the track.
   Using a % inset instead of a fixed px value means this scales
   automatically with .photo-orbit at any screen size, instead of
   needing separate numbers per breakpoint. */
.orbit-guide-ring {
    position: absolute;
    inset: 6%;
    border-radius: 50%;
    border: 1px dashed rgba(192, 132, 252, 0.25);
}

.photo-circle {
    position: absolute;
    /* Kept well clear of the 44% orbit radius, so even a chip's full
       label width (which extends sideways from its anchor point, not
       just outward) never swings back over the photo as it travels. */
    inset: 29%;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--color-purple), var(--color-turquoise));
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 2rem;
    font-weight: 800;
    color: #fff;
    overflow: hidden;
    /* A soft glowing ring right around the photo edge itself. */
    box-shadow: 0 0 0 2px rgba(192, 132, 252, 0.4), 0 0 24px rgba(45, 212, 191, 0.25);
}

/* One thin line per chip, drawn from the very center out toward that
   chip's position. It lives inside .orbit-ring alongside the chips, so
   it inherits the same rotation and travels around together with its
   chip - they never drift apart from each other. */
.orbit-spoke {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 44%;
    height: 1px;
    /*background: linear-gradient(to right, rgba(192, 132, 252, 0.5), rgba(192, 132, 252, 0));*/
    transform-origin: 0% 50%;
}

.photo-image {
    width: 100%;
    height: 100%;
    /* object-fit: cover crops the image to fill the circle without
       stretching/distorting it, regardless of the original photo's
       aspect ratio - same idea as a CSS "background-size: cover". */
    object-fit: cover;
}

/* The ring rotates as a whole, carrying every chip around the circle
   with it - this is what creates the "going around" motion. */
.orbit-ring {
    position: absolute;
    inset: 0;
    animation: orbit-spin 45s linear infinite;
}

@keyframes orbit-spin {
    from { transform: rotate(0deg); }
    to { transform: rotate(360deg); }
}

/* Purely a positioning wrapper - sits at its spot on the circle and
   gets carried around by the parent ring's rotation. No visual styling
   of its own, so it doesn't fight with the label's counter-rotation. */
.orbit-chip {
    position: absolute;
    transform: translate(-50%, -50%);
}

/* This is the part that actually looks like a chip, AND it spins in
   the opposite direction at the exact same speed as the ring. The two
   rotations cancel out visually, so the chip travels around the circle
   while its own text always stays upright and readable - never upside
   down or sideways. */
.orbit-chip-label {
    display: inline-block;
    background: rgba(229, 225, 240, 0.08);
    border: 1px solid rgba(192, 132, 252, 0.3);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    padding: 0.3rem 0.65rem;
    border-radius: 999px;
    font-size: 0.68rem;
    white-space: nowrap;
    color: var(--color-text);
    animation: orbit-spin-reverse 45s linear infinite;
}

@keyframes orbit-spin-reverse {
    from { transform: rotate(0deg); }
    to { transform: rotate(-360deg); }
}

/* Motion accessibility: some people get migraine, nausea or vestibular
   symptoms from continuous movement, and set a system-level preference to
   reduce it. Honouring it means stopping the orbit and the blinking cursor
   entirely - the chips stay exactly where they are, still readable, just
   still. Nothing is lost except the movement. */
@media (prefers-reduced-motion: reduce) {
    .orbit-ring,
    .orbit-chip-label,
    .hero-role .cursor {
        animation: none;
    }

    /* With the ring frozen, the cursor would sit permanently invisible on
       whichever half of the blink cycle it stopped in - so pin it visible. */
    .hero-role .cursor {
        opacity: 1;
    }
}

@media (max-width: 900px) {
    .hero {
        flex-direction: column;
        text-align: center;
        padding: 7rem 1.5rem 3rem;
    }

    .hero-text {
        max-width: 100%;
    }
}

@media (max-width: 600px) {
    .hero-heading {
        font-size: 2rem;
    }

    .hero-role {
        font-size: 1.15rem;
    }

    .photo-orbit {
        width: 300px;
        height: 300px;
    }
}

@media (max-width: 400px) {
    .photo-orbit {
        width: 230px;
        height: 230px;
    }
}


.hero, .cv-section, .projects-section, .contact-section {
    scroll-margin-top: 100px;
}