/*
Theme Name: Crafto WP
Theme URI: https://crafto.themezaa.com
Author: Mikhail
Description: A modern marketing agency theme converted from static HTML, featuring customizable global variables, Tailwind styling, and deep Framer-like vanilla JS animations.
Version: 1.0.0
Text Domain: crafto-wp
Tags: marketing, tailwind, portfolio, custom-colors
*/

:root {
  /* These will be overwritten by WP Customizer if the user changes them */
  --color-primary: #F96F4A;
  --color-secondary: #1F242E;
  --color-green-500: #2EBB79;
  --color-light: #F7F7F7;
  --color-muted: #717580;
  --color-border: #E4E4E4;
}

/* Base resets & utilities */
html { scroll-behavior: smooth; }
body { 
  font-family: 'Inter', sans-serif; 
  overflow-x: hidden; 
  color: var(--color-muted); 
  -webkit-font-smoothing: antialiased; 
}
h1, h2, h3, h4, h5, h6 { 
  color: var(--color-secondary); 
  letter-spacing: -0.5px; 
}
a { transition: all 0.3s ease-in-out; }

/* Custom Scrollbar */
::-webkit-scrollbar { width: 6px; }
::-webkit-scrollbar-track { background: #f1f1f1; }
::-webkit-scrollbar-thumb { background: var(--color-secondary); border-radius: 3px; }

/* Animation Classes */
.marquee-wrapper { 
  mask-image: linear-gradient(to right, transparent 0%, black 10%, black 90%, transparent 100%); 
  -webkit-mask-image: linear-gradient(to right, transparent 0%, black 10%, black 90%, transparent 100%); 
}

.fade-up { opacity: 0; transform: translateY(30px); transition: opacity 0.7s ease-out, transform 0.7s ease-out; }
.fade-up.visible { opacity: 1; transform: translateY(0); }
.fade-side { opacity: 0; transform: translateX(-40px); transition: opacity 0.7s ease-out, transform 0.7s ease-out; }
.fade-side.visible { opacity: 1; transform: translateX(0); }

/* Components */
.portfolio-item { transition: transform 0.3s ease, opacity 0.3s ease; }
.accordion-content { max-height: 0; overflow: hidden; transition: max-height 0.35s ease-out; }