/* =========================================================================
   COMPONENTS.CSS
   Pezzi riutilizzabili del sito: bottoni, menu, "nastro" scorrevole
   con il contatto, card dei servizi, card del portfolio.
   ========================================================================= */

/* -------------------------------------------------------------------------
   BOTTONI
   ------------------------------------------------------------------------- */

/* Bottone a "pillola" (bordi arrotondati) - versione scura, es. "Contattaci" in header */
.btn {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.85rem 1.5rem;
  border-radius: 999px;
  font-family: var(--font-heading);
  font-weight: 600;
  font-size: 0.95rem;
  white-space: nowrap;
  transition: opacity 0.2s ease;
}

.btn:hover {
  opacity: 0.85;
}

.btn--dark {
  background: var(--color-black);
  color: var(--color-white);
}

/* Bottone bianco pieno, usato su sfondo scuro (es. sezione "Chi siamo") */
.btn--light {
  background: var(--color-white);
  color: var(--color-black);
}

/* Bottone col solo bordo, usato su sfondo scuro (es. "Portfolio") */
.btn--outline {
  background: transparent;
  color: var(--color-white);
  border: 1px solid rgba(255, 255, 255, 0.4);
}

/* Bottone tondo con freccia, usato nelle card servizi/portfolio */
.btn-round {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  border: 1px solid var(--color-border);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  position: relative;
  overflow: hidden;
  transition: background 0.2s ease, color 0.2s ease, transform 0.2s ease;
}

.btn-round svg {
  width: 18px;
  height: 18px;
}

.btn-round:hover {
  background: var(--color-black);
  color: var(--color-white);
  transform: rotate(45deg);
}

/* Variante "scorrevole": la freccia non si inclina più al passaggio del
   mouse, invece esce dal bordo destro del cerchio (che qui fa da
   "finestrella" grazie a overflow:hidden) e una copia identica entra da
   sinistra fino a fermarsi al centro, dove stava la prima. Serve avere
   DUE <svg> uguali dentro al bottone (vedi l'HTML): la prima parte già
   al centro, la seconda parte nascosta a sinistra. */
.btn-round--slide:hover {
  transform: none;
}

.btn-round--slide svg {
  transition: transform 0.35s ease;
}

.btn-round--slide svg:first-child {
  transform: translateX(0);
}

.btn-round--slide svg:last-child {
  position: absolute;
  top: 50%;
  left: 50%;
  margin: -9px 0 0 -9px;
  transform: translateX(-40px);
}

.btn-round--slide:hover svg:first-child {
  transform: translateX(40px);
}

.btn-round--slide:hover svg:last-child {
  transform: translateX(0);
}

/* Variante "scorrevole" ma specchiata, per una freccia che punta a
   sinistra invece che a destra (es. ".portfolio-prev" qui sotto): stessa
   animazione di ".btn-round--slide" qui sopra, ma con le uscite/entrate
   invertite, così la freccia esce dal lato verso cui punta (sinistra)
   invece che verso destra. */
.btn-round--slide-reverse svg:last-child {
  transform: translateX(40px);
}

.btn-round--slide-reverse:hover svg:first-child {
  transform: translateX(-40px);
}

.btn-round--slide-reverse:hover svg:last-child {
  transform: translateX(0);
}

/* Variante del bottone tondo su sfondo scuro (es. footer, hero) */
.btn-round--light {
  border-color: rgba(255, 255, 255, 0.4);
  color: var(--color-white);
}

.btn-round--light:hover {
  background: var(--color-white);
  color: var(--color-black);
}

/* -------------------------------------------------------------------------
   HEADER / NAV
   ------------------------------------------------------------------------- */
.site-header {
  position: sticky;
  top: 0;
  z-index: 100;
  background: var(--color-white);
}

.site-header__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-block: 1.1rem;
}

/* Logo leggermente più piccolo nell'header rispetto alla dimensione di
   base di ".logo" (1.5rem, usata anche altrove, es. pannello contatti) */
.site-header .logo {
  font-size: 1.3rem;
}

/* Logo Vorak Studio (assets/logo-1.svg). .logo resta sull'elemento che
   contiene l'immagine: il font-size qui sotto decide anche quanto è
   grande il logo, perché .logo__img è dimensionato in "em". */
.logo {
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: 1.5rem;
  letter-spacing: 0.02em;
}

.logo__img {
  display: block;
  height: 1.5em;
  width: auto;
}

.main-nav {
  display: none;
}

