/*!******************************************************************************************************************************************************!*\
  !*** css ./node_modules/css-loader/dist/cjs.js!./node_modules/postcss-loader/dist/cjs.js!./node_modules/sass-loader/dist/cjs.js!./src/scss/app.scss ***!
  \******************************************************************************************************************************************************/
@charset "UTF-8";
:root {
  --max-width: 1600px;
}

/* Color styles */
html,
body,
div,
span,
applet,
object,
iframe,
h1,
h2,
h3,
h4,
h5,
h6,
p,
blockquote,
pre,
a,
abbr,
acronym,
address,
big,
cite,
code,
del,
dfn,
em,
img,
ins,
kbd,
q,
s,
samp,
small,
strike,
strong,
tt,
var,
b,
u,
i,
center,
dl,
dt,
dd,
ol,
ul,
li,
fieldset,
form,
label,
legend,
table,
caption,
tbody,
tfoot,
thead,
tr,
th,
td,
article,
aside,
canvas,
details,
embed,
figure,
figcaption,
footer,
header,
hgroup,
menu,
nav,
output,
ruby,
section,
summary,
time,
mark,
audio,
video {
  border: none;
  font: inherit;
  font-size: 100%;
  margin: 0;
  padding: 0;
  vertical-align: baseline;
}

html {
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
}

*,
*:before,
*:after {
  -webkit-box-sizing: inherit;
          box-sizing: inherit;
}

article,
aside,
details,
figcaption,
figure,
footer,
header,
hgroup,
main,
nav,
section,
summary,
main {
  display: block;
}

audio,
canvas,
video {
  display: inline-block;
}

body {
  margin: 0;
}

ul {
  list-style-type: none;
}

a {
  background: transparent;
  text-decoration: none;
}

button,
input {
  line-height: normal;
}

input[type=search] {
  -webkit-appearance: textfield;
}

input[type=search]::-webkit-search-decoration,
input[type=search]::-webkit-search-cancel-button {
  -webkit-appearance: none;
}

button::-moz-focus-inner,
input::-moz-focus-inner {
  border: 0;
  padding: 0;
}

textarea {
  overflow: auto;
  vertical-align: top;
}

img {
  display: block;
  max-width: 100%;
  height: auto;
}

textarea:focus,
input:focus {
  outline: 0;
}

input {
  margin: 0;
  padding: 0;
  -webkit-appearance: none;
     -moz-appearance: none;
          appearance: none;
}

@font-face {
  font-family: "Anybody";
  src: url(../images/design/Anybody.8bf196.woff2) format("woff2-variations");
  font-style: normal;
  font-weight: 100 900;
}
@font-face {
  font-family: "Epilogue";
  src: url(../images/design/Epilogue[wght].a084de.woff2) format("woff2-variations");
  font-style: normal;
  font-weight: 100 900;
}
html,
body {
  height: 100vh;
  width: 100%;
  margin: 0;
  padding: 0;
  overflow-x: hidden;
}

body {
  font-family: "Epilogue", sans-serif;
  font-variation-settings: "wght" 300, "wdth" 100, "slnt"-0;
  background-color: #080410;
  color: #edcedc;
}

a {
  color: #ef3e3c;
}

