/* Section: interlude. */

/* One screen, top to bottom: the nav pill clears the head of it, the cat sits
   on the foot, and the spark and copy centre together in what is left. Every
   inner size is budgeted against svh, so a short screen takes the room out of
   the decoration instead of pushing the copy off the bottom. */
.services-overwhelmed {
    /* The nav pill floats over every section, so the top has to clear it. It is
       88px of fixed header wherever it is read, hence the floor. */
    --interlude-nav: clamp(5.5rem, 12svh, 6.75rem);
    --interlude-spark: clamp(3.5rem, 14svh, 8rem);
    /* The cat is 210 × 254 as drawn; this is the height it is given. */
    --interlude-cat: clamp(7rem, 26svh, 15.875rem);
    --interlude-gap: clamp(1rem, 6.6svh, 3.75rem);
    --interlude-pattern: min(522px, 46vw, 58svh);

    position: relative;
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    align-content: center;
    row-gap: var(--interlude-gap);
    overflow: hidden;

    /* The box tracks dvh so a retracting mobile URL bar can't leave a strip of
       the section below showing underneath; the contents stay on svh, so they
       are sized for the shortest state the viewport ever takes. */
    height: 100vh;
    height: 100dvh;

    padding:
        calc(var(--interlude-nav) + var(--interlude-gap)) 0
        calc(var(--interlude-cat) + var(--interlude-gap));
    background: var(--color-primary);
    color: var(--color-white);
    text-align: center;
    isolation: isolate;
}

.services-overwhelmed .container {
    position: relative;
    z-index: 1;
    width: 100%;
}

.services-overwhelmed__pattern {
    position: absolute;
    left: 50%;
    /* Hangs the same quarter of itself over the top edge at any size. */
    top: calc(var(--interlude-pattern) * -0.26);
    z-index: -1;
    width: var(--interlude-pattern);
    height: var(--interlude-pattern);
    opacity: 0.38;
    pointer-events: none;
    background: url("../../../../../uploads/meowgical/images/shared/grid-brand-light.avif") center / contain no-repeat;
    /* Sized to the box rather than to 522px, so the mask still lines up with
       the artwork once svh has shrunk both. */
    mask: url("../../../../../uploads/meowgical/images/services/overwhelmed-pattern-mask.svg") center / contain no-repeat;
    -webkit-mask: url("../../../../../uploads/meowgical/images/services/overwhelmed-pattern-mask.svg") center / contain no-repeat;
    transform: translateX(-50%) rotate(180deg);
}

/* In flow above the copy: the spark and the copy are one block, so they centre
   together and the gap between them never has to be guessed at. */
.services-overwhelmed__spark {
    justify-self: center;
    width: var(--interlude-spark);
    height: var(--interlude-spark);
    background: url("../../../../../uploads/meowgical/images/shared/spark.svg") center / contain no-repeat;
}

/* The star arriving from the capability matrix lands on this box; see
   .spark-flight in _section-capability_matrix.css. */
.services-overwhelmed__spark.is-spark-flight {
    visibility: hidden;
}

.services-overwhelmed__twinkle {
    display: none;
}

.services-overwhelmed__content {
    position: relative;
    z-index: 1;
    width: min(100%, 720px);
    margin: 0 auto;
}

.services-overwhelmed.is-grid-migrated > .container.grid > .services-overwhelmed__content {
    grid-column: 3 / 11;
    width: 100%;
    min-width: 0;
}

.services-overwhelmed__title {
    display: grid;
    gap: clamp(0.25rem, 0.9svh, 0.5rem);
    margin: 0;
    color: var(--color-white);
    font-family: var(--font-display);
    font-weight: var(--fw-bold);
    letter-spacing: 0;
}

/* The vw term keeps the type in ratio with the content column; the svh term
   only ever takes it further down, so a short screen hands room back to the
   layout instead of overrunning it. */
