/* FONT */

@font-face {
  font-family: "NeueHaas";
  src: url("../font/NeueHaasDisplayRoman.ttf") format("truetype");
  font-weight: bold;
  font-style: normal;
}
@font-face {
  font-family: "NeueCondensed";
  src: url("../font/HelveticaNeueLTStd-Cn.otf") format("opentype");
  font-weight: bold;
  font-style: normal;
}

* {
  -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
  -webkit-tap-highlight-color: transparent;
  -webkit-user-select: none;
  -khtml-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
  touch-action: manipulation;
}

/* GENERAL */
::-webkit-scrollbar {
  display: none;
}

/* .magazine {
  overflow-x: hidden;
} */

.menu > div {
  text-transform: uppercase;
  height: 1.75rem;
  width: 7.5rem;
}
.menu > div:hover {
  cursor: pointer;
  opacity: 0.6;
}
.menu {
  position: sticky;
  background-color: #ddddddc0;
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  display: flex;
  height: 1.75rem;
  width: auto;
  top: 1.25rem;
  transform: translateX(-50%);
  display: flex;
  justify-content: space-evenly;
  left: 50%;
  align-items: center;
  z-index: 9999999999;
  opacity: 0;
}
.selector {
  position: absolute;
  background-color: #f086b7;
  height: 2px;
  left: 0%;
  bottom: 0;
  width: 50%;
  transition: 0.3s ease;
}
.magazine-wrapper::-webkit-scrollbar {
  display: none;
}

:root {
  --spacing: 1px;
  --sizeTitle: 14px;
  --transi: all 444ms cubic-bezier(0.43, 0, 0, 1.01);
}
body {
  -ms-overflow-style: none;
  scrollbar-width: none;
  font-family: NeueHaas;
  -webkit-font-smoothing: antialiased;
  font-size: var(--sizeTitle);
  letter-spacing: var(--spacing);
  -webkit-backface-visibility: hidden;
  -moz-backface-visibility: hidden;
  -webkit-transform: translate3d(0, 0, 0);
  -moz-transform: translate3d(0, 0, 0);
  width: 100%;
}

.buy-button,
.link-to-buy {
  color: black;
}
h2 {
  letter-spacing: var(--spacing);
  text-transform: uppercase;
}

.shopify-buy__product__variant-selectors {
  display: none !important;
}

.product > .shopify-buy-frame {
  display: none;
}

.magazine-wrapper {
  display: flex;
  flex-direction: column;
  width: 100%;
  /* overflow-x: hidden; */
}
.magazine section {
  display: flex;
  flex-direction: column;
  align-items: center;
  position: relative;
  background: white;
  width: 100%;
}
.covers,
.images,
.about {
  flex: 1; /* Chaque section s'adapte en taille selon son contenu */
}

.covers-wrapper img:hover {
  cursor: pointer;
}
.covers-wrapper {
  width: 95%;
  margin-bottom: 5rem;
  height: 100vh;
}
.covers-wrapper,
.images {
  display: flex;
  justify-content: center;
  gap: 1px;
  flex-direction: row;
}
.covers {
  height: 96vh;
  justify-content: center;
  background-color: #f8f8f869 !important;
  opacity: 0;
}

.covers-wrapper img.active {
  width: 27.5% !important;
}
.covers-wrapper img,
.images img {
  object-fit: contain;
  width: 5%;
  transition: width 0.666s;
  transition-timing-function: var(--transi);
}
.mag-img-wrapper img {
  width: 5%;
  transition: width 0.666s;
  transition-timing-function: var(--transi);
  cursor: pointer;
}
.mag-img-wrapper img:hover {
  cursor: pointer;
}
.mag-img-wrapper img.active {
  width: 95% !important;
}
.mag-img-wrapper {
  display: flex;
  align-items: center;
  flex-direction: column;
  margin-top: -15vh;
  margin-bottom: 3rem;
  opacity: 0;
  transition: 0.666s;
  transition-timing-function: var(--transi);
}
.about {
  opacity: 0;
}
.about p {
  margin: 0;
}
.text-container p.has-em {
  margin-top: 2rem;
  font-size: 0.55rem;
  margin-bottom: 0.5rem;
}

.text-container p.has-em.first-em {
  margin-bottom: 0.5rem;
  margin-top: 1.1rem;
}