.background .bg-image {
  position: absolute;
  width: 100vw;
  height: 100vh;
  left: 0;
  top: 0;
  height: 100vh;
  background-size: cover;
  -webkit-transition: all 0.3s ease-out;
  transition: all 0.3s ease-out;
  background-position: center center;
}
.background .bg-logo {
  -webkit-transition: all 0.3s ease-out;
  transition: all 0.3s ease-out;
  position: absolute;
  width: 100vw;
  height: 100vh;
  top: 0;
  left: 0;
  overflow: hidden;
  mix-blend-mode: exclusion;
}
@media (max-width: 767px) {
  .background .bg-logo {
    display: none;
  }
}
.background .bg-logo .container {
  position: absolute;
  width: calc(100vw - 6rem);
  height: calc(100vh - 6rem);
  margin: 3rem;
  -webkit-transform: rotate(3deg);
          transform: rotate(3deg);
  font-family: "Anybody", sans-serif;
  font-variation-settings: "wght" 300, "wdth" 100, "slnt"-0;
  font-size: 4rem;
}
.background .bg-logo .container .word {
  color: #0c1034;
  display: inline-block;
  position: absolute;
  line-height: 1;
  /* GPU hack for smoothing */
  -webkit-transform: translateZ(0);
          transform: translateZ(0);
  will-change: transform;
}
.background .bg-logo .container .word1 {
  -webkit-transform: translateX(-101%) translateY(130%) rotateZ(-90deg);
          transform: translateX(-101%) translateY(130%) rotateZ(-90deg);
  -webkit-transform-origin: right top;
          transform-origin: right top;
}
.background .bg-logo .container .word2 {
  top: 0;
}
.background .bg-logo .container .word3 {
  bottom: 0;
  right: 0;
  -webkit-transform-origin: right bottom;
          transform-origin: right bottom;
}
.background .bg-logo .container .word4 {
  right: 0;
  bottom: 0;
  -webkit-transform: translateX(2%) translateY(-120%) rotateZ(-90deg) translateX(103%);
          transform: translateX(2%) translateY(-120%) rotateZ(-90deg) translateX(103%);
  -webkit-transform-origin: right bottom;
          transform-origin: right bottom;
}
.background .bg-logo .uppercase {
  text-transform: uppercase;
}
.background .bg-logo .size_xl {
  font-size: 10rem;
}
.background .bg-logo .size_s {
  font-size: 2rem;
}

header {
  position: absolute;
  top: 0;
  left: 0;
  width: 100vw;
  height: 180px;
}
@media (max-width: 767px) {
  header {
    overflow-x: hidden;
  }
}
header .fg-logo {
  top: 0;
  left: 0;
  -webkit-transform: scale(0.8);
          transform: scale(0.8);
  -webkit-transform-origin: left;
          transform-origin: left;
}
header .fg-logo .logo-mark {
  padding: 3rem;
  font-size: 2rem;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: start;
      -ms-flex-pack: start;
          justify-content: flex-start;
  color: #edcedc;
  font-variation-settings: "wght" 300, "wdth" 150, "slnt"-0;
  font-family: "Anybody", sans-serif;
}
@media (max-width: 767px) {
  header .fg-logo .logo-mark {
    padding: 1rem 0;
  }
}
header .fg-logo .logo-mark div {
  -webkit-transform: translateZ(0);
          transform: translateZ(0);
}
@media (max-width: 767px) {
  header .fg-logo {
    -webkit-transform: scale(0.5), translateX(-10%);
            transform: scale(0.5), translateX(-10%);
  }
}

