/* Percobaan motion homepage. Semua aturan dibatasi ke kelas trial. */
html.hero-motion-trial .hero-content > .motion-reveal,
html.hero-motion-trial .main-nav.motion-page-entry,
html.hero-motion-trial .site-language.motion-page-entry {
    animation: none;
    opacity: 1;
}

html.hero-motion-trial .hero-content {
    z-index: 2;
}

.hero-motion-backdrop {
    position: absolute;
    inset: 0;
    z-index: 0;
    background: inherit;
    pointer-events: none;
}

.hero-motion-word {
    display: inline-block;
    overflow: clip;
    vertical-align: bottom;
    padding-block: .12em;
    margin-block: -.12em;
    white-space: nowrap;
}

.hero-motion-char {
    display: inline-block;
    transform-origin: 0 100%;
}

body.hero-transition-active {
    overflow: hidden;
}

body.hero-entry-waiting .hero-content,
body.hero-entry-waiting .main-nav,
body.hero-entry-waiting .site-language {
    visibility: hidden;
}

.hero-brush-transition {
    --brush-green: #1a5f3f;
    background: var(--brush-green);
    position: fixed;
    inset: 0;
    z-index: 100000;
    overflow: hidden;
    touch-action: none;
}

.hero-brush-transition.is-revealing {
    background: transparent;
}

.hero-brush-transition svg {
    position: absolute;
    inset: -15%;
    display: block;
    width: 130%;
    height: 130%;
}

.hero-brush-stroke {
    fill: none;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.hero-brush-ink {
    stroke: var(--brush-green);
}