@tailwind base;
@tailwind components;
@tailwind utilities;

@keyframes scaleFade {
  from {
    transform: scale(0.95);
    opacity: 0;
  }
  to {
    transform: scale(1);
    opacity: 1;
  }
}

.animate-scaleFade {
  animation: scaleFade 0.2s ease-out forwards;
}

@keyframes dropIn {
  0% {
    transform: translateY(-240px);
    opacity: 0;
  }
  40% {
    opacity: 1;
  }
  100% {
    transform: translateY(0);
    opacity: 1;
  }
}

.animate-dropIn {
  animation: dropIn 0.45s cubic-bezier(0.24, 0.82, 0.39, 1) both;
}

@layer base {
  button,
  input,
  select,
  textarea {
    @apply appearance-none bg-transparent border-0 outline-none;
  }
  
  /* Prevent horizontal scrolling and hide scrollbar */
  html,
  body {
    overflow-x: hidden;
    max-width: 100vw;
    font-family: "PP Neue Montreal Arabic", Helvetica, sans-serif !important;
    scroll-behavior: smooth;
  }
  
  /* Hide scrollbar for webkit browsers */
  ::-webkit-scrollbar {
    display: none;
  }
  
  /* Hide scrollbar for Firefox */
  html {
    scrollbar-width: none;
  }
  
  /* Ensure smooth scrolling */
  * {
    scroll-behavior: smooth;
  }
  
  * {
    box-sizing: border-box;
    font-family: "PP Neue Montreal Arabic", Helvetica, sans-serif !important;
  }
  
  /* Ensure all text elements use PP font */
  h1, h2, h3, h4, h5, h6, p, span, div, a, button, input, textarea, select, label, li, ul, ol {
    font-family: "PP Neue Montreal Arabic", Helvetica, sans-serif !important;
  }
  
  /* Override inline font-family declarations that reference old font names */
  [font-family*="PP_Neue_Montreal_Arabic"],
  [font-family*="PP Neue Montreal Arabic"] {
    font-family: "PP Neue Montreal Arabic", Helvetica, sans-serif !important;
  }
  
  /* Map old font family names to correct font weights */
  [font-family*="PP_Neue_Montreal_Arabic-Bold"],
  [font-family*="PP Neue Montreal Arabic-Bold"] {
    font-family: "PP Neue Montreal Arabic", Helvetica, sans-serif !important;
    font-weight: 700 !important;
  }
  
  [font-family*="PP_Neue_Montreal_Arabic-Medium"],
  [font-family*="PP Neue Montreal Arabic-Medium"] {
    font-family: "PP Neue Montreal Arabic", Helvetica, sans-serif !important;
    font-weight: 500 !important;
  }
  
  [font-family*="PP_Neue_Montreal_Arabic-Light"],
  [font-family*="PP Neue Montreal Arabic-Light"] {
    font-family: "PP Neue Montreal Arabic", Helvetica, sans-serif !important;
    font-weight: 300 !important;
  }
  
  [font-family*="PP_Neue_Montreal_Arabic-Regular"],
  [font-family*="PP Neue Montreal Arabic-Regular"] {
    font-family: "PP Neue Montreal Arabic", Helvetica, sans-serif !important;
    font-weight: 400 !important;
  }
  
  [font-family*="PP_Neue_Montreal_Arabic-Thin"],
  [font-family*="PP Neue Montreal Arabic-Thin"] {
    font-family: "PP Neue Montreal Arabic", Helvetica, sans-serif !important;
    font-weight: 300 !important;
  }

  /* Convert hover to touch-and-hold on mobile devices */
  @media (hover: none) and (pointer: coarse) {
    /* Prevent text selection on touch devices for interactive elements with hover effects */
    button,
    a,
    [role="button"],
    [class*="hover:"],
    [class*="cursor-pointer"],
    [class*="transition"],
    article,
    [onmouseenter],
    [onMouseEnter] {
      -webkit-touch-callout: none;
      -webkit-user-select: none;
      -moz-user-select: none;
      -ms-user-select: none;
      user-select: none;
      -webkit-tap-highlight-color: transparent;
    }
    
    /* Also prevent text selection on all children of interactive elements */
    button *,
    a *,
    [role="button"] *,
    [class*="cursor-pointer"] *,
    [class*="transition"] *,
    article * {
      -webkit-touch-callout: none;
      -webkit-user-select: none;
      -moz-user-select: none;
      -ms-user-select: none;
      user-select: none;
    }
    
    /* Completely disable all hover effects on touch devices by default */
    button:hover,
    a:hover,
    [role="button"]:hover,
    *:hover {
      /* All hover states disabled on touch - only work via touch-hover class */
    }
    
    /* Only allow hover effects when touch-hover class is present (after hold) */
    .touch-hover,
    .touch-hover:hover {
      /* Hover effects enabled only after touch-and-hold */
    }
  }
}