main {
  position: relative;
}
main section.scene {
  position: absolute;
  width: 100vw;
  height: 100vh;
  top: 0;
  left: 0;
  padding: 3rem;
  max-width: var(--max-width);
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: start;
      -ms-flex-pack: start;
          justify-content: flex-start;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  padding-bottom: 15rem;
  gap: 2rem;
}
@media (max-width: 600px) {
  main section.scene {
    padding: 1rem;
  }
}
@media (max-width: 767px) {
  main section.scene {
    -webkit-box-pack: start;
        -ms-flex-pack: start;
            justify-content: start;
  }
}
main section.scene .manifest {
  position: absolute;
  bottom: 15rem;
  font-family: "ANybody", sans-serif;
  font-variation-settings: "wght" 300, "wdth" 120;
  font-size: 2.2rem;
  line-height: 1.4;
}
@media (max-width: 900px) {
  main section.scene .manifest br {
    display: none;
  }
}
@media (max-width: 767px) {
  main section.scene .manifest {
    font-size: 1.5rem;
    margin-top: 12rem;
    justify-self: center;
  }
}
main section.scene .manifest .item {
  -webkit-transition: all 0.5s ease-out;
  transition: all 0.5s ease-out;
  /* GPU hack for smoothing */
  -webkit-transform: translateZ(0);
          transform: translateZ(0);
  will-change: transform;
}
main section.scene .manifest .item.active {
  font-variation-settings: "wght" 560, "wdth" 70, "slnt" 0;
}
main section.scene .manifest .item.inactive {
  font-variation-settings: "wght" 160, "wdth" 70, "slnt" 0;
}
main .expo-container {
  position: fixed;
  bottom: 5em;
  right: 3rem;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  height: 10rem;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  padding: 0.5rem 1rem;
  cursor: pointer;
}
@media (max-width: 767px) {
  main .expo-container {
    margin-top: 3rem;
    right: 0rem;
    bottom: 8vh;
    left: 1rem;
  }
}
main .expo-container h2 {
  font-size: 1.2rem;
  font-family: "Anybody";
  font-variation-settings: "wght" 560, "wdth" 200;
  margin-bottom: 0.5rem;
  color: #ef3e3c;
}
main .expo-container p {
  line-height: 1.4;
  padding-right: 2rem;
  font-size: 0.9rem;
  font-weight: 600;
  line-height: 1.6;
}
@media (max-width: 767px) {
  main .expo-container p {
    padding-right: 0rem;
  }
}
main .expo-container p.expo-text {
  font-weight: 500;
  display: none;
}
main .expo-container svg {
  width: 4rem;
  height: 4rem;
  position: relative;
  top: -1.8rem;
  left: -2rem;
}
main .expo-container svg path {
  fill: #ef3e3c;
}
main .expo-container:hover h2 {
  font-variation-settings: "wght" 560, "wdth" 200;
}
main .projects-menu {
  position: absolute;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-template-rows: repeat(2, 1fr);
}
main .projects-menu .menu-item {
  position: relative;
  cursor: pointer;
}
main .projects-menu .menu-item h3 {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  font-size: 1.2rem;
  font-family: "Anybody";
  font-variation-settings: "wght" 360, "wdth" 200;
  -webkit-transition: all 0.3s ease-out;
  transition: all 0.3s ease-out;
  z-index: 2;
  opacity: 0;
  transition: all 0.3s ease-out;
}
main .projects-menu .menu-item h3:hover {
  font-variation-settings: "wght" 560, "wdth" 200;
  opacity: 1;
}
main .projects-menu .menu-item video {
  width: 100%;
  -o-object-fit: cover;
     object-fit: cover;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
  z-index: 0;
}
main .projects-menu .menu-item:after {
  content: "";
  display: block;
  position: absolute;
  top: 0;
  left: 0;
  width: 100.1%;
  height: 100%;
  background: rgba(0, 0, 0, 0);
  -webkit-transition: background-color 0.3s ease-out;
  transition: background-color 0.3s ease-out;
  z-index: 1;
}
main .projects-menu .menu-item:hover:after {
  background: rgba(0, 0, 0, 0.8);
}
main .trigger-container {
  position: fixed;
  bottom: 3rem;
  left: 3rem;
  z-index: 500;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  gap: 1rem;
}
@media (max-width: 767px) {
  main .trigger-container {
    bottom: 0rem;
    position: fixed;
    width: 100vw;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
    -webkit-box-pack: center;
        -ms-flex-pack: center;
            justify-content: center;
    background-color: rgba(8, 4, 16, 0.6);
    -webkit-backdrop-filter: blur(10px);
            backdrop-filter: blur(10px);
    left: 0;
    padding: 1rem;
  }
}
main .trigger-container .trigger button {
  -webkit-appearance: none;
     -moz-appearance: none;
          appearance: none;
  background: none;
  border: none;
  padding: 0;
  margin: 0;
  font: inherit;
  color: inherit;
  cursor: pointer;
  outline: none;
  font-size: 1rem;
  font-family: "Anybody";
  font-variation-settings: "wght" 460, "wdth" 150;
  -webkit-transition: font-variation-settings 0.3s ease-out;
  transition: font-variation-settings 0.3s ease-out;
  padding: 0.7rem 1rem 0.5rem;
  border-radius: 0.2rem;
  background: #0c1034;
  color: #ef3e3c;
  position: relative;
}
main .trigger-container .trigger:hover button {
  color: #edcedc;
}
main .trigger-container .trigger.active button {
  --after-content: "×";
  --after-font-size: 5rem;
  --after-top: -1.65rem;
  --after-right: 0.5rem;
  background: #ef3e3c;
  color: #0c1034;
  font-variation-settings: "wght" 560, "wdth" 150;
  padding-right: 2rem;
}
main .trigger-container .trigger.active button:after {
  content: var(--after-content);
  display: block;
  position: absolute;
  top: var(--after-top);
  right: var(--after-right);
  height: 100%;
  font-size: var(--after-font-size);
  font-family: "Anybody";
  font-variation-settings: "wght" 110;
  color: #0c1034;
}
main .project {
  margin-top: 15rem;
  margin-bottom: 8rem;
}
@media (max-width: 767px) {
  main .project {
    margin-top: 10rem;
    margin-bottom: 10rem;
  }
}
main .project h2 {
  font-size: 3rem;
  margin-bottom: 1rem;
  font-family: "Anybody";
  font-variation-settings: "wdth" 124, "wght" 560;
}
@media (max-width: 767px) {
  main .project h2 {
    font-size: 1rem;
  }
}
main .project p {
  font-size: 1.1rem;
  line-height: 1.6;
  max-width: 37rem;
  text-wrap: balance;
}
main .project a {
  font-family: "Anybody";
  font-variation-settings: "wght" 560, "wdth" 130;
  margin-top: 2rem;
  -webkit-transition: all 0.3s ease-out;
  transition: all 0.3s ease-out;
  display: inline-block;
}
@media (max-width: 767px) {
  main .project a {
    margin-top: 1rem;
  }
}
main .project a:hover {
  font-variation-settings: "wght" 460, "wdth" 150;
}
main .project em {
  font-style: italic;
}
main .collectif-container {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  margin-top: 10rem;
}
@media (max-width: 767px) {
  main .collectif-container {
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
        -ms-flex-direction: column;
            flex-direction: column;
  }
}
main .collectif-container .collectif-description {
  -webkit-box-flex: 1;
      -ms-flex: 1;
          flex: 1;
}
main .collectif-container .collectif-description p {
  font-size: 1.1rem;
  line-height: 1.6;
  max-width: 27rem;
  text-wrap: balance;
  padding-right: 2rem;
}
@media (max-width: 767px) {
  main .collectif-container .collectif-description p {
    margin-top: 7rem;
    margin-bottom: 4rem;
  }
}
main .collectif-container .collectif-description a.contact {
  font-family: "Anybody";
  font-variation-settings: "wght" 560, "wdth" 130;
  margin-top: 2rem;
  -webkit-transition: all 0.3s ease-out;
  transition: all 0.3s ease-out;
  display: inline-block;
  margin-top: 0;
}
@media (max-width: 767px) {
  main .collectif-container .collectif-description a.contact {
    margin-top: 1rem;
  }
}
main .collectif-container .collectif-description a.contact:hover {
  font-variation-settings: "wght" 460, "wdth" 150;
}
main .collectif-container .collectif-members {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-flex: 1;
      -ms-flex: 1;
          flex: 1;
  gap: 1rem;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  margin-bottom: 5rem;
}
@media (max-width: 767px) {
  main .collectif-container .collectif-members {
    margin-bottom: 10rem;
  }
}
main .collectif-container .collectif-members .collectif-member {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  gap: 1rem;
  -webkit-box-align: end;
      -ms-flex-align: end;
          align-items: flex-end;
}
main .collectif-container .collectif-members .collectif-member p.nom-complet {
  font-size: 1rem;
  color: #ef3e3c;
  font-variation-settings: "wght" 560;
}
main .collectif-container .collectif-members .collectif-member .affiliations {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  gap: 0.5rem;
}
main .collectif-container .collectif-members .collectif-member p.affiliation {
  font-size: 0.8rem;
  font-variation-settings: "wght" 360;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  gap: 0.5rem;
}
@media (max-width: 767px) {
  main .collectif-container .collectif-members .collectif-member {
    display: inline-block;
    margin-bottom: 0.8rem;
    line-height: 1.2;
  }
}

