/* ============================================================
   Garajet — stili aggiuntivi per il sito statico
   (sostituiscono framer-motion, embla e il dialog di shadcn)
   Modifica liberamente: questo file è pensato per essere editato.
   ============================================================ */

/* ---------- Reveal on scroll ---------- */
.gj-reveal {
  opacity: 0;
  transform: var(--gj-ht, translateY(16px));
  transition: opacity 0.55s ease, transform 0.65s cubic-bezier(0.22, 1, 0.36, 1);
  will-change: opacity, transform;
}
.gj-reveal.gj-in {
  opacity: 1;
  transform: none;
}
@media (prefers-reduced-motion: reduce) {
  .gj-reveal { opacity: 1; transform: none; transition: none; }
}

/* ---------- Menu mobile ---------- */
#gj-mobile-menu {
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.25s ease;
}
#gj-mobile-menu.gj-open {
  opacity: 1;
  pointer-events: auto;
}
#gj-mobile-menu .gj-mobile-inner {
  opacity: 0;
  transform: translateY(20px);
  transition: opacity 0.3s ease 0.1s, transform 0.3s ease 0.1s;
}
#gj-mobile-menu.gj-open .gj-mobile-inner {
  opacity: 1;
  transform: none;
}

/* ---------- Modale Beta ---------- */
#gj-beta-modal {
  position: fixed;
  inset: 0;
  z-index: 100;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1.5rem;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.2s ease;
}
#gj-beta-modal.gj-open {
  opacity: 1;
  pointer-events: auto;
}
#gj-beta-modal .gj-modal-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.8);
}
#gj-beta-modal .gj-modal-card {
  position: relative;
  z-index: 1;
  width: 100%;
  max-width: 28rem;
  background: hsl(var(--card));
  border: 1px solid hsl(var(--border) / 0.5);
  border-radius: 0.5rem;
  padding: 1.5rem;
  text-align: center;
  box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.5);
  transform: translateY(12px) scale(0.97);
  transition: transform 0.2s ease;
}
#gj-beta-modal.gj-open .gj-modal-card {
  transform: none;
}
#gj-beta-modal .gj-modal-close {
  position: absolute;
  top: 0.75rem;
  right: 0.75rem;
  width: 2rem;
  height: 2rem;
  display: flex;
  align-items: center;
  justify-content: center;
  color: hsl(var(--muted-foreground));
  border-radius: 0.25rem;
  transition: color 0.2s ease;
}
#gj-beta-modal .gj-modal-close:hover { color: hsl(var(--foreground)); }

/* ---------- Carousel community (mobile) ---------- */
.gj-carousel-track {
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
}
.gj-carousel-track::-webkit-scrollbar { display: none; }
.gj-carousel-track > * { scroll-snap-align: center; }

/* ---------- Tabs hiring (transizione fade) ---------- */
.gj-tab-in { animation: gj-tab-fade 0.35s ease both; }
@keyframes gj-tab-fade {
  from { opacity: 0; transform: translateY(12px); }
  to { opacity: 1; transform: none; }
}

/* ---------- Esagoni fluttuanti (sostituiscono i loop framer) ---------- */
.gj-hex-floaty { animation: gj-hex-floaty 8s ease-in-out infinite; }
.gj-hex-floaty-rev { animation: gj-hex-floaty-rev 6s ease-in-out infinite; animation-delay: 1s; }
@keyframes gj-hex-floaty {
  0%, 100% { transform: translateY(0) rotate(0deg); }
  50% { transform: translateY(-15px) rotate(10deg); }
}
@keyframes gj-hex-floaty-rev {
  0%, 100% { transform: translateY(0) rotate(0deg); }
  50% { transform: translateY(12px) rotate(-8deg); }
}

/* Fallback cursore standard su dispositivi touch */
@media (pointer: coarse) {
  body, a, button, [role="button"] { cursor: auto !important; }
}

/* ---------- Mockup telefono animato (sezione Insight, home) ---------- */
.gj-mock-screen { display: none; }
.gj-mock-screen.gj-on { display: flex; flex-direction: column; animation: gj-mock-fade 0.15s ease both; }
@keyframes gj-mock-fade { from { opacity: 0; } to { opacity: 1; } }

.gj-mock-screen .gj-m { opacity: 0; }
.gj-mock-screen.gj-on .gj-m { animation: gj-m-in 0.35s ease both; animation-delay: var(--d, 0s); }
@keyframes gj-m-in {
  from { opacity: 0; transform: var(--mt, translateY(10px)); }
  to { opacity: 1; transform: none; }
}

/* "Tap" simulato a 1.7s dall'apertura dello step */
.gj-mock-screen.gj-on .gj-tap { animation: gj-m-in 0.35s ease both, gj-tap-pulse 0.35s ease-out both; animation-delay: var(--d, 0s), 1.7s; }
@keyframes gj-tap-pulse { 0% { transform: scale(1); } 40% { transform: scale(0.94); } 75% { transform: scale(1.03); } 100% { transform: scale(1); } }
.gj-flash { position: absolute; inset: 0; background: rgba(255, 255, 255, 0.3); opacity: 0; pointer-events: none; }
.gj-mock-screen.gj-on .gj-flash { animation: gj-flash-anim 0.3s ease both; animation-delay: 1.7s; }
@keyframes gj-flash-anim { 0% { opacity: 0; } 50% { opacity: 0.5; } 100% { opacity: 0; } }
.gj-mock-screen.gj-on .gj-tapborder { animation: gj-tapborder 0.35s ease both; animation-delay: 1.7s; }
@keyframes gj-tapborder { 0%, 100% { border-color: transparent; } 50% { border-color: hsl(81 100% 61% / 0.7); } }

/* Barra di progresso upload */
.gj-progress { width: 0%; }
.gj-mock-screen.gj-on .gj-progress { animation: gj-progress 1.8s ease-in-out both; animation-delay: 0.3s; }
@keyframes gj-progress { from { width: 0%; } to { width: 100%; } }

/* Icona upload che rimbalza */
.gj-bounce { animation: gj-bounce 1.2s ease-in-out infinite; }
@keyframes gj-bounce { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-6px); } }

/* Check "Salvato!" con pop a molla */
.gj-mock-screen.gj-on .gj-pop { animation: gj-pop 0.55s cubic-bezier(0.34, 1.56, 0.64, 1) both; animation-delay: 0.15s; }
.gj-pop { transform: scale(0) rotate(-180deg); }
@keyframes gj-pop { from { transform: scale(0) rotate(-180deg); } to { transform: scale(1) rotate(0deg); } }

/* Cursore lampeggiante del testo digitato */
.gj-caret { animation: gj-caret 0.5s steps(1) infinite; }
@keyframes gj-caret { 50% { opacity: 0; } }
.gj-caret.gj-done { display: none; }

/* Indicatori step */
.gj-dot { height: 6px; width: 6px; border-radius: 9999px; background: hsl(var(--muted-foreground) / 0.3); transition: all 0.5s; }
.gj-dot.gj-on { width: 20px; background: hsl(var(--primary)); }