/* Cicada v2 visual reference. All dimensions are scoped to this homepage scene. */
@font-face {
    font-family: "SL Cicada Work Sans";
    font-style: normal;
    font-weight: 400;
    font-display: swap;
    src: url("../img/support-journey/work-sans-400.ttf") format("truetype");
}

@font-face {
    font-family: "SL Cicada Work Sans";
    font-style: normal;
    font-weight: 500;
    font-display: swap;
    src: url("../img/support-journey/work-sans-500.ttf") format("truetype");
}

.sl-support-journey {
    --sl-cicada-unit: clamp(24px, 4.1667vw, 60px);
    position: relative;
    isolation: isolate;
    width: 100%;
    color: #000;
    background: #e0d8eb;
    font-family: "SL Cicada Work Sans", sans-serif;
}

.sl-support-journey,
.sl-support-journey * { box-sizing: border-box; }

.sl-support-journey[data-support-enhanced="true"] { height: 10000px; }

.sl-support-journey .sl-support-stage {
    position: relative;
    width: 100%;
    height: calc(100vh - 80px);
    height: calc(100svh - 80px);
    min-height: 360px;
    overflow: hidden;
    overflow: clip;
    color: #000;
    background: #e0d8eb;
    font-size: var(--sl-cicada-unit);
}

.sl-support-journey[data-support-enhanced="true"] .sl-support-stage {
    position: sticky;
    top: 80px;
}

.sl-support-journey .sl-support-stage::before,
.sl-support-journey .sl-support-stage::after {
    position: absolute;
    inset: 0;
    content: "";
    pointer-events: none;
}

.sl-support-journey .sl-support-stage::before {
    z-index: 0;
    background: #e0d8eb url("../img/support-journey/texture.png") repeat;
    mix-blend-mode: soft-light;
}

.sl-support-journey .sl-support-stage::after {
    z-index: 1;
    top: auto;
    right: auto;
    bottom: calc(var(--sl-cicada-unit) * -3.76);
    left: 50%;
    width: calc(var(--sl-cicada-unit) * 22.42);
    height: calc(var(--sl-cicada-unit) * 8.86);
    background: #f9f5ff;
    filter: blur(calc(var(--sl-cicada-unit) * 2.5));
    transform: translateX(-50%);
}

.sl-support-journey .sl-cicada-banner,
.sl-support-journey .sl-cicada-network,
.sl-support-journey .sl-cicada-wings { position: absolute; inset: 0; }

.sl-support-journey .sl-cicada-banner { z-index: 2; pointer-events: none; }

.sl-support-journey .sl-cicada-slide {
    position: absolute;
    z-index: 1;
    left: 50%;
    width: 100%;
    margin: 0;
    padding: 0;
    color: #000;
    font-family: inherit;
    font-weight: 400;
    text-align: center;
    transform: translateX(-50%);
}

.sl-support-journey .sl-cicada-title {
    z-index: 3;
    top: calc(var(--sl-cicada-unit) * 1.95);
    max-width: calc(var(--sl-cicada-unit) * 9.57);
    font-size: var(--sl-cicada-unit);
    line-height: 1.1;
    letter-spacing: calc(var(--sl-cicada-unit) * -.07);
}

.sl-support-journey .sl-cicada-title span { position: relative; display: inline-block; }

.sl-support-journey .sl-cicada-title span::after {
    position: absolute;
    right: 0;
    bottom: calc(var(--sl-cicada-unit) * -.04);
    left: 0;
    height: 4px;
    background: currentColor;
    content: "";
    transform: rotate(-3deg);
    transform-origin: center;
}

.sl-support-journey .sl-cicada-subtitle {
    top: calc(var(--sl-cicada-unit) * 2.8);
    max-width: calc(var(--sl-cicada-unit) * 9.57);
    font-size: var(--sl-cicada-unit);
    line-height: 1.1;
    letter-spacing: calc(var(--sl-cicada-unit) * -.07);
    opacity: 0;
}

.sl-support-journey .sl-cicada-text {
    top: calc(var(--sl-cicada-unit) * 1.89);
    max-width: calc(var(--sl-cicada-unit) * 6.87);
    font-size: calc(var(--sl-cicada-unit) * .42);
    line-height: 1.1;
    letter-spacing: calc(var(--sl-cicada-unit) * -.0295);
    text-align: left;
    opacity: 0;
}

.sl-support-journey .sl-cicada-tree-video {
    position: absolute;
    z-index: 2;
    bottom: 0;
    left: 50%;
    display: block;
    width: calc(var(--sl-cicada-unit) * 19);
    max-width: none;
    height: auto;
    margin: 0;
    object-fit: contain;
    transform: translateX(-50%);
    transform-origin: center bottom;
}

