@charset "UTF-8";

@font-face {
  font-style: normal;
  font-weight: normal;
  font-family: 'Work Sans zzzz';
  src:
    url('../fonts/WorkSans-Medium.woff2') format('woff2'),
    url('../fonts/WorkSans-Medium.woff') format('woff');
}

html,
body {
  margin: 0;
  padding: 0;
  width: 100%;
  height: 100%;
}

body {
  font-family: 'Work Sans zzzz', sans-serif;
  overflow: hidden;
  cursor: none;
}

.custom-cursor {
  position: fixed;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background-color: #000;
  pointer-events: none;
  transform: translate(-50%, -50%);
  z-index: 9999;
}

.custom-cursor.black {
  background-color: #000 !important;
}

@media (orientation: portrait) {
  .custom-cursor {
    display: none;
  }
}

.section {
  display: none;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: #ecebe1;
  opacity: 1;
  filter: none;
  /* transform: scale(0); */
}


.section video {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: 0;
}

.section.is-ready {
  display: block;
}
.section.is-on {
  opacity: 1;
  filter: none;
  /* transform: scale(1); */
}

.section p {
  box-sizing: border-box;
  position: absolute;
  top: 50%;
  left: 50%;
  width: 100%;
  padding: 15rem 15rem;
  transform: translate3d(-50%, -50%, 0) scaleY(1.5);
  font-family: 'Cossette Text', sans-serif;
  font-size: 2rem;
  line-height: 1.5;
  color: rgb(232, 0, 0);
  text-decoration: underline;
  background-color: #ecebe1;
  display: flex;
  text-align: center;
  justify-content: center;
  align-items: center;
  line-height: 1.2;
  min-height: 100vh;
}



.section p2 {
  box-sizing: border-box;
  position: absolute;
  top: 50%;
  left: 50%;
  width: 100%;
  padding: 1em 1em;
  transform: translate3d(-50%, -50%, 0) scaleY(1.5);
  transform-origin: center;
  font-family: 'Cossette Text', sans-serif;
  font-size: 4.5rem;
  line-height: 1;
  color: rgb(232, 0, 0);
  text-decoration: underline;
  display: flex;
  text-align: center;
  justify-content: center;
  align-items: center;
  min-height: 100vh;
  z-index: 10;
}

.end .section {
  transform: scale(1);
}

/* ------- PANNEL 1 ------- */
    .pannel-1 p{
      font-size: 2rem;
      color: rgb(232, 0, 0);
    }

/* ------- PANNEL 2 ------- */
    .pannel-2 p{
      font-size: 2rem;
      color: rgb(232, 0, 0);
    }

/* ------- PANNEL 3 ------- */
    .pannel-3 p{
      font-size: 25rem;
      color: rgb(232, 0, 0);
    
    }

/* ------- PILL SECTIONS ------- */

.section p3 {
  box-sizing: border-box;
  position: fixed;
  font-family: 'Cossette Text', sans-serif;
  font-size: 1rem;
  line-height: 1.2;
  color: rgb(232, 0, 0);
 
  pointer-events: none;
  transform: translate(-50%, -50%) scaleY(1.5);
  white-space: nowrap;
  z-index: 0;
}

.section p4 {
  position: absolute;
  top: 50%;
  left: 50%;
  width: auto;
  max-width: calc(100% - 4rem);
  padding: 1em 1.5em;
  transform: translate3d(-50%, -50%, 0) scaleY(1.5);
  transform-origin: center;
  font-family: 'Cossette Text', sans-serif;
  font-size: 3.5rem;
  line-height: 1.5;
  color: rgb(232, 0, 0);
  text-decoration: underline;
  display: inline-flex;
  text-align: center;
  justify-content: center;
  align-items: center;
  line-height: 1.2;
  min-height: auto;
  z-index: 5;
}



.section.pill-section p4:hover {
  animation: shake 0.12s ease-in-out infinite;
}


.section p8 {
  position: absolute;
  top: 48%;
  left: 50%;
  width: auto;
  max-width: calc(100% - 4rem);
  padding: 1em 1.5em;
  transform: translate3d(-50%, -50%, 0) scaleY(1.5);
  transform-origin: center;
  font-family: 'Cossette Text', sans-serif;
  font-size: 9.5rem;
  line-height: 1.5;
  color: rgb(232, 0, 0);
  text-decoration: underline;
  display: inline-flex;
  text-align: center;
  justify-content: center;
  align-items: center;
  line-height: 1.2;
  min-height: auto;
  z-index: 5;
  white-space: normal;
}


