@font-face {
     font-family: BigCalson;
     src: url('./fonts/BigCaslon/Big-Caslon-Medium.ttf');
}

@font-face {
     font-family: GothamLight;
     src: url('./fonts/Gotham/GothamLight.ttf');
}

@font-face {
     font-family: GothamMedium;
     src: url('./fonts/Gotham/GothamMedium.ttf');
}

@font-face {
     font-family: GothamBlack;
     src: url('./fonts/Gotham/Gotham-Black.otf');
}

@font-face {
     font-family: GothamBold;
     src: url('./fonts/Gotham/Gotham-Bold.otf');
}

@font-face {
     font-family: GothamThin;
     src: url('./fonts/Gotham/Gotham-Thin.otf');
}

@font-face {
     font-family: GothamThinItalic;
     src: url('./fonts/Gotham/Gotham-ThinItalic.otf');
}

@font-face {
     font-family: GothamUltraItalic;
     src: url('./fonts/Gotham/Gotham-UltraItalic.otf');
}

* {
     padding: 0;
     margin: 0;
     box-sizing: border-box;
     font-family: BigCalson;
     color: black;
     -webkit-touch-callout: none;
     -webkit-user-select: none;
     -khtml-user-select: none;
     -moz-user-select: none;
     -ms-user-select: none;
     user-select: none;
}

body {
     width: 100svw;
     height: 100svh;
     overflow: hidden;
}

.panel {
     width: 100%;
     height: 100%;
     position: absolute;
}

.enter-shop {
     z-index: 2;
     overflow: hidden;
}

.choose-gender {
     z-index: 1;
}

.see-products {
     z-index: 0;
     display: flex;
     justify-content: center;
     align-items: center;
}

.see-products .content img {
     pointer-events: none;
}

img.bg {
     width: 100%; 
     height: 100%;
     object-fit: cover;
     position: absolute;
     z-index: -1;
     transform: scale(1);
     opacity: 1;
     pointer-events: none;
}

.discover {
     display: flex;
     flex-direction: column;
     justify-content: end;
     align-items: center;
     width: 50%;
     height: 30%;
     position: absolute;
     bottom: 8%;
     left: 25%;
     max-height: 200px;
}

.discover span {
     text-transform: uppercase;
     font-size: 1.2rem;
}

.rounded-button {
     /* width: 25%; */
     height: 25%;
     margin-top: 5%;
     filter: brightness(0%), invert(0%);
     transform: scale(1);
     image-rendering: -moz-crisp-edges;          /* Firefox */
     image-rendering:   -o-crisp-edges;          /* Opera   */
     image-rendering: -webkit-optimize-contrast; /* Webkit  */
     image-rendering: crisp-edges;
     -ms-interpolation-mode: nearest-neighbor;   /* IE      */
     will-change: transform;
     transition: filter 0.2s linear;
     cursor: pointer;
}

.rounded-button.large {
     height: 35%;
}

.discover img:hover {
     filter: invert(100%);
}

.pulse {
     animation: pulsing 2s ease-in-out 0s infinite;
}

@keyframes pulsing {
     0% {transform: scale(1)  }
     50% { transform: scale(1.4) }
     80%, 100% { transform: scale(1) }
}

.zoom-out {
     animation: zoom-out 1s ease-in-out 0s normal forwards;
}

@keyframes zoom-out {
     0% {
          transform: scale(1);
          opacity: 1;
      }
     99% { 
          transform: scale(2);
          opacity: 0;
     }
     100% { 
          transform: scale(1);
          opacity: 0;
          pointer-events: none;
     }
}

.zoom-in {
     animation: zoom-in 1s ease-in-out 0s normal;
}

@keyframes zoom-in {
     0% {
          transform: scale(2);
          opacity: 0;
      }
     100% { 
          transform: scale(1);
          opacity: 1;
     }
}

.choose-gender .gender {
     display: flex;
     flex-direction: column;
     justify-content: end;
     align-items: center;
     width: 50%;
     height: 30%;
     position: absolute;
     bottom: 10%;
}

.choose-gender .gender span {
     text-transform: uppercase;
     text-shadow: 1px 1px 4px #0009;
     color: white;
}

.choose-gender .gender.male {
     left: 0%;
}

.choose-gender .gender.female {
     right: 0%;
}

.choose-gender .gender.female .pulse {
     animation-delay: 1s;
}

.see-products.male {
     --theme-bg-color:#576B6A;
     --theme-return-btn-color:#566A69;
     --theme-border-color:#506463;
     --theme-big-font-color: #576B6A;
     --theme-panel-bg-color: #EDFAF5;
}

.see-products.female {
     --theme-bg-color:#D7AFAF;
     --theme-return-btn-color:#D6AEAE;
     --theme-border-color:#865C5C;
     --theme-big-font-color: #885D5E;
     --theme-panel-bg-color: #F9ECEF;
}

