/* Aggiunte di design non generate da Tailwind: sfondo animato + schermata di caricamento.
   Vedi README.md — non toccare styles.css (e' compilato). */

/* Niente overflow-x:hidden su html/body: su iOS Safari rompe il
   position:fixed dei figli (il widget chat spariva/non funzionava piu').
   Gli elementi decorativi qui sotto sono fixed/absolute e non generano
   comunque overflow orizzontale nel documento. */

/* ---------- Comparsa graduale allo scroll (solo pagine che usano [data-reveal]) ---------- */
/* Il tag <html class="js-reveal"> viene aggiunto da uno script inline nell'<head>,
   prima che il resto della pagina sia dipinto: senza JS gli elementi restano
   semplicemente visibili (nessun FOUC, nessuna dipendenza obbligatoria). */
html.js-reveal [data-reveal] {
  opacity: 0;
  transform: translateY(18px);
  transition: opacity 0.7s cubic-bezier(0.4, 0, 0.2, 1), transform 0.7s cubic-bezier(0.4, 0, 0.2, 1);
  transition-delay: var(--reveal-delay, 0s);
}

html.js-reveal [data-reveal].is-visible {
  opacity: 1;
  transform: none;
}

@media (prefers-reduced-motion: reduce) {
  html.js-reveal [data-reveal] {
    transition: none;
    opacity: 1;
    transform: none;
  }
}

/* ---------- HUD sottilissimo nell'hero della home ---------- */
/* Anelli tratteggiati che ruotano lentissimi e piccoli nodi che pulsano,
   ispirati a un'interfaccia "da bordo" ma tenuti quasi impercettibili:
   non devono mai competere con il messaggio, solo suggerire precisione. */
.approdo-hero {
  isolation: isolate;
}

.approdo-hud {
  position: absolute;
  inset: 0;
  z-index: -1;
  opacity: 0.85;
}

.approdo-hud svg {
  height: 100%;
  width: 100%;
}

.approdo-hud-scan {
  position: absolute;
  left: 8%;
  right: 8%;
  top: 6%;
  height: 1px;
  opacity: 0;
  background: linear-gradient(90deg, transparent, var(--primary) 45%, var(--accent) 60%, transparent);
}

@media (prefers-reduced-motion: no-preference) {
  .approdo-hud-ring {
    transform-box: fill-box;
    transform-origin: center;
  }
  .approdo-hud-ring-a {
    animation: approdo-hud-spin 100s linear infinite;
  }
  .approdo-hud-ring-b {
    animation: approdo-hud-spin 140s linear infinite reverse;
  }
  .approdo-hud-ring-c {
    animation: approdo-hud-spin 120s linear infinite;
  }
  .approdo-hud-ring-d {
    animation: approdo-hud-spin 160s linear infinite reverse;
  }
  .approdo-hud-node {
    animation: approdo-hud-pulse 5.5s ease-in-out infinite;
  }
  .approdo-hud-node:nth-of-type(2) {
    animation-delay: 0.7s;
  }
  .approdo-hud-node:nth-of-type(3) {
    animation-delay: 1.4s;
  }
  .approdo-hud-node:nth-of-type(4) {
    animation-delay: 2.1s;
  }
  .approdo-hud-node:nth-of-type(5) {
    animation-delay: 2.8s;
  }
  .approdo-hud-node:nth-of-type(6) {
    animation-delay: 3.5s;
  }
  .approdo-hud-node:nth-of-type(7) {
    animation-delay: 4.2s;
  }
  .approdo-hud-node:nth-of-type(8) {
    animation-delay: 4.9s;
  }
  .approdo-hud-scan {
    animation: approdo-hud-scan-sweep 10s ease-in-out infinite;
  }
  .approdo-hud-scan-b {
    animation: approdo-hud-scan-sweep 13s ease-in-out infinite 4s;
  }
}

@keyframes approdo-hud-spin {
  to {
    transform: rotate(360deg);
  }
}

@keyframes approdo-hud-pulse {
  0%,
  100% {
    opacity: 0.3;
    transform: scale(1);
  }
  50% {
    opacity: 1;
    transform: scale(1.9);
  }
}

@keyframes approdo-hud-scan-sweep {
  0% {
    top: 4%;
    opacity: 0;
  }
  10% {
    opacity: 0.16;
  }
  45% {
    opacity: 0.16;
  }
  55% {
    top: 90%;
    opacity: 0;
  }
  100% {
    top: 90%;
    opacity: 0;
  }
}

@media (prefers-reduced-motion: reduce) {
  .approdo-hud-satellite {
    display: none;
  }
}

@media (max-width: 640px) {
  .approdo-hud {
    opacity: 0.6;
  }
}

/* ---------- Sfondo animato ---------- */
/* Due aloni sfocati nei colori di marca che si muovono molto lentamente
   dietro al contenuto. Non interferiscono mai con testo o click. */