.section.pill-section p8 {
  cursor: none;
}


.section.pill-section p8:hover {
  animation: shake 0.12s ease-in-out infinite;
}

@media (orientation: landscape) {
  .section.pill-section p8 {
    white-space: nowrap;
  }
}


.section.pill-section p3 {
  transition: top 0.25s ease, left 0.25s ease, transform 0.25s ease, opacity 0.25s ease;
}

.section.pill-section.gathering p3 {
  top: 50% !important;
  left: 50% !important;
  transform: translate(-50%, -50%) scale(0.65);
  opacity: 0.85;
}

@keyframes shake {
  0%, 100% { transform: translate3d(-50%, -50%, 0) scaleY(1.5); }
  10% { transform: translate3d(-50.4%, -50.2%, 0) scaleY(1.5); }
  25% { transform: translate3d(-49.6%, -50.6%, 0) scaleY(1.5); }
  40% { transform: translate3d(-50.8%, -49.8%, 0) scaleY(1.5); }
  55% { transform: translate3d(-49.8%, -50.4%, 0) scaleY(1.5); }
  70% { transform: translate3d(-50.2%, -49.6%, 0) scaleY(1.5); }
  85% { transform: translate3d(-49.6%, -50.2%, 0) scaleY(1.5); }
}

.section p5 {
  box-sizing: border-box;
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  margin: 0;
  padding: 0 1rem;
  display: flex;
  justify-content: center;
  align-items: center;
  font-family: 'Cossette Text', sans-serif;
  font-size: clamp(12rem, 16vw, 26rem);
  transform: scaleY(3);
  line-height: 0.9;
  text-align: center;
  color: rgb(232, 0, 0);
  white-space: nowrap;
  overflow: hidden;
  z-index: 10;
}

.section p6 {
  box-sizing: border-box;
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  margin: 0;
  padding: 0 1rem;
  display: flex;
  justify-content: center;
  align-items: center;
  font-family: 'Cossette Text', sans-serif;
  font-size: clamp(12rem, 16vw, 26rem);
  transform: scaleY(3);
  line-height: 0.9;
  text-align: center;
  color: rgb(0, 0, 0);
  background-color: rgb(232, 0, 0);
  white-space: nowrap;
  overflow: hidden;
  z-index: 10;
}

.section p7 {
  box-sizing: border-box;
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  margin: 0;
  padding: 0 1rem;
  display: flex;
  justify-content: center;
  align-items: center;
  font-family: 'Cossette Text', sans-serif;
  font-size: clamp(12rem, 16vw, 26rem);
  transform: scaleY(3);
  line-height: 0.9;
  text-align: center;
  color: rgb(232, 0, 0);
  background-color: rgb(0, 0, 0);
  white-space: nowrap;
  overflow: hidden;
  z-index: 10;
}

@media (max-width: 800px) {
  .section.pannel-3 p5 {
    white-space: normal;
    font-size: clamp(8rem, 18vw, 16rem);
    line-height: 1;
  }
}

@media (max-width: 800px) {
  .section.pannel-3 p6 {
    white-space: normal;
    font-size: clamp(8rem, 18vw, 16rem);
    line-height: 1;
  }
}

@media (max-width: 800px) {
  .section.pannel-3 p7 {
    white-space: normal;
    font-size: clamp(8rem, 18vw, 16rem);
    line-height: 1;
  }
}



.pill-pos-1 { top: 3%; left: 38%; }
.pill-pos-2 { top: 5%; left: 27%; }
.pill-pos-3 { top: 8%; left: 18%; }
.pill-pos-4 { top: 15%; left: 12%; }
.pill-pos-6 { top: 25%; left: 6%; }
.pill-pos-7 { top: 35%; left: 4%; }

.pill-pos-8 { top: 45%; left: 3%; }

.pill-pos-9 { top: 55%; left: 4%; }
.pill-pos-10 { top: 65%; left: 6%; }
.pill-pos-11 { top: 75%; left: 10%; }
.pill-pos-12 { top: 85%; left: 18%; }
.pill-pos-13 { top: 93%; left: 30%; }

.pill-pos-14 { top: 95%; left: 50%; }

.pill-pos-15 { top: 93%; left: 70%; }
.pill-pos-16 { top: 85%; left: 82%; }
.pill-pos-17 { top: 75%; left: 90%; }
.pill-pos-18 { top: 65%; left: 94%; }
.pill-pos-19 { top: 55%; left: 96%; }

