/* =====================================================
   ENKLEANA AESTHETICS — HOMEPAGE
   Hero · Statement · Treatment worlds · Prices · About
===================================================== */


/* =====================================================
   HERO
   Portrait and page share one surface: the tone-matched
   portrait (hero-editorial-v2-*) dissolves through CSS
   masks into a studio-wall backdrop instead of sitting in
   a frame. Type column left, treatment index as footer.
===================================================== */

.page-home {
    /* Portrait geometry (desktop). From 1440px the portrait
       steps in from the right edge for more presence. */
    --portrait-h: 128%;
    --portrait-bottom: -5%;
    --portrait-right: max(
        calc(var(--edge) - 20rem),
        clamp(0px, calc((100vw - 90rem) * 0.16), 6rem)
    );
}

/* Header floats over the composition until the page scrolls */
.page-home .site-header:not(.scrolled) {
    background: transparent;
}

.home-hero {
    position: relative;
    isolation: isolate;
    overflow: hidden;

    height: clamp(40rem, 100svh, 68rem);
    margin-top: calc(var(--header-h) * -1);
    padding-top: var(--header-h);

    display: grid;
    grid-template-columns: minmax(0, 0.54fr) minmax(0, 0.46fr);

    /* Paper on the type side, studio wall behind the portrait,
       both settling back into paper towards the next section.
       The wall tone starts early, so the photo's plant side
       dissolves into a matching tone, not into paper (veil). */
    background:
        linear-gradient(180deg, rgba(251, 249, 245, 0) 84%, var(--c-white) 100%),
        linear-gradient(
            90deg,
            var(--c-white) 0%,
            var(--c-white) 30%,
            var(--c-tone-wall-soft) 44%,
            var(--c-tone-wall) 62%,
            var(--c-tone-wall) 100%
        );
}

.home-hero__content {
    position: relative;
    z-index: 1;

    min-width: 0;
    padding:
        clamp(2.5rem, 7vh, 5rem)
        clamp(2rem, 5vw, 6.5rem)
        clamp(1.75rem, 4vh, 2.75rem)
        var(--edge);

    display: flex;
    flex-direction: column;
    gap: var(--space-l);
}

.home-hero__intro {
    margin-block: auto;
}

.home-hero h1 {
    max-width: 11ch;
    font-size: var(--fs-display);
    line-height: 1;
}

.home-hero__lead {
    max-width: 25rem;
    margin-top: var(--space-m);

    color: #5f524a;

    font-size: var(--fs-lead);
    line-height: 1.6;
}

.home-hero .hero-actions {
    margin-top: var(--space-l);
}

.home-hero__index {
    margin: 0;
    padding: 0;
    list-style: none;

    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    column-gap: var(--grid-gap);
}

.home-hero__index a {
    padding-top: 1rem;

    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 1rem;

    border-top: 1px solid var(--c-line);

    font-size: 0.72rem;
    font-weight: 500;
    letter-spacing: 0.14em;
    text-transform: uppercase;

    transition: border-color 0.4s var(--ease);
}

.home-hero__index a:hover {
    border-top-color: var(--c-text);
}

.home-hero__index .price-tag {
    font-size: 0.9rem;
    letter-spacing: 0.02em;
    text-transform: none;
}

/* ---------- Portrait layer ---------- */

.home-hero__portrait {
    position: absolute;
    inset: 0;
    z-index: 0;

    margin: 0;
    pointer-events: none;
}

.home-hero__portrait picture {
    display: contents;
}

/* Height-driven so the face keeps its place at every width.
   Crops the ceiling, keeps plant, chair and hands. */
