/*
Theme Name: GreativeSoft
Theme URI: https://greativesoft.com
Author: GreativeSoft
Author URI: https://greativesoft.com
Description: A modern, lightweight custom WordPress theme for GreativeSoft built with Tailwind CSS.
Version: 1.0.0
Requires at least: 6.0
Tested up to: 6.7
Requires PHP: 8.0
License: GNU General Public License v2 or later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: greativesoft
Tags: custom, tailwind, responsive, modern, blog, portfolio
*/

/* Theme base styles — Tailwind CSS handles utility classes via assets/css/main.css */


/* Greative Soft — Premium Software Product Studio */
:root {
  --forest: #034F46;
  --forest-deep: #013029;
  --lavender: #F0D7FF;
  --warm: #FFA946;
  --cream: #FFFFF5;
  --cream-deep: #F8F8F3;
  --ink: #111827;
  --ink-soft: #374151;
  --ink-muted: #6B7280;
  --border: rgba(3, 79, 70, .10);
  --shadow-soft: 0 1px 2px rgba(3, 79, 70, .04), 0 8px 24px -8px rgba(3, 79, 70, .08);
  --shadow-lift: 0 2px 4px rgba(3, 79, 70, .04), 0 24px 48px -16px rgba(3, 79, 70, .16);
  --shadow-glow: 0 0 0 1px rgba(3, 79, 70, .04), 0 40px 80px -32px rgba(3, 79, 70, .24);
}

html {
  scroll-behavior: smooth;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale
}

body {
  font-family: 'Inter', ui-sans-serif, system-ui, sans-serif;
  background: #fff;
  color: var(--ink);
  font-feature-settings: "ss01", "cv11"
}

h1,
h2,
h3,
h4,
h5,
h6 {
  font-family: 'Manrope', ui-sans-serif, system-ui, sans-serif;
  letter-spacing: -.02em
}

::selection {
  background: var(--lavender);
  color: var(--forest-deep)
}

/* Tailwind-like color utilities (matching theme tokens) */
.text-forest {
  color: var(--forest)
}

.text-forest-deep {
  color: var(--forest-deep)
}

.text-ink {
  color: var(--ink)
}

.text-ink-soft {
  color: var(--ink-soft)
}

.text-ink-muted {
  color: var(--ink-muted)
}

.text-cream {
  color: var(--cream)
}

.text-warm {
  color: var(--warm)
}

.bg-forest {
  background: var(--forest)
}

.bg-forest-deep {
  background: var(--forest-deep)
}

.bg-cream {
  background: var(--cream)
}

.bg-cream-deep {
  background: var(--cream-deep)
}

.bg-lavender {
  background: var(--lavender)
}

.bg-warm {
  background: var(--warm)
}

.bg-ink {
  background: var(--ink)
}

.border-border {
  border-color: var(--border)
}

.ring-border {
  --tw-ring-color: var(--border)
}

.font-display {
  font-family: 'Manrope', ui-sans-serif, system-ui, sans-serif
}

.text-balance {
  text-wrap: balance
}

.text-pretty {
  text-wrap: pretty
}

.shadow-soft {
  box-shadow: var(--shadow-soft)
}

.shadow-lift {
  box-shadow: var(--shadow-lift)
}

.shadow-glow {
  box-shadow: var(--shadow-glow)
}

.bg-grid {
  background-image:
    linear-gradient(to right, rgba(3, 79, 70, .06) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(3, 79, 70, .06) 1px, transparent 1px);
  background-size: 56px 56px;
}

.bg-ambient {
  background:
    radial-gradient(60% 50% at 20% 10%, rgba(240, 215, 255, .55), transparent 70%),
    radial-gradient(50% 40% at 90% 20%, rgba(255, 169, 70, .20), transparent 70%),
    radial-gradient(60% 50% at 60% 90%, rgba(3, 79, 70, .10), transparent 70%);
}

.glass {
  background: rgba(255, 255, 255, .7);
  backdrop-filter: saturate(140%) blur(14px);
  -webkit-backdrop-filter: saturate(140%) blur(14px)
}

.ring-soft {
  box-shadow: inset 0 0 0 1px rgba(3, 79, 70, .08)
}

