/* ============================================================
   UTILITY.CSS — EcoBuild Studio
   Spacing, Display, Text, Colors, Visibility, Animations,
   Scroll Reveal, Helpers
   ============================================================ */

/* ===================== DISPLAY ===================== */
.d-none         { display: none !important; }
.d-block        { display: block !important; }
.d-flex         { display: flex !important; }
.d-inline       { display: inline !important; }
.d-inline-flex  { display: inline-flex !important; }
.d-inline-block { display: inline-block !important; }
.d-grid         { display: grid !important; }

/* ===================== OVERFLOW ===================== */
.overflow-hidden  { overflow: hidden !important; }
.overflow-auto    { overflow: auto !important; }
.overflow-x-auto  { overflow-x: auto !important; }
.overflow-y-auto  { overflow-y: auto !important; }

/* ===================== POSITION ===================== */
.pos-relative { position: relative; }
.pos-absolute { position: absolute; }
.pos-fixed    { position: fixed; }
.pos-sticky   { position: sticky; top: calc(var(--header-height) + var(--space-md)); }

/* ===================== TEXT ===================== */
.text-left     { text-align: left; }
.text-center   { text-align: center; }
.text-right    { text-align: right; }
.text-justify  { text-align: justify; }

.text-uppercase   { text-transform: uppercase; }
.text-lowercase   { text-transform: lowercase; }
.text-capitalize  { text-transform: capitalize; }
.text-normal-case { text-transform: none; }

