/*
* ----------------------------------------------------------------------------------------
Author Name:    UIAXIS
Author URI:     https://themeforest.net/user/uiaxis
Template Name: vetoplay -Indie Games Studio Workspace
Version      : 1.0                                          
* ----------------------------------------------------------------------------------------
*/

/*
* ----------------------------------------------------------------------------------------
* 01. Font Import
* 02. AOS Import
* 03. Tailwind Import
* 04. Scrollbar Design
* 05. Globar Styles
* 06. CSS Gradient
* 07. Text Stroke Design
* 08. Swiper CSS
* 09. Masked Background
* 10. menu text hover style
* 11.PRELOADER & BOUNCE CCS STYLE
* 12. Keyframe Animations
* ----------------------------------------------------------------------------------------
*/

// 01. Font Import
@import url("https://fonts.googleapis.com/css2?family=Tomorrow:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap");

// 02. AOS Import
@import "aos/dist/aos.css";

// 03. Tailwind Import
@tailwind base;
@tailwind components;
@tailwind utilities;

// 04. Scrollbar Design
::-webkit-scrollbar-track {
  -webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.3);
  background-color: #000f09;
}
::-webkit-scrollbar {
  width: 6px;
  background-color: #000f09;
}
::-webkit-scrollbar-thumb {
  background-color: #2df4a1;
  border-radius: 3px;
}

// 05. Globar Styles
body {
  font-family: "Tomorrow", sans-serif;
}

@layer components {
  /* Main Container styles */
  .container {
    @apply mx-auto max-sm:max-w-[90%] sm:max-w-[540px] md:max-w-[720px] lg:max-w-[960px] xl:max-w-[1140px] xxl:max-w-[1296px];
  }
  .large-container {
    @apply mx-auto 4xl:max-w-[1920px];
  }

  /* stp = section top padding, sbp= section bottom padding */
  .stp-30 {
    @apply pt-16 md:pt-24 xl:pt-30;
  }
  .sbp-30 {
    @apply pb-16 md:pb-24 xl:pb-30;
  }
  .stp-15 {
    @apply pt-8 md:pt-12 xl:pt-15;
  }
  .sbp-15 {
    @apply pb-8 md:pb-12 xl:pb-15;
  }

  /* Typography */
  h1,
  h2,
  h3,
  h4,
  h5,
  h6 {
    @apply m-0 p-0 !leading-[120%];
  }
  p {
    @apply leading-[150%];
  }
  .display-1 {
    @apply text-4xl font-bold leading-[120%] md:text-5xl lg:text-6xl xl:text-7xl xxl:text-[96px];
  }
  .display-2 {
    @apply text-4xl font-bold leading-[120%] md:text-5xl lg:text-6xl xl:text-[88px];
  }
  .display-3 {
    @apply text-4xl font-bold lg:text-5xl xl:text-6xl  xxl:text-[64px];
  }
  .display-4 {
    @apply text-2xl font-bold sm:text-3xl md:text-4xl lg:text-5xl xl:text-[56px];
  }
  .heading-1 {
    @apply text-[28px] font-bold sm:text-[32px] md:text-4xl lg:text-[40px] xl:text-[44px] xxl:text-5xl;
  }
  .heading-2 {
    @apply text-[28px] font-bold lg:text-[32px] xl:text-4xl xxl:text-[40px];
  }
  .heading-3 {
    @apply text-2xl font-bold xl:text-[28px] xxl:text-[32px];
  }
  .heading-4 {
    @apply text-xl font-bold xl:text-[22px]  xxl:text-2xl;
  }
  .heading-5 {
    @apply text-lg font-bold  xxl:text-xl;
  }
  .heading-6 {
    @apply text-lg font-bold  xxl:text-xl;
  }
  .lead-text {
    @apply text-xl lg:text-2xl;
  }
  .xl-body {
    @apply text-base lg:text-lg xl:text-xl;
  }
  .l-body {
    @apply text-base lg:text-lg;
  }
  .m-body {
    @apply text-sm xl:text-base;
  }

  .subMenuClose {
    @apply max-h-0;
  }
  .subMenuOpen {
    @apply max-h-[500px];
  }

  /* Custom Video Modal */
  .videoModalOpen {
    @apply visible opacity-100 translate-y-0 duration-500;
  }
  .videoModalClose {
    @apply invisible opacity-0 translate-y-6 duration-500;
  }

  .videoModalBgOpen {
    @apply visible opacity-100 duration-500;
  }
  .videoModalBgClose {
    @apply invisible opacity-0 duration-500;
  }

  /* scroll to top button */
  .scrollButtonHide {
    @apply -bottom-40;
  }
  .scrollButtonShow {
    @apply bottom-12 sm:bottom-16;
  }

  .headerFixed {
    @apply animationOne fixed bg-g900 shadow-md;
  }
  .headerAbsolute {
    @apply animationTwo absolute;
  }

  @media (min-width: 992px) {
    .header {
      .w-\[272px\] {
        width: 360px;
      }

      .w-\[272px\] > .absolute svg {
        width: 360px;
      }
    }
  }

  .latest-game-item {
    .button {
      @apply absolute top-[60px] -left-10 xl:-left-6 lg:-rotate-90 translate-x-[-100%] duration-500 group-hover:translate-x-0 max-lg:hidden;
    }
    .arrow {
      @apply text-g300 border border-g400 rounded-xl text-2xl size-10 lg:size-16 flex justify-center items-center lg:translate-x-0 lg:group-hover:translate-x-[100%] duration-500 visible lg:group-hover:invisible opacity-100 lg:group-hover:opacity-0 max-lg:order-2;
    }
    .game-img-area {
      @apply -translate-x-20 group-hover:translate-x-0 duration-500 invisible group-hover:visible opacity-0 group-hover:opacity-100 max-lg:w-full max-lg:h-0 max-lg:group-hover:h-auto;
    }
    .game-img {
      @apply w-0 max-lg:group-hover:w-full lg:group-hover:w-[400px] xl:group-hover:w-[526px] h-[200px] lg:h-[668px] duration-500 max-lg:object-cover;
    }

    &.active {
      .button {
        @apply translate-x-0;
      }
      .arrow {
        @apply lg:translate-x-[100%] lg:invisible lg:opacity-0;
      }
      .game-img-area {
        @apply translate-x-0  visible opacity-100 max-lg:h-auto;
      }
      .game-img {
        @apply w-full lg:w-[400px] xl:w-[526px];
      }
    }
  }

  .our-service-item {
    @apply flex justify-start gap-0 duration-500 lg:h-[355px] max-lg:flex-col;

    .title-area {
      @apply w-0 h-0;
    }

    .img-area {
      @apply bg-bg1 rounded-2xl gap-4 flex flex-col justify-end items-center  h-full py-4 sm:py-7 px-6 max-lg:w-full lg:w-[86px] max-lg:flex-row max-lg:justify-between;

      .title {
        @apply heading-5 lg:[writing-mode:sideways-lr] uppercase;
      }
      .hover-data {
        @apply hidden;
      }
    }

    &.active {
      @apply flex-1 gap-6;

      .title-area {
        @apply h-auto w-full;
      }
      .img-area {
        @apply justify-between items-start w-auto;

        .title {
          @apply hidden;
        }
        .hover-data {
          @apply block;
        }
      }
    }
  }
}

