/* Hero — #forside. Values transcribed from the designer's export CSS
   (Content/web: #forside section rules), including the lotus-masked photo
   carousel and the shimmer that sweeps the H1 (both from the export's
   inline <style>).
   The hero's own padding-top clears the fixed header, so it replaces the
   generic `main { padding-top }` offset from header.css. The body class is
   set server-side in layout.php (the page type is already known there) —
   `body:has(.hero)` would work too, but :has() only reached Firefox 121,
   and an unsupported browser would render a 100px gap above the hero. */

.page-landing main {
    padding-top: 0;
}

.hero {
    position: relative;
    display: flex;
    align-items: center;
    min-height: 480px;
    padding-top: var(--section-pad);
    padding-bottom: var(--section-pad-sm);
    background-color: var(--neutral-200);
    overflow: hidden;
}

/* The texture lives on its own layer so 3.4's parallax can move it with
   transform only (the motion rules forbid animating background-position).
   Oversized top and bottom so the drift never exposes an edge. */
.hero::before {
    content: '';
    position: absolute;
    inset: -6% 0;
    pointer-events: none;
    background-image: var(--hero-bg-url);
    background-repeat: no-repeat;
    background-position: 50% 50%;
    background-size: auto;
    transform: translate3d(0, var(--parallax-y, 0px), 0);
}

.hero__container {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-32);
    width: 100%;
    max-width: var(--page-max);
    margin-inline: auto;
    padding-inline: var(--space-24);
}

.hero__content {
    display: flex;
    flex-direction: column;
    gap: var(--space-32);
    max-width: 640px;
}

.hero__title {
    margin: 0;
    color: var(--primary);
    font-size: var(--text-h1);
    line-height: 1.35;
}

/* Shimmer sweep across the headline (export: .shine-text). The gradient is
   clipped to the glyphs and its position animates — no layout work, and the
   text stays selectable. `color` is the fallback if background-clip:text is
   unsupported, so the headline can never render invisible. */
.hero__shine {
    color: var(--primary);
}

@supports ((-webkit-background-clip: text) or (background-clip: text)) {
    .hero__shine {
        background-image: linear-gradient(
            -45deg,
            var(--primary) 0%,
            var(--primary) 40%,
            var(--grey) 50%,
            var(--primary) 52%,
            var(--primary) 100%
        );
        background-size: 300% 100%;
        background-repeat: no-repeat;
        -webkit-background-clip: text;
        background-clip: text;
        -webkit-text-fill-color: transparent;
        color: transparent;
        animation: hero-shine 10s linear infinite;
    }
}

@keyframes hero-shine {
    from { background-position: 0% 0%; }
    to { background-position: 100% 0%; }
}

/* Lotus-masked photo carousel (export: .lotus-mask + .image-container). */
.hero__visual {
    display: none;
}

.hero__lotus {
    position: relative;
    width: min(528px, 40vw);
    aspect-ratio: 1;
    -webkit-mask-image: var(--lotus-mask-url);
    mask-image: var(--lotus-mask-url);
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    -webkit-mask-size: contain;
    mask-size: contain;
}

.hero__photo {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    opacity: 0;
    transition: opacity var(--motion-reveal) var(--ease-out);
}

.hero__photo.is-active {
    opacity: 1;
}

@media (min-width: 992px) {
    .hero__visual {
        display: block;
        flex-shrink: 0;
    }
}

/* Reduced motion: the headline holds still and the carousel shows one
   photo (js/hero.js also stops advancing). */
@media (prefers-reduced-motion: reduce) {
    .hero__shine {
        animation: none;
    }

    .hero__photo {
        transition: none;
    }
}

.hero__sub {
    margin: 0;
    color: var(--secondary);
    font-size: var(--text-lead);
    line-height: 32px;
}

.hero__cta {
    display: flex;
    flex-direction: column;
    gap: var(--space-24);
    margin-top: var(--space-16);
}

.hero__cta .btn {
    width: 100%;
}

@media (min-width: 992px) {
    .hero__cta {
        flex-direction: row;
        gap: var(--space-32);
    }

    .hero__cta .btn {
        width: auto;
        padding-inline: var(--space-32);
    }
}