@media (prefers-reduced-motion: no-preference) {
  body::before,
  body::after {
    content: "";
    position: fixed;
    z-index: -20;
    pointer-events: none;
    border-radius: 9999px;
    filter: blur(56px);
    opacity: 0.68;
    will-change: transform;
  }
  body::before {
    top: -12%;
    left: -14%;
    width: 50vmax;
    height: 50vmax;
    background: var(--primary-soft);
    animation: approdo-drift-a 28s ease-in-out infinite alternate;
  }
  body::after {
    bottom: -18%;
    right: -14%;
    width: 44vmax;
    height: 44vmax;
    background: var(--accent-soft);
    animation: approdo-drift-b 34s ease-in-out infinite alternate;
  }
}

@keyframes approdo-drift-a {
  0% {
    transform: translate(0, 0) scale(1);
  }
  100% {
    transform: translate(7vmax, 5vmax) scale(1.12);
  }
}

@keyframes approdo-drift-b {
  0% {
    transform: translate(0, 0) scale(1);
  }
  100% {
    transform: translate(-6vmax, -7vmax) scale(1.08);
  }
}

@media (max-width: 640px) {
  body::before,
  body::after {
    opacity: 0.5;
    filter: blur(44px);
  }
}

/* ---------- Striscia "notiziario" degli strumenti ---------- */
/* Scorrimento continuo, in pausa quando ci si passa sopra col mouse o col
   focus da tastiera. Con animazioni ridotte diventa una riga scrollabile
   normalmente, senza movimento automatico. */
.approdo-ticker {
  position: relative;
  overflow: hidden;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent);
  mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent);
}

.approdo-ticker-track {
  display: flex;
  width: max-content;
}

.approdo-ticker-group {
  display: flex;
  flex-shrink: 0;
  gap: 0.75rem;
  padding-right: 0.75rem;
}

.approdo-ticker-item {
  display: inline-flex;
  align-items: center;
  gap: 0.625rem;
  white-space: nowrap;
  border-radius: 999px;
  background: var(--muted);
  color: var(--muted-foreground);
  padding: 0.5rem 1rem;
  font-size: 0.8125rem;
}

.approdo-ticker-icon {
  height: 16px;
  width: 16px;
  flex-shrink: 0;
  filter: grayscale(1);
  opacity: 0.7;
}

@media (prefers-reduced-motion: no-preference) {
  .approdo-ticker-track {
    animation: approdo-ticker-scroll 34s linear infinite;
  }
  .approdo-ticker:hover .approdo-ticker-track,
  .approdo-ticker:focus-within .approdo-ticker-track {
    animation-play-state: paused;
  }
}

@media (prefers-reduced-motion: reduce) {
  .approdo-ticker {
    overflow-x: auto;
  }
}

@keyframes approdo-ticker-scroll {
  from {
    transform: translateX(0);
  }
  to {
    transform: translateX(-50%);
  }
}

/* ---------- Input file (pagina "Lavora con noi") ---------- */
.approdo-file-input::file-selector-button {
  margin-right: 0.75rem;
  border: none;
  border-radius: 999px;
  background: var(--primary);
  color: var(--primary-foreground);
  padding: 0.375rem 0.875rem;
  font-size: 0.8125rem;
  font-family: inherit;
  cursor: pointer;
}

/* ---------- Schermata di caricamento ---------- */
/* Riprende il logo dell'header: il punto (accent) percorre l'onda (primary)
   come una barca che approda. Compare solo una volta per sessione. */
.approdo-loader {
  position: fixed;
  inset: 0;
  z-index: 100;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.875rem;
  background: var(--background);
  opacity: 1;
  visibility: visible;
  transition: opacity 0.45s ease, visibility 0.45s ease;
}

.approdo-loader[data-hidden="true"] {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
}

.approdo-loader-mark {
  height: 2.5rem;
  width: 4.25rem;
  overflow: visible;
}

.approdo-loader-wave {
  stroke-dasharray: 160;
  stroke-dashoffset: 160;
  animation: approdo-loader-draw 1.1s ease-out forwards;
}

.approdo-loader-dot {
  opacity: 0;
  animation: approdo-loader-dot-in 0.15s ease-out forwards;
}

.approdo-loader-label {
  font-family: "DM Sans", ui-sans-serif, system-ui, sans-serif;
  font-size: 0.75rem;
  font-weight: 500;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--muted-foreground);
  opacity: 0;
  animation: approdo-loader-dot-in 0.4s ease-out 1.05s forwards;
}

@keyframes approdo-loader-draw {
  to {
    stroke-dashoffset: 0;
  }
}

@keyframes approdo-loader-dot-in {
  to {
    opacity: 1;
  }
}

@media (prefers-reduced-motion: reduce) {
  .approdo-loader {
    transition: none;
  }
  .approdo-loader-wave,
  .approdo-loader-dot,
  .approdo-loader-label {
    animation: none;
    opacity: 1;
    stroke-dashoffset: 0;
  }
}