.sl-support-journey .sl-cicada-tree-video > video {
    display: block;
    width: 100%;
    max-width: none;
    height: auto;
    object-fit: contain;
}

.sl-support-journey .sl-cicada-wings { z-index: 0; pointer-events: none; }

.sl-support-journey .sl-cicada-wings > img {
    position: absolute;
    bottom: calc(var(--sl-cicada-unit) * .95);
    left: 50%;
    display: block;
    width: 95%;
    max-width: none;
    height: auto;
    transform: translateX(-50%);
}

.sl-support-journey .sl-cicada-network { z-index: 3; pointer-events: none; }

.sl-support-journey .sl-cicada-name {
    position: absolute;
    top: calc(var(--sl-cicada-unit) * .92);
    left: 50%;
    width: max-content;
    max-width: 90%;
    margin: 0;
    color: #000;
    font-size: calc(var(--sl-cicada-unit) * .51);
    font-weight: 400;
    line-height: 1.1;
    letter-spacing: calc(var(--sl-cicada-unit) * -.0357);
    text-align: center;
    opacity: 0;
    transform: translateX(-50%);
}

.sl-support-journey .sl-cicada-tree-wrap {
    position: absolute;
    top: calc(var(--sl-cicada-unit) * 3.32);
    left: 50%;
    width: calc(var(--sl-cicada-unit) * 9.5);
    transform: translateX(-50%);
}

.sl-support-journey .sl-cicada-tree-svg {
    position: relative;
    z-index: 2;
    display: none;
    width: 100%;
    height: auto;
    overflow: visible;
    opacity: 1;
}

.sl-support-journey .sl-cicada-circle {
    position: absolute;
    z-index: 0;
    top: calc(var(--sl-cicada-unit) * 1);
    left: 50%;
    width: calc(var(--sl-cicada-unit) * 8.62);
    aspect-ratio: 1;
    border: 0;
    border-radius: 50%;
    box-shadow: 0 0 0 1px #341f37;
    transform: translateX(-50%) scale(0);
    transform-origin: center;
}

