/* modules/hs_prehome/views/css/prehome.css */

@keyframes mage{
  0%{transform:scale(1) translateZ(0);}
  100%{transform:scale(1.05) translateZ(0);}
}

@keyframes cat{
  0%{transform:scale(1) translateZ(0);}
  100%{transform:scale(1.5) translateZ(0);}
}


.prehome-content {
  /* fond principal */
  overflow: hidden;
  background: #131519;
  position: relative;
  &::before {
    content: '';
    display: block;
    position: absolute;
    top: 0;
    left: 0;
    z-index: 1;
    width: 70%;
    height: 100%;
    background: transparent linear-gradient(to right, #131519 0%, #131519b2 68%, #00000000 100%) 0% 0% no-repeat padding-box;
  }
}

.bk-prehome-shadow {
  position: absolute;
  inset: 0;            
  pointer-events: none;  
  background: transparent linear-gradient(
    to top,
    #131519 0%,
    #0D0E1087 25%,
    #00000000 100%
  ) no-repeat padding-box;
  z-index: 1;
}

.prehome-main-text{
  margin-top: 230px;
  margin-bottom: 50px;
  position: relative;
  z-index: 100;

  > p, > h1{
    max-width: 50%;
  }
}

.prehome-slogan{
  color: #C5B47A;
  font-family: 'Lato';
  font-size: 1.5rem;
}

.prehome-title{
  color: #FFF4D1;
  font-family: 'Cinzel';
  font-weight: 700;
  font-size: 5rem;
  text-wrap: nowrap;
  text-align: left;
}

.prehome-description{
  color: #fff;
  line-height: 1.5;
}

.gold-divider{
  transition: width 1s ease;
  border: 3px solid #C5B47A;
  width: 0;
  opacity: 1;
  margin-bottom: 1rem;
}

.prehome-animations {
   background-image: url('../assets/img/mage-fond-v2.webp');
  background-repeat: no-repeat;
  background-position: center center;
  background-size: cover;
  aspect-ratio: 16 / 9;
  width: 100%;
  position: absolute;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 0;
  overflow: hidden;
}

.prehome-animation {
  transition: all 1.5s ease 0.2s,opacity 0.4s ease 0.2s;
  opacity: 1;
  position: absolute;
  left: 0;
  height: 100%;
  width: 100%;
}

.prehome-new-products{
  z-index: 99;
  position: relative;
}

.mage, .cat{
  transform: scale(1.03) translate(5px,0);
}

.prehome-animations .prehome-animation.mage .prehome-animation-inner {
    background-repeat: no-repeat;
    background-position: top;
    background-size: cover;
    width: 100%;
    height: 100%;
    animation: mage 15s cubic-bezier(0.25,0.1,0.67,0.99) 1.7s forwards;
    background-image: url('../assets/img/mage.webp');
    /* transform-origin: center right; */
}

.prehome-animations .prehome-animation.cat .prehome-animation-inner {
    background-repeat: no-repeat;
    background-position: top;
    background-size: cover;
    width: 100%;
    height: 100%;
    animation: cat 15s cubic-bezier(0.25,0.1,0.67,0.99) 1.7s forwards;
    background-image: url('../assets/img/cat.webp');
    transform-origin: right left;
}


.prehome-products-list{

  &.scroll-container {
    display: flex;
    overflow-x: auto;
    scroll-behavior: smooth;
    gap: 1rem;
    padding: 1rem 0;
  }

  &.scroll-container::-webkit-scrollbar {
    display: none;
  }

  .product-card {
    flex: 0 0 auto;
    width: 250px;
    border: 1px solid #ccc;
    border-radius: 8px;
    overflow: hidden;
  }

  .slider-nav {
    text-align: right;
    margin-top: -2rem;
    margin-bottom: 1rem;
  }

  .slider-nav button {
    background: none;
    border: none;
    font-size: 2rem;
    cursor: pointer;
  }

}

@media(max-width: 768px) {
  .prehome-main-text{
    margin-top: 150px;
    margin-bottom: 30px;
    > p, > h1{
      max-width: 100%;
      text-wrap: wrap;
      text-align: center;
    }
    > h1{
      font-size: 4rem;
      margin-bottom: 20px;
    }
  }
  .gold-divider{
    display: none;
  }
  .prehome-title > span{
    border-bottom: 6px solid var(--bs-primary);
  }
  .prehome-slogan{
    font-size: 1.4rem;
  }
}