.main-nav__list {
  display: flex;
  gap: 2.5rem;
  font-family: var(--font-heading);
  font-size: 0.95rem;
  font-weight: 600;
}

/* Voce di menu: invece di cambiare colore al passaggio del mouse,
   fa apparire una sottile linea che si "disegna" da sinistra a destra */
.main-nav__list a {
  position: relative;
  display: inline-block;
  padding-bottom: 4px;
}

.main-nav__list a::after {
  content: '';
  position: absolute;
  left: 0;
  bottom: 0;
  width: 100%;
  height: 1px;
  background: var(--color-accent);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.3s ease;
}

.main-nav__list a:hover::after,
.main-nav__list a:focus-visible::after {
  transform: scaleX(1);
}

.header-actions {
  display: flex;
  align-items: center;
  gap: 1.5rem;
}

/* Pulsante che cambia lingua IT/EN a tutto il sito (vedi js/main.js,
   punto 5). Visibile su ogni dimensione di schermo, anche mobile. */
.lang-switch {
  font-family: var(--font-heading);
  font-weight: 600;
  font-size: 0.9rem;
  padding: 0.3rem;
}

/* Bottone "hamburger" per aprire il menu su mobile (icona "menu" di
   Material Icons) */
.menu-toggle {
  display: flex;
}

.menu-toggle__icon {
  width: 26px;
  height: 26px;
  color: var(--color-black);
}

@media (min-width: 900px) {
  .main-nav {
    display: block;
  }
  .menu-toggle {
    display: none;
  }
}

/* Menu mobile a schermo intero, si apre cliccando l'icona hamburger */
.mobile-nav {
  position: fixed;
  inset: 0;
  background: var(--color-white);
  z-index: 200;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 2rem;
  transform: translateY(-100%);
  transition: transform 0.3s ease;
}

.mobile-nav.is-open {
  transform: translateY(0);
}

.mobile-nav__close {
  position: absolute;
  top: 1.3rem;
  right: 1.5rem;
  font-size: 1.8rem;
}

.mobile-nav__list {
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
  font-family: var(--font-heading);
  font-size: 2rem;
  font-weight: 700;
  text-transform: uppercase;
}

/* Stessa linea animata del menu desktop, anche nel menu a schermo intero */
.mobile-nav__list a {
  position: relative;
  display: inline-block;
  padding-bottom: 6px;
}

.mobile-nav__list a::after {
  content: '';
  position: absolute;
  left: 0;
  bottom: 0;
  width: 100%;
  height: 2px;
  background: var(--color-accent);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.3s ease;
}

.mobile-nav__list a:hover::after,
.mobile-nav__list a:focus-visible::after,
.mobile-nav__list a:active::after {
  transform: scaleX(1);
}

/* -------------------------------------------------------------------------
   NASTRO SCORREVOLE (MARQUEE) - la striscia con "CONTATTACI > INFO@..."
   che scorre in automatico da destra a sinistra
   ------------------------------------------------------------------------- */
.marquee {
  overflow: hidden;
  white-space: nowrap;
  padding-block: 1.25rem;
  /* Spazio sopra e sotto al nastro: quello sotto (verso la sezione
     successiva, es. "Come possiamo aiutarti?") è tenuto un po' più
     stretto di quello sopra. */
  margin-block: 3rem 1.75rem;
}

@media (min-width: 900px) {
  .marquee {
    margin-block: 5rem 2.5rem;
  }
}

/* Nel footer il nastro è già la prima cosa in alto (niente spazio sopra
   serve) e sotto lo spazio verso le info va tenuto più stretto */
.marquee--dark {
  margin-block: 0 1.5rem;
}

.marquee__track {
  display: inline-flex;
  align-items: center;
  animation: marquee-scroll 22s linear infinite;
}

.marquee__item {
  display: inline-flex;
  align-items: center;
  font-family: var(--font-marquee);
  font-weight: 700;
  font-size: clamp(1.6rem, 6vw, 3rem);
  text-transform: uppercase;
  padding-inline: 1.5rem;
  /* Testo pieno (non più solo contorno: a spessore sottile il font
     perdeva le sue forme caratteristiche e sembrava generico) */
  color: var(--color-black);
}

.marquee--dark .marquee__item {
  color: var(--color-white);
}

.marquee__item span.arrow {
  display: inline-flex;
  align-items: center;
  margin-inline: 0.75rem;
  color: var(--color-accent);
}

