/* ══════════════════════════════════════════════════════════════════
   TUBINO — Utilities
   Classi utility riutilizzabili per spacing, testo, display, 
   visibilità e animazioni scroll.
   ══════════════════════════════════════════════════════════════════ */

/* ── Visibilità ────────────────────────────────────────────────── */
.visually-hidden {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
}

.hidden {
    display: none !important;
}

/* ── Display ───────────────────────────────────────────────────── */
.d-block   { display: block; }
.d-flex    { display: flex; }
.d-grid    { display: grid; }
.d-none    { display: none; }

/* ── Text Alignment ────────────────────────────────────────────── */
.text-center { text-align: center; }
.text-left   { text-align: left; }
.text-right  { text-align: right; }

/* ── Text Color ────────────────────────────────────────────────── */
.text-white   { color: var(--color-white); }
.text-muted   { color: var(--color-text-light); }
.text-accent  { color: var(--color-accent); }
.text-inverse { color: var(--color-text-inverse); }

/* ── Margin utilities ──────────────────────────────────────────── */
.mb-0  { margin-bottom: 0; }
.mb-1  { margin-bottom: var(--space-1); }
.mb-2  { margin-bottom: var(--space-2); }
.mb-3  { margin-bottom: var(--space-3); }
.mb-4  { margin-bottom: var(--space-4); }
.mb-6  { margin-bottom: var(--space-6); }
.mb-8  { margin-bottom: var(--space-8); }
.mb-12 { margin-bottom: var(--space-12); }
.mb-16 { margin-bottom: var(--space-16); }

.mt-0  { margin-top: 0; }
.mt-4  { margin-top: var(--space-4); }
.mt-6  { margin-top: var(--space-6); }
.mt-8  { margin-top: var(--space-8); }

.mx-auto { margin-left: auto; margin-right: auto; }

/* ── Padding utilities ─────────────────────────────────────────── */
.p-0   { padding: 0; }
.p-4   { padding: var(--space-4); }
.p-6   { padding: var(--space-6); }
.p-8   { padding: var(--space-8); }

.px-0  { padding-left: 0; padding-right: 0; }
.px-6  { padding-left: var(--space-6); padding-right: var(--space-6); }

.py-0  { padding-top: 0; padding-bottom: 0; }
.py-8  { padding-top: var(--space-8); padding-bottom: var(--space-8); }
.py-12 { padding-top: var(--space-12); padding-bottom: var(--space-12); }

/* ── Width ─────────────────────────────────────────────────────── */
.w-full { width: 100%; }

/* ── Background ────────────────────────────────────────────────── */
.bg-black  { background: var(--color-black); }
.bg-white  { background: var(--color-white); }
.bg-light  { background: var(--color-bg-light); }
.bg-gray   { background: var(--color-bg-gray); }

/* ── Border radius ─────────────────────────────────────────────── */
.rounded-sm  { border-radius: var(--radius-sm); }
.rounded-md  { border-radius: var(--radius-md); }
.rounded-lg  { border-radius: var(--radius-lg); }
.rounded-xl  { border-radius: var(--radius-xl); }

/* ══════════════════════════════════════════════════════════════════
   ANIMAZIONI SCROLL
   Sistema unificato per le animazioni al scroll.
   Unifica [data-anim] (Intersection Observer) e
   [data-animate] (GSAP/ScrollTrigger).
   ══════════════════════════════════════════════════════════════════ */

/* ── Intersection Observer animations [data-anim] ── */
[data-anim] {
    opacity: 0;
    transform: translateY(24px);
    transition: opacity var(--duration-slower) ease,
                transform var(--duration-slower) ease;
}

[data-anim].visible {
    opacity: 1;
    transform: translateY(0);
}

[data-anim="left"]  { transform: translateX(-32px); }
[data-anim="right"] { transform: translateX(32px); }

[data-anim="left"].visible,
[data-anim="right"].visible {
    transform: translateX(0);
}

[data-anim="blur"] {
    opacity: 0;
    filter: blur(8px);
    transform: translateY(0);
    transition: opacity 0.9s ease, filter 0.9s ease;
}

[data-anim="blur"].visible {
    opacity: 1;
    filter: blur(0);
}

/* Stagger per card animate */
[data-anim-stagger]:nth-child(1) { transition-delay: 0s; }
[data-anim-stagger]:nth-child(2) { transition-delay: 0.1s; }
[data-anim-stagger]:nth-child(3) { transition-delay: 0.2s; }
[data-anim-stagger]:nth-child(4) { transition-delay: 0.3s; }
[data-anim-stagger]:nth-child(5) { transition-delay: 0.4s; }
[data-anim-stagger]:nth-child(6) { transition-delay: 0.5s; }

/* ── GSAP / ScrollTrigger states [data-animate] ── */
[data-animate] {
    opacity: 0;
}

[data-animate="fade-up"] {
    transform: translateY(40px);
}

[data-animate="scale-in"] {
    transform: scale(0.9);
}

[data-animate="stagger-up"] {
    opacity: 0;
    transform: translateY(40px);
}

/* ── Reduced motion ── */
@media (prefers-reduced-motion: reduce) {
    [data-anim],
    [data-anim].visible,
    [data-animate],
    [data-animate="fade-up"],
    [data-animate="scale-in"],
    [data-animate="stagger-up"] {
        opacity: 1 !important;
        transform: none !important;
        filter: none !important;
        transition: none !important;
    }
}

/* ══════════════════════════════════════════════════════════════════
   RESPONSIVE UTILITIES
   ══════════════════════════════════════════════════════════════════ */
@media (max-width: 767px) {
    .hide-mobile  { display: none !important; }
}

@media (min-width: 768px) {
    .hide-desktop { display: none !important; }
}