.reveal {
  opacity: 0;
  transform: translateY(16px);
  transition: opacity .7s ease, transform .7s cubic-bezier(.2, .7, .2, 1)
}

.reveal.in {
  opacity: 1;
  transform: translateY(0)
}

.marquee-track {
  display: flex;
  width: max-content;
  gap: 1.5rem;
  padding: 0 .75rem;
  animation: marquee 45s linear infinite
}

/* Second row scrolls the opposite direction */
.marquee-track.marquee-reverse {
  animation-direction: reverse;
}

@keyframes marquee {
  from {
    transform: translateX(0)
  }

  to {
    transform: translateX(-50%)
  }
}

.floaty {
  animation: floaty 8s ease-in-out infinite
}

@keyframes floaty {

  0%,
  100% {
    transform: translateY(0)
  }

  50% {
    transform: translateY(-10px)
  }
}

/* Form inputs.
   Element-qualified selectors (input.field/select.field/textarea.field) so the
   theme style beats @tailwindcss/forms' [type='...'] base rules, which otherwise
   override single-line inputs with square corners + a gray border. */
.field,
input.field,
select.field,
textarea.field {
  width: 100%;
  border: 1px solid var(--border);
  background: rgba(255, 255, 245, .5);
  padding: .75rem 1rem;
  border-radius: .75rem;
  color: var(--ink);
  transition: .2s
}

.field::placeholder,
input.field::placeholder,
textarea.field::placeholder {
  color: rgba(107, 114, 128, .7)
}

.field:focus,
input.field:focus,
select.field:focus,
textarea.field:focus {
  outline: none;
  background: #fff;
  border-color: transparent;
  box-shadow: 0 0 0 2px rgba(3, 79, 70, .3)
}

.hero-stat-card {
  animation: statRise 700ms ease both;
  transform-origin: center;
}

.hero-stat-card:nth-child(1) { animation-delay: 120ms; }
.hero-stat-card:nth-child(2) { animation-delay: 220ms; }
.hero-stat-card:nth-child(3) { animation-delay: 320ms; }
.hero-stat-card:nth-child(4) { animation-delay: 420ms; }

.hero-stat-card:hover {
  transform: translateY(-4px) scale(1.01);
  box-shadow: 0 18px 40px rgba(15, 23, 42, 0.10);
}

