/* 円、四角形で切り抜く */
.clip-box {
    aspect-ratio: 1/1;
    background: linear-gradient(-45deg, blue, violet);
}

.clip-circle {
    clip-path: circle(50%);
}

.clip-ellipse {
    clip-path: ellipse(50% 40%);
}

.clip-fan {
    clip-path: circle(90% at 0% 100%);
}

.clip-rounded-rect {
    clip-path: inset(4% round 20px);
}

/* polygon */
.clip-triangle {
    clip-path: polygon(50% 0%, 0% 100%, 100% 100%);
}

.clip-parallelogram {
    clip-path: polygon(25% 0%, 100% 0%, 75% 100%, 0% 100%);
}

.clip-frame {
    clip-path: polygon(
        0% 0%,
        0% 100%,
        25% 100%,
        25% 25%,
        75% 25%,
        75% 75%,
        25% 75%,
        25% 100%,
        100% 100%,
        100% 0%
    );
}

.clip-houseglass {
    clip-path: polygon(100% 0, 0 0, 100% 100%, 0% 100%);
}

/* evenodd */
.clip-star {
    clip-path: polygon(50% 0%, 80% 100%, 0% 38%, 100% 38%, 20% 100%);
}

.clip-star-evenodd {
    clip-path: polygon(evenodd, 50% 0%, 80% 100%, 0% 38%, 100% 38%, 20% 100%);
}

/* gradinrt mask */
.mask-box {
    aspect-ratio: 3/2;
}
.mask-box > img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.gradient-mask {
    mask-image: linear-gradient(to bottom, black 0%, transparent 100%);
}

.gradient-stop-mask {
    mask-image: linear-gradient(
        45deg,
        transparent,
        black 10%,
        transparent 10% 12%,
        black 12% 24%,
        transparent 24% 27%,
        black 27% 95%,
        transparent 95%
    );
}

/* SVGでmask */
.mask-svg {
    aspect-ratio: 1/1;

    --mask: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" fill="currentColor" viewBox="0 0 200 200"><path class="st0" d="M99.3,14.9c22.8-0.3,46.4,11.8,63.3,30.1c17.1,18.3,27.5,43,26.6,67c-1.1,24.1-13.6,47.8-32,60 c-18.3,12.2-42.6,13-68,13.1c-25.5,0.2-52.3-0.3-65.9-13.9c-13.7-13.6-14.2-40.4-10.7-64.4c3.8-24,11.7-45.1,26.7-62.1 C54.3,27.8,76.4,15.1,99.3,14.9z"/></svg>');

    mask-image: var(--mask);
    mask-size: contain;

    mask-repeat: no-repeat;
}


/* sectionの境界線をclip-pathで切り取る */
.section {
    position: relative;
    min-height: 25rem;
    padding: 2em;
}
.section__content {
    position: relative;
    max-width: 800px;
    margin-inline: auto;
}
.section__bg {
    position: absolute;
    inset: 0;
}
.section__bg > img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.section__bg::after {
    position: absolute;
    content: "";
    inset: 0;
    background-color: rgb(0 0 0 / 50%);
}
.section__bg + .section__content {
    color: #fff;
}

/* clip */
.clip-section1,
.clip-section2 {
    --clip-height: 80px;
}

.clip-section1 {
    padding-bottom: calc(2em + var(--clip-height));
    background: #eee;
    background-image: radial-gradient(circle, #ddd 2px, transparent 0%);
    background-size: 20px 20px;
}

.clip-section2 {
    color: #fff;

    clip-path: polygon(0 var(--clip-height), 100% 0, 100% 100%, 0 100%);

    margin-top: calc(-1 * var(--clip-height));

    padding-top: calc(2em + var(--clip-height));
}


/* 波型SVGでMASK */
.mask-section {
    position: relative;
    overflow: hidden;

    --mask:
        url('data:image/svg+xml;utf,<svg xmlns="http://www.w3.org/2000/svg" x="0" y="0" viewBox="0 0 100 10" xml:space="preserve" fill="%23fff"><path d="M100 6C89.3 3.3 82.7 9 70 9S48.4 3 38 3 24.5 6 17 6C7.4 6 0 0 0 0v10h100V6z"/></svg>'),
        linear-gradient(#fff, #fff);

    mask-image: var(--mask);
    mask-repeat: no-repeat;

    mask-position: 0% calc(100% + 2px);
    mask-size: calc(100% + 2px) auto;

    mask-composite: exclude;

    padding-bottom: 10%;
    }

    .mask-section + .section {
        margin-top: 0;
    }


/* Text Clip */
.clip-text {
    background-clip: text;

    color: transparent;

    width: fit-content;
    font-size: clamp(40px, 20vw, 100px);
    font-weight: 900;
    line-height: 1.2;
    display: grid;
    justify-content: center;
    margin-inline: auto;
}

.clip-text--gradient {
    background-image: linear-gradient(45deg, blue, violet, aqua);
}

.clip-text--img {
    background-image: url("../img/sky.jpg");
    background-size: cover;
}