.language-triggers {
  position: fixed;
  top: 3rem;
  right: 3rem;
  z-index: 500;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  gap: 0.5rem;
}
@media (max-width: 767px) {
  .language-triggers {
    top: 6rem;
    right: 0;
    background-color: rgba(8, 4, 16, 0);
    -webkit-backdrop-filter: none;
            backdrop-filter: none;
    padding: 1rem;
    -webkit-box-pack: center;
        -ms-flex-pack: center;
            justify-content: center;
  }
}
.language-triggers button {
  -webkit-appearance: none;
     -moz-appearance: none;
          appearance: none;
  background: none;
  border: none;
  padding: 0;
  margin: 0;
  font: inherit;
  color: inherit;
  cursor: pointer;
  outline: none;
  font-size: 1rem;
  font-family: "Anybody";
  font-variation-settings: "wght" 360, "wdth" 80;
  -webkit-transition: font-variation-settings 0.3s ease-out;
  transition: font-variation-settings 0.3s ease-out;
  padding: 0.5rem 0rem;
  border-radius: 0.2rem;
  color: #edcedc;
  position: relative;
  opacity: 0.5;
}
.language-triggers button:hover {
  color: #edcedc;
  opacity: 1;
}
.language-triggers button.active {
  --after-content: "×";
  --after-font-size: 5rem;
  --after-top: -1.8rem;
  --after-right: 0.5rem;
  opacity: 1;
  font-variation-settings: "wght" 460, "wdth" 200;
}
.language-triggers button[data-lang=de] {
  display: none;
}