/* La "V" del logo (stessa forma di assets/v-shape.svg, scritta qui
   direttamente nell'HTML invece che come immagine, per essere sicuri che
   si veda sempre) ruotata di 270° per farla somigliare a una freccia ">"
   (l'angolo stretto punta verso destra) al posto del carattere usato
   prima. Prende il colore viola qui sopra tramite "fill: currentColor"
   dentro al tag <svg>. */
.arrow__v {
  width: 0.55em;
  height: 0.55em;
  transform: rotate(270deg);
}

@keyframes marquee-scroll {
  /* Il nastro ha 6 copie ripetute del testo (vedi l'HTML): per un giro
     perfetto senza scatti si scorre di 1/6 (16.6667%), non 1/2. */
  from { transform: translateX(0); }
  to { transform: translateX(-16.6667%); }
}

/* Rispetta chi preferisce meno animazioni */
@media (prefers-reduced-motion: reduce) {
  .marquee__track {
    animation: none;
  }
}

/* -------------------------------------------------------------------------
   CARD SERVIZI
   ------------------------------------------------------------------------- */
.service-card {
  padding-block: 2rem;
}

.service-card h3 {
  margin-bottom: 0.75rem;
  padding-bottom: 1rem;
  border-bottom: 1px solid var(--color-border);
}

.service-card p {
  margin-block: 1rem 1.5rem;
  font-size: 0.95rem;
}

/* -------------------------------------------------------------------------
   CARD PORTFOLIO
   ------------------------------------------------------------------------- */
.portfolio-card {
  position: relative;
  border-radius: 4px;
  overflow: hidden;
  aspect-ratio: 1 / 1;
  /* Quadrati di circa 530px; su schermi stretti si riducono
     automaticamente per restare leggibili (min tra 530px e 80% schermo) */
  width: min(530px, 80vw);
  flex: 0 0 min(530px, 80vw);
}

.portfolio-card img,
.portfolio-card video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* Titolo e tag (categoria — anno) delle card-video: nascosti finché non
   ci passi sopra il mouse, o non tocchi la card su schermo touch (classe
   ".is-open" aggiunta da js/main.js punto 12). Stesso stile "velo scuro
   sfumato in basso" della pagina portfolio.html (.work-slide__overlay). */
.portfolio-card__overlay {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  padding: 1.25rem;
  background: linear-gradient(to top, rgba(0, 0, 0, 0.65) 0%, rgba(0, 0, 0, 0) 45%);
  color: var(--color-white);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.25s ease;
}

.portfolio-card--video.is-open .portfolio-card__overlay {
  opacity: 1;
}

@media (hover: hover) {
  .portfolio-card--video:hover .portfolio-card__overlay {
    opacity: 1;
  }
}

.portfolio-card__title {
  font-size: 1.1rem;
}

.portfolio-card__tag {
  font-family: var(--font-heading);
  font-size: 0.7rem;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  opacity: 0.8;
  margin-top: 0.3rem;
}

/* Card nera con la sola scritta "PORTFOLIO", al posto di una foto */
.portfolio-card--cover {
  background: var(--color-black);
  display: flex;
  align-items: center;
  justify-content: center;
}

.portfolio-card--cover span {
  color: var(--color-white);
  font-family: var(--font-heading);
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

/* Pulsanti "progetto precedente/prossimo": non più sotto il carosello, ma
   in sovraimpressione sui bordi sinistro e destro, verticalmente
   centrati sulle card (vedi .portfolio-carousel in layout.css per il
   riferimento di posizionamento). Sfondo bianco pieno + ombra per
   restare leggibili sopra foto/video di qualsiasi colore, anche sulla
   card nera "PORTFOLIO". */
.portfolio-prev,
.portfolio-next {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  z-index: 5;
  width: 48px;
  height: 48px;
  background: var(--color-white);
  border-color: var(--color-white);
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.25);
}

.portfolio-prev {
  left: 1rem;
}

.portfolio-next {
  right: 1rem;
}

.portfolio-prev:hover,
.portfolio-next:hover {
  background: var(--color-black);
  border-color: var(--color-black);
  /* Sovrascrive ".btn-round--slide:hover" (che azzera il transform):
     senza questa riga il pulsante perderebbe la centratura verticale
     al passaggio del mouse. */
  transform: translateY(-50%);
}

/* -------------------------------------------------------------------------
   PAGINA SERVIZIO - intestazione (freccia indietro + titolo)
   Riusata da tutte le pagine dentro /servizi/.
   ------------------------------------------------------------------------- */
.service-hero {
  display: flex;
  align-items: center;
  gap: 1.1rem;
  padding-block: 2.5rem 2.5rem;
}

