@import "tailwindcss";

@theme {

  --container-8xl: 90rem; /* 1440px */

  --color-primary: #092e86;
  --color-primary-200: #bfdbfe;
  --color-primary-600: #2563eb;
  --color-primary-700: #1d4ed8;
  --color-primary-800: #1e40af;
  --color-primary-900: #1e3a8a;
  --color-secondary-100: #F0F0F0;
  --color-warning-100: #FFF4CC;
  --color-warning-300: #FFD565;
  --color-warning-500:#FFAA01;
  --color-accent: #ffaa01;
  --color-soft: #dbeafe;
  --color-soft-2: #eff6ff;
  --color-gray-600: #94979e;
  --color-gray-700: #7E838B;
  --color-gray-100: #F4F5F5;
  --color-gray-400: #4E5056;
  --color-neutral-200: #F4F5F5;
  --color-basic: #1C1D1F;
  
  --font-family-sans: "Onest", sans-serif;
  --font-family-open-sans: "Open Sans", sans-serif;
}

.btn-accent {
  @apply rounded-full bg-accent px-3 py-2 text-xs font-semibold text-white hover:bg-primary-800 transition-all duration-300;
}

.btn {
  @apply inline-block rounded-2xl bg-primary px-6 py-7 text-xl font-semibold text-warning-300 hover:bg-primary-700 transition-all duration-300;
}

.language-link {
  @apply rounded-full text-xs bg-gray-100 w-8 h-8 flex items-center justify-center hover:bg-gray-200 transition-all duration-300 ;
}

.language-link.is-active {
  @apply bg-primary text-white cursor-default;
}

.link {
  --link-line-height: 1.5em;
  line-height: var(--link-line-height);
  background-image: linear-gradient(
    to bottom,
    transparent 0,
    transparent calc(100% - 1px),
    var(--color-warning-500) calc(100% - 1px),
    var(--color-warning-500) 100%
  );
  background-size: 0% 100%;
  background-repeat: no-repeat;
  background-position: left bottom;
  transition: background-size 0.3s ease;
}

.link:hover,
.link.active {
  background-size: 100% 100%;
}

.link-light span {
  @apply transition-all duration-300 relative after:content-[''] after:absolute after:bottom-0 after:left-0 after:w-full after:h-px after:bg-warning-500 after:scale-x-0 after:transition-all after:duration-300 after:origin-bottom-left hover:after:scale-x-100;
}

.link.active svg {
  @apply rotate-180;
}

.link.active svg {
  @apply rotate-180;
}

.link-light.no-underline {
  background-image: none;
}

.link-light {
  @apply text-white hover:text-warning-300 transition-all duration-30;
}

.link-light span {
  @apply group-hover:after:bg-warning-300 group-hover:after:scale-x-100;
}

.sub-link {
  @apply text-neutral-900 block p-2 rounded hover:bg-warning-100 hover:text-neutral-900 transition-all duration-300;
}

.sub-menu {
  @apply absolute opacity-0 invisible group-hover:opacity-100 group-hover:visible transition-all duration-300 z-10 bg-white rounded-lg border border-neutral-200 p-2 top-full left-0 text-base flex-col gap-2 w-3xs
}

.font-open-sans {
  font-family: "Open Sans", sans-serif;
  font-optical-sizing: auto;
  font-variation-settings: "wdth" 100;
}

/* До запуска анимации скрываем, чтобы не было мерцания при появлении во viewport */
[data-animate]:not(.animate__animated) {
  opacity: 0;
}

body {
  font-family: "Onest", sans-serif;
  font-optical-sizing: auto;
  color: var(--color-basic);
  overflow-x: hidden;
}

/* Splide customization */
#hero-slider {
  width: 100%;
  max-width: 100%;
}

#hero-slider .splide__track {
  width: 100%;
}

#hero-slider .splide__list {
  width: 100%;
}

#hero-slider .splide__slide {
  width: 100%;
}

#hero-slider .splide__slide img {
  width: 100%;
  display: block;
}

.splide .splide__arrow {
  background: transparent;
  opacity: 1;
  width: 3rem;
  height: 3rem;
  border-radius: 50%;
  transition: all 0.3s ease;
  color: white;
  transition: all 0.3s ease;
  mix-blend-mode: difference;
}

.splide .splide__arrow:hover {
  transform: scale(1.1) translateY(-50%);
  background: rgba(255, 255, 255, 0.1);
}

.splide .splide__arrow svg {
  fill: white;
  width: 1.25rem;
  height: 1.25rem;
}

.splide .splide__arrow:hover svg {
  fill: white;
}

.splide__arrow--next {
  @apply -right-1.5 lg:right-0;
}
.splide__arrow--prev {
  @apply -left-1.5 lg:left-0;
}

.splide .splide__pagination {
  bottom: 1.25rem;
}