.text-nowrap   { white-space: nowrap; }
.text-truncate {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.text-line-clamp-2 {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
.text-line-clamp-3 {
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

/* Font Sizes */
.text-xs   { font-size: var(--fs-xs) !important; }
.text-sm   { font-size: var(--fs-sm) !important; }
.text-base { font-size: var(--fs-base) !important; }
.text-lg   { font-size: var(--fs-lg) !important; }
.text-h6   { font-size: var(--fs-h6) !important; }
.text-h5   { font-size: var(--fs-h5) !important; }
.text-h4   { font-size: var(--fs-h4) !important; }
.text-h3   { font-size: var(--fs-h3) !important; }
.text-h2   { font-size: var(--fs-h2) !important; }
.text-h1   { font-size: var(--fs-h1) !important; }

/* Font Weights */
.fw-light     { font-weight: var(--fw-light) !important; }
.fw-regular   { font-weight: var(--fw-regular) !important; }
.fw-medium    { font-weight: var(--fw-medium) !important; }
.fw-semibold  { font-weight: var(--fw-semibold) !important; }
.fw-bold      { font-weight: var(--fw-bold) !important; }
.fw-extrabold { font-weight: var(--fw-extrabold) !important; }

/* Font Families */
.ff-heading { font-family: var(--ff-heading) !important; }
.ff-body    { font-family: var(--ff-body) !important; }
.ff-mono    { font-family: var(--ff-mono) !important; }

/* Line Heights */
.lh-tight   { line-height: var(--lh-tight) !important; }
.lh-snug    { line-height: var(--lh-snug) !important; }
.lh-normal  { line-height: var(--lh-normal) !important; }
.lh-relaxed { line-height: var(--lh-relaxed) !important; }

/* Letter Spacing */
.ls-tight   { letter-spacing: var(--ls-tight) !important; }
.ls-normal  { letter-spacing: var(--ls-normal) !important; }
.ls-wide    { letter-spacing: var(--ls-wide) !important; }
.ls-wider   { letter-spacing: var(--ls-wider) !important; }
.ls-widest  { letter-spacing: var(--ls-widest) !important; }

/* ===================== COLORS ===================== */
.text-primary   { color: var(--clr-primary) !important; }
.text-secondary { color: var(--clr-secondary) !important; }
.text-accent    { color: var(--clr-accent) !important; }
.text-body      { color: var(--clr-text) !important; }
.text-muted     { color: var(--clr-text-muted) !important; }
.text-subtle    { color: var(--clr-text-secondary) !important; }
.text-white     { color: var(--clr-white) !important; }
.text-black     { color: var(--clr-black) !important; }
.text-success   { color: var(--clr-success) !important; }
.text-warning   { color: var(--clr-warning) !important; }
.text-error     { color: var(--clr-error) !important; }

/* Backgrounds */
.bg-primary   { background-color: var(--clr-primary) !important; }
.bg-secondary { background-color: var(--clr-secondary) !important; }
.bg-accent    { background-color: var(--clr-accent) !important; }
.bg-white     { background-color: var(--clr-white) !important; }
.bg-black     { background-color: var(--clr-black) !important; }
.bg-body      { background-color: var(--clr-bg) !important; }
.bg-alt       { background-color: var(--clr-bg-alt) !important; }
.bg-card      { background-color: var(--clr-bg-card) !important; }
.bg-transparent { background-color: transparent !important; }

/* ===================== SPACING ===================== */
/* Margin utilities */
.m-0    { margin: 0 !important; }
.m-auto { margin: auto !important; }
.mx-auto{ margin-inline: auto !important; }
.my-auto{ margin-block: auto !important; }

.mt-0   { margin-top: 0 !important; }
.mt-xs  { margin-top: var(--space-xs) !important; }
.mt-sm  { margin-top: var(--space-sm) !important; }
.mt-md  { margin-top: var(--space-md) !important; }
.mt-lg  { margin-top: var(--space-lg) !important; }
.mt-xl  { margin-top: var(--space-xl) !important; }
.mt-2xl { margin-top: var(--space-2xl) !important; }
.mt-3xl { margin-top: var(--space-3xl) !important; }

.mb-0   { margin-bottom: 0 !important; }
.mb-xs  { margin-bottom: var(--space-xs) !important; }
.mb-sm  { margin-bottom: var(--space-sm) !important; }
.mb-md  { margin-bottom: var(--space-md) !important; }
.mb-lg  { margin-bottom: var(--space-lg) !important; }
.mb-xl  { margin-bottom: var(--space-xl) !important; }
.mb-2xl { margin-bottom: var(--space-2xl) !important; }
.mb-3xl { margin-bottom: var(--space-3xl) !important; }

.ml-auto { margin-left: auto !important; }
.mr-auto { margin-right: auto !important; }

/* Padding utilities */
.p-0   { padding: 0 !important; }
.p-xs  { padding: var(--space-xs) !important; }
.p-sm  { padding: var(--space-sm) !important; }
.p-md  { padding: var(--space-md) !important; }
.p-lg  { padding: var(--space-lg) !important; }
.p-xl  { padding: var(--space-xl) !important; }
.p-2xl { padding: var(--space-2xl) !important; }

.px-0  { padding-inline: 0 !important; }
.px-sm { padding-inline: var(--space-sm) !important; }
.px-md { padding-inline: var(--space-md) !important; }
.px-lg { padding-inline: var(--space-lg) !important; }
.px-xl { padding-inline: var(--space-xl) !important; }

.py-0  { padding-block: 0 !important; }
.py-sm { padding-block: var(--space-sm) !important; }
.py-md { padding-block: var(--space-md) !important; }
.py-lg { padding-block: var(--space-lg) !important; }
.py-xl { padding-block: var(--space-xl) !important; }

/* Gap */
.gap-0   { gap: 0 !important; }
.gap-xs  { gap: var(--space-xs) !important; }
.gap-sm  { gap: var(--space-sm) !important; }
.gap-md  { gap: var(--space-md) !important; }
.gap-lg  { gap: var(--space-lg) !important; }
.gap-xl  { gap: var(--space-xl) !important; }

/* ===================== SIZING ===================== */
.w-100     { width: 100% !important; }
.w-auto    { width: auto !important; }
.h-100     { height: 100% !important; }
.h-auto    { height: auto !important; }
.min-h-screen { min-height: 100vh; }
.max-w-sm  { max-width: 480px; }
.max-w-md  { max-width: 640px; }
.max-w-lg  { max-width: 800px; }
.max-w-xl  { max-width: 960px; }

/* ===================== BORDERS ===================== */
.border         { border: 1px solid var(--clr-border); }
.border-top     { border-top: 1px solid var(--clr-border); }
.border-bottom  { border-bottom: 1px solid var(--clr-border); }
.border-0       { border: none !important; }
.border-primary { border-color: var(--clr-primary) !important; }

.rounded-sm   { border-radius: var(--radius-sm) !important; }
.rounded-md   { border-radius: var(--radius-md) !important; }
.rounded-lg   { border-radius: var(--radius-lg) !important; }
.rounded-xl   { border-radius: var(--radius-xl) !important; }
.rounded-2xl  { border-radius: var(--radius-2xl) !important; }
.rounded-full { border-radius: var(--radius-full) !important; }
.rounded-0    { border-radius: 0 !important; }

/* ===================== SHADOWS ===================== */
.shadow-none { box-shadow: none !important; }
.shadow-sm   { box-shadow: var(--shadow-sm) !important; }
.shadow-md   { box-shadow: var(--shadow-md) !important; }
.shadow-lg   { box-shadow: var(--shadow-lg) !important; }
.shadow-xl   { box-shadow: var(--shadow-xl) !important; }

/* ===================== OPACITY ===================== */
.opacity-0   { opacity: 0; }
.opacity-25  { opacity: 0.25; }
.opacity-50  { opacity: 0.5; }
.opacity-75  { opacity: 0.75; }
.opacity-100 { opacity: 1; }

/* ===================== CURSOR ===================== */
.cursor-pointer  { cursor: pointer; }
.cursor-default  { cursor: default; }
.cursor-not-allowed { cursor: not-allowed; }

/* ===================== VISIBILITY ===================== */
.visible     { visibility: visible; }
.invisible   { visibility: hidden; }
.sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0,0,0,0);
    white-space: nowrap;
    border: 0;
}

/* ===================== ASPECT RATIO ===================== */
.aspect-video   { aspect-ratio: 16/9; }
.aspect-square  { aspect-ratio: 1; }
.aspect-3-2     { aspect-ratio: 3/2; }
.aspect-4-3     { aspect-ratio: 4/3; }

.object-cover   { object-fit: cover; }
.object-contain { object-fit: contain; }

/* ===================== Z-INDEX ===================== */
.z-0    { z-index: 0; }
.z-1    { z-index: var(--z-base); }
.z-10   { z-index: 10; }
.z-50   { z-index: 50; }

/* ===================== ANIMATIONS ===================== */

/* Keyframes */
@keyframes fadeIn {
    from { opacity: 0; }
    to   { opacity: 1; }
}
@keyframes fadeInUp {
    from { opacity: 0; transform: translateY(30px); }
    to   { opacity: 1; transform: translateY(0); }
}
@keyframes fadeInDown {
    from { opacity: 0; transform: translateY(-30px); }
    to   { opacity: 1; transform: translateY(0); }
}
@keyframes fadeInLeft {
    from { opacity: 0; transform: translateX(-30px); }
    to   { opacity: 1; transform: translateX(0); }
}
@keyframes fadeInRight {
    from { opacity: 0; transform: translateX(30px); }
    to   { opacity: 1; transform: translateX(0); }
}
@keyframes scaleIn {
    from { opacity: 0; transform: scale(0.9); }
    to   { opacity: 1; transform: scale(1); }
}
@keyframes slideUp {
    from { transform: translateY(100%); }
    to   { transform: translateY(0); }
}
@keyframes slideDown {
    from { transform: translateY(-100%); }
    to   { transform: translateY(0); }
}
@keyframes pulse {
    0%, 100% { transform: scale(1); }
    50%      { transform: scale(1.05); }
}
@keyframes float {
    0%, 100% { transform: translateY(0); }
    50%      { transform: translateY(-10px); }
}
@keyframes shimmer {
    0%   { background-position: -200% 0; }
    100% { background-position: 200% 0; }
}
@keyframes rotate {
    from { transform: rotate(0deg); }
    to   { transform: rotate(360deg); }
}
@keyframes bounce {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-8px); }
}
@keyframes typing {
    from { width: 0; }
    to   { width: 100%; }
}
@keyframes blink {
    0%, 100% { opacity: 1; }
    50%      { opacity: 0; }
}
@keyframes countUp {
    from { opacity: 0; transform: translateY(10px); }
    to   { opacity: 1; transform: translateY(0); }
}
@keyframes marquee {
    from { transform: translateX(0); }
    to   { transform: translateX(-50%); }
}
@keyframes progressBar {
    from { width: 0%; }
}

