.eden-hero {
    --eden-hero-accent: #82D4F9;
    --eden-hero-fade: 0.7s;
    position: relative;
    display: flex;
    align-items: stretch;
    overflow: hidden;
    padding: 120px 40px 0;
    background-color: #374157;
    color: #FFFFFF;
}

.eden-hero__inner {
    display: flex;
    align-items: center;
    gap: 40px;
    width: 100%;
    max-width: 1292px;
    margin: 0 auto;
}

.eden-hero__content {
    container-type: inline-size;
    flex: 0 0 48%;
    padding-bottom: 60px;
    display: flex;
    flex-direction: column;
    gap: 22px;
}

.eden-hero__intro,
.eden-hero__description {
    margin: 0;
}

.eden-hero__intro mark {
    background: none;
    color: var(--eden-hero-accent);
}

.eden-hero__description {
    max-width: 92%;
}

/* Scoped under .eden-hero so these beat the kit's ".elementor-kit-6 h1" and ".elementor-kit-6 a" colors.
   Font, size and line height are Headline Typography defaults in the widget. One line for every
   slide (the default size fits the longest headline), so the gaps above and below stay even. */
.eden-hero .eden-hero__headline {
    display: grid;
    margin: 0;
    color: inherit;
    white-space: nowrap;
}

/* Phrases and collage layers each share one grid cell, so the box is sized by the largest item and never jumps.
   They swap instantly while their container is faded out (see Slide animation below). */
.eden-hero__phrase {
    grid-area: 1 / 1;
    opacity: 0;
}

.eden-hero__phrase.is-active {
    opacity: 1;
}

/* Each slide's intro, description and secondary button. Like the phrases, they share one grid cell.
   Hidden ones can't be clicked. The intro only gets --swaps when the slides' intros differ;
   otherwise it stays put through slide changes. */
.eden-hero__intro--swaps,
.eden-hero__description,
.eden-hero__button-swap {
    display: grid;
}

.eden-hero__button-swap {
    justify-items: start;
}

.eden-hero .eden-hero__swap {
    grid-area: 1 / 1;
    visibility: hidden;
    transition: background-color 0.2s ease, color 0.2s ease, border-color 0.2s ease;
}

.eden-hero .eden-hero__swap.is-active {
    visibility: visible;
}

/*
 * Slide animation. On load (.is-intro) and on every slide change (.is-changing) the pieces come
 * in one after another: intro and headline, description, primary button, secondary button, image. Before
 * a change, the text fades out together (.is-leaving) so the next slide's text can swap in unseen.
 */
.eden-hero {
    --eden-hero-step: 0.175s;
    --eden-hero-leave: 0.3s;
}

.eden-hero .eden-hero__intro--swaps,
.eden-hero .eden-hero__headline { --eden-hero-order: 0; }
.eden-hero .eden-hero__description { --eden-hero-order: 1; }
.eden-hero .eden-hero__button--primary { --eden-hero-order: 2; }
.eden-hero .eden-hero__button-swap { --eden-hero-order: 3; }
.eden-hero .eden-hero__media,
.eden-hero .eden-hero__scrapbook { --eden-hero-order: 4; }

@keyframes eden-hero-in {
    from {
        opacity: 0;
        transform: translateY(16px);
    }
}

@keyframes eden-hero-fade-in {
    from {
        opacity: 0;
    }
}

/* "backwards" holds each piece hidden through its delay, then lets go once it has played, so
   the next fade-out (.is-leaving) transitions from the resting state instead of jumping. */
.eden-hero.is-intro :is(.eden-hero__intro--swaps, .eden-hero__headline, .eden-hero__description, .eden-hero__button--primary, .eden-hero__button-swap),
.eden-hero.is-changing :is(.eden-hero__intro--swaps, .eden-hero__headline, .eden-hero__description, .eden-hero__button--primary, .eden-hero__button-swap) {
    animation: eden-hero-in var(--eden-hero-fade) ease backwards;
    animation-delay: calc(var(--eden-hero-order) * var(--eden-hero-step));
}

/* On load the whole collage fades in; on a change only the incoming scrapbook does (the outgoing
   one fades out with the text, below). */