body.en .lang-en {
  display: block;
}
body.en .lang-fr {
  display: none;
}
body.en .lang-de {
  display: none;
}

body.de .lang-en {
  display: none;
}
body.de .lang-fr {
  display: none;
}
body.de .lang-de {
  display: block;
}

body.fr .lang-en {
  display: none;
}
body.fr .lang-fr {
  display: block;
}
body.fr .lang-de {
  display: none;
}

button span {
  pointer-events: none; /* Disable pointer events on spans */
}

@media (max-width: 1200px) {
  body:not(.home) .language-triggers,
  body:not(.home) .expo-container {
    display: none;
  }
}
body.collective .expo-container {
  display: none;
}

.loader-container {
  position: absolute;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  background-color: #0c1034;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
}
.loader-container .loader {
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background-color: #fff;
  -webkit-box-shadow: 32px 0 #fff, -32px 0 #fff;
          box-shadow: 32px 0 #fff, -32px 0 #fff;
  position: relative;
  -webkit-animation: flash 0.5s ease-out infinite alternate;
          animation: flash 0.5s ease-out infinite alternate;
}
@-webkit-keyframes flash {
  0% {
    background-color: rgba(255, 255, 255, 0.1333333333);
    -webkit-box-shadow: 32px 0 rgba(255, 255, 255, 0.1333333333), -32px 0 #fff;
            box-shadow: 32px 0 rgba(255, 255, 255, 0.1333333333), -32px 0 #fff;
  }
  50% {
    background-color: #fff;
    -webkit-box-shadow: 32px 0 rgba(255, 255, 255, 0.1333333333), -32px 0 rgba(255, 255, 255, 0.1333333333);
            box-shadow: 32px 0 rgba(255, 255, 255, 0.1333333333), -32px 0 rgba(255, 255, 255, 0.1333333333);
  }
  100% {
    background-color: rgba(255, 255, 255, 0.1333333333);
    -webkit-box-shadow: 32px 0 #fff, -32px 0 rgba(255, 255, 255, 0.1333333333);
            box-shadow: 32px 0 #fff, -32px 0 rgba(255, 255, 255, 0.1333333333);
  }
}
@keyframes flash {
  0% {
    background-color: rgba(255, 255, 255, 0.1333333333);
    -webkit-box-shadow: 32px 0 rgba(255, 255, 255, 0.1333333333), -32px 0 #fff;
            box-shadow: 32px 0 rgba(255, 255, 255, 0.1333333333), -32px 0 #fff;
  }
  50% {
    background-color: #fff;
    -webkit-box-shadow: 32px 0 rgba(255, 255, 255, 0.1333333333), -32px 0 rgba(255, 255, 255, 0.1333333333);
            box-shadow: 32px 0 rgba(255, 255, 255, 0.1333333333), -32px 0 rgba(255, 255, 255, 0.1333333333);
  }
  100% {
    background-color: rgba(255, 255, 255, 0.1333333333);
    -webkit-box-shadow: 32px 0 #fff, -32px 0 rgba(255, 255, 255, 0.1333333333);
            box-shadow: 32px 0 #fff, -32px 0 rgba(255, 255, 255, 0.1333333333);
  }
}

.projects-edito {
  display: none;
  visibility: hidden;
}

em {
  font-style: italic;
}

.bg-logo {
  z-index: 20;
  overflow: hidden;
}
.bg-image {
  z-index: 10;
}

.loader-container {
  z-index: 1000;
}

header {
  z-index: 300;
}