.pill-pos-20 { top: 45%; left: 97%; }

.pill-pos-21 { top: 35%; left: 96%; }
.pill-pos-22 { top: 25%; left: 94%; }
.pill-pos-23 { top: 15%; left: 88%; }
.pill-pos-24 { top: 8%; left: 82%; }
.pill-pos-25 { top: 5%; left: 73%; }
.pill-pos-26 { top: 3%; left: 62%; }

.pill-pos-27 { top: 2%; left: 50%; }


/* Positions for PILL text rouge */
.pill1 { top: 3%; left: 38%; }
.pill2 { top: 5%; left: 27%; }
.pill3 { top: 8%; left: 18%; }
.pill4 { top: 15%; left: 12%; }
.pill6 { top: 25%; left: 6%; }
.pill7 { top: 35%; left: 4%; }

.pill8 { top: 45%; left: 3%; }

.pill9 { top: 55%; left: 4%; }
.pill10 { top: 65%; left: 6%; }
.pill11 { top: 75%; left: 10%; }
.pill12 { top: 85%; left: 18%; }
.pill13 { top: 93%; left: 30%; }

.pill14 { top: 95%; left: 50%; }

.pill15 { top: 93%; left: 70%; }
.pill16 { top: 85%; left: 82%; }
.pill17 { top: 75%; left: 90%; }
.pill18 { top: 65%; left: 94%; }
.pill19 { top: 55%; left: 96%; }

.pill20 { top: 45%; left: 97%; }

.pill21 { top: 35%; left: 96%; }
.pill22 { top: 25%; left: 94%; }
.pill23 { top: 15%; left: 88%; }
.pill24 { top: 8%; left: 82%; }
.pill25 { top: 5%; left: 73%; }
.pill26 { top: 3%; left: 62%; }

.pill27 { top: 2%; left: 50%; }

.section.pills-section-3 {
  background-color: rgb(232, 0, 0);
}

.section.pills-section-4 ~ .section {
  background-color: black;
}

.flash-image
{
  position: absolute;
  top: 50%;
  left: 52%;
  transform:  scaleX(1.2);
  max-width: 100%;
  max-height: 100%;
  z-index: 10;
   inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  
}