.eden-hero.is-intro .eden-hero__media,
.eden-hero.is-changing .eden-hero__scrapbook.is-active {
    animation: eden-hero-fade-in var(--eden-hero-fade) ease backwards;
    animation-delay: calc(var(--eden-hero-order) * var(--eden-hero-step));
}

.eden-hero.is-leaving :is(.eden-hero__intro--swaps, .eden-hero__headline, .eden-hero__description, .eden-hero__button--primary, .eden-hero__button-swap) {
    opacity: 0;
    transform: translateY(-8px);
    transition: opacity var(--eden-hero-leave) ease, transform var(--eden-hero-leave) ease;
}

.eden-hero.is-leaving .eden-hero__scrapbook.is-active {
    opacity: 0;
    transition: opacity var(--eden-hero-leave) ease;
}

/* Vertical slide navigation */
.eden-hero__nav {
    position: absolute;
    top: 50%;
    left: max(56px, calc((100% - 1292px) / 2 - 10px));
    /* Above the collage's front layer (z-index 3), which overlaps the dots once the hero stacks. */
    z-index: 4;
    display: flex;
    flex-direction: column;
    gap: 18px;
    transform: translateY(-50%);
}

/* Colors are set for every state so the site's button hover/focus styles (black) can't leak in. */
.eden-hero .eden-hero__dot,
.eden-hero .eden-hero__dot:hover,
.eden-hero .eden-hero__dot:focus {
    width: 13px;
    height: 13px;
    padding: 0;
    border: 1px solid #FFFFFF;
    border-radius: 50%;
    background-color: transparent;
    color: #FFFFFF;
    cursor: pointer;
    transition: background-color 0.2s ease, transform 0.2s ease;
}

.eden-hero .eden-hero__dot:hover {
    transform: scale(1.2);
}

.eden-hero .eden-hero__dot:focus {
    outline: none;
}

.eden-hero .eden-hero__dot:focus-visible {
    outline: 2px solid var(--eden-hero-accent);
    outline-offset: 3px;
}

.eden-hero .eden-hero__dot.is-active,
.eden-hero .eden-hero__dot.is-active:hover,
.eden-hero .eden-hero__dot.is-active:focus {
    border-color: transparent;
    background-color: #FFFFFF;
}

.eden-hero__buttons {
    display: flex;
    flex-wrap: wrap;
    gap: 24px;
    padding-top: 16px;
}

/* No buttons filled in: no empty row taking up space. */
.eden-hero__buttons:not(:has(.eden-hero__button)) {
    display: none;
}

.eden-hero .eden-hero__button {
    display: inline-flex;
    align-items: center;
    gap: 14px;
    padding: 14px 30px;
    border: 1px solid var(--eden-hero-accent);
    border-radius: 40px;
    text-decoration: none;
    transition: background-color 0.2s ease, color 0.2s ease, border-color 0.2s ease;
}

.eden-hero .eden-hero__button--solid {
    background-color: var(--eden-hero-accent);
    color: #374157;
}

.eden-hero .eden-hero__button--outline {
    border-color: currentColor;
    color: inherit;
}

.eden-hero .eden-hero__button--solid:hover,
.eden-hero .eden-hero__button--solid:focus-visible {
    border-color: #FFFFFF;
    background-color: #FFFFFF;
    color: #374157;
}

/* The outline buttons stay see-through on hover so the blue outline drawing in over their border
   (ep-draw-border, eden-home.css) is easy to see. */
.eden-hero .eden-hero__button--outline:hover,
.eden-hero .eden-hero__button--outline:focus-visible {
    background-color: transparent;
    color: #FFFFFF;
}

.eden-hero__arrow {
    flex-shrink: 0;
    width: 34px;
    height: 14px;
    transition: transform 0.2s ease;
}

.eden-hero__button:hover .eden-hero__arrow {
    transform: translateX(4px);
}

.eden-hero__media {
    flex: 1 1 52%;
    /* The collage always sits on the bottom edge of the hero. */
    align-self: flex-end;
    display: grid;
    margin-right: -12vw;
    /* The layers share a 1400×1125 canvas whose top 73px is empty: crop it off by sizing the box
       to the rest and pinning the layers to its bottom. (The files stay uncropped so new
       scrapbook images on the same canvas still line up.) */
    aspect-ratio: 1400 / 1052;
    grid-template-rows: minmax(0, 1fr);
    align-items: end;
    overflow: hidden;
}