.services-overwhelmed__title em {
    font-size: min(clamp(4rem, 5.55vw, var(--text-display)), max(2rem, 9svh));
    font-style: italic;
    line-height: var(--lh-display);
}

.services-overwhelmed__title span {
    font-size: min(clamp(2.75rem, 3.88vw, var(--text-title3)), max(1.25rem, 5svh));
    line-height: var(--lh-title3);
}

.services-overwhelmed__copy {
    width: min(100%, 720px);
    margin: clamp(0.75rem, 3.3svh, 1.875rem) auto 0;
    color: var(--color-white);
    font-family: var(--font-body);
    font-size: min(clamp(1.125rem, 1.66vw, 1.5rem), max(0.875rem, 2.8svh));
    font-weight: var(--fw-regular);
    line-height: 1.3334;
    letter-spacing: -0.03125em;
}

/* Sized by height: the foot of the budget above is the room it has, and the
   width follows so the drawing keeps its proportions. */
.services-overwhelmed__cat-scroll {
    position: absolute;
    left: 50%;
    bottom: 0;
    z-index: 2;
    width: auto;
    height: var(--interlude-cat);
    max-width: min(46vw, 210px);
    transform: translateX(-50%);
    pointer-events: none;
}

@media (max-width: 1024px) {
    .services-overwhelmed.is-grid-migrated > .container.grid > .services-overwhelmed__content {
        grid-column: 1 / -1;

    }
}

@media (max-width: 900px) {
    .services-overwhelmed {
        --interlude-spark: clamp(3rem, 12svh, 6.5rem);

    }
}

@media (max-width: 640px) {
    .services-overwhelmed {
        --interlude-spark: clamp(2.5rem, 7svh, 3.5rem);
        --interlude-cat: clamp(5rem, 20svh, 10.25rem);
        --interlude-pattern: min(522px, 100%);

        text-align: left;

    }

    .services-overwhelmed__pattern {
        top: 0;
        opacity: 0.22;
        mask: none;
        -webkit-mask: none;
        transform: translateX(-50%);

    }

    /* The spark leaves the stack and sits beside the headline instead. Sharing
       the copy's cell keeps it pinned to that corner wherever the copy lands. */
    .services-overwhelmed__spark,
    .services-overwhelmed > .container {
        grid-area: 1 / 1;

    }

    .services-overwhelmed__spark {
        justify-self: end;
        align-self: start;
        margin: 1.25rem 1.75rem 0 0;
        transform: rotate(11.9deg);

    }

    .services-overwhelmed__twinkle {
        top: 9.25rem;
        right: 6.5rem;
        left: auto;
        width: 9px;
        height: 9px;

    }

    .services-overwhelmed__title {
        gap: clamp(0.35rem, 1.2svh, 0.625rem);

    }

    .services-overwhelmed__title em {
        max-width: 14rem;
        font-size: min(clamp(2.25rem, 10vw, 2.75rem), max(1.5rem, 6svh));
        line-height: 1.05;

    }

    .services-overwhelmed__title span {
        font-family: var(--font-body);
        font-size: min(1.125rem, max(0.875rem, 2.4svh));
        font-weight: var(--fw-bold);
        line-height: 1.35;

    }

    .services-overwhelmed__copy {
        width: min(100%, 19rem);
        margin: clamp(0.5rem, 2.4svh, 1.25rem) 0 0;
        font-size: min(0.875rem, max(0.75rem, 1.9svh));
        line-height: 1.5;
        letter-spacing: 0;

    }

    .services-overwhelmed__cat-scroll {
        right: 1rem;
        bottom: -0.25rem;
        left: auto;
        max-width: 46vw;
        transform: none;

    }
}

/* A landscape phone has room for the message and the cat and nothing else, so
   the spark is the part that goes. */
@media (max-height: 480px) {
    .services-overwhelmed {
        --interlude-cat: clamp(4.5rem, 22svh, 7rem);

    }

    .services-overwhelmed__spark {
        display: none;

    }
}

.section-interlude {
    overflow: hidden;
}