.home-hero__portrait img {
    position: absolute;
    right: var(--portrait-right);
    bottom: var(--portrait-bottom);

    width: auto;
    max-width: none;
    height: var(--portrait-h);
    aspect-ratio: 1365 / 2048;
    object-fit: cover;

    /* Short, steep fades — little area at partial opacity, so
       no milky veil: plant side 16% of the width, bottom from
       92% (hands, blazer, chair stay clear), plus two slanted
       cuts for the room corner top left and the dark stems
       bottom left. Intersected, so no edge stays hard. */
    --portrait-mask:
        linear-gradient(
            90deg,
            transparent 0%,
            rgba(0, 0, 0, 0.2) 3%,
            rgba(0, 0, 0, 0.55) 7.5%,
            rgba(0, 0, 0, 0.85) 12%,
            #000 16%,
            #000 95%,
            transparent 100%
        ),
        linear-gradient(
            180deg,
            #000 0%,
            #000 92%,
            rgba(0, 0, 0, 0.5) 94.5%,
            transparent 96%
        ),
        linear-gradient(
            160deg,
            transparent 0%,
            transparent 22%,
            rgba(0, 0, 0, 0.5) 28%,
            #000 34%
        ),
        linear-gradient(
            20deg,
            transparent 0%,
            transparent 4%,
            rgba(0, 0, 0, 0.5) 9%,
            #000 15%
        );

    -webkit-mask-image: var(--portrait-mask);
    -webkit-mask-composite: source-in, source-in, source-in;
    mask-image: var(--portrait-mask);
    mask-composite: intersect;
}


/* =====================================================
   BRAND STATEMENT
===================================================== */

.home-statement__inner {
    max-width: 50rem;
    margin-inline: auto;

    text-align: center;
}

.home-statement .small-line {
    margin-inline: auto;
}

.home-statement h2 {
    max-width: 16ch;
    margin-inline: auto;
}

.home-statement p {
    max-width: 34rem;
    margin: var(--space-m) auto 0;

    color: var(--c-muted);

    font-size: var(--fs-lead);
    line-height: 1.65;
}


/* =====================================================
   TREATMENT WORLDS
   Staggered editorial diptych — dominant / secondary.
   Mirrored treatments: the laser photo bleeds off the left
   edge, the skin photo sits on a cream plane that runs off
   the right edge. Both photos keep crisp edges.
===================================================== */

.home-worlds {
    padding: 0 var(--edge) var(--section);

    display: grid;
    grid-template-columns: repeat(12, minmax(0, 1fr));
    column-gap: var(--grid-gap);
    align-items: start;
}

.home-world--laser {
    grid-column: 1 / span 6;
}

.home-world--skin {
    grid-column: 8 / span 5;
    margin-top: clamp(7rem, 16vw, 17rem);

    position: relative;
    isolation: isolate;
}

.home-world {
    container-type: inline-size;
}

.home-world__media {
    display: block;
    aspect-ratio: var(--ratio-portrait);
}

/* Off the left edge; frame height stays 4:5 of the column,
   so the crop only gains room on the left. */
.home-world--laser .home-world__media {
    margin-left: calc(var(--edge) * -1);

    aspect-ratio: auto;
    height: 125cqw;
}

/* Cream plane behind the skin photo, stopping above its foot */
.home-world--skin::before {
    content: "";

    position: absolute;
    z-index: -1;
    top: clamp(-4.5rem, -5vw, -2rem);
    left: 32cqw;
    right: calc(var(--edge) * -1);

    height: calc(125cqw - clamp(3rem, 7vw, 6.5rem));

    background: var(--c-cream);
}

.home-world--laser .home-world__media img {
    object-position: 50% 62%;
}

.home-world--skin .home-world__media img {
    object-position: 50% 38%;
}

.home-world__body {
    margin-top: var(--space-m);
}

.home-world__meta {
    padding-bottom: 1rem;
    margin-bottom: var(--space-m);

    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;

    border-bottom: 1px solid var(--c-line);
}

.home-world__meta .section-label {
    margin-bottom: 0;
}

.home-world h2 {
    max-width: 13ch;
    font-size: clamp(2.1rem, 1.35rem + 2vw, 3.3rem);
}

.home-world p {
    max-width: 26rem;
    margin-top: 1.1rem;

    color: var(--c-muted);
}

.home-world .text-button {
    margin-top: var(--space-m);
}


/* =====================================================
   PRICE PREVIEW — treatment menu
===================================================== */

.home-prices {
    display: grid;
    grid-template-columns: repeat(12, minmax(0, 1fr));
    column-gap: var(--grid-gap);
    align-items: start;
}

.home-prices__header {
    grid-column: 1 / span 4;
}

.home-prices__header h2 {
    font-size: var(--fs-h2);
}