.splide .splide__pagination__page {
  @apply w-3.5 lg:w-7;
  background: #ffffff;
  opacity: 1;
  height: 0.1875rem;
  margin: 0 0.375rem;
  border-radius: 0;
  transition: all 0.3s ease;
  opacity: 0.5;
}

.splide .splide__pagination__page.is-active {
  opacity: 1;
}

#news-slider {
  @apply px-2 lg:px-8;
}

.pagination_dark .splide__pagination__page {
  background: #000000;

}

#news-slider .splide__arrow--prev {
  @apply -left-6 lg:-left-5;
}

#news-slider .splide__arrow--next {
  @apply -right-6 lg:-right-5;
}

#news-slider .splide__pagination {
  @apply -bottom-0.5 lg:-bottom-1;
}

#powers-slider .splide__arrow {
  top: 2rem;
}

#powers-slider .splide__arrow--prev {
  left: 46%;
}

#powers-slider .splide__arrow--next {
  right: 46%;
}

.heading-underline {
  @apply border-b-1 border-warning-500 pb-2
}

.bg-gradient-green {
  @apply bg-gradient-to-b from-[#93CE9E] to-[#C4F0DC];
}

.bg-gradient-orange {
  @apply bg-gradient-to-b from-[#EFC38F] to-[#FFDCA2];
}

.bg-gradient-pink {
  @apply bg-gradient-to-b from-[#E8A2CF] to-[#FCD0ED];
}
/* Mobile menu styles - ensure menu is visible when open class is added */
@media (max-width: 1024px) {
  .menu {
    display: flex !important;
    background-color: white;
    z-index: 1000;
    top: 0;
    width: 100%;
    height: 100%;
    padding: 1.5rem;
    max-width: 18.375rem;
    right: 0;
    transform: translateX(100%);
    transition: all 0.3s ease;
    position: fixed !important;
  }
  .menu.open {
      transform: translateX(0);
    }
    .menu-overlay {
      position: fixed;
      z-index: 999;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      background-color: rgba(0, 0, 0, 0.5);
      backdrop-filter: blur(0.0625rem);
      opacity: 0;
      visibility: hidden;
      transform: translateX(-100%);
      transition: all 0.3s ease;
    }
    .menu-overlay.open {
      opacity: 1;
      visibility: visible;
      transform: translateX(0);
    }
}

.heading {
  @apply text-2xl lg:text-[40px] text-primary-800 font-medium leading-tight;
}

.heading-border {
  @apply border-warning-500 pl-2.5 font-normal text-[64px] text-primary-800 leading-tight;
}

.heading-border-start {
  @apply border-l-1 ;
}

.heading-border-bottom {
  @apply border-b-1;
}

.heading-style-1 {
  @apply text-[40px] font-bold;
}
.sub-heading {
  @apply text-[28px] text-primary-800 font-medium leading-tight;
}

/* Typewriter effect */
.typewriter-cursor {
  display: inline-block;
  animation: typewriter-blink 0.7s step-end infinite;
  margin-left: 1px;
}

@keyframes typewriter-blink {
  50% {
    opacity: 0;
  }
}

.answer-bubble {
  opacity: 0;
  transform: translateY(-4px);
  overflow: hidden;
  will-change: height, opacity, transform;
  transition: height 0.68s cubic-bezier(0.22, 1, 0.36, 1), opacity 0.5s cubic-bezier(0.22, 1, 0.36, 1), transform 0.5s cubic-bezier(0.22, 1, 0.36, 1), margin-top 0.68s cubic-bezier(0.22, 1, 0.36, 1);
}

.answer-bubble-inner {
  opacity: 0;
}

.answer-bubble-visible {
  position: relative;
}

.answer-bubble.answer-bubble-visible .answer-bubble-inner {
  animation: answer-bubble-fade-in 0.5s ease-out forwards;
}

.answer-bubble.answer-bubble-visible {
  opacity: 1;
  transform: translateY(0);
}

.answer-bubble.answer-bubble-hiding {
  opacity: 0;
  transform: translateY(-4px);
}

.answer-bubble.answer-bubble-collapsed {
  opacity: 0;
  transform: translateY(-4px);
  pointer-events: none;
}

.answer-bubble:not(.answer-bubble-visible) .answer-bubble-inner {
  opacity: 0;
}

.faq-height-animated {
  transition: height 0.56s cubic-bezier(0.22, 1, 0.36, 1);
  will-change: height;
}

@keyframes answer-bubble-fade-in {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

.custom-list{
  @apply py-5 flex flex-col gap-4;
  li {
    @apply relative ps-10;

    &::before {
      content: '';
      position: absolute;
      left: 0;
      top: 0;
      width: 1.5rem;
      height: 1.5rem;
      background: url('/src/assets/img/trendup-icon.png') no-repeat center center;
    }
  }
}