.hero-wrapper {
    min-height: 100vh;
    min-height: 100svh;
    width: 100%;

    position: relative;
    overflow-y: hidden;
    overflow-x: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
    box-sizing: border-box;
}

/* common styles for all blurred ovals */
.blurred-oval {
    position: absolute;
    border-radius: 50% / 100%;
    filter: blur(80px) saturate(0.9);
    opacity: 0.45;

    animation: moveOval 30s linear infinite alternate;
}

@keyframes moveOval {
    0%   { transform: translate(0px, 0px) rotate(36deg) scale(1); }
    25%  { transform: translate(80px, -40px) rotate(50deg) scale(1.03); }
    50%  { transform: translate(0px, -80px) rotate(70deg) scale(0.97); }
    75%  { transform: translate(-80px, -40px) rotate(50deg) scale(1.03); }
    100% { transform: translate(0px, 0px) rotate(36deg) scale(1); }
}

/* Oval 1 */
.oval1 {
    width: 41rem;
    height: 30rem;
    background: #1291aa;
    top: 30%;
    left: 0%;
    rotate:36deg;
    opacity:0.45;
}

/* Oval 2 */
.oval2 {
    width: 11.5rem;
    height: 17rem;
    background: #0A9396;
    top: 30%;
    left: 60%;
    rotate: 20deg;
    opacity:0.45
}

/* Oval 3 */
.oval3 {
    width: 41rem;
    height: 26rem;
    background: #F4A261;
    top: 50%;
    left: 20%;
    rotate: -15deg;
    opacity: 0.45;
}

/* Oval 4 */
.oval4 {
    width: 11.5rem;
    height: 17rem;
    background: #94D2BD;
    top: 70%;
    left: 45%;
    rotate: -40deg;
    opacity: 0.45;
}

/* Parent container for the Hero section, adjusts spacing on smaller screens */
.hero-container {
    z-index: 10;

    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0;

    width: 100dvw;
}

/* Responsive profile picture */
.profile-picture {
    width: 15rem;
    height: 15rem;
    border-radius: 50%;
    object-fit: cover;
    box-shadow: var(--shadow-raised);
    max-width: 100%;

    transform: scale(0);
    opacity: 0;
    filter: blur(12px);

    /* Prevent any pointer interaction on the image itself */
    pointer-events: none;

    /* Prevent long-press menus on iOS / Safari */
    -webkit-touch-callout: none;

    /* Prevent image dragging */
    -webkit-user-drag: none;
    user-drag: none;

    /* Prevent selection */
    user-select: none;
    -webkit-user-select: none;
}

/* Once the shared view-transition-name hands off to the nav logo, fade this
   element out in place so its remainder doesn't linger behind the navbar
   while the hero section is still partly in view. */
html.hero-ready .profile-picture {
    transition: opacity 0.3s ease, transform 0.3s ease;
}

/* Locks the entrance animation's final frame in as a plain style (see
   initNavBar() in script.js, which adds this class before ever suppressing
   the picture for the navbar morph). Without it, toggling
   avatar-morph-suppressed off again would flip the `animation` property from
   none back to scaleIn, which restarts the whole entrance keyframe sequence
   instead of just fading back in from where the morph left it. */
html.hero-ready .profile-picture.entrance-settled {
    animation: none;
    opacity: 1;
    transform: scale(1);
    filter: none;
}

html.hero-ready .profile-picture.avatar-morph-suppressed {
    animation: none;
    opacity: 0;
    transform: scale(0.5);
}

/* Hero Section */
.hero-title {
    opacity: 0;
    transform: translateY(0.75rem);
    filter: blur(12px);

    font-size: clamp(3rem, 8vw, 4.5rem);
    font-weight: 800;
    letter-spacing: -0.02em;
    color: var(--text-color-primary);

    margin: 1.25rem 0.75rem 0;
}

/* Once the shared view-transition-name hands off to the nav logo text, fade
   this out in place — same reasoning as the profile-picture handoff above. */
html.hero-ready .hero-title {
    transition: opacity 0.3s ease, transform 0.3s ease, filter 0.3s ease;
}

/* Same reasoning as .profile-picture.entrance-settled above. */
html.hero-ready .hero-title.entrance-settled {
    animation: none;
    opacity: 1;
    transform: translateY(0);
    filter: none;
}

html.hero-ready .hero-title.name-morph-hidden {
    animation: none;
    opacity: 0;
    transform: translateY(0.5rem);
    filter: blur(8px);
}