@layer components {
  .all-\[unset\] {
    all: unset;
  }

  /* Typography utilities (mirrors existing UI values; no visual change) */
  .text-hero-title {
    @apply font-bold text-[#10a983] text-[28px] leading-[38px];
  }
  @screen lg {
    .text-hero-title {
      @apply text-[44px] leading-[62px];
    }
  }

  .text-body-primary {
    @apply font-normal text-[#1a3a36] text-[14px] leading-[20px];
  }
  @screen lg {
    .text-body-primary {
      @apply text-[22px] leading-[32px];
    }
  }

  .text-heading-main {
    @apply font-bold text-[#10a983] text-[28px] leading-[normal];
  }
  @screen md {
    .text-heading-main {
      @apply text-[64px];
    }
  }

  .text-badge-label {
    @apply font-medium text-[#10a983] text-[14.25px] leading-[normal];
  }
  @screen md {
    .text-badge-label {
      @apply text-[19px];
    }
  }

  .text-section-title {
    @apply font-bold text-[#e9f7f5] text-[26px] leading-[38px];
  }
  @screen md {
    .text-section-title {
      @apply text-[38px] leading-[48px];
    }
  }

  .text-feature-title {
    @apply font-bold text-[#ddf7ea] text-[14px] leading-[18px];
  }
  @screen md {
    .text-feature-title {
      @apply text-[21px] leading-[33px];
    }
  }

  .text-feature-body {
    @apply font-normal text-[#e9f7f6] text-[12px] leading-[16px];
  }
  @screen md {
    .text-feature-body {
      @apply text-[18px] leading-[26px];
    }
  }

  .text-cta-link {
    @apply font-bold text-green-2 text-[19px] leading-[normal];
  }

  .text-stats-heading {
    @apply font-bold text-white text-[44.8px] leading-[37.4px];
  }

  .text-stats-body {
    @apply font-normal text-white text-[19.9px] leading-[29.9px];
  }

  .text-testimonial-title {
    @apply font-bold text-green-2 text-[28px] leading-[36px];
  }
  @screen md {
    .text-testimonial-title {
      @apply text-[38px] leading-[48px];
    }
  }

  .text-testimonial-body {
    @apply font-normal text-green-2 text-[14px] leading-[20px];
  }
  @screen md {
    .text-testimonial-body {
      @apply text-[18px] leading-[28px];
    }
  }

  .text-story-title {
    @apply font-bold text-green-2 text-[28px] leading-[39px];
  }

  .text-story-body {
    @apply font-normal text-[#1A8A7E] text-[18px] leading-[24px];
  }

  .text-story-toggle {
    @apply font-medium text-green-2 text-[18px] leading-[normal];
  }

  .text-stat-hover {
    @apply font-bold text-green-2 text-[14px] leading-[20px];
  }
  @screen md {
    .text-stat-hover {
      @apply text-[25.41px] leading-[34px];
    }
  }

  .text-stat-prefix {
    @apply font-normal text-green-2 text-[22px] leading-[24px];
  }
  @screen sm {
    .text-stat-prefix {
      @apply text-[26px] leading-[32px];
    }
  }
  @screen md {
    .text-stat-prefix {
      @apply text-[26.1px] leading-[45.1px];
    }
  }

  .text-stat-prefix-compact {
    @apply font-normal text-green-2 text-[18px] leading-[20px];
  }
  @screen sm {
    .text-stat-prefix-compact {
      @apply text-[22px] leading-[24px];
    }
  }

  .text-stat-number {
    @apply font-bold text-green-2 text-[36px] leading-[32px];
  }
  @screen sm {
    .text-stat-number {
      @apply text-[50px] leading-[38px];
    }
  }
  @screen md {
    .text-stat-number {
      @apply text-[73.6px] leading-[45.1px];
    }
  }

  .text-stat-label {
    @apply font-extrabold text-green-2 text-[22px] leading-[20px];
  }
  @screen sm {
    .text-stat-label {
      @apply leading-[24px];
    }
  }
  @screen md {
    .text-stat-label {
      @apply text-[22px] leading-[normal];
    }
  }

  .text-stat-label-compact {
    @apply font-extrabold text-green-2 text-[18px] leading-[20px];
  }
  @screen sm {
    .text-stat-label-compact {
      @apply text-[22px] leading-[24px];
    }
  }
}

:root {
  --black: rgba(0, 0, 0, 1);
  --dark-green: rgba(26, 58, 54, 1);
  --gray: rgba(133, 132, 132, 1);
  --green-2: var(--variable-collection-green-2);
  --link-text-interaction-font-family: "PP Neue Montreal Arabic", Helvetica;
  --link-text-interaction-font-size: 14px;
  --link-text-interaction-font-style: normal;
  --link-text-interaction-font-weight: 500;
  --link-text-interaction-letter-spacing: 0px;
  --link-text-interaction-line-height: normal;
  --off-gray: rgba(235, 235, 235, 1);
  --off-green: rgba(221, 247, 234, 1);
  --red: rgba(231, 60, 60, 1);
  --variable-collection-gradiant-shape: rgba(19, 164, 90, 0.08);
  --variable-collection-green-2: rgba(16, 169, 131, 1);
  --white: rgba(255, 255, 255, 1);
}

:root {
  --animate-spin: spin 1s linear infinite;
}

.animate-fade-in {
  animation: fade-in 1s var(--animation-delay, 0s) ease forwards;
}

.animate-dissolve-in {
  animation: dissolve-in 0.3s ease-out forwards;
}

.animate-fade-up {
  animation: fade-up 1s var(--animation-delay, 0s) ease forwards;
}

.animate-marquee {
  animation: marquee var(--duration) infinite linear;
}

.animate-marquee-vertical {
  animation: marquee-vertical var(--duration) linear infinite;
}

.animate-shimmer {
  animation: shimmer 8s infinite;
}

.animate-spin {
  animation: var(--animate-spin);
}

@keyframes spin {
  to {
    transform: rotate(1turn);
  }
}

@keyframes image-glow {
  0% {
    opacity: 0;
    animation-timing-function: cubic-bezier(0.74, 0.25, 0.76, 1);
  }

  10% {
    opacity: 0.7;
    animation-timing-function: cubic-bezier(0.12, 0.01, 0.08, 0.99);
  }

  to {
    opacity: 0.4;
  }
}

@keyframes fade-in {
  0% {
    opacity: 0;
    transform: translateY(-10px);
  }

  to {
    opacity: 1;
    transform: none;
  }
}

@keyframes dissolve-in {
  0% {
    opacity: 0;
    transform: scale(0.95);
  }

  100% {
    opacity: 1;
    transform: scale(1);
  }
}

@keyframes fade-up {
  0% {
    opacity: 0;
    transform: translateY(20px);
  }

  to {
    opacity: 1;
    transform: none;
  }
}

@keyframes shimmer {
  0%,
  90%,
  to {
    background-position: calc(-100% - var(--shimmer-width)) 0;
  }

  30%,
  60% {
    background-position: calc(100% + var(--shimmer-width)) 0;
  }
}

@keyframes marquee {
  0% {
    transform: translate(0);
  }

  to {
    transform: translateX(calc(-100% - var(--gap)));
  }
}

@keyframes marquee-vertical {
  0% {
    transform: translateY(0);
  }

  to {
    transform: translateY(calc(-100% - var(--gap)));
  }
}

@keyframes slideshow-fade {
  0% {
    opacity: 0;
    transform: scale(1.05);
  }
  
  20% {
    opacity: 1;
    transform: scale(1);
  }
  
  80% {
    opacity: 1;
    transform: scale(1);
  }
  
  100% {
    opacity: 0;
    transform: scale(0.95);
  }
}

@keyframes slideshow-slide {
  0% {
    transform: translateX(100%);
    opacity: 0;
  }
  
  10% {
    opacity: 1;
  }
  
  90% {
    opacity: 1;
  }
  
  100% {
    transform: translateX(-100%);
    opacity: 0;
  }
}

@keyframes slide-down {
  0% {
    transform: translateY(-100%);
    opacity: 0;
  }
  
  100% {
    transform: translateY(0);
    opacity: 1;
  }
}

.animate-slideshow-fade {
  animation: slideshow-fade 4s ease-in-out infinite;
}

.animate-slideshow-slide {
  animation: slideshow-slide 4s ease-in-out infinite;
}

.animate-ease-in {
  animation: ease-in 600ms ease-out forwards;
}

@keyframes ease-in {
  0% {
    opacity: 0;
    transform: translateY(32px);
  }
  100% {
    opacity: 1;
    transform: translateY(0);
  }
}

.animate-ease-in-300 {
  animation: ease-in-300 300ms ease-in forwards;
}

@keyframes ease-in-300 {
  0% {
    opacity: 0;
    transform: translateY(32px);
  }
  100% {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes radial-gradient-expand {
  0% {
    transform: scale(0);
    opacity: 1;
  }
  100% {
    transform: scale(1.5);
    opacity: 1;
  }
}

@keyframes fade-to-green {
  0% {
    opacity: 0;
  }
  80% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}

.animate-radial-gradient-expand {
  animation: radial-gradient-expand 4s ease-out forwards;
}

.animate-fade-to-green {
  animation: fade-to-green 4s ease-out forwards;
}