/* .chapter-title:first-child {
  padding-left: calc(50vw - 70px);
}
.chapter-title:last-child {
  padding-right: calc(50vw - 80px);
} */
.text-container p > sup {
  vertical-align: 0%;
  font-size: 80%;
  margin-left: 3.5px;
  letter-spacing: 0.5px;
  position: absolute;
}
.text-container p > a:hover {
  opacity: 0.3;
}
.chapter-title {
  padding: 0 10px;
  cursor: pointer;
  color: rgb(255, 255, 255);
  opacity: 0.1;
  display: flex;
  flex-direction: column;
  transition: 0.5s ease;
  transition-timing-function: cubic-bezier(0.36, 0.07, 0.19, 0.97);
}
.credit-1 {
  text-indent: 1rem;
}
.credit-2 {
  text-indent: 2.5rem;
}
.chapter-title.active {
  opacity: 1;
}

.chapter-titles {
  /* scroll-behavior: smooth;  */
  /* transition: 0.6s ease-in-out;
  transition-timing-function: cubic-bezier(0.36, 0.07, 0.19, 0.97); */
  pointer-events: none;
  text-transform: uppercase;
  height: 2rem;
  position: sticky;
  top: 100%;
  font-size: 0.75rem;
  letter-spacing: 0.5px;
  transform: translateX(0px) translateY(-52.5vh);
  opacity: 0;
  width: 100%;
  z-index: 1000;
  display: flex;
  justify-content: left;
  overflow-x: hidden;
  white-space: nowrap;
  mix-blend-mode: difference;
  margin-bottom: 2vh;
}
.title-mag {
  margin-top: 1.5rem;
}

.chapter {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 100%;
  justify-content: center;
}

sup {
  vertical-align: super;
  font-size: 65%;
  letter-spacing: 0.5px;
}

nav {
  position: absolute;
  bottom: 1.5rem;
  display: flex;
  gap: 1px;
}
.link-to-buy {
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  background-color: black;
  color: white;
}

.images {
}
.info-buy {
  position: absolute;
  bottom: calc(3.5rem + 1px);
  height: 2rem;
  justify-content: space-around;
  align-items: center;
  display: flex;
  gap: 2px;
  width: 30rem;
  background-color: #f7f7f7;
}
.keychain-wrapper {
  position: absolute;
  bottom: calc(3.5rem + 1px);
  height: 2rem;
  justify-content: space-around;
  align-items: center;
  display: flex;
  gap: 1px;
  width: 30rem;
  transition: 666ms ease;
}
.fullscreen-wrapper {
  position: absolute;
  top: 1rem;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: rgb(255 255 255 / 80%);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 1000;
  width: 100%;
  height: 100%;
  cursor: pointer;
}

.fullscreen-wrapper img {
  height: 100%;
  opacity: 0.85;
}

.slide-top {
  bottom: calc(5.5rem + 2px) !important;
}
.keychain-wrapper div {
  background-color: #f7f7f7;
  height: 2rem;
  display: flex;
  align-items: center;
  justify-content: center;
}
.keychain-wrapper div:nth-child(1) {
  width: 20rem;
}
.keychain-wrapper div:nth-child(2) {
  width: 10rem;
  background-color: #f086b7;
}
.keychain-wrapper div:nth-child(2) a {
  color: white;
}

nav > div {
  display: flex;
  height: 2rem;
  gap: 1px;
  width: 10rem;
  justify-content: center;
  align-items: center;
}

.secondary-product:hover {
  opacity: 0.3;
  cursor: pointer;
}
.choose-cover,
.buy-button {
  background-color: #f7f7f7;
}
.buy-button-keychain.disabled {
  background-color: #f7f7f7 !important;
}
.buy-button-keychain.disabled a {
  color: #b3b3b3 !important;
}

.secondary-product img {
  margin-left: 0.5rem;
  height: 80%;
}
.incrementor > div {
  display: flex;
  flex: 1;
  height: 2rem;
  justify-content: center;
  align-items: center;
  background-color: #f7f7f7;
}
.choose-cover {
  display: inline;
  height: 2rem;
  width: 10rem;
  overflow: hidden;
}
.choose-cover div {
  text-transform: uppercase;
  height: 2rem;
  display: flex;
  justify-content: center;
  align-items: center;
  transition: transform 0.5s ease;
}

a {
  color: black;
  text-decoration: none;
}

.choose-cover:hover,
.buy-button:hover {
  background-color: #ebebeb;
  cursor: pointer;
}
.incrementor > div:hover {
  background-color: #ebebeb;
  cursor: pointer;
}