/* Thin brand-gradient underline: the only place the gradient survives */
.hero-title::after {
    content: "";
    display: block;
    width: 3.5rem;
    height: 0.25rem;
    margin: 0.875rem auto 0;

    background: var(--hero-gradient);
    border-radius: 9999px;
}

.hero-subtitle-line {
    opacity: 0;
    transform: translateY(0.75rem);
    filter: blur(12px);

    margin: 1.25rem 1rem 0;

    font-size: 1.125rem;
    font-weight: 600;
    color: var(--text-color-secondary);
}

.hero-link-section {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: center;

    gap: 0.75rem;
    margin-top: 2.5rem;
}

@media (max-width: 600px) {
    .hero-link-section {
        flex-direction: column;
        align-items: center;
    }
}

.hero-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    padding: 0.6rem 1.1rem;
    background-color: rgba(22, 35, 59, 0.08);
    border-radius: 9999px;
    text-decoration: none;
    font-weight: 600;
    color: var(--text-color-primary);

    /* Initial hidden state */
    transform: scale(0);
    opacity: 0;

    transition: transform 0.2s ease, background-color 0.2s ease, box-shadow 0.2s ease;
}

.hero-badge:hover {
    transform: scale(1.04);
    background-color: rgba(22, 35, 59, 0.14);
    box-shadow: var(--shadow-soft);
}

/* Primary call to action */
.hero-badge-primary {
    background-color: var(--text-color-accent);
    color: #FFFFFF;
}

.hero-badge-primary:hover {
    background-color: #123C86;
    box-shadow: var(--shadow-soft);
}

.hero-badge-primary .hero-icon {
    color: #FFFFFF;
}

.hero-icon {
    width: 1.4rem;
    height: 1.4rem;
    color: var(--text-color-primary);
}

.hero-text {
    font-size: 0.9rem;
}

/* Scroll cue */
.scroll-cue {
    position: absolute;
    bottom: 1.75rem;
    left: 50%;
    translate: -50% 0;
    z-index: 10;

    display: flex;
    align-items: center;
    justify-content: center;
    width: 2.75rem;
    height: 2.75rem;
    border-radius: 50%;

    background-color: var(--popup-background);
    box-shadow: var(--shadow-soft);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);

    color: var(--text-color-secondary);
    text-decoration: none;

    opacity: 0;
    animation: cueIn 0.6s 1.2s forwards, cueBob 1.8s 2s ease-in-out infinite alternate;
    transition: opacity 0.3s ease;
}

.scroll-cue.hidden {
    opacity: 0 !important;
    pointer-events: none;
    animation: none;
}

.scroll-cue-icon {
    font-size: 1.5rem;
    line-height: 1;
}

@keyframes cueIn {
    to { opacity: 1; }
}

@keyframes cueBob {
    from { transform: translateY(0); }
    to   { transform: translateY(0.375rem); }
}

/* Dark mode */
@media (prefers-color-scheme: dark) {
    .hero-badge {
        background-color: rgba(255, 255, 255, 0.08);
    }
    .hero-badge:hover {
        background-color: rgba(255, 255, 255, 0.15);
    }
    .hero-badge-primary {
        background-color: var(--text-color-accent);
        color: #0D1524;
    }
    .hero-badge-primary:hover {
        background-color: #8CC4FF;
    }
    .hero-badge-primary .hero-icon {
        color: #0D1524;
    }
}

/* Entrance: rise + unblur, no scale bounce */
@keyframes riseIn {
    to {
        opacity: 1;
        transform: translateY(0);
        filter: blur(0);
    }
}

/* Hero entrance animations — only start once JS confirms first paint is ready.
   Whole sequence completes in ~1.2s. */
html.hero-ready .profile-picture {
    animation: scaleIn 0.5s forwards;
    animation-delay: 0s;
}

html.hero-ready .hero-title {
    animation: riseIn 0.5s forwards;
    animation-delay: 0.15s;
}

html.hero-ready .hero-subtitle-line {
    animation: riseIn 0.5s forwards;
    animation-delay: 0.3s;
}

html.hero-ready .hero-badge {
    animation: scaleIn 0.5s forwards;
}

html.hero-ready .hero-badge:nth-child(1) { animation-delay: 0.45s; }
html.hero-ready .hero-badge:nth-child(2) { animation-delay: 0.55s; }
html.hero-ready .hero-badge:nth-child(3) { animation-delay: 0.65s; }