/* ============================================================
   InvestFood Tech — Hero, scene 3D e animazioni
   ============================================================ */

/* ---------- Hero ------------------------------------------- */

.hero {
  position: relative;
  padding-block: clamp(150px, 18vw, 210px) clamp(80px, 10vw, 130px);
  overflow: hidden;
}

/* Lavaggi ambientali: l'accento arriva come luce, non come campitura */
.hero__wash-a {
  top: -18%;
  left: -12%;
  width: min(70vw, 760px);
  aspect-ratio: 1;
  background: radial-gradient(circle, rgba(64, 91, 255, .40), transparent 66%);
}

.hero__wash-b {
  top: 6%;
  right: -16%;
  width: min(60vw, 640px);
  aspect-ratio: 1;
  background: radial-gradient(circle, rgba(112, 132, 255, .30), transparent 66%);
}

.hero__wash-c {
  bottom: -32%;
  left: 34%;
  width: min(56vw, 620px);
  aspect-ratio: 1;
  background: radial-gradient(circle, rgba(61, 214, 245, .13), transparent 68%);
}

/* Griglia prospettica: la sala macchine sotto il pavimento */
.hero__grid {
  position: absolute;
  inset: auto 0 0 0;
  height: 40%;
  background-image:
    linear-gradient(rgba(112, 132, 255, .16) 1px, transparent 1px),
    linear-gradient(90deg, rgba(112, 132, 255, .16) 1px, transparent 1px);
  background-size: 64px 64px;
  transform: perspective(520px) rotateX(66deg);
  transform-origin: bottom center;
  -webkit-mask-image: linear-gradient(to top, #000 0%, transparent 84%);
  mask-image: linear-gradient(to top, #000 0%, transparent 84%);
  animation: grid-drift 22s linear infinite;
  pointer-events: none;
}

@keyframes grid-drift {
  from { background-position: 0 0, 0 0; }
  to   { background-position: 0 64px, 64px 0; }
}

.hero__inner {
  position: relative;
  z-index: 2;
  display: grid;
  grid-template-columns: minmax(0, 1.35fr) minmax(0, .65fr);
  gap: clamp(36px, 5vw, 64px);
  align-items: center;
}

.hero__copy .h-display { margin-bottom: 36px; }

/* ---------- Marchio 3D dell'hero ---------------------------- */

.stage {
  position: relative;
  perspective: 1400px;
  min-height: clamp(300px, 38vw, 440px);
  display: grid;
  place-items: center;
}

.hero__mark {
  position: relative;
  transform-style: preserve-3d;
  transform: translateY(var(--py, 0px)) rotateX(var(--tilt-x)) rotateY(var(--tilt-y));
  transition: transform 480ms var(--ease-out);
  will-change: transform;
  animation: mark-float 7.5s var(--ease-out) infinite;
}

.hero__mark::before {
  content: '';
  position: absolute;
  inset: -22%;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(64, 91, 255, .5), rgba(112, 132, 255, .16) 46%, transparent 70%);
  filter: blur(34px);
  transform: translateZ(-60px);
  animation: mark-glow 6s var(--ease-out) infinite;
}

.hero__mark img {
  position: relative;
  width: min(62vw, 320px);
  height: auto;
  transform: translateZ(40px);
}

@keyframes mark-float {
  0%, 100% { translate: 0 0; }
  50%      { translate: 0 -16px; }
}

@keyframes mark-glow {
  0%, 100% { scale: 1; }
  50%      { scale: 1.05; }
}

/* ---------- Anello 3D dell'ecosistema ---------------------- */

.orbit {
  position: relative;
  perspective: 1500px;
  height: clamp(340px, 40vw, 460px);
  display: grid;
  place-items: center;
}

.orbit__ring {
  position: relative;
  z-index: 2;
  width: 210px;
  height: 70px;
  transform-style: preserve-3d;
  animation: ring-spin 36s linear infinite;
}

@keyframes ring-spin {
  from { transform: rotateX(-24deg) rotateY(0deg); }
  to   { transform: rotateX(-24deg) rotateY(360deg); }
}

/* Contro-rotazione: ogni pannello resta rivolto verso chi guarda */
@keyframes ring-face {
  from { transform: rotateY(var(--a)) translateZ(var(--radius)) rotateY(calc(-1 * var(--a))); }
  to   { transform: rotateY(var(--a)) translateZ(var(--radius)) rotateY(calc(-1 * var(--a) - 360deg)); }
}

/* I logotipi girano nudi sul canvas: nessuna placca, solo luce */
.orbit__item {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  padding: 4px 10px;
  transform: rotateY(var(--a)) translateZ(var(--radius)) rotateY(calc(-1 * var(--a)));
  animation: ring-face 36s linear infinite;
}

/* Il riquadro dell'item copre tutto l'anello: cliccabile resta solo il logotipo */
.orbit__item { pointer-events: none; }

.orbit__link {
  pointer-events: auto;
  display: grid;
  place-items: center;
  cursor: pointer;
  transition: scale var(--dur) var(--ease-out);
}

.orbit__link:hover { scale: 1.12; }

.orbit__item img {
  max-height: 62px;
  width: auto;
  filter: drop-shadow(0 0 22px rgba(64, 91, 255, .5));
  transition: filter var(--dur) var(--ease-out);
}

.orbit__link:hover img { filter: drop-shadow(0 0 34px rgba(112, 132, 255, .95)); }

/* Nucleo: la piattaforma attorno a cui gira tutto */
.orbit__core {
  position: absolute;
  z-index: 1;
  inset: auto;
  width: 116px;
  height: 116px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: var(--signal-grad);
  box-shadow: 0 0 70px rgba(64, 91, 255, .6);
  animation: core-pulse 4.4s var(--ease-out) infinite;
}

/* Il marchio è un triangolo: alzato di poco sta al centro ottico */
.orbit__core img { width: 76px; height: 76px; translate: 0 -5px; }

@keyframes core-pulse {
  0%, 100% { box-shadow: 0 0 70px rgba(64, 91, 255, .55); }
  50%      { box-shadow: 0 0 110px rgba(112, 132, 255, .75); }
}

@keyframes tile-float {
  0%, 100% { translate: 0 0; }
  50%      { translate: 0 -7px; }
}

/* ---------- Riflesso che segue il puntatore ----------------- */

.card-glare {
  position: absolute;
  inset: 0;
  border-radius: inherit;
  pointer-events: none;
  opacity: 0;
  background: radial-gradient(360px circle at var(--mx, 50%) var(--my, 50%),
              rgba(112, 132, 255, .18), transparent 62%);
  transition: opacity var(--dur) var(--ease-out);
}

.pcard:hover .card-glare { opacity: 1; }

/* ---------- Reveal allo scroll ----------------------------- */

.js .reveal {
  opacity: 0;
  transform: perspective(900px) translate3d(0, 32px, -40px) rotateX(6deg);
  transition: opacity 720ms var(--ease-out), transform 720ms var(--ease-out);
  transition-delay: var(--d, 0ms);
}

.js .reveal.is-in { opacity: 1; transform: none; }

/* ---------- Barra di avanzamento lettura -------------------- */

.progress {
  position: fixed;
  inset: 0 0 auto 0;
  height: 2px;
  z-index: 101;
  transform-origin: left;
  transform: scaleX(0);
  background: var(--signal-grad);
}

/* ---------- Accessibilità: motion ridotto ------------------ */

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }

  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
  }

  .js .reveal { opacity: 1; transform: none; }
  .hero__mark { transform: none; }
  .marquee__track { animation: none; }
}