.see-products .content {
     width: 78%;
     height: 90%;
     background-color: var(--theme-panel-bg-color);
     border: 3px solid var(--theme-border-color);
     position: relative;
     overflow: hidden;
     max-width: 450px;
}

.see-products .bg {
     z-index: 0;
     pointer-events: all;
}

.see-products .bg.blured {
     opacity: 0;
     transition: opacity 0.45s linear;
}

.see-products .touch-hand {
     width: 10%;
     height: 10%;
     max-height: 150px;
     object-fit: contain;
     position: absolute;
     top: 45%;
     left: auto;
     z-index: 0;
     margin-right: 20%;
     animation: touch-pulse 2.4s ease-in-out 0s infinite;
}

@keyframes touch-pulse {
     0% {transform: scale(1)  }
     25% { transform: scale(1.4) }
     50%, 100% { transform: scale(1) }
}

.see-products .back-to-gender-selection {
     position: absolute;
     top: 3%;
     right: 5%;
     height: 1.5vh;
     aspect-ratio: 1/1;
     object-fit: contain;
     z-index: 1;
     cursor: pointer;
}

.see-products .back-to-gender-selection path {
     fill: var(--theme-return-btn-color);
}

.see-products .arrow {
     position: absolute;
     width: 8%;
     height: 100%;
     object-fit: contain;
     cursor: pointer;
}

.see-products .arrow > * {
     color: var(--theme-bg-color);
}

.see-products .next-arrow {
     right: 0%;
}

.see-products .previous-arrow {
     left: 0%;
     transform: rotateZ(180deg);
}

.see-products .content .content-container {
     width: 100%;
     height: 100%;
     position: absolute;
     /* top: 5%;
     left: 5%; */
     z-index: -1;
     overflow: hidden;
}

.see-products .content .content-container .scroll-container {
     width: 600%;
     height: 100%;
     display: grid;
     grid-template-columns: repeat(6, 1fr);
     position: absolute;
     transition: left 0.55s ease-in-out;
}

.see-products .content .content-container .scroll-container > div {
     width: 100%;
     max-height: 90svh;
     display: flex;
     flex-direction: column;
     justify-content: space-around;
     align-items: center;
     transform: scale(1);
     position: relative;
     /* padding-left: 5%; */
     padding-top: 0%;
}

.see-products .content .content-container .scroll-container .product-detail {
     width: 95%;
     height: 100%;
     display: flex;
     flex-direction: column;
     justify-content: space-evenly;
     align-items: center;
     transform: scale(1);
     position: relative;
     padding-left: 5%;
     padding-top: 3%;
}

.see-products .content .content-container .scroll-container .ingredients-detail,
.see-products .content .content-container .scroll-container .kerastase-game-container {
     width: 100%;
     height: 100%;
     padding-left: 0%;
     padding-top: 0%;
}

/* .see-products .content .all-products {
     width: 80%;
     height: 95%;
     display: flex;
     flex-direction: column;
     justify-content: space-between;
     align-items: center;
     position: absolute;
     top: 2.5%;
     left: 10%;
     transform: scale(1);
} */

/* .see-products .content .product-detail, .see-products .content .ingredients-detail {
     width: 85%;
     height: 95%;
     display: flex;
     flex-direction: column;
     justify-content: space-around;
     align-items: center;
     position: absolute;
     left: 7.5%;
     top: 2.5%;
     opacity: 1;
} */

/* .see-products .content .ingredients-detail {
     width: 120%;
     height: 110%;
     left: -10%;
     top: -5%;
} */

.see-products .content .ingredients-detail img {
     width: 100%;
     height: 100%;
     object-fit: cover;
}

.see-products .content.show {
     animation: show-all-products 0.6s ease-in-out 0s forwards;
}

@keyframes show-all-products {
     0% {
          transform: scale(0);
     }
     60% {
          transform: scale(1);
     }
     80% {
          transform: scale(0.8);
     }
     100% {
          transform: scale(1);
     }
}

.see-products .content .all-products .title {
     color:  var(--theme-big-font-color);
     text-transform: uppercase;
     font-size: 1.35rem;
     white-space: pre;
}

.see-products .content .all-products .products {
     width: 100%;
     height: 85%;
     display: flex;
     flex-direction: column;
     justify-content: space-evenly;
}

.see-products .content .all-products .products .product {
     display: flex;
     flex: 1;
     flex-direction: column;
     margin-bottom: 8%;
}

.see-products .content .all-products .products .container {
     display: flex;
     flex-direction: column;
     justify-content: space-between;
     align-items: center;
}

.see-products .content .all-products .products .container .sub-title-sticker {
     text-transform: uppercase;
     color: white;
     background-color: var(--theme-bg-color);
     width: 60%;
     text-align: center;
     padding: 1%;
}

.see-products .content .all-products .products .container .sub-title {
     text-transform: uppercase;
     font-family: GothamMedium;
     font-size: 0.75rem;
     margin-top: 3%;
     flex: 1;
     line-height: 1.1rem;
     display: flex;
     justify-content: center;
     align-items: center;
}