.wrapper-logo {
  width: 98%;
  position: sticky;
  opacity: 0;
  /* top: calc(99.75vh - 23vw); */
  pointer-events: none;
  will-change: transform;
  z-index: 300;
  top: calc(50% - 15vw);
  transition: 0.9s;
  transition-timing-function: var(--transi);
}
.translate-bottom {
  top: calc(100vh - 23vw) !important;
}
.lazyload {
  -webkit-filter: blur(2px);
  filter: blur(2px);
  transition: 1s ease;
  /* -webkit-transform: scale(1.1);
  -ms-transform: scale(1.1);
  transform: scale(1.1); */
}

.lazyloading {
  /* -webkit-filter: blur(30px);
  filter: blur(30px); */
  -webkit-filter: blur(0px);
  filter: blur(0px);
  transition: 1s ease;
  /* -webkit-transform: scale(1.1);
  -ms-transform: scale(1.1);
  transform: scale(1.1); */
}

.cta-buy {
  position: sticky;
  position: -webkit-sticky;
  /* mix-blend-mode: difference; */
  opacity: 0;
  white-space: nowrap;
  left: 50%;
  top: 2%;
  transform: translate(-50%, -5%);
  background-color: #7e7e7e47;
  color: #fbfbfb;
  padding: 5px 10px;
  z-index: 2;
  -webkit-backdrop-filter: blur(5px) saturate(5);
  backdrop-filter: blur(5px) saturate(5);
  cursor: pointer;
  margin-bottom: 1rem;
  display: none;
}
.cta-buy:hover {
  color: grey;
}

@keyframes shake {
  0%,
  100% {
    transform: translateX(0);
  }
  10%,
  30%,
  50%,
  70%,
  90% {
    transform: translateX(-1.5px);
  }
  20%,
  40%,
  60%,
  80% {
    transform: translateX(1.5px);
  }
}

.image-grow {
  /* width: 15% !important; */
}

.shake {
  animation: shake 0.5s cubic-bezier(0.36, 0.07, 0.19, 0.97) both;
  transform: translate3d(0, 0, 0);
  backface-visibility: hidden;
  perspective: 1000px;
}
@keyframes grow {
  0%,
  100% {
    width: 5%;
  }
  50% {
    width: 6%;
  }
}

.grow {
  animation: grow 0.8s cubic-bezier(0.36, 0.07, 0.19, 0.97) both;
}

.text-container {
  /* font-family: NeueCondensed; */
  pointer-events: auto;
  text-align: center;
  position: relative;
  top: -1vh;
  line-height: 1.1rem;
  width: 35%;
  font-size: 0.75rem;
  text-transform: uppercase;
}
img {
  -webkit-user-select: none;
  -khtml-user-select: none;
  -moz-user-select: none;
  -o-user-select: none;
  user-select: none;
}
.logo-sticky {
  /* position: sticky;
  position: -webkit-sticky; */
  white-space: nowrap;
  left: 50%;
  width: 100%;
  pointer-events: none !important;
  /* top: calc(99.75vh - 23vw); */
  -webkit-mask-position-y: center;
  padding: 5px 0px;
  z-index: 1;
  -webkit-backdrop-filter: blur(15px) saturate(3.5);
  backdrop-filter: blur(15px) saturate(3.5);
  -webkit-mask-repeat: initial;
  -webkit-mask-size: 100% 125%;
  mask-repeat: initial;
  mask-size: 100% 125%;
  background-color: #f6f5f5db;
  mask-image: url("../img/vector2.svg");
}

.logo-sticky svg {
  width: 100%;
  visibility: hidden;
}
.logo-sticky-2 svg {
  visibility: hidden;
}

.disabled a {
  color: #b3b3b3;
  background-color: #f7f7f7;
}
.value {
  pointer-events: none;
}
.disabled div {
  color: #b3b3b3;
}
.logo-sticky-2 {
  /* position: sticky;
  position: -webkit-sticky; */
  position: absolute;
  white-space: nowrap;
  left: 0%;
  width: 100%;
  top: 0;
  pointer-events: none !important;
  /* top: calc(99.75vh - 23vw); */
  -webkit-mask-position-y: center;
  padding: 5px 0px;
  z-index: 1;
  -webkit-backdrop-filter: blur(15px) saturate(3.5);
  backdrop-filter: blur(15px) saturate(3.5);
  -webkit-mask-repeat: initial;
  -webkit-mask-size: 100% 125%;
  mask-repeat: initial;
  mask-size: 100% 125%;
  background-color: #f6f5f512;
  mask-image: url("../img/vector2.svg");
}