/*
 * visual-enhancements.css
 * Raffinamenti visivi: grain texture, clip-path reveal, marquee strip,
 * accent bar animata, custom cursor, parallax hero.
 *
 * Enqueued da functions.php dopo marta-miceli-child.
 * Aggiunto: 2026-05-16
 */


/* =====================================================
   1. GRAIN TEXTURE — noise editoriale su sezioni piatte
   =====================================================
   Tecnica: SVG feTurbulence come background-image layer,
   sopra il background-color già definito in style.css.
   Nessun pseudo-elemento → nessun conflitto z-index.
   ===================================================== */

.services-section,
.testimonials-section {
  /* Layer grana sopra il colore nude esistente */
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='400' height='400'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.68' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.038'/%3E%3C/svg%3E");
  background-repeat: repeat;
  background-size: 320px 320px;
  /* background-color resta var(--color-nude) da style.css */
}

.about-strip {
  /* Stessa grana, su sfondo cream */
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='400' height='400'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.68' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.032'/%3E%3C/svg%3E");
  background-repeat: repeat;
  background-size: 320px 320px;
}


/* =====================================================
   2. CLIP-PATH REVEAL — rivelazione immagini editoriale
   =====================================================
   Attributo data-animate-clip: rivelazione orizzontale (da destra).
   Usato su .about-strip-image (ritratto Marta).
   La clip-path è applicata sull'<img> figlia, non sul contenitore,
   così il bordo decorativo ::before rimane visibile.
   ===================================================== */

[data-animate-clip] {
  overflow: hidden; /* necessario per contenere la clip durante l'animazione */
}

[data-animate-clip] img {
  clip-path: inset(0 100% 0 0);
  transition: clip-path 1.0s cubic-bezier(0.77, 0, 0.175, 1);
}

[data-animate-clip].is-visible img {
  clip-path: inset(0 0% 0 0);
}

/* Variante verticale (dal basso) — per uso futuro nel portfolio */
[data-animate-clip-up] {
  overflow: hidden;
}

[data-animate-clip-up] img {
  clip-path: inset(100% 0 0 0);
  transition: clip-path 0.85s cubic-bezier(0.77, 0, 0.175, 1);
}

[data-animate-clip-up].is-visible img {
  clip-path: inset(0% 0 0 0);
}

/* Stagger automatico per griglie (portfolio, testimonials) */
[data-animate-clip-up]:nth-child(2) img { transition-delay: 0.10s; }
[data-animate-clip-up]:nth-child(3) img { transition-delay: 0.20s; }
[data-animate-clip-up]:nth-child(4) img { transition-delay: 0.10s; }
[data-animate-clip-up]:nth-child(5) img { transition-delay: 0.20s; }
[data-animate-clip-up]:nth-child(6) img { transition-delay: 0.30s; }

/* Rispetta preferenze riduzione movimento */
@media (prefers-reduced-motion: reduce) {
  [data-animate-clip] img,
  [data-animate-clip-up] img {
    clip-path: none;
    transition: none;
  }
}


/* =====================================================
   3. MARQUEE STRIP — banda scorrevole editoriale
   =====================================================
   HTML: <div class="marquee-strip"> inserito in front-page.php
   tra la sezione Servizi e quella Portfolio.
   Il contenuto è duplicato nell'HTML per garantire il loop
   seamless con translateX(-50%).
   ===================================================== */

.marquee-strip {
  overflow: hidden;
  background-color: var(--color-espresso);
  padding: 20px 0;
}

.marquee-track {
  display: flex;
  width: max-content;
  animation: mm-marquee 36s linear infinite;
  will-change: transform;
}

/* Pausa al hover — WCAG 2.1 AA §2.2.2 (contenuto in movimento) */
.marquee-strip:hover .marquee-track {
  animation-play-state: paused;
}

.marquee-item {
  display: inline-flex;
  align-items: center;
  gap: 24px;
  padding: 0 36px;
  white-space: nowrap;
  font-family: var(--font-sans);
  font-size: 0.68rem;
  font-weight: 400;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: var(--color-gold);
}

.marquee-sep {
  color: var(--color-blush-dark);
  font-size: 0.6rem;
  opacity: 0.8;
}

@keyframes mm-marquee {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); } /* -50% perché HTML è duplicato */
}

/* Fermato su prefers-reduced-motion */
@media (prefers-reduced-motion: reduce) {
  .marquee-track {
    animation: none;
    /* Mostra il contenuto statico senza scroll */
    justify-content: center;
    width: 100%;
    flex-wrap: wrap;
    gap: 8px;
    padding: 0 24px;
  }
}


/* =====================================================
   4. ACCENT BAR SERVICE CARDS — reveal con larghezza
   =====================================================
   Override del ::before in style.css:
   da opacity 0→1 (statico) a width 0→100% (reveal animato).
   ===================================================== */

.service-card::before {
  width: 0;         /* parte da zero */
  opacity: 1;       /* sempre opaco — è la width che anima */
  transition: width 0.42s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

.service-card:hover::before {
  width: 100%;
}


/* =====================================================
   5. HERO PARALLAX — ottimizzazione GPU
   =====================================================
   Il movimento è gestito da main.js via requestAnimationFrame.
   Questa regola evita repaint inutili durante lo scroll.
   ===================================================== */

.hero-bg {
  will-change: transform;
  backface-visibility: hidden;
}


/* Nota: custom cursor rimosso — cursore nativo ripristinato. */