.support {
    position: fixed;
    z-index: 10;
    left: 1rem;
    top: 1rem;
    background: white;
    color: black;
    padding: 2rem;
    border: 4px solid hsl(45 80% 50%);
}

@supports (animation-timeline: view()) {
    .support {
        display: none;
    }
}

video {
    position: fixed;
    inset: 0;
    object-fit: cover;
    width: 100%;
    height: 100vh;
    z-index: -1;
    filter: saturate(0.1) brightness(0.5);
    opacity: 0;
    animation: fade-in both linear, fade-out both linear;
    animation-timeline: --section;
    animation-range: entry 10% entry 15%, exit 10% exit 15%;
}

.profil iframe {
    /* Properti yang sama dari CSS lama Anda */
    position: fixed;
    inset: 0;
    z-index: -1;
    filter: saturate(0.1) brightness(0.5);
    opacity: 0;
    animation: fade-in both linear, fade-out both linear;
    animation-timeline: --section;
    animation-range: entry 10% entry 15%, exit 10% exit 15%;

    /* Pengganti untuk 'object-fit: cover' */
    width: 100vw;
    height: 56.25vw; /* Menjaga rasio 16:9 (100 * 9 / 16) */
    min-width: 177.77vh; /* Menjaga rasio 16:9 (100 * 16 / 9) */
    min-height: 100vh;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

@keyframes fade-in {
    to {
        opacity: 0.2;
    }
}

@keyframes fade-out {
    to {
        opacity: 0;
    }
}

section.profil {
    position: relative;
    min-height: 100vh;
    display: grid;
    place-items: center;
    view-timeline: --section;
}

section.profil:nth-of-type(1) {
    height: 100vh;
}

section.profil:nth-of-type(2) {
    height: 140vh;
}

section.profil:nth-of-type(3) {
    height: 200vh;
}

h1 {
    display: grid;
}

 :is(h1, h2) {
    font-size: clamp(2.5rem, 7vw + 1rem, 10rem);
    text-align: center;
    line-height: 1;
    position: fixed;
    top: 50%;
    left: 50%;
    margin: 0;
    translate: -50% -50%;
    width: 100%;
}

p span {
    opacity: 0.15;
    animation: highlight both ease-in-out;
    animation-timeline: view();
}

@keyframes highlight {
    50% {
        opacity: 1;
    }
}

p span:nth-of-type(1) {
    animation-range: cover 10% cover 45%;
}

p span:nth-of-type(2) {
    animation-range: cover 30% cover 60%;
}

p span:nth-of-type(3) {
    animation-range: cover 45% cover 85%;
}

p span:nth-of-type(4) {
    animation-range: cover 75% cover 120%;
}


/* 
p span:nth-of-type(5) {
    animation-range: cover 120% cover 165%;
}

p span:nth-of-type(6) {
    animation-range: cover 165% cover 210%;
} */

h1 span:first-of-type {
    display: inline-block;
    animation: fade-away both linear;
    animation-timeline: --section;
    animation-range: exit 20% exit 90%;
}

h1 span:last-of-type {
    display: inline-block;
    animation: scale-up both cubic-bezier(.1, .7, .9, 1.3), fade-away both linear;
    animation-timeline: --section;
    animation-range: exit 0% exit 100%, exit 50% exit 90%;
}

@keyframes scale-up {
    to {
        scale: 1.5;
    }
}

h2 {
    animation: grow both ease-in, fade-away both linear;
    animation-timeline: --section;
    animation-range: exit-crossing -10% exit-crossing 10%, exit 0% exit 50%;
    color: #5b8e7d;
}

h1 span:first-of-type {
    color: hsl(0 100% 50%);
    font-size: 0.35em;
}

@keyframes grow {
    0% {
        scale: 0.5;
        opacity: 0;
    }
}

@keyframes fade-away {
    100% {
        opacity: 0;
    }
}

h2 {
    font-size: clamp(2rem, 5vw + 1rem, 6rem);
    text-align: center;
}


/* .scr p {
    font-size: clamp(1.625rem, 3vw + 1rem, 8rem);
    letter-spacing: 0;
    line-height: 1;
} */

.scr p {
    text-align: justify;
}

.section__content {
    width: 800px;
    max-width: 100vw;
    padding: 0 1rem;
}