@property --section-title-gradiant-reveal-tran {
  syntax: '<number>';
  inherits: true;
  initial-value: 0.5;
}

@property --section-title-gradiant-reveal-h {
  syntax: '<number>';
  inherits: true;
  initial-value: 20;
}

.section-title-gradiant-reveal {
    position: relative;
    overflow: hidden;
    padding: 10rem 1.5rem 8rem;
    isolation: isolate;

    animation-name: section-gradient-reveal;
    animation-duration: 800ms;
    animation-timing-function: ease-out;
    animation-fill-mode: both;
}

@supports (animation-timeline: view()) {
    .section-title-gradiant-reveal {
        animation-timeline: view();
        animation-range: entry 15% exit 85%;
        animation-duration: 1s;
    }
}



/* Main atmosphere */
.section-title-gradiant-reveal::before {
    content: "";
    position: absolute;
    left: 50%;
    top: 6rem;
    transform: translateX(-50%);
    width: min(90vw, 1200px);
    height: 1200px;
    background:
        radial-gradient(
            ellipse at top center,
            oklch(from var(--colour-brand) l c h / 0.22) 0%,
            oklch(from var(--colour-brand) l c h / 0.14) 18%,
            oklch(from var(--colour-brand) l c h / 0.08) 34%,
            transparent 72%);
    filter: blur(28px);
    z-index: -2;
}

/* Narrow beam beneath heading that widens behind image */
.section-title-gradiant-reveal::after {
    content: "";
    position: absolute;
    left: 50%;
    top: 9rem;
    transform: translateX(-50%);
    width: min(84vw, 1040px);
    height: 720px;
    background:
        linear-gradient(
            to bottom,
            oklch(from var(--colour-brand) l c h / 0.22) 0%,
            oklch(from var(--colour-brand) l c h / 0.16) 8%,
            oklch(from var(--colour-brand) l c h / 0.08) 18%,
            transparent 34%),
        radial-gradient(
            ellipse at bottom center,
            oklch(from var(--colour-brand) l c h / 0.18) 0%,
            oklch(from var(--colour-brand) l c h / 0.10) 28%,
            transparent 70%);
    clip-path: polygon(
        46% 0%,
        54% 0%,
        58% 18%,
        66% 40%,
        78% 72%,
        100% 100%,
        0% 100%,
        22% 72%,
        34% 40%,
        42% 18%);
    filter: blur(10px);
    z-index: -1;
    opacity: var(--section-title-gradiant-reveal-tran);
}

.section-title-gradiant-reveal__inner {
    max-width: 1200px;
    margin: 0 auto;
}

.section-title-gradiant-reveal__hero {
    text-align: center;
    margin-bottom: 5rem;
}

.section-title-gradiant-reveal__hero h2 {
    margin: 0;
    font-size: clamp(2.5rem, 6vw, 4.75rem);
    line-height: 0.95;
    letter-spacing: -0.03em;
    color: var(--colour-text);
    opacity: var(--section-title-gradiant-reveal-tran);
}

.section-title-gradiant-reveal__hero p {
    margin: 1rem auto 0;
    max-width: 42rem;
    font-size: 1.125rem;
    line-height: 1.7;
    color: var(--colour-text-muted);
    opacity: var(--section-title-gradiant-reveal-tran);
}

.section-title-gradiant-reveal__image-wrap {
    position: relative;
    max-width: 980px;
    margin: 0 auto;
    opacity: var(--section-title-gradiant-reveal-tran);
}

.section-title-gradiant-reveal__image {
    display: block;
    width: 100%;
    height: auto;
    border-radius: 1.5rem;
    box-shadow:
        0 40px 120px rgb(0 0 0 / 0.45),
        0 0 0 1px rgb(255 255 255 / 0.06);
    position: relative;
    z-index: 1;
}



/* Fade the lower edge of the screenshot */
.section-title-gradiant-reveal__image-wrap::after {
    content: "";
    position: absolute;
    inset: auto 0 0;
    height: 38%;
    background: linear-gradient(
        to bottom,
        oklch(from var(--bg-100) l c h / 0) 0%,
        oklch(from var(--bg-100) l c h / 1) 72%,
        oklch(from var(--bg-100) l c h / 1) 100%);
    border-bottom-left-radius: 1.5rem;
    border-bottom-right-radius: 1.5rem;
    pointer-events: none;
    z-index: 2;
}

@media (max-width: 850px) {
.section-title-gradiant-reveal {
        padding: 7rem 1rem 5rem;
    }

.section-title-gradiant-reveal__hero {
        margin-bottom: 3rem;
    }

.section-title-gradiant-reveal::after {
        width: 94vw;
        height: 560px;
        top: 7rem;
    }
}



@keyframes section-gradient-reveal {
    0% {
        --section-title-gradiant-reveal-tran: 0.08;
        --section-title-gradiant-reveal-h: 8;
    }

    60%, 100% {
        --section-title-gradiant-reveal-tran: 1;
        --section-title-gradiant-reveal-h: 175;
    }
}

@media (prefers-reduced-motion: reduce) {
    .section-title-gradiant-reveal::before,
    .section-title-gradiant-reveal::after {
            filter: none;
        }
    .section-title-gradiant-reveal {
        animation: none;
        opacity: 1;
        transform: none;
    }
}