/* ============================================================
   InvestFood Tech — Effetti: grana, aurora, aloni, entrata
   Tutto costruito con glow e gradienti: nessuna ombra piatta.
   ============================================================ */

/* ---------- Grana di pellicola su tutta la pagina ----------- */

body::after {
  content: '';
  position: fixed;
  inset: 0;
  z-index: 200;
  pointer-events: none;
  opacity: .05;
  mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.82' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='180' height='180' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* ---------- Aurora: i lavaggi si muovono lentamente --------- */

.glow-wash { animation: aurora 26s var(--ease-out) infinite; }

.hero__wash-a { animation-duration: 24s; }
.hero__wash-b { animation-duration: 30s; animation-delay: -9s; }
.hero__wash-c { animation-duration: 34s; animation-delay: -17s; }

@keyframes aurora {
  0%, 100% { translate:    0    0; scale: 1;    }
  33%      { translate:  4%  -3%; scale: 1.08; }
  66%      { translate: -4%   3%; scale: .96;  }
}

/* ---------- Titolo: le righe salgono a fuoco --------------- */

.h-display .line {
  display: block;
  animation: line-in 1.1s var(--ease-out) both;
}

.h-display .line:nth-child(2) { animation-delay: .14s; }

@keyframes line-in {
  from { opacity: 0; transform: translateY(.34em); filter: blur(16px); }
  to   { opacity: 1; transform: none;              filter: blur(0); }
}

/* Il riflesso attraversa l'accento: il segnale che scorre */
.signal-text {
  background: linear-gradient(100deg,
              #405bff 0%, #7084ff 30%, #b9c4ff 48%, #7084ff 66%, #405bff 100%);
  background-size: 240% 100%;
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  animation: line-in 1.1s var(--ease-out) .14s both,
             shimmer 7s linear 1.2s infinite;
}

@keyframes shimmer {
  from { background-position: 190% 0; }
  to   { background-position: -90% 0; }
}

.hero__copy .btn-row { animation: rise-in 1s var(--ease-out) .42s both; }
.stage                { animation: rise-in 1.2s var(--ease-out) .3s both; }

@keyframes rise-in {
  from { opacity: 0; transform: translateY(18px); }
  to   { opacity: 1; transform: none; }
}

/* ---------- Alone conico attorno al marchio ---------------- */

.hero__mark::after {
  content: '';
  position: absolute;
  inset: -30%;
  border-radius: 50%;
  transform: translateZ(-30px);
  background: conic-gradient(from 0deg,
              transparent 0deg, rgba(64, 91, 255, .55) 70deg,
              rgba(112, 132, 255, .8) 130deg, rgba(61, 214, 245, .35) 190deg,
              transparent 260deg, transparent 360deg);
  -webkit-mask: radial-gradient(closest-side, transparent 58%, #000 63%, #000 78%, transparent 84%);
  mask: radial-gradient(closest-side, transparent 58%, #000 63%, #000 78%, transparent 84%);
  filter: blur(6px);
  animation: halo-spin 14s linear infinite;
  pointer-events: none;
}

@keyframes halo-spin {
  to { rotate: 360deg; }
}

/* ---------- Bottone primario: lampo al passaggio ----------- */

.btn--primary {
  position: relative;
  overflow: hidden;
  isolation: isolate;
}

.btn--primary::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -1;
  background: linear-gradient(100deg, transparent 20%, rgba(255, 255, 255, .42) 50%, transparent 80%);
  translate: -120% 0;
  transition: translate 720ms var(--ease-out);
}

.btn--primary:hover::before { translate: 120% 0; }

/* ---------- Card: il bordo si accende sotto il puntatore --- */

.pcard::after,
.prj::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 3;
  border-radius: inherit;
  padding: 1px;
  background: radial-gradient(240px circle at var(--mx, 50%) var(--my, 50%),
              rgba(150, 165, 255, .95), rgba(64, 91, 255, .35) 42%, transparent 68%);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  mask-composite: exclude;
  opacity: var(--lit, 0);
  transition: opacity 220ms linear;
  pointer-events: none;
}

.pcard:hover::after,
.prj:hover::after { opacity: 1; }

/* ---------- Ecosistema: pista orbitale sul pavimento ------- */

.orbit::before {
  content: '';
  position: absolute;
  width: min(80%, 780px);
  aspect-ratio: 1;
  border-radius: 50%;
  border: 1px solid rgba(112, 132, 255, .2);
  box-shadow: 0 0 90px rgba(64, 91, 255, .14) inset,
              0 0 60px rgba(64, 91, 255, .1);
  transform: rotateX(76deg);
  pointer-events: none;
}

/* Il nucleo pulsa dentro un anello che gira */
.orbit__core::before {
  content: '';
  position: absolute;
  inset: -26px;
  border-radius: 50%;
  background: conic-gradient(from 0deg, transparent 0deg,
              rgba(112, 132, 255, .9) 90deg, transparent 200deg, transparent 360deg);
  -webkit-mask: radial-gradient(closest-side, transparent 76%, #000 80%);
  mask: radial-gradient(closest-side, transparent 76%, #000 80%);
  animation: halo-spin 8s linear infinite;
}

/* ---------- Sezioni scure: alone d'ambiente ---------------- */

.section--band { position: relative; overflow: hidden; }

.section--band::before {
  content: '';
  position: absolute;
  top: -60%;
  left: 50%;
  translate: -50% 0;
  width: min(90vw, 1100px);
  aspect-ratio: 2 / 1;
  border-radius: 50%;
  background: radial-gradient(ellipse, rgba(64, 91, 255, .22), transparent 66%);
  filter: blur(60px);
  pointer-events: none;
}

@media (prefers-reduced-motion: reduce) {
  .glow-wash,
  .h-display .line,
  .signal-text,
  .hero__copy .btn-row,
  .stage,
  .hero__mark::after,
  .orbit__core::before { animation: none; }

  .signal-text { color: var(--signal); background: none; -webkit-text-fill-color: currentColor; }
}