/* =========================
   utilities.css
   Tiny, obvious utilities + states
   ========================= */

/* Visibility */
.u-hidden {
    display: none !important;
}

.u-visually-hidden {
    position: absolute !important;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

/* Text */
.u-text-center {
    text-align: center;
}

.u-text-justify {
    text-align: justify;
}

/* Simple states */
.is-open {
    /* state hook */
}

.is-on {
    /* state hook */
}


.parallax {
    transform-style: preserve-3d;
    perspective: 1000px;
}

/* Base + scroll shift composed together */
.layer-bg,
.layer-mid,
.layer-fg {
  transform: var(--layer-base, none) translateY(var(--parallax-y, 0px));
  will-change: transform;
}

/* Map each layer class to its base transform */
.layer-bg  { --layer-base: var(--translate-background); }
.layer-mid { --layer-base: var(--translate-midground); }
.layer-fg  { --layer-base: var(--translate-foreground); }