.home-prices__header p {
    max-width: 19rem;
    margin-top: var(--space-s);

    color: var(--c-muted);
}

.home-prices__header .text-button {
    margin-top: var(--space-m);
}

.home-prices__menus {
    grid-column: 6 / -1;
    padding-top: 0.35rem;

    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    column-gap: calc(var(--grid-gap) * 2);
    row-gap: var(--space-l);
}


/* =====================================================
   ABOUT TEASER
   Portrait leads, name set large, very little copy. The
   studio portrait dissolves into a warm wall-tone glow —
   same room, same light as the hero.
===================================================== */

.home-about {
    display: grid;
    grid-template-columns: repeat(12, minmax(0, 1fr));
    column-gap: var(--grid-gap);
    align-items: center;

    background:
        radial-gradient(
            ellipse 55% 82% at 22% 48%,
            var(--c-tone-wall) 0%,
            var(--c-tone-wall-soft) 48%,
            rgba(251, 249, 245, 0) 82%
        ),
        var(--c-white);
}

/* Bleeds to the left edge; fades towards the copy and
   top/bottom into the glow. */
.home-about__media {
    grid-column: 1 / span 6;
    margin-left: calc(var(--edge) * -1);

    height: clamp(34rem, 60vw, 52rem);

    --zoom: 1.12;
    --focus-y: 55%;

    background: transparent;

    -webkit-mask-image:
        linear-gradient(90deg, #000 0%, #000 62%, rgba(0, 0, 0, 0.55) 81%, transparent 100%),
        linear-gradient(180deg, transparent 0%, #000 11%, #000 83%, transparent 100%);
    -webkit-mask-composite: source-in;
    mask-image:
        linear-gradient(90deg, #000 0%, #000 62%, rgba(0, 0, 0, 0.55) 81%, transparent 100%),
        linear-gradient(180deg, transparent 0%, #000 11%, #000 83%, transparent 100%);
    mask-composite: intersect;
}

.home-about__media img {
    object-position: 50% 74%;
}

.home-about__body {
    grid-column: 8 / span 5;
}

.home-about h2 {
    font-size: var(--fs-display);
    line-height: 0.95;
}

.home-about__lead {
    max-width: 20ch;
    margin-top: var(--space-m);

    font-family: var(--serif);
    font-size: var(--fs-h3);
    line-height: 1.2;
}

.home-about__body > p:not(.home-about__lead) {
    max-width: 26rem;
    margin-top: var(--space-s);

    color: var(--c-muted);
}

.home-about .text-button {
    margin-top: var(--space-m);
}


/* =====================================================
   RESPONSIVE
===================================================== */

@media (max-width: 1050px) {

    .home-prices__header {
        grid-column: 1 / -1;
    }

    .home-prices__menus {
        grid-column: 1 / -1;
        margin-top: var(--space-l);
    }

    .home-about__body {
        grid-column: 8 / -1;
    }
}


/* Small laptops: slide the portrait right so the plant's
   fade never runs under the headline. */
@media (max-width: 1240px) and (min-width: 901px) {

    .page-home {
        --portrait-right: clamp(-9rem, calc((100vw - 77.5rem) * 0.55), 0px);
    }
}


/* Tablet + phone: portrait first, full bleed under the
   header as a landscape crop around the face, dissolving
   downwards into the copy. Kept compact so the booking
   button sits in the first screen. */
@media (max-width: 900px) {

    .home-hero {
        height: auto;
        padding-top: 0;

        grid-template-columns: minmax(0, 1fr);

        background:
            linear-gradient(
                180deg,
                var(--c-tone-wall) 0%,
                var(--c-tone-wall-soft) 34%,
                var(--c-white) 52%
            );
    }

    .home-hero__portrait {
        position: relative;
        inset: auto;
        order: -1;

        height: clamp(28rem, 62svh, 40rem);
    }

    .home-hero__portrait img {
        left: 0;
        bottom: 0;

        width: 100%;
        height: 100%;
        object-position: 50% 44%;

        /* Second layer keeps the stray leaf top left out from
           behind the logo. */
        --portrait-mask:
            linear-gradient(
                180deg,
                #000 0%,
                #000 76%,
                rgba(0, 0, 0, 0.5) 88%,
                transparent 97%
            ),
            linear-gradient(
                160deg,
                transparent 0%,
                transparent 8%,
                #000 22%
            );
    }

    .home-hero__content {
        margin-top: -1.5rem;
        padding: 0 var(--edge) var(--space-m);
        gap: var(--space-l);
    }

    .home-hero__lead {
        margin-top: 1.1rem;
    }

    .home-hero .hero-actions {
        margin-top: var(--space-m);
    }

    .home-about__media {
        grid-column: 1 / span 7;
    }
}


/* Phone: shorter crop — face, hair and blazer stay, the
   chair dissolves — so "Termin buchen" is visible without
   scrolling. */
@media (max-width: 560px) {

    .home-hero__portrait {
        height: clamp(22rem, 52svh, 28rem);
    }

    .home-hero__portrait img {
        object-position: 50% 49%;

        --portrait-mask:
            linear-gradient(
                180deg,
                #000 0%,
                #000 76%,
                rgba(0, 0, 0, 0.5) 88%,
                transparent 97%
            ),
            linear-gradient(
                160deg,
                transparent 0%,
                transparent 13%,
                #000 27%
            );
    }

    .home-hero__content {
        margin-top: -1rem;
    }
}


/* Phone landscape: little height, so the crop centres on
   the face and the copy follows directly. */
@media (max-width: 900px) and (max-height: 540px) and (orientation: landscape) {

    .home-hero__portrait {
        height: 86svh;
    }

    .home-hero__portrait img {
        object-position: 50% 53%;

        /* Wide, shallow box: the corner cut reaches further so
           the leaves clear the logo. */
        --portrait-mask:
            linear-gradient(
                180deg,
                #000 0%,
                #000 76%,
                rgba(0, 0, 0, 0.5) 88%,
                transparent 97%
            ),
            linear-gradient(
                160deg,
                transparent 0%,
                transparent 20%,
                #000 36%
            );
    }
}


@media (max-width: 760px) {

    .home-hero__index {
        grid-template-columns: 1fr;
    }

    .home-hero__index li + li a {
        border-top-color: var(--c-line);
    }

    .home-hero__index a {
        padding-block: 0.9rem;
    }

    .home-hero__index li:last-child a {
        border-bottom: 1px solid var(--c-line);
    }

    .home-statement__inner {
        text-align: left;
    }

    .home-statement .small-line,
    .home-statement h2,
    .home-statement p {
        margin-inline: 0;
    }

    .home-worlds {
        row-gap: var(--space-xl);
    }

    .home-world--laser,
    .home-world--skin {
        grid-column: 1 / -1;
        margin-top: 0;
    }

    /* Already full bleed on phones: keep the original 4:5 */
    .home-world--laser .home-world__media {
        margin-inline: calc(var(--edge) * -1);

        aspect-ratio: var(--ratio-portrait);
        height: auto;
    }

    .home-world--skin .home-world__media {
        width: 86%;
        margin-left: auto;
    }

    /* Photo is 86% wide on the right here, so the plane moves
       to the left and peeks out below it. */
    .home-world--skin::before {
        top: 2rem;
        left: calc(var(--edge) * -1);
        right: 30cqw;

        height: 107.5cqw;
    }

    .home-prices__menus {
        grid-template-columns: 1fr;
    }

    .home-about {
        background:
            radial-gradient(
                ellipse 90% 42% at 50% 30%,
                var(--c-tone-wall) 0%,
                var(--c-tone-wall-soft) 48%,
                rgba(251, 249, 245, 0) 85%
            ),
            var(--c-white);
    }

    .home-about__media {
        grid-column: 1 / -1;
        margin-inline: calc(var(--edge) * -1);

        aspect-ratio: var(--ratio-portrait);
        height: auto;

        -webkit-mask-image:
            linear-gradient(180deg, transparent 0%, #000 9%, #000 78%, transparent 100%);
        mask-image:
            linear-gradient(180deg, transparent 0%, #000 9%, #000 78%, transparent 100%);
    }

    .home-about__body {
        grid-column: 1 / -1;
        margin-top: var(--space-l);
    }

    .home-about h2 {
        font-size: var(--fs-h1);
    }
}