.flash-image-red
{
  position: absolute;
  top: 50%;
  left: 52%;
  background-color: rgb(232, 0, 0);
  transform: scaleX(1.2);
  max-width: 100%;
  max-height: 100%;
  z-index: 10;
   inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.flash-image-black
{
  position: absolute;
  top: 50%;
  left: 52%;
  background-color: rgb(0, 0, 0);
  transform: scaleX(1.2);
  max-width: 100%;
  max-height: 100%;
  z-index: 10;
   inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}



/* section fond rouge */


.section p10 {
  box-sizing: border-box;
  position: absolute;
  width: 100%;
  height: 100%;
  padding: 2rem 15rem;
  display: flex;
  justify-content: center;
  align-items: center;
  font-family: 'Cossette Text', sans-serif;
  font-size: 2rem;
  transform: scaleY(1.5);
  text-align: center;
  text-decoration: underline;
  color: rgb(0, 0, 0);
  background-color: rgb(232, 0, 0);
  white-space: normal;
  overflow: hidden;
  line-height: 1.2;
  min-height: 100vh;
  z-index: 10;
}



.section p11 {
  box-sizing: border-box;
  position: absolute;
  inset: 0;
    top: 50%;
  left: 50%;
  width: 100%;
  height: 100%;
  margin: 0;
  padding: 15rem 15rem;
  font-family: 'Cossette Text', sans-serif;
  font-size: 4.5rem;
  transform: translate3d(-50%, -50%, 0) scaleY(1.5);
  transform-origin: center;
  line-height: 1.5;
  text-align: center;
  text-decoration: underline;
  display: flex;
  text-align: center;
  justify-content: center;
  align-items: center;
  color: rgb(0, 0, 0);
  background-color: rgb(232, 0, 0);
  white-space: normal;
  overflow: hidden;
  line-height: 1.2;
  min-height: 100vh;
  z-index: 10;
}


/*  PILL fond  rouge */

.section p12 {
  box-sizing: border-box;
  position: fixed;
  font-family: 'Cossette Text', sans-serif;
  font-size: 1rem;
  line-height: 1.2;
  color: rgb(0, 0, 0);
  background-color: rgb(232, 0, 0);
  pointer-events: none;
  transform: translate(-50%, -50%) scaleY(1.5);
  white-space: nowrap;
  z-index: 0;
}

.section.pill-section p12 {
  transition: top 0.25s ease, left 0.25s ease, transform 0.25s ease, opacity 0.25s ease;
}

.section.pill-section.gathering p12 {
  top: 50% !important;
  left: 50% !important;
  transform: translate(-50%, -50%) scale(0.65);
  opacity: 0.85;
}


.section p13 {
  position: absolute;
  top: 48%;
  left: 50%;
  width: auto;
  max-width: calc(100% - 4rem);
  padding: 1em 1.5em;
  transform: translate3d(-50%, -50%, 0) scaleY(1.5);
  transform-origin: center;
  font-family: 'Cossette Text', sans-serif;
  font-size: 9.5rem;
  line-height: 1.5;
  color: rgb(0, 0, 0);
  text-decoration: underline;
  display: inline-flex;
  text-align: center;
  justify-content: center;
  align-items: center;
  line-height: 1.2;
  min-height: auto;
  z-index: 5;
  white-space: normal;
}



.section.pill-section p13 {
  cursor: none;
}

.section.pill-section p13:hover {
  animation: shake 0.12s ease-in-out infinite;
}

@media (orientation: landscape) {
  .section.pill-section p13 {
    white-space: nowrap;
  }
}




/* section fond noir */

.section p15 {
  box-sizing: border-box;
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  margin: 0;
  padding: 15rem 15rem;
  display: flex;
  justify-content: center;
  align-items: center;
  font-family: 'Cossette Text', sans-serif;
  font-size: 2rem;
  transform: scaleY(1.5);
  line-height: 0.9;
  text-align: center;
  text-decoration: underline;
  color: rgb(232, 0, 0);
  background-color: rgb(0, 0, 0);
  white-space: normal;
  overflow: hidden;
  line-height: 1.2;
  min-height: 100vh;
  z-index: 10;
}

.section p16 {
  box-sizing: border-box;
  position: absolute;
  inset: 0;
    top: 50%;
  left: 50%;
  width: 100%;
  height: 100%;
  margin: 0;
  padding: 15rem 15rem;
  font-family: 'Cossette Text', sans-serif;
  font-size: 4.5rem;
  transform: translate3d(-50%, -50%, 0) scaleY(1.5);
  transform-origin: center;
  line-height: 1.5;
  text-align: center;
  text-decoration: underline;
  display: flex;
  text-align: center;
  justify-content: center;
  align-items: center;
  color: rgb(232, 0, 0);
  background-color: rgb(0, 0, 0);
  white-space: normal;
  overflow: hidden;
  line-height: 1.2;
  min-height: 100vh;
  z-index: 10;
}

.section p17 {
  box-sizing: border-box;
  position: absolute;
  inset: 0;
    top: 50%;
  left: 50%;
  width: 100%;
  height: 100%;
  margin: 0;
  padding: 1em 1em;
  font-family: 'Cossette Text', sans-serif;
  font-size: 4.5rem;
  transform: translate3d(-50%, -50%, 0) scaleY(1.5);
  transform-origin: center;
  line-height: 1.5;
  text-align: center;
  display: flex;
  text-align: center;
  justify-content: center;
  align-items: center;
  color: rgb(232, 0, 0);
  background-color: rgb(0, 0, 0);
  white-space: nowrap;
  overflow: hidden;
  line-height: 1.2;
  min-height: 100vh;
  z-index: 10;
}

@media (orientation: portrait) {
  .section p,
  .section p2,
  .section p10,
  .section p15 
  .end .section {
    width: 100%;
    max-width: 100%;
    white-space: normal;
    line-height: 1.2;
    padding: 2rem 2rem;
    overflow-wrap: break-word;
  }

  .section p {
    font-size: 1.5rem;
  }

  .section p2 {
    font-size: 3.5rem;
        line-height: 1;

  }

  .section p10,
  .section p15 {
    font-size: 1.5rem;
    padding: 2rem 2rem;
    overflow-wrap: break-word;
  }

  .section p13 {
    font-size: 6.5rem;
    line-height: 1;
  }

  .section p11,
  .section p16 {
    font-size: 3.4rem;
    white-space: normal;
    width: 100%;
    max-width: 100%;
    left: 0;
    top: 0;
    transform: scaleY(1.5);
    padding: 1.5rem 0.75rem;
    min-height: 100vh;
    height: auto;
    line-height: 1;
    overflow-wrap: break-word;
    text-align: center;
  }



}