/* 
Theme Name: S99 Child
Theme URI: https://studio99.sm
Description: S99 Child is a child theme of S99, created by Studio99 team
Author: Studio99 Team
Author URI: https://studio99.sm
Template: hello-elementor
Version: 1.0.1
Text Domain: hello-elementor-child
License: GNU General Public License v3 or later.
License URI: https://www.gnu.org/licenses/gpl-3.0.html
*/

/*************************
 HEADER SCROLL TRANSITION
 ************************/

.s99-header {
  background-color: transparent;
  backdrop-filter: blur(0px);
  -webkit-backdrop-filter: blur(0px);
  transition: background-color 0.4s ease, backdrop-filter 0.4s ease, -webkit-backdrop-filter 0.4s ease;
}

.s99-header.scrolled {
  background-color: rgba(48, 5, 10, 0.45);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);

}

@media (min-width: 768px) {
  .s99-header.scrolled {
    column-gap: 50px;
    width: 34%;
    transition:
      column-gap 0.3s ease,
      width 0.3s ease;
  }
}

/* Laptop (1280px+) */
@media (min-width: 1280px) and (max-width: 1281px) {
  .s99-header.scrolled {
    width: 48%;
    transition:
      width 0.3s ease;
  }
}

/**********************
HEADER RESOLUTION >1200
**********************/

@media (min-width: 1281px) {
  .s99-header {
    width: 40%;
  }
}


/*********************
 SLIDER EFFECT TEXT 
 ********************/

.infinite-ticker-container {
    width: 100%;
    overflow: hidden;
    position: relative;
    padding: 20px 0;
    background-color: transparent;
    
 
    -webkit-mask-image: linear-gradient(to right, transparent 0%, black 10%, black 90%, transparent 100%);
    mask-image: linear-gradient(to right, transparent 0%, black 10%, black 90%, transparent 100%);
  }

  
  .infinite-ticker-track {
    display: flex;
    width: max-content;
    animation: scroll-ticker 25s linear infinite; 
  }

 
  .infinite-ticker-group {
    display: flex;
    align-items: center;
    justify-content: space-around;
    gap: 5rem; 
    padding-right: 5rem; 
  }

 
  .infinite-ticker-item {
    font-family: 'Norman', sans-serif;
    font-weight: 500; 
    font-size: 70px;
    white-space: nowrap;
    text-transform: uppercase;
    color: #8C806C;
  }

 
  @keyframes scroll-ticker {
    0% {
      transform: translateX(0);
    }
    100% {
      transform: translateX(-50%);
    }
  }

 
  @media (max-width: 767px) {
    .infinite-ticker-item {
      font-size: 64px;
    }
    .infinite-ticker-group {
      gap: 3rem;
      padding-right: 3rem;
    }
  }

/*************
 HOVER EFFECT
 ************/


.s99-card {
    position: relative;
    background: #ffffff; 
    border-radius: 12px; 
    padding: 30px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.03); 
    transition: all 0.5s cubic-bezier(0.16, 1, 0.3, 1); 
    overflow: hidden;
}


.s99-card::before,
.s99-card::after {
    content: '';
    position: absolute;
    width: 20px;
    height: 20px;
    opacity: 0;
    transition: all 0.6s cubic-bezier(0.16, 1, 0.3, 1);
}


.s99-card::before {
    top: 15px;
    left: 15px;
    transform: translate(-10px, -10px);
}


.s99-card::after {
    bottom: 15px;
    right: 15px;
    transform: translate(10px, 10px);
}


.s99-card:hover {
    transform: translateY(-10px) !important; 
    box-shadow: 0 15px 35px rgba(0, 0, 0, 0.07); 
}

.s99-card:hover::before,
.s99-card:hover::after {
    opacity: 1;
    transform: translate(0, 0); 
}

/**********************
 HORIZONTAL FIX SCROLL 
 *********************/


html,
body {
  overflow-x: hidden !important;
}

/********************************
ANIMATION BACKGROUND SECTION HERO
 *******************************/


.s99-bg-animate {
    overflow: hidden;
    position: relative;
}

.s99-bg-animate::before {
    content: "";
    position: absolute;
    inset: 0;
    background-image: inherit;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    
    transform: scale(1.25);
    animation: s99HeroZoomOut 2.5s ease-out forwards;
    
    z-index: 0;
    will-change: transform;
}

.s99-bg-animate > .elementor-container,
.s99-bg-animate > .e-con-inner,
.s99-bg-animate > * {
    position: relative;
    z-index: 1;
}

@keyframes s99HeroZoomOut {
    from {
        transform: scale(1.25);
    }
    to {
        transform: scale(1);
    }
}

/*******************************
 ICON ANIMATE MOUSE SECTION HERO
 ******************************/

.scroll-down-container {
  position: absolute;
  bottom: 30px; 
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  flex-direction: column;
  align-items: center;
  text-decoration: none;
  cursor: pointer;
  z-index: 10;
}


.mouse {
  width: 30px;
  height: 50px;
  border: 2px solid #E5DED2; 
  border-radius: 20px;
  display: flex;
  justify-content: center;
  padding-top: 10px;
}


.wheel {
  width: 6px;
  height: 10px;
  background-color: #E5DED2; 
  border-radius: 50%;
  animation: scrollAnim 1.6s infinite ease-in-out;
}


@keyframes scrollAnim {
  0% {
    transform: translateY(0);
    opacity: 1;
  }
  50% {
    transform: translateY(10px);
    opacity: 0.3;
  }
  100% {
    transform: translateY(0);
    opacity: 1;
  }
}


.scroll-down-container:hover .mouse {
  transform: scale(1.05);
  transition: transform 0.3s ease;
  border-color: #50171E;
}
.scroll-down-container:hover .wheel {
  background-color: #50171E;
}