.eden-hero .eden-hero__layer {
    grid-area: 1 / 1;
    display: block;
    width: 100%;
    max-width: none;
    height: auto;
}

.eden-hero .eden-hero__layer--front {
    z-index: 3;
}

/* The animated accent (butterfly GIF) floats over the front layer. Its position, width and
   rotation are widget settings, as percentages of the collage box. */
.eden-hero__media {
    position: relative;
}

.eden-hero .eden-hero__accent {
    position: absolute;
    z-index: 3;
    max-width: none;
    height: auto;
    /* Separate from transform, which holds the Rotation setting. */
    translate: var(--eden-fly-x) var(--eden-fly-y);
}

/* On load the accent flies in from the right edge of the collage and lands on its spot. The
   sideways glide slows to a stop while the up-and-down flutter eases through each swoop, so
   each axis has its own animation, combined through these two properties. */
@property --eden-fly-x {
    syntax: '<percentage>';
    inherits: false;
    initial-value: 0%;
}

@property --eden-fly-y {
    syntax: '<percentage>';
    inherits: false;
    initial-value: 0%;
}

@keyframes eden-fly-x {
    from {
        /* Its own width × 3.2 clears the collage's right edge from where it lands. */
        --eden-fly-x: 320%;
    }
}

@keyframes eden-fly-y {
    0% { --eden-fly-y: -70%; }
    30% { --eden-fly-y: 10%; }
    60% { --eden-fly-y: -35%; }
    85% { --eden-fly-y: 5%; }
    100% { --eden-fly-y: 0%; }
}

/* Starts once the collage has mostly faded in. */
.eden-hero.is-intro .eden-hero__accent {
    animation: eden-fly-x 2.6s cubic-bezier(0.25, 0.6, 0.3, 1) 1s both, eden-fly-y 2.6s ease-in-out 1s both;
}

/* Only the current slide's scrapbook shows. On a change it fades out with the text, and the
   next one fades in last (see Slide animation above). */
.eden-hero .eden-hero__scrapbook {
    opacity: 0;
}

.eden-hero .eden-hero__scrapbook.is-active {
    opacity: 1;
}

/* Indent the content so it clears the dots with some breathing room. */
@media (min-width: 993px) {
    .eden-hero__inner {
        padding-left: 70px;
    }
}

/* Tablet and down (Elementor's tablet breakpoint): the hero stacks. */
@media (max-width: 992px) {
    .eden-hero__inner {
        flex-direction: column;
        align-items: stretch;
        gap: 0;
    }

    .eden-hero__content {
        flex-basis: auto;
        padding-bottom: 0;
    }

    /* Side padding matches the header. */
    .eden-hero {
        padding-left: 20px;
        padding-right: 20px;
    }

    /* A smaller collage keeps the stacked hero from getting too tall. */
    .eden-hero__media {
        align-self: flex-end;
        width: 70%;
        margin-right: -20px;
    }

    .eden-hero__nav {
        top: auto;
        bottom: 24px;
        left: 50%;
        flex-direction: row;
        transform: translateX(-50%);
    }
}

@media (max-width: 768px) {
    .eden-hero {
        padding: 110px 20px 0;
    }

    .eden-hero__description {
        max-width: none;
    }

    /* On phones the one-line fit gets too small, so the headline takes a fixed size (Headline
       Typography, mobile) and may wrap. Its phrases share one grid cell, so the box keeps the
       height of the tallest one and doesn't jump between slides. */
    .eden-hero .eden-hero__headline {
        white-space: normal;
        text-wrap: balance;
    }

    .eden-hero__media {
        width: 90%;
    }
}

@media (prefers-reduced-motion: reduce) {
    .eden-hero.is-leaving .eden-hero__scrapbook.is-active,
    .eden-hero.is-leaving :is(.eden-hero__intro--swaps, .eden-hero__headline, .eden-hero__description, .eden-hero__button--primary, .eden-hero__button-swap) {
        transition: none;
    }

    .eden-hero.is-intro *,
    .eden-hero.is-changing * {
        animation: none !important;
    }
}