.see-products .content .all-products .products .product-image {
     position: relative;
     flex: 2;
     height: 90%;
}

.see-products .content .all-products .products .product-image span {
     position: absolute;
     width: 100%;
     height: 100%;
     font-size: 25vh;
     font-family: GothamMedium;
     color: var(--theme-big-number-color);
     top: 0%;
     left: -35%;
     transform: scaleX(0.8) translateY(20%);
     display: flex;
     justify-content: center;
     align-items: start;
     z-index: -1;
     line-height: 1;
}

.see-products .content .all-products .products .product-image img {
     position: absolute;
     height: 100%;
     width: 100%;
     top: 0;
     right: 0;
     object-fit: contain;
}

.see-products .content .content-container.swap-previous {
     animation: swap-product-previous 1.4s ease-in-out forwards;
}

.see-products .content .content-container.swap-next {
     animation: swap-product-next 1.4s ease-in-out forwards;
}

@keyframes swap-product-next {
     0% {
          left: 5%;
          opacity: 1;
     }
     49% {
          left: -120%;
          opacity: 1;
     }
     50% {
          opacity: 0;
     }
     51% {
          left: 120%;
          opacity: 0;
     }
     100% {
          left: 5%;
          opacity: 1;
     }
}

@keyframes swap-product-previous {
     0% {
          left: 5%;
          opacity: 1;
     }
     49% {
          left: 120%;
          opacity: 1;
     }
     50% {
          opacity: 0;
     }
     51% {
          left: -120%;
          opacity: 0;
     }
     100% {
          left: 5%;
          opacity: 1;
     }
}

.see-products .content .product-detail.first-swap > * {
     opacity: 0;
}

.see-products .content .product-detail .header {
     display: flex;
     flex-direction: column;
     justify-content: space-between;
     align-items: center;
     width: 100%;
     height: 35%;
}

.see-products .content .product-detail .header .title-sticker {
     color: var(--theme-big-font-color);
     text-transform: uppercase;
     font-size: 1.2rem;
     text-align: center;
}

.see-products .content .ingredients-detail .header {
     color: var(--theme-big-font-color);
     text-transform: uppercase;
     font-size: 1.2rem;
     text-align: center;
     margin-top: 5%;
}

.see-products .content .product-detail .sub-title {
     text-transform: uppercase;
     color: white;
     background-color: var(--theme-bg-color);
     width: 80%;
     height: 3.5vh;
     text-align: center;
     font-size: 0.75rem;
     white-space: pre;
     margin-bottom: 5%;
     display: flex;
     justify-content: center;
     align-items: center;
}

.see-products .content .product-detail .header img {
     height: 65%;
     width: 70%;
     object-fit: contain;
}

.see-products .content .product-detail .product-description, 
.see-products .content .product-detail .benefits-description, 
.see-products .content .product-detail .ingredients-content .ingredients {
     font-family: GothamMedium;
     font-size: 0.65rem;
     text-align: center;
     line-height: 0.9rem;
}

.see-products .content .product-detail .product-description-content,
.see-products .content .product-detail .benefits-content,
.see-products .content .product-detail .ingredients-content
{
     width: 90%;
     display: flex;
     flex-direction: column;
     justify-content: space-between;
     align-items: center;
}

/* .see-products .content .kerastase-game-container {
     width: 115%;
     height: 115%;
     position: absolute;
     top: -9%;
     left: -10%;
} */

.see-products .content .kerastase-game-container img {
     width: 100%;
     height: 100%;
     object-fit: cover;
     pointer-events: none;
}

.see-products .content .kerastase-game-container .play-button {
     position: absolute;
     z-index: 1;
     bottom: 3%;
     left: 27.5%;
     width: 45%;
     height: 10%;
     background-image: url('./assets/CTA.png');
     background-size: contain;
     background-repeat: no-repeat;
     background-position-y: bottom;
     cursor: pointer;
}

/* @keyframes play-button-idle {
     0% {
          border: 4px solid #FFF;;
     }
     50% {
          border: 4px solid #ECC55E;;
     }
     100% {
          border: 4px solid #FFF;;
     }
} */

.clickable-area[area="perfumes"] {
     position: absolute;
     width: 35%;
     height: 70%;
     bottom: 0;
     cursor: pointer;
}

@media only screen and (max-width: 600px)  {
     .enter-shop .bg {
          transform: scale(1.7);
     }

     .touch-hand {
          left: 30% !important;
          margin-right: auto !important;
     }

     .clickable-area[area="perfumes"] {
          width: 80%;
     }
}

@media only screen and (max-height: 800px)  {
     .see-products .content .all-products .products .product {
          margin-bottom: 4%;
     }

     .see-products .content .all-products .products .container .sub-title-sticker {
          font-size: 0.8rem;
     }

     .see-products .content .all-products .products .container .sub-title {
          font-size: 0.65rem;
     }
}

@media only screen and (min-height: 800px)  {
     .clickable-area[area="perfumes"] {
          height: 90%;
     }
}