/* Animation Classes */
.anim-fade-in      { animation: fadeIn var(--dur-slow) var(--ease-out) forwards; }
.anim-fade-in-up   { animation: fadeInUp var(--dur-slow) var(--ease-out) forwards; }
.anim-fade-in-down { animation: fadeInDown var(--dur-slow) var(--ease-out) forwards; }
.anim-fade-in-left { animation: fadeInLeft var(--dur-slow) var(--ease-out) forwards; }
.anim-fade-in-right{ animation: fadeInRight var(--dur-slow) var(--ease-out) forwards; }
.anim-scale-in     { animation: scaleIn var(--dur-slow) var(--ease-out) forwards; }
.anim-pulse        { animation: pulse 2s ease-in-out infinite; }
.anim-float        { animation: float 3s ease-in-out infinite; }
.anim-bounce       { animation: bounce 2s ease-in-out infinite; }
.anim-rotate       { animation: rotate 8s linear infinite; }

/* Animation Delays */
.anim-delay-1 { animation-delay: 0.1s; }
.anim-delay-2 { animation-delay: 0.2s; }
.anim-delay-3 { animation-delay: 0.3s; }
.anim-delay-4 { animation-delay: 0.4s; }
.anim-delay-5 { animation-delay: 0.5s; }
.anim-delay-6 { animation-delay: 0.6s; }
.anim-delay-7 { animation-delay: 0.7s; }
.anim-delay-8 { animation-delay: 0.8s; }

