html { overflow-x: clip; }

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    background-color: #000;
    font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
    overflow-x: clip; /* clip (not hidden) so nothing can scroll sideways and sticky still works */
}

/* Spacer allows scroll to happen while hero is sticky */
.hero-spacer {
    height: 250vh;
}

.hero {
    position: sticky;
    top: 0;
    width: 100%;
    height: 100vh;
    background-color: #fff;
    overflow: hidden;
    display: flex;
    justify-content: center;
    align-items: center;
}

.hero-bg {
    position: absolute;
    left: 0;
    right: 0;
    top: -30%;     /* taller than the hero: the whole torn edge is in the image, its top just sits above the fold */
    height: 130%;
    z-index: 0;
}

.hero-bg img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center top; /* never crop the top: the torn edge stays whole while the paper rises */
    display: block;
}

.gift {
    position: absolute;
    z-index: 5;
    pointer-events: none;
}

.gift-top-right {
    top: -2vw;
    right: -3vw;
    width: clamp(120px, 11vw, 220px);
}

.gift-bottom-left {
    bottom: -6vw;
    left: -3vw;
    width: clamp(220px, 22vw, 420px);
    filter: blur(12px);
}

.hero-text-wrapper {
    position: relative; /* no z-index: lets the tagline sit above the photo while the title stays behind it */
    display: inline-flex;
    flex-direction: column;
    align-items: center;
    pointer-events: none;
    margin-top: -5vh;
}

.header-texts {
    display: flex;
    justify-content: space-between;
    width: 100%;
    margin-bottom: 4px;
    padding: 0 1.5%;
    z-index: 10;
    position: relative;
}

.name-text, .year-text {
    color: #fff;
    font-size: clamp(14px, 2.5vw, 36px);
    font-weight: 500;
    letter-spacing: -0.05em;
    text-transform: uppercase;
}

.main-title {
    position: relative;
    z-index: 10;
    color: #fff;
    font-family: 'Bebas Neue', sans-serif;
    font-weight: 400;
    font-size: clamp(64px, 14.2vw, 240px);
    line-height: 0.82;
    letter-spacing: -8px;
    text-transform: uppercase;
    white-space: nowrap;
    margin: 0;
}

.hero-tagline {
    position: relative;
    z-index: 10; /* same layer as the title: behind the photo */
    margin-top: 0.9vw;
    color: #fff;
    font-size: clamp(13px, 1.9vw, 30px);
    font-weight: 500;                /* same weight as "MÍDIA KIT" */
    letter-spacing: -0.05em;
    text-transform: uppercase;
    white-space: nowrap;
}

.gaby-hero {
    position: absolute;
    bottom: 0;
    left: 50%;
    height: 85vh;
    width: auto;
    object-fit: contain;
    z-index: 20;
    pointer-events: none;
}

/* Section 2 */
.section-2 {
    position: relative;
    z-index: 30; /* Higher than hero */
    background-color: #fff;
    min-height: 100vh;
    width: 100%;
    display: flex;
    overflow: visible; /* gift overlaps section 3 */
}

.sec2-image-container {
    flex: 0 0 44.5%;
    position: relative;
    overflow: hidden;
}

.sec2-image {
    width: 100%;
    height: 100%;
    object-fit: contain;           /* transparent cut-out, keep it whole */
    object-position: center bottom;
    padding-top: 6vh;
    display: block;
}

.sec2-text {
    position: relative;
    z-index: 6; /* text stays above the gift */
    flex: 1;
    color: #000;
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: 6vw 4vw 6vw 4.5vw;
}

.sec2-text h2 {
    font-size: clamp(40px, 6vw, 96px);
    font-weight: 500;
    line-height: 1;
    letter-spacing: -0.06em;
    text-transform: uppercase;
    margin-bottom: 2vw;
}

.sec2-cols {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 2vw;
}

.sec2-text p {
    font-size: clamp(13px, 1.25vw, 22px);
    line-height: 1.4;
    color: #000;
    letter-spacing: -0.02em;
}

/* biography: a single, larger column */
.sec2-cols.one-col {
    grid-template-columns: 1fr;
    gap: 1.2em;
    max-width: 44em;
}
.sec2-cols.one-col p {
    font-size: clamp(16px, 1.5vw, 26px);
    line-height: 1.45;
}
.bio-block h3 {
    font-size: clamp(18px, 1.75vw, 30px);
    font-weight: 700;
    letter-spacing: -0.02em;
    color: #e02a2a;
    margin-bottom: 0.3em;
}

.gift2 {
    position: absolute;
    z-index: 5;
    pointer-events: none;
}

.gift2-bottom-right {
    bottom: -9vw;
    right: -6vw;
    width: clamp(200px, 19vw, 380px);
    filter: blur(6px);
}

/* reveal helpers */
.word, .char {
    display: inline-block;
    will-change: transform, opacity, filter;
}

/* Responsive */
@media (max-width: 900px) {
    .section-2 {
        flex-direction: column;
    }
    .sec2-image-container {
        flex: none;
        height: 70vh;
    }
    .sec2-text {
        padding: 40px 24px 80px;
    }
    .sec2-cols {
        grid-template-columns: 1fr;
        gap: 16px;
    }
    .sec2-text p {
        font-size: 14px;
    }
    .header-texts {
        margin-bottom: -3vw;
    }
}

/* Initial hidden state of the hero intro, so nothing flashes before the JS animation starts */
.hero-bg, .gaby-hero { visibility: hidden; } /* revealed by script.js once GSAP has positioned them */
.name-text, .year-text, .main-title, .hero-tagline, .gift-top-right, .gift-bottom-left { opacity: 0; }

/* Mobile browsers: use the visible viewport height so the hero isn't hidden under the address bar */
@supports (height: 100svh) {
    .hero { height: 100svh; }
}