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

    position: relative;

    overflow: hidden;

    background:
        linear-gradient(
            rgba(248,244,241,0.94),
            rgba(248,244,241,0.94)
        ),
        url('../../images/hero/hero_background_main.png');

    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
}

.hero-section::before {
    content: '';
    position: absolute;
    inset: 0;
    z-index: 1;
    pointer-events: none;
    opacity: .95;
    background-image:
        radial-gradient(circle, rgba(199, 119, 112, .38) 0 2.2px, transparent 2.8px),
        radial-gradient(circle, rgba(255, 255, 255, .94) 0 2px, transparent 2.7px),
        radial-gradient(circle, rgba(181, 132, 104, .26) 0 1.8px, transparent 2.4px),
        radial-gradient(circle, rgba(199, 119, 112, .18) 0 3.8px, transparent 4.7px);
    background-size:
        124px 124px,
        188px 188px,
        86px 86px,
        260px 260px;
    background-position:
        0 0,
        42px 78px,
        90px 26px,
        118px 140px;
    animation:
        heroParticlesDrift 18s linear infinite,
        heroParticlesGlow 4.8s ease-in-out infinite;
}

.hero-background-shape {
    position: absolute;

    z-index: 1;

    top: -240px;
    left: -180px;

    width: 720px;
    height: 720px;

    border-radius: 50%;

    background:
        radial-gradient(
            circle,
            rgba(199,119,112,0.12) 0%,
            rgba(199,119,112,0.00) 72%
        );
}

.hero-content {
    width: 50vw;
    max-width: 50vw;
    min-height: 100vh;

    display: flex;
    align-items: center;
    justify-content: center;

    padding-top: 88px;
    padding-bottom: 34px;
    padding-left: 0;
    padding-right: 0;

    position: relative;
    z-index: 2;
    margin: 0;
}

.hero-wrapper {
    width: 100%;
    min-height: calc(100vh - 122px);

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

    gap: 0;

    align-items: center;
}

.hero-left {
    width: min(540px, calc(100% - clamp(52px, 8vw, 140px)));
    max-width: 100%;
    justify-self: center;
    text-align: center;
}

.hero-logo {
    width: 460px;
    max-width: 100%;

    margin-left: auto;
    margin-right: auto;
    margin-bottom: 40px;

    animation: heroFadeUp .75s ease .08s both;
}

.hero-description {
    max-width: 500px;

    font-size: 16px;
    line-height: 2;

    color: #6f6f6f;

    margin-left: auto;
    margin-right: auto;
    margin-bottom: 45px;

    animation: heroFadeUp .75s ease .18s both;
}

.hero-buttons {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 20px;

    animation: heroFadeUp .75s ease .28s both;
}

.hero-image-wrapper {
    position: absolute;

    display: flex;
    align-self: stretch;
    align-items: stretch;
    justify-content: stretch;
    top: 88px;
    right: 0;
    bottom: 25px;
    width: 50vw;
    min-height: 0;
    z-index: 1;

    animation: heroImageReveal .9s cubic-bezier(.2, .86, .2, 1) .22s both;
}

.hero-image-shape {
    display: none;
}

.hero-image-card {
    width: 100%;
    height: 100%;

    border-radius: 0;

    overflow: hidden;

    position: relative;
    z-index: 2;

    box-shadow:
        -24px 0 70px rgba(0,0,0,0.06);

    animation: none;
}

.hero-image-card::after {
    content: '';
    position: absolute;
    inset: 0;
    background:
        linear-gradient(
            120deg,
            transparent 0%,
            rgba(255, 255, 255, .24) 38%,
            transparent 58%
        );
    transform: translateX(-120%);
    animation: heroImageSheen 5.8s ease-in-out infinite;
    pointer-events: none;
}

.hero-image-card img {
    width: 100%;
    height: 100%;

    object-fit: cover;
}

.hero-line {
    width: 220px;
    height: 1px;

    background: rgba(0,0,0,0.08);

    margin: 55px auto 0;

    transform-origin: left center;
    animation: heroLineGrow .8s ease .38s both;
}