main {
  z-index: 300;
}
main .scene .projects-menu {
  z-index: 10;
}
main .scene .trigger-container {
  z-index: 100;
}
main .scene .expo-container {
  z-index: 100;
}
/*!******************************************************************************************************************************************************************************!*\
  !*** css ./node_modules/css-loader/dist/cjs.js!./node_modules/postcss-loader/dist/cjs.js!./node_modules/sass-loader/dist/cjs.js!./node_modules/splitting/dist/splitting.css ***!
  \******************************************************************************************************************************************************************************/
/* Recommended styles for Splitting */
.splitting .word,
.splitting .char {
  display: inline-block;
}

/* Psuedo-element chars */
.splitting .char {
  position: relative;
}

/**
 * Populate the psuedo elements with the character to allow for expanded effects
 * Set to `display: none` by default; just add `display: block` when you want
 * to use the psuedo elements
 */
.splitting .char::before,
.splitting .char::after {
  content: attr(data-char);
  position: absolute;
  top: 0;
  left: 0;
  visibility: hidden;
  -webkit-transition: inherit;
  transition: inherit;
  -webkit-user-select: none;
     -moz-user-select: none;
      -ms-user-select: none;
          user-select: none;
}

/* Expanded CSS Variables */
.splitting {
  /* The center word index */
  --word-center: calc((var(--word-total) - 1) / 2);
  /* The center character index */
  --char-center: calc((var(--char-total) - 1) / 2);
  /* The center character index */
  --line-center: calc((var(--line-total) - 1) / 2);
}

.splitting .word {
  /* Pecent (0-1) of the word's position */
  --word-percent: calc(var(--word-index) / var(--word-total));
  /* Pecent (0-1) of the line's position */
  --line-percent: calc(var(--line-index) / var(--line-total));
}

.splitting .char {
  /* Percent (0-1) of the char's position */
  --char-percent: calc(var(--char-index) / var(--char-total));
  /* Offset from center, positive & negative */
  --char-offset: calc(var(--char-index) - var(--char-center));
  /* Absolute distance from center, only positive */
  --distance: calc(
     (var(--char-offset) * var(--char-offset)) / var(--char-center)
  );
  /* Distance from center where -1 is the far left, 0 is center, 1 is far right */
  --distance-sine: calc(var(--char-offset) / var(--char-center));
  /* Distance from center where 1 is far left/far right, 0 is center */
  --distance-percent: calc((var(--distance) / var(--char-center)));
}
/*!************************************************************************************************************************************************************************************!*\
  !*** css ./node_modules/css-loader/dist/cjs.js!./node_modules/postcss-loader/dist/cjs.js!./node_modules/sass-loader/dist/cjs.js!./node_modules/splitting/dist/splitting-cells.css ***!
  \************************************************************************************************************************************************************************************/
.splitting.cells img {
  width: 100%;
  display: block;
}

@supports (display: grid) {
  .splitting.cells {
    position: relative;
    overflow: hidden;
    background-size: cover;
    visibility: hidden;
  }
  .splitting .cell-grid {
    background: inherit;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    display: grid;
    grid-template: repeat(var(--row-total), 1fr)/repeat(var(--col-total), 1fr);
  }
  .splitting .cell {
    background: inherit;
    position: relative;
    overflow: hidden;
  }
  .splitting .cell-inner {
    background: inherit;
    position: absolute;
    visibility: visible;
    /* Size to fit the whole container size */
    width: calc(100% * var(--col-total));
    height: calc(100% * var(--row-total));
    /* Position properly */
    left: calc(-100% * var(--col-index));
    top: calc(-100% * var(--row-index));
  }
  /* Helper variables for advanced effects */
  .splitting .cell {
    --center-x: calc((var(--col-total) - 1) / 2);
    --center-y: calc((var(--row-total) - 1) / 2);
    /* Offset from center, positive & negative */
    --offset-x: calc(var(--col-index) - var(--center-x));
    --offset-y: calc(var(--row-index) - var(--center-y));
    /* Absolute distance from center, only positive */
    --distance-x: calc( (var(--offset-x) * var(--offset-x)) / var(--center-x) );
    /* Absolute distance from center, only positive */
    --distance-y: calc( (var(--offset-y) * var(--offset-y)) / var(--center-y) );
  }
}