/* Page transition styles */

/* Initial visit: green curtain covers page until intro completes */
.has-js .curtain-intro {
  position: fixed;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  background: var(--color-dark-green);
  z-index: 10001;
  pointer-events: none;
}

[data-barba="wrapper"] {
  background-color: var(--color-dark-green);
}

/* Barba container needs to handle the swap */
[data-barba="container"] {
  background-color: var(--color-white, #fff);
  will-change: opacity, transform;
}


.transition-logo {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 8rem;
    height: auto;
    z-index: 10002;
    opacity: 0;
    pointer-events: none;
}

.transition-logo svg {
    width: 100%;
    height: 100%;
}

.curtain-front,
.curtain-back {
    position: fixed;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    will-change: transform;
}

.curtain-front {
    background: var(--color-dark-green);
    z-index: 9999;
}

.curtain-back {
    background: var(--color-off-white);
    z-index: 9998;
}