.hero-marquee {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 3;
    overflow: hidden;
    border-top: 1px solid rgba(199, 119, 112, .16);
    background:
        linear-gradient(90deg, rgba(255, 247, 246, .92), rgba(247, 218, 217, .88), rgba(255, 247, 246, .92));
    box-shadow: 0 -16px 40px rgba(96, 62, 54, .05);
}

.hero-marquee-track {
    display: flex;
    width: max-content;
    animation: heroMarqueeSlide 20s linear infinite;
    will-change: transform;
}

.hero-marquee-group {
    display: flex;
    align-items: center;
    gap: 34px;
    flex: 0 0 auto;
    padding: 11px 34px 11px 0;
}

.hero-marquee-group span {
    position: relative;
    color: #984f64;
    font-family: var(--font-display);
    font-size: 15px;
    font-weight: 500;
    letter-spacing: .08em;
    white-space: nowrap;
}

.hero-marquee-group span::before {
    content: '';
    width: 5px;
    height: 5px;
    position: absolute;
    top: 50%;
    left: -20px;
    border-radius: 50%;
    background: rgba(199, 119, 112, .75);
    transform: translateY(-50%);
}

@keyframes heroFadeUp {
    from {
        opacity: 0;
        transform: translateY(18px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes heroImageReveal {
    from {
        opacity: 0;
        transform: translateY(22px) scale(.985);
    }

    to {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}

@keyframes heroFloat {
    0%,
    100% {
        transform: translateY(0);
    }

    50% {
        transform: translateY(-10px);
    }
}

@keyframes heroAuraPulse {
    0%,
    100% {
        opacity: .72;
        transform: translate(-50%, -50%) scale(1);
    }

    50% {
        opacity: .95;
        transform: translate(-50%, -50%) scale(1.06);
    }
}

@keyframes heroImageSheen {
    0%,
    42% {
        transform: translateX(-120%);
        opacity: 0;
    }

    55% {
        opacity: 1;
    }

    72%,
    100% {
        transform: translateX(120%);
        opacity: 0;
    }
}

@keyframes heroLineGrow {
    from {
        opacity: 0;
        transform: scaleX(0);
    }

    to {
        opacity: 1;
        transform: scaleX(1);
    }
}

@keyframes heroMarqueeSlide {
    from {
        transform: translateX(-50%);
    }

    to {
        transform: translateX(0);
    }
}

@keyframes heroParticlesDrift {
    from {
        transform: translate3d(0, 0, 0);
        background-position:
            0 0,
            42px 78px,
            90px 26px;
    }

    to {
        transform: translate3d(-18px, -28px, 0);
        background-position:
            124px 124px,
            230px 266px,
            176px 112px,
            378px 400px;
    }
}

@keyframes heroParticlesGlow {
    0%,
    100% {
        filter: blur(0);
        opacity: .72;
    }

    50% {
        filter: blur(.2px);
        opacity: 1;
    }
}

@media (prefers-reduced-motion: reduce) {
    .hero-logo,
    .hero-description,
    .hero-buttons,
    .hero-image-wrapper,
    .hero-image-shape,
    .hero-image-card,
    .hero-image-card::after,
    .hero-line,
    .hero-section::before {
        animation: none;
    }

    .hero-marquee-track {
        animation: none;
        transform: none;
    }
}

.hero-background-image {
    position: absolute;

    inset: 0;

    z-index: 0;

    overflow: hidden;
}

.hero-background-image {
    position: absolute;

    inset: 0;

    z-index: 0;

    overflow: hidden;
}

.hero-background-image img {
    width: 100%;
    height: 100%;

    object-fit: cover;

    opacity: 1;

    filter: blur(1px);

    transform: scale(1.05);
}

.hero-background-image::after {
    content: '';

    position: absolute;

    inset: 0;

    background: rgba(248,244,241,0.92);
}

@media (max-width: 760px) {
    .hero-marquee-group {
        gap: 28px;
        padding-top: 10px;
        padding-bottom: 10px;
    }

    .hero-marquee-group span {
        font-size: 13px;
        letter-spacing: .07em;
    }

    .hero-marquee-group span::before {
        left: -17px;
    }
}