.sl-support-journey .sl-cicada-circle-small { box-shadow: 0 0 0 3px #341f37; }

.sl-support-journey .sl-cicada-label {
    position: absolute;
    z-index: 2;
    width: max-content;
    max-width: calc(var(--sl-cicada-unit) * 2);
    margin: 0;
    padding: calc(var(--sl-cicada-unit) * .18);
    color: #000;
    font-size: calc(var(--sl-cicada-unit) * .2);
    font-weight: 400;
    line-height: 1.2;
    letter-spacing: calc(var(--sl-cicada-unit) * -.009);
    text-align: center;
    opacity: 1;
    cursor: pointer;
    pointer-events: auto;
}

.sl-support-journey .sl-cicada-label span { display: block; opacity: 0; }

.sl-support-journey .sl-cicada-label-decor {
    position: absolute;
    top: 50%;
    display: block;
    width: calc(var(--sl-cicada-unit) * .08);
    height: auto;
    overflow: visible;
    opacity: 0;
    transform: translateY(-50%);
}

.sl-support-journey .sl-cicada-label-decor.left { left: calc(var(--sl-cicada-unit) * .06); }
.sl-support-journey .sl-cicada-label-decor.right { right: calc(var(--sl-cicada-unit) * .06); }

.sl-support-journey .sl-cicada-label[data-position="top"] {
    top: calc(var(--sl-cicada-unit) * -.25);
    left: 50%;
    transform: translate(-50%, -100%);
    transform-origin: bottom center;
}

.sl-support-journey .sl-cicada-label[data-position="left-top"] {
    top: calc(var(--sl-cicada-unit) * .57);
    right: calc(var(--sl-cicada-unit) * 6.11);
    transform: translate(-100%, -50%);
    transform-origin: bottom right;
}

.sl-support-journey .sl-cicada-label[data-position="left"] {
    top: calc(var(--sl-cicada-unit) * 2.13);
    left: calc(var(--sl-cicada-unit) * -.1);
    transform: translate(-100%, 0);
    transform-origin: bottom right;
}

.sl-support-journey .sl-cicada-label[data-position="right-top"] {
    top: calc(var(--sl-cicada-unit) * .57);
    left: calc(var(--sl-cicada-unit) * 5.69);
    transform: translate(100%, -50%);
    transform-origin: bottom left;
}

.sl-support-journey .sl-cicada-label[data-position="right"] {
    top: calc(var(--sl-cicada-unit) * 2.13);
    right: calc(var(--sl-cicada-unit) * -.1);
    transform: translate(100%, 0);
    transform-origin: bottom left;
}

.sl-support-journey .sl-cicada-ball {
    position: absolute;
    z-index: 3;
    width: calc(var(--sl-cicada-unit) * .14);
    height: calc(var(--sl-cicada-unit) * .14);
    opacity: 0;
    pointer-events: auto;
}

.sl-support-journey .sl-cicada-ball span {
    position: absolute;
    inset: 0;
    display: block;
    border-radius: 50%;
    background: #341f37;
    pointer-events: none;
}

.sl-support-journey .sl-cicada-ball span:not(:first-child) { opacity: 0; }

.sl-support-journey .sl-cicada-ball[data-position="top"] {
    top: 0;
    left: 50%;
    transform: translate(-50%, -100%);
}

.sl-support-journey .sl-cicada-ball[data-position="left-top"] {
    top: calc(var(--sl-cicada-unit) * .6);
    right: calc(var(--sl-cicada-unit) * 7.39);
    transform: translate(0, -50%);
}

.sl-support-journey .sl-cicada-ball[data-position="left"] {
    top: calc(var(--sl-cicada-unit) * 2.5);
    left: 0;
    transform: translate(-50%, -100%);
}

.sl-support-journey .sl-cicada-ball[data-position="right-top"] {
    top: calc(var(--sl-cicada-unit) * .6);
    left: calc(var(--sl-cicada-unit) * 7.39);
    transform: translate(0, -50%);
}

.sl-support-journey .sl-cicada-ball[data-position="right"] {
    top: calc(var(--sl-cicada-unit) * 2.5);
    right: 0;
    transform: translate(50%, -100%);
}

.sl-support-journey .sl-cicada-butterfly {
    position: absolute;
    z-index: 1;
    bottom: calc(var(--sl-cicada-unit) * -1.22);
    left: 50%;
    width: calc(var(--sl-cicada-unit) * 15.15);
    height: calc(var(--sl-cicada-unit) * 5.04);
    opacity: 0;
    transform: translateX(-50%);
    transform-origin: center center;
}

.sl-support-journey .sl-cicada-piece { position: absolute; }

.sl-support-journey .sl-cicada-piece > img {
    display: block;
    width: 100%;
    max-width: none;
    height: auto;
}

.sl-support-journey .sl-cicada-center {
    z-index: 3;
    top: calc(var(--sl-cicada-unit) * 1.28);
    left: 50%;
    width: calc(var(--sl-cicada-unit) * 1.34);
    aspect-ratio: 244 / 291;
    display: flex;
    align-items: center;
    justify-content: center;
    transform: translateX(-50%);
}

.sl-support-journey .sl-cicada-center > img { object-fit: contain; }

.sl-support-journey .sl-cicada-top-left,
.sl-support-journey .sl-cicada-top-right {
    z-index: 2;
    top: 0;
    width: calc(var(--sl-cicada-unit) * 7.05);
}

.sl-support-journey .sl-cicada-top-left { left: 0; transform-origin: center right; }
.sl-support-journey .sl-cicada-top-right { right: 0; transform-origin: center left; }

.sl-support-journey .sl-cicada-bottom-left,
.sl-support-journey .sl-cicada-bottom-right {
    z-index: 1;
    top: calc(var(--sl-cicada-unit) * 2.586);
    width: calc(var(--sl-cicada-unit) * 3.9);
}

.sl-support-journey .sl-cicada-bottom-left {
    left: calc(var(--sl-cicada-unit) * 3.496);
    transform-origin: top right;
}

.sl-support-journey .sl-cicada-bottom-right {
    right: calc(var(--sl-cicada-unit) * 3.496);
    transform-origin: top left;
}

/* Brand color is composited through the original silhouettes; artwork and veins stay intact. */
@supports (mask-image: url("")) or (-webkit-mask-image: url("")) {
    .sl-support-journey .sl-cicada-piece:not(.sl-cicada-center) { isolation: isolate; }

    .sl-support-journey .sl-cicada-top-left {
        --sl-wing-mask: url("../img/support-journey/butterfly-top_left.png");
        --sl-wing-palette: linear-gradient(120deg, #ff9bdb 0%, #d981ef 35%, #9252de 72%, #6653d9 100%);
    }

    .sl-support-journey .sl-cicada-top-right {
        --sl-wing-mask: url("../img/support-journey/butterfly-top_right.png");
        --sl-wing-palette: linear-gradient(55deg, #7854df 0%, #8984ee 35%, #10cbed 75%, #76e7fa 100%);
    }

    .sl-support-journey .sl-cicada-bottom-left {
        --sl-wing-mask: url("../img/support-journey/butterfly-bottom_left.png");
        --sl-wing-palette: linear-gradient(135deg, #f395df 0%, #b16ae6 50%, #7560e2 100%);
    }

    .sl-support-journey .sl-cicada-bottom-right {
        --sl-wing-mask: url("../img/support-journey/butterfly-bottom_right.png");
        --sl-wing-palette: linear-gradient(55deg, #8562e7 0%, #599fea 45%, #0ecde9 100%);
    }

    .sl-support-journey .sl-cicada-piece:not(.sl-cicada-center)::after {
        content: "";
        position: absolute;
        inset: 0;
        pointer-events: none;
        background: var(--sl-wing-palette);
        -webkit-mask-image: var(--sl-wing-mask);
        mask-image: var(--sl-wing-mask);
        -webkit-mask-size: 100% 100%;
        mask-size: 100% 100%;
        -webkit-mask-repeat: no-repeat;
        mask-repeat: no-repeat;
        mask-mode: alpha;
        mix-blend-mode: multiply;
        opacity: .88;
    }

    .sl-support-journey .sl-cicada-wings > img { opacity: 0; }

    .sl-support-journey .sl-cicada-wings::after {
        content: "";
        position: absolute;
        bottom: calc(var(--sl-cicada-unit) * .95);
        left: 50%;
        width: 95%;
        aspect-ratio: 1357 / 466;
        transform: translateX(-50%);
        pointer-events: none;
        background: linear-gradient(110deg, #e97cce 0%, #b272df 30%, #7862db 50%, #589de5 72%, #04c9e8 100%);
        -webkit-mask-image: url("../img/support-journey/wings-original.svg");
        mask-image: url("../img/support-journey/wings-original.svg");
        -webkit-mask-size: 100% 100%;
        mask-size: 100% 100%;
        -webkit-mask-repeat: no-repeat;
        mask-repeat: no-repeat;
        mask-mode: alpha;
        opacity: .7;
    }
}

.sl-support-journey .sl-cicada-sound {
    position: absolute;
    z-index: 6;
    right: calc(var(--sl-cicada-unit) * .75);
    bottom: calc(var(--sl-cicada-unit) * .63);
    display: flex;
    align-items: center;
    justify-content: center;
    gap: calc(var(--sl-cicada-unit) * .045);
    width: calc(var(--sl-cicada-unit) * .78);
    height: calc(var(--sl-cicada-unit) * .78);
    min-width: 36px;
    min-height: 36px;
    margin: 0;
    padding: 0;
    border: 0;
    border-radius: 50%;
    color: #341f37;
    background: #d8cee6;
    cursor: pointer;
}

.sl-support-journey .sl-cicada-sound[hidden] { display: none; }
.sl-support-journey .sl-cicada-sound:hover { background: #cbbada; }
.sl-support-journey .sl-cicada-sound:focus-visible { outline: 2px solid #341f37; outline-offset: 4px; }

.sl-support-journey .sl-cicada-sound-bar {
    display: block;
    width: calc(var(--sl-cicada-unit) * .05);
    min-width: 2px;
    height: calc(var(--sl-cicada-unit) * .27);
    border-radius: calc(var(--sl-cicada-unit) * .03);
    background: #341f37;
    transform-origin: center;
}

.sl-support-journey .sl-cicada-sound-bar:nth-child(even) { height: calc(var(--sl-cicada-unit) * .17); }

@media (max-width: 767px) {
    .sl-support-journey { --sl-cicada-unit: clamp(22px, 4.5vw, 34px); }
    .sl-support-journey[data-support-enhanced="true"] { height: 7000px; }
    .sl-support-journey .sl-cicada-banner,
    .sl-support-journey .sl-cicada-network,
    .sl-support-journey .sl-cicada-wings {
        top: 50%;
        bottom: auto;
        height: 360px;
        transform: translateY(-50%);
    }
    .sl-support-journey .sl-cicada-wings > img { width: 95%; }
    .sl-support-journey .sl-cicada-label { font-size: max(10px, calc(var(--sl-cicada-unit) * .2)); }
}

@media (prefers-reduced-motion: reduce) {
    .sl-support-journey[data-support-enhanced="true"] { height: auto !important; }

    .sl-support-journey .sl-support-stage,
    .sl-support-journey[data-support-enhanced="true"] .sl-support-stage {
        position: relative;
        top: auto;
    }

    .sl-support-journey *,
    .sl-support-journey *::before,
    .sl-support-journey *::after {
        animation: none !important;
        transition: none !important;
    }
}