.service-hero__back {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  flex-shrink: 0;
  transition: transform 0.2s ease;
}

.service-hero__back svg {
  width: 22px;
  height: 22px;
}

.service-hero__back:hover {
  transform: translateX(-3px);
}

.service-hero__title {
  text-transform: none;
  font-size: clamp(1.6rem, 4vw, 2.2rem);
}

/* Nome del servizio (es. "Digital Marketing") sopra al titolo vero e
   proprio: piccolo e grigio, per non ripeterlo "urlato" due volte nella
   stessa dimensione. Resta comunque dentro l'H1 (solo lo stile è
   diverso) perché per Google conta come parte del titolo della pagina. */
.service-hero__kicker {
  display: block;
  font-family: var(--font-heading);
  font-size: 0.8rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--color-gray-text);
  margin-bottom: 0.5rem;
}

/* -------------------------------------------------------------------------
   PAGINA SERVIZIO - elenco "I servizi che offriamo"
   Icona freccia + titolo, con la descrizione allineata sotto al titolo.
   ------------------------------------------------------------------------- */
.service-list {
  display: grid;
  gap: 2.75rem 4rem;
}

.service-list__head {
  display: flex;
  align-items: flex-start;
  gap: 0.85rem;
  margin-bottom: 0.9rem;
}

.service-list__head svg {
  width: 20px;
  height: 20px;
  flex-shrink: 0;
  margin-top: -0.15rem;
}

.service-list__head h3 {
  text-transform: none;
}

.service-list__item p {
  /* Rientro per allineare il testo sotto al titolo, non sotto all'icona */
  padding-left: calc(20px + 0.85rem);
  max-width: 38ch;
  font-size: 0.95rem;
}

@media (min-width: 700px) {
  .service-list {
    grid-template-columns: 1fr 1fr;
  }
}

/* -------------------------------------------------------------------------
   PAGINA SERVIZIO - fascia "valore" con mappa decorativa
   ------------------------------------------------------------------------- */
.value-section {
  background: var(--color-bg-muted);
}

.value-section__text h2 {
  text-transform: none;
  margin-bottom: 1.5rem;
}

.value-section__text p {
  max-width: 46ch;
  margin-bottom: 1.25rem;
}

.value-section__text p:last-child {
  margin-bottom: 0;
}

.value-section__text strong {
  color: var(--color-black);
}

.value-section__map {
  display: flex;
  justify-content: center;
  align-items: flex-start;
  margin-top: 2.5rem;
}

.value-section__map img {
  width: 100%;
  max-width: 400px;
}

@media (min-width: 900px) {
  .value-section__inner {
    display: grid;
    grid-template-columns: 1fr 1.3fr;
    align-items: center;
    gap: 2.5rem;
  }
  .value-section__map {
    margin-top: 0;
  }
  .value-section__map img {
    max-width: 500px;
  }
}

/* -------------------------------------------------------------------------
   FOOTER
   ------------------------------------------------------------------------- */
.site-footer {
  background: var(--color-black);
  color: var(--color-white);
}

.footer-columns {
  display: grid;
  gap: 2.5rem;
  /* Meno spazio sopra (subito dopo il nastro scorrevole), quello sotto
     resta com'era prima del bordo con "Copyright" */
  padding-top: 2rem;
  padding-bottom: var(--section-padding);
}

.footer-brand__logo {
  height: 28px;
  width: auto;
  /* logo-1.svg ha due colori (viola + nero): questo filtro lo rende
     tutto bianco per stare bene sullo sfondo scuro del footer */
  filter: brightness(0) invert(1);
}

.footer-brand p {
  color: rgba(255, 255, 255, 0.6);
  font-size: 0.9rem;
  margin-top: 1.5rem;
  line-height: 1.9;
}

.footer-col h4 {
  font-family: var(--font-heading);
  font-size: 0.8rem;
  letter-spacing: 0.1em;
  color: rgba(255, 255, 255, 0.5);
  margin-bottom: 1.1rem;
}

.footer-col ul {
  display: flex;
  flex-direction: column;
  gap: 0.7rem;
  font-size: 0.95rem;
}

.footer-col a:hover {
  color: var(--color-accent);
}

.footer-bottom {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  padding-block: 1.5rem;
  border-top: 1px solid rgba(255, 255, 255, 0.15);
  font-size: 0.85rem;
  color: rgba(255, 255, 255, 0.55);
}

@media (min-width: 700px) {
  .footer-columns {
    grid-template-columns: 1.4fr 1fr 1fr;
  }
  .footer-bottom {
    flex-direction: row;
    justify-content: space-between;
  }
}