/* ===================== SCROLL REVEAL ===================== */
/* Elements start invisible, revealed by JS IntersectionObserver */
.reveal {
    opacity: 0;
    transform: translateY(40px);
    transition: opacity var(--dur-slower) var(--ease-out),
                transform var(--dur-slower) var(--ease-out);
}
.reveal--left {
    opacity: 0;
    transform: translateX(-40px);
    transition: opacity var(--dur-slower) var(--ease-out),
                transform var(--dur-slower) var(--ease-out);
}
.reveal--right {
    opacity: 0;
    transform: translateX(40px);
    transition: opacity var(--dur-slower) var(--ease-out),
                transform var(--dur-slower) var(--ease-out);
}
.reveal--scale {
    opacity: 0;
    transform: scale(0.92);
    transition: opacity var(--dur-slower) var(--ease-out),
                transform var(--dur-slower) var(--ease-out);
}
.reveal--fade {
    opacity: 0;
    transition: opacity var(--dur-slower) var(--ease-out);
}

/* Revealed state (added by JS) */
.reveal.revealed,
.reveal--left.revealed,
.reveal--right.revealed,
.reveal--scale.revealed,
.reveal--fade.revealed {
    opacity: 1;
    transform: none;
}

/* Stagger delays for children */
.reveal-stagger > *:nth-child(1) { transition-delay: 0s; }
.reveal-stagger > *:nth-child(2) { transition-delay: 0.1s; }
.reveal-stagger > *:nth-child(3) { transition-delay: 0.2s; }
.reveal-stagger > *:nth-child(4) { transition-delay: 0.3s; }
.reveal-stagger > *:nth-child(5) { transition-delay: 0.4s; }
.reveal-stagger > *:nth-child(6) { transition-delay: 0.5s; }
.reveal-stagger > *:nth-child(7) { transition-delay: 0.6s; }
.reveal-stagger > *:nth-child(8) { transition-delay: 0.7s; }

/* Reduce motion for accessibility */
@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
        scroll-behavior: auto !important;
    }
    .reveal, .reveal--left, .reveal--right, .reveal--scale, .reveal--fade {
        opacity: 1;
        transform: none;
        transition: none;
    }
}

/* ===================== RESPONSIVE VISIBILITY ===================== */
/* Hide on mobile */
@media (max-width: 576px) {
    .hide-mobile { display: none !important; }
}
/* Hide on tablet */
@media (min-width: 577px) and (max-width: 1024px) {
    .hide-tablet { display: none !important; }
}
/* Hide on desktop */
@media (min-width: 1025px) {
    .hide-desktop { display: none !important; }
}
/* Show only mobile */
@media (min-width: 577px) {
    .show-mobile-only { display: none !important; }
}
/* Show only desktop */
@media (max-width: 1024px) {
    .show-desktop-only { display: none !important; }
}