@layer base {
  .eventunset {
    pointer-events: unset;
  }
}

//06. CSS Gradient
.banner-one-bg {
  background: linear-gradient(
    180deg,
    rgba(0, 15, 9, 0.8) 0%,
    rgba(0, 8, 5, 0.16) 44.97%,
    #000f09 89.95%
  );
}
.banner-bottom-left {
  background: linear-gradient(88deg, rgba(0, 15, 9, 0) -0.52%, #000f09 66.9%);
  filter: blur(20px);
}

//07. Text Stroke Design
.stroke-text {
  -webkit-text-stroke-width: 2px;
  -webkit-text-stroke-color: #2df4a1;
  -webkit-text-fill-color: transparent;
}
.stroke-text-px {
  -webkit-text-stroke-width: 1px;
  -webkit-text-stroke-color: #2df4a1;
  -webkit-text-fill-color: transparent;
  &.text-bg-black {
    -webkit-text-fill-color: #000;
  }
}
.portfolio-item {
  &:hover {
    .stroke-text-px {
      -webkit-text-stroke-color: black;
    }
  }
}
.text-slider,
.text-slider2 {
  &.second {
    .stroke-text {
      -webkit-text-stroke-color: black;
    }
  }
}

//08. Swiper CSS
.smooth .swiper-wrapper {
  -webkit-transition-timing-function: linear !important;
  -o-transition-timing-function: linear !important;
  transition-timing-function: linear !important;
}

.lets-work-slider {
  .swiper-slide {
    scale: 0.9;

    .slider-bg {
      @apply opacity-0 duration-500;
    }

    &.swiper-slide-active {
      scale: 1;
      button {
        display: flex;
        z-index: 30;
      }

      .slider-bg {
        opacity: 1;
      }
    }
  }
}

.text-slider,
.text-slider2,
.our-expertise-slider {
  .swiper-slide {
    width: min-content !important;
  }
}

.swiper-horizontal > .swiper-scrollbar,
.swiper-scrollbar.swiper-scrollbar-horizontal {
  position: relative !important;
}

.swiper-scrollbar {
  background-color: rgba(45, 244, 161, 0.5);
}

.swiper-scrollbar-drag {
  background-color: #2df4a1;
}

//09. Masked Background
.masked-content-hero {
  height: clamp(890px, calc(100vh - 142px), 940px);
  // height: 940px;
  transform: scale(1);
  mask-size: 0% 85%;
  -webkit-mask-size: 0% 85%;
  mask-position: 50% 50%;
  -webkit-mask-position: 50% 50%;

  @media screen and (max-width: 992px) {
    height: clamp(790px, calc(100vh - 142px), 940px);
  }
  @media screen and (max-width: 600px) {
    height: clamp(690px, calc(100vh - 142px), 940px);
  }

  @media screen and (max-width: 400px) {
    height: clamp(790px, calc(100vh - 142px), 940px);
  }
}

.masked-content {
  mask: url(../images/sample.svg);
  -webkit-mask: url(../images/sample.svg);
  mask-repeat: no-repeat;
}

.masked-content-one {
  mask: url(../images/mask-image/mask-1.svg) 0% 0% / 100% 100% no-repeat;
}
.masked-content-two {
  mask: url(../images/mask-image/mask-2.svg) 0% 0% / 100% 100% no-repeat;
}
.masked-content-three {
  mask: url(../images/mask-image/mask-3.svg) 0% 0% / 100% 100% no-repeat;
}

.masked-content-four {
  mask: url(../images/mask-image/mask-4.svg) 0% 0% / 100% 100% no-repeat;
}
.masked-content-five {
  mask: url(../images/mask-image/mask-5.svg) 0% 0% / 100% 100% no-repeat;
}
.masked-content-six {
  mask: url(../images/mask-image/mask-6.svg) 0% 0% / 100% 100% no-repeat;
}
@media screen and (min-width: 320px) {
  .masked-content,
  .masked-video {
    mask: url(../images/icon/mask-640.svg);
    -webkit-mask: url(../images/icon/mask-640.svg);
    mask-size: 100% 100%;
    -webkit-mask-size: 100% 100%;
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
  }
}

//10. menu text hover style
.slide-vertical,
.slide-horizontal {
  .char {
    overflow: hidden;
    color: transparent;
    &::after,
    &::before {
      visibility: visible;
      color: white;
      transition: transform 0.5s cubic-bezier(0.9, 0, 0.2, 1);
      transition-delay: calc(0.2s + (0.02s * (var(--char-index))));
    }
    &::before {
      transition-delay: calc(0.02s * (var(--char-index)));
    }
  }

  &.activeMenuText,
  &.activeHeaderMenu {
    color: #2df4a1;
    .char {
      &::after,
      &::before {
        color: #2df4a1;
      }
    }
  }

  &:hover {
    color: #2df4a1;
    .char {
      &:before {
        color: #2df4a1;
        transition-delay: calc(0.2s + (0.02s * (var(--char-index))));
      }
      &:after {
        color: #2df4a1;
        transition-delay: calc(0.02s * (var(--char-index)));
      }
    }
  }
  &.slide-second {
    .char {
      &::after,
      &::before {
        color: white;
      }
    }
  }
}
.slide-vertical {
  .char {
    &:before {
      transform: translateY(-100%);
    }
  }

  &:hover {
    .char {
      &:before {
        transform: translateY(0%);
      }
      &::after {
        transform: translateY(100%);
      }
    }
  }
}
.slide-horizontal {
  .char {
    &:before {
      transform: translateX(110%);
    }
  }
  &:hover {
    .char {
      &:before {
        color: #2df4a1;
        transform: translateX(0%);
      }
      &::after {
        transform: translateX(-110%);
      }
    }
  }
}

.text-216px {
  font-size: clamp(1rem, 12vw, 2016px);
}

.home-two-banner-bg-blur {
  backdrop-filter: blur(12px);
}

.text-shadow-1 {
  font-feature-settings:
    "liga" off,
    "clig" off;
  text-shadow: 0px 0px 48px rgba(45, 244, 161, 0.8);
}

.tags-container > canvas {
  position: relative;
  top: -1px;
  left: -1px;
  background-color: transparent !important;
}

.tags-container {
  width: 100vw;
  margin-top: 0vw;
  overflow: hidden;
}

.game-image-slide,
.game-details-slide {
  animation: slide-hide 0.5s cubic-bezier(0.4, 0, 0.7, 1) forwards;

  &.active {
    animation: slide-reveal 0.5s cubic-bezier(0.2, 0, 0.4, 1) forwards;
    pointer-events: auto;
  }
}

.game-details-slide {
  position: absolute;
  top: 80px;
  left: 0;
  right: 0;

  @media screen and (max-width: 900px) {
    top: 60px;
  }
}

@keyframes slide-hide {
  0% {
    opacity: 1;
    transform: scale(1);
  }
  50% {
    opacity: 0;
    transform: scale(1.1);
  }
  100% {
    opacity: 0;
    transform: scale(1.1);
  }
}

@keyframes slide-reveal {
  0% {
    opacity: 0;
    transform: scale(0.9);
  }
  50% {
    opacity: 0;
    transform: scale(0.9);
  }
  100% {
    opacity: 1;
    transform: scale(1);
  }
}

.gradient-one {
  background: linear-gradient(
    180deg,
    rgba(0, 0, 0, 0.72) 10.25%,
    rgba(0, 0, 0, 0) 30.51%
  );
}

input[type="number"]::-webkit-inner-spin-button {
  -webkit-appearance: none;
}

.home-two-hero {
  mask: url(../images/mask-image/mask-4.svg);
  -webkit-mask: url(../images/mask-image/mask-4.svg);
  mask-repeat: no-repeat;

  mask-size: 0% 85%;
  -webkit-mask-size: 0% 85%;
  mask-position: 50% 50%;
  -webkit-mask-position: 50% 50%;
  transform: scale(1);
  opacity: 0;
  animation: scaleIn 1s 0.5s cubic-bezier(0.77, 0, 0.175, 1) forwards;
}

@keyframes scaleIn {
  to {
    opacity: 1;
    mask-size: 100% 100%;
    -webkit-mask-size: 100% 100%;
  }
}

// 11.PRELOADER & BOUNCE CCS STYLE
.load-text span {
  -webkit-animation: loading 1s infinite alternate;
  animation: loading 1s infinite alternate;
}

.load-text span:nth-child(1) {
  -webkit-animation-delay: 0s;
  animation-delay: 0s;
}

.load-text span:nth-child(2) {
  -webkit-animation-delay: 0.1s;
  animation-delay: 0.1s;
}

.load-text span:nth-child(3) {
  -webkit-animation-delay: 0.2s;
  animation-delay: 0.2s;
}

.load-text span:nth-child(4) {
  -webkit-animation-delay: 0.3s;
  animation-delay: 0.3s;
}

.load-text span:nth-child(5) {
  -webkit-animation-delay: 0.4s;
  animation-delay: 0.4s;
}

.load-text span:nth-child(6) {
  -webkit-animation-delay: 0.5s;
  animation-delay: 0.5s;
}

.load-text span:nth-child(7) {
  -webkit-animation-delay: 0.6s;
  animation-delay: 0.6s;
}

@-webkit-keyframes loading {
  0% {
    opacity: 1;
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
  }

  100% {
    opacity: 0;
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
  }
}

@keyframes loading {
  0% {
    opacity: 1;
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
  }

  100% {
    opacity: 0;
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
  }
}

.jumping1 {
  animation: jumpingImage1 3s linear infinite;
}

@keyframes jumpingImage1 {
  50% {
    transform: translateY(10px);
  }
}

/* 12. Keyframe Animations */
.animationOne {
  animation: fadeDown 0.5s linear;
}
.animationTwo {
  animation: fadeDown2 0.5s linear;
}

@keyframes fadeDown {
  0% {
    opacity: 0;
    transform: translateY(-20px);
  }
  100% {
    opacity: 1;
    transform: translateY(0);
  }
}
@keyframes fadeDown2 {
  0% {
    opacity: 0;
    transform: translateY(-20px);
  }
  100% {
    opacity: 1;
    transform: translateY(0);
  }
}

// Animation
.animationTwo {
  animation: fadeDown2 0.5s linear;
}
.animationOne {
  animation: fadeDown 0.5s linear;
}
@keyframes fadeDown {
  0% {
    opacity: 0;
    transform: translateY(-20px);
  }
  100% {
    opacity: 1;
    transform: translateY(0);
  }
}
@keyframes fadeDown2 {
  0% {
    opacity: 0;
    transform: translateY(-20px);
  }
  100% {
    opacity: 1;
    transform: translateY(0);
  }
}

.circle {
  animation: circleAnimation 15s linear infinite;
}
@keyframes circleAnimation {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}