/* -------------------------------------------------------------------------
   CERCHIETTO DEL MOUSE
   Creato via JS solo su dispositivi con un mouse vero (vedi js/main.js,
   punto 6). Non sostituisce il puntatore normale, gli sta sopra e lo
   segue con una leggera "elasticità" data dalla transition su transform.
   ------------------------------------------------------------------------- */
.cursor-ring {
  position: fixed;
  top: 0;
  left: 0;
  width: 30px;
  height: 30px;
  border: 1.5px solid var(--color-black);
  border-radius: 50%;
  pointer-events: none;
  z-index: 9999;
  opacity: 0;
  transform: translate(-100px, -100px);
  transition: transform 0.12s ease-out, width 0.2s ease, height 0.2s ease,
    border-color 0.2s ease, background 0.2s ease, opacity 0.2s ease;
}

.cursor-ring.is-visible {
  opacity: 1;
}

/* Più grande e viola sopra a link, bottoni e campi dei form */
.cursor-ring.is-hover {
  width: 54px;
  height: 54px;
  border-color: var(--color-accent);
  background: rgba(123, 40, 129, 0.08);
}

/* "In negativo" (contorno bianco) sopra a sezioni/div a sfondo scuro
   (es. sezione "Ciao!" e footer, vedi js/main.js punto 6): un contorno
   nero sarebbe invisibile su sfondo nero. ".is-dark.is-hover" ha 3 classi
   quindi vince sulle due regole sopra (2 classi ciascuna) quando il
   cerchio è contemporaneamente sopra un'area scura E un elemento
   cliccabile. */
.cursor-ring.is-dark {
  border-color: var(--color-white);
}

.cursor-ring.is-dark.is-hover {
  border-color: var(--color-white);
  background: rgba(255, 255, 255, 0.15);
}

/* -------------------------------------------------------------------------
   TRANSIZIONE IN ENTRATA DELLE SEZIONI
   Applicata via JS a ogni <section> (vedi js/main.js, punto 8): parte
   leggermente più in basso e trasparente, "sale" al suo posto quando entra
   nello schermo, una volta sola (resta visibile anche scorrendo oltre).
   Durata breve apposta ("veloci e fluide"), non un rallentamento vistoso.
   ------------------------------------------------------------------------- */
.reveal {
  opacity: 0;
  transform: translateY(28px);
  transition: opacity 0.4s cubic-bezier(0.22, 0.61, 0.36, 1),
    transform 0.4s cubic-bezier(0.22, 0.61, 0.36, 1);
}

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

/* -------------------------------------------------------------------------
   TITOLI CHE "ESCONO DA UNA LINEA INVISIBILE"
   Applicato via JS ai titoli con classe ".flap-title" (vedi js/main.js,
   funzione "vorakAnimaFlapTitle"): il titolo (es. "Valore che si vede" o
   un titolo di sezione) parte nascosto sotto una maschera invisibile e
   sale in modo netto, senza dissolvenza, fino al suo posto. ".flap-title"
   fa da "finestrella" (overflow:hidden, ritaglia quello che sporge sotto
   di sé): il vero contenuto viene spostato dal JS dentro
   ".flap-title__inner", che è l'elemento che si sposta davvero.
   ------------------------------------------------------------------------- */
.flap-title {
  overflow: hidden;
}

/* Nasconde il titolo FINCHÉ il JavaScript non l'ha preparato per
   l'animazione (aggiunto ".flap-title__inner" e messo tutto in
   posizione): senza questo, per un istante si vede il testo "grezzo" e
   fermo, che poi sparisce e riparte animato - sembra un doppio
   caricamento. "html.js" è aggiunto subito (vedi il piccolo script in
   cima a ogni pagina) solo se il browser esegue JavaScript: se qualcuno
   naviga senza JavaScript attivo questa regola non scatta mai, quindi il
   titolo resta comunque visibile (nessun contenuto che sparisce per
   sempre). "vorakAnimaFlapTitle" in js/main.js rimette opacity a 1 non
   appena il titolo è pronto, sia che venga animato sia che (con "riduci
   le animazioni" attivo) resti fermo. */
html.js .flap-title {
  opacity: 0;
}

.flap-title__inner {
  display: inline-block;
  transform: translateY(100%);
  transition: transform 0.5s cubic-bezier(0.22, 0.61, 0.36, 1);
}

.flap-title--visible .flap-title__inner {
  transform: translateY(0);
}