@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;
  }
}

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

: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;
  }
}

.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);
  }
}