@keyframes statRise {
  from {
    opacity: 0;
    transform: translateY(16px) scale(0.98);
  }
  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

@media (prefers-reduced-motion: reduce) {
  .hero-stat-card {
    animation: none;
  }
}

/* Header css */
 [data-nav] {
      position: fixed;
      inset: 0 0 auto 0;
      z-index: 50;
      padding: 1rem 0;
      transition: padding .3s;
    }

    [data-nav].scrolled {
      padding: .5rem 0;
    }

    [data-nav] .bar {
      transition: all .3s;
      border-radius: 2rem;
      padding: .75rem 1rem;
    }

    [data-nav].scrolled .bar {
      background: rgba(255, 255, 255, .7);
      backdrop-filter: saturate(140%) blur(14px);
      box-shadow: inset 0 0 0 1px rgba(3, 79, 70, .08), var(--shadow-soft);
    }


  /* Logo Slider */
  /* Fluid multi-color mesh gradient blending your brand colors */
  .hero-mesh-shader {
    background-image: 
      radial-gradient(at 0% 0%, rgba(240, 215, 255, 0.45) 0px, transparent 50%), /* Lavender */
      radial-gradient(at 100% 0%, rgba(3, 79, 70, 0.08) 0px, transparent 50%), /* Forest */
      radial-gradient(at 100% 100%, rgba(255, 169, 70, 0.15) 0px, transparent 50%), /* Warm */
      radial-gradient(at 0% 100%, rgba(240, 215, 255, 0.3) 0px, transparent 50%); /* Lavender secondary */
    background-size: 200% 200%;
    animation: meshHero 16s ease-in-out infinite alternate;
  }

  @keyframes meshHero {
    0% { background-position: 0% 0%; }
    50% { background-position: 100% 100%; }
    100% { background-position: 0% 100%; }
  }

  /* Services Section Shader */
   .brand-mesh-shader {
      background-image: 
        radial-gradient(at 80% 0%, rgba(3, 79, 70, 0.12) 0px, transparent 50%),
        radial-gradient(at 0% 40%, rgba(3, 79, 70, 0.08) 0px, transparent 50%),
        radial-gradient(at 80% 100%, rgba(3, 79, 70, 0.15) 0px, transparent 50%),
        radial-gradient(at 0% 100%, rgba(3, 79, 70, 0.05) 0px, transparent 50%);
      background-size: 200% 200%;
      animation: meshMovement 16s ease-in-out infinite alternate;
    }

    @keyframes meshMovement {
      0% {
        background-position: 0% 0%;
      }
      50% {
        background-position: 100% 100%;
      }
      100% {
        background-position: 0% 100%;
      }
    }

    /* Custom Shader Gradient (Lavender & Warm blend) */
    .process-mesh-shader {
      background-image: 
        radial-gradient(at 10% 0%, rgba(240, 215, 255, 0.5) 0px, transparent 50%), /* lavender */
        radial-gradient(at 90% 10%, rgba(255, 169, 70, 0.15) 0px, transparent 50%), /* warm */
        radial-gradient(at 20% 100%, rgba(255, 169, 70, 0.1) 0px, transparent 50%), /* warm */
        radial-gradient(at 80% 90%, rgba(240, 215, 255, 0.4) 0px, transparent 50%); /* lavender */
      background-size: 200% 200%;
      animation: meshProcess 18s ease-in-out infinite alternate;
    }

    @keyframes meshProcess {
      0% { background-position: 0% 0%; }
      50% { background-position: 100% 100%; }
      100% { background-position: 0% 100%; }
    }

    /* Physics-based cascading animations */
    [data-process] .gs-step {
      opacity: 0;
      transform: translateY(30px);
      transition: opacity 0.8s cubic-bezier(0.16, 1, 0.3, 1), transform 0.8s cubic-bezier(0.16, 1, 0.3, 1);
      transition-delay: calc(var(--i) * 150ms);
    }
    [data-process].is-active .gs-step { 
      opacity: 1; 
      transform: translateY(0); 
    }

    [data-process] .gs-badge {
      opacity: 0;
      transform: scale(0.5);
      transition: opacity 0.5s ease, transform 0.7s cubic-bezier(0.34, 1.56, 0.64, 1);
      transition-delay: calc(var(--i) * 150ms + 150ms);
    }
    [data-process].is-active .gs-badge { 
      opacity: 1; 
      transform: scale(1); 
    }

    /* Elegant ring pulse on entry */
    [data-process].is-active .gs-badge-ring { 
      animation: gs-ring 2s cubic-bezier(0.16, 1, 0.3, 1) forwards; 
      animation-delay: calc(var(--i) * 150ms + 350ms); 
    }
    @keyframes gs-ring {
      0%   { box-shadow: 0 0 0 0 rgba(3,79,70,0.2); opacity: 1; }
      100% { box-shadow: 0 0 0 12px rgba(3,79,70,0); opacity: 0; }
    }

    /* Smooth drawing line */
    [data-process] .gs-line-fill {
      transform: scaleX(0);
      transform-origin: left center;
      transition: transform 1.5s cubic-bezier(0.25, 1, 0.5, 1);
      transition-delay: 200ms;
    }
    [data-process].is-active .gs-line-fill { 
      transform: scaleX(1); 
    }

    /* Glowing traveling dot */
    [data-process] .gs-line-dot {
      left: 0;
      opacity: 0;
      transition: left 1.5s cubic-bezier(0.25, 1, 0.5, 1), opacity 0.4s ease;
      transition-delay: 200ms;
    }
    [data-process].is-active .gs-line-dot { 
      left: 100%; 
      opacity: 1; 
    }

    @media (prefers-reduced-motion: reduce) {
      [data-process] .gs-step,
      [data-process] .gs-badge,
      [data-process] .gs-line-fill,
      [data-process] .gs-line-dot { transition: none; opacity: 1; transform: none; }
      [data-process] .gs-line-dot { left: 100%; }
      [data-process].is-active .gs-badge-ring { animation: none; }
    }