#hero {
  position: relative;
  height: 100svh;
  min-height: 480px;
  overflow: hidden;
  display: grid;
  place-items: center;
  isolation: isolate;
  background: var(--ink);
}
.hero-bg {
  position: absolute; inset: 0; z-index: -3;
  background: radial-gradient(90% 90% at 50% 50%, #3a0a07 0%, #260806 36%, #16090f 70%, var(--ink) 100%);
}
.hero-aura {
  position: absolute; left: 50%; top: 50%; z-index: -2;
  width: 130vmax; height: 130vmax; margin: -65vmax 0 0 -65vmax;
  border-radius: 50%;
  background: radial-gradient(closest-side, rgba(255, 42, 26, .42), rgba(214, 28, 16, .2) 34%, rgba(160, 20, 12, .07) 62%, transparent 76%);
  animation: aura-spread 3.4s var(--ease-out) both, aura-breathe 7s ease-in-out 3.4s infinite;
  will-change: transform, opacity;
}
@keyframes aura-spread { from { transform: scale(.08); opacity: 0; } to { transform: scale(1); opacity: 1; } }
@keyframes aura-breathe { 0%, 100% { transform: scale(1); opacity: 1; } 50% { transform: scale(1.14); opacity: .78; } }

.hero-rings {
  position: absolute; left: 50%; top: 50%; z-index: -1;
  width: min(100vmin, 96vw); height: min(100vmin, 96vw);
  transform: translate(-50%, -50%);
  overflow: visible;
}
.hero-rings circle { fill: none; transform-origin: 500px 500px; }
.ring-outer { stroke: rgba(255, 70, 50, .12); stroke-width: 1.2; }
.ring-inner { stroke: rgba(255, 50, 36, .46); stroke-width: 1.8; stroke-dasharray: 9 7; animation: ring-spin 80s linear infinite; }
@keyframes ring-spin { to { transform: rotate(360deg); } }

.hero-beam {
  position: absolute; left: 0; right: 0; top: 50%; height: 3px; z-index: -1; margin-top: -1.5px;
  background: linear-gradient(90deg, transparent 4%, rgba(255, 60, 40, .34) 24%, rgba(255, 190, 170, .55) 50%, rgba(255, 60, 40, .34) 76%, transparent 96%);
  filter: blur(.6px);
  animation: beam-in 2.4s var(--ease-out) both;
}
@keyframes beam-in { from { transform: scaleX(0); opacity: 0; } to { transform: scaleX(1); opacity: 1; } }

#hero-canvas { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 1; pointer-events: none; }

.hero-logo { position: relative; z-index: 2; text-align: center; }
.wordmark {
  display: flex; align-items: center; justify-content: center;
  font-size: min(15.5vw, 26vh);
  font-weight: 620;
  line-height: .78;
  letter-spacing: -.012em;
  color: var(--white);
  margin: 0;
}
.wm-slot { display: inline-block; width: .98em; height: .78em; position: relative; }
.is-turnable { cursor: grab; pointer-events: auto; touch-action: pan-y; user-select: none; -webkit-user-select: none; }
.is-turning { cursor: grabbing; }
/* Fuori dal flusso: il centro del logo è la X, come nel marchio. */
.hero-agency {
  position: absolute; left: 0; right: 0; top: 100%;
  margin-top: 1.9em;
  font-size: clamp(.8rem, min(2.1vw, 3.6vh), 1.9rem);
  letter-spacing: .5em;
  text-indent: .5em;
  font-weight: 500;
  color: var(--red-soft);
}
/* Le lettere di vetro senza grafica 3D: stesso liquido, ma fermo. */
#hero .wordmark { position: relative; }
#hero .wm-part {
  color: transparent;
  -webkit-text-stroke: .012em rgba(255, 232, 228, .8);
  background: linear-gradient(to top, #ff2f1e 0 56%, rgba(255, 220, 214, .08) 57%);
  -webkit-background-clip: text;
  background-clip: text;
  animation: wm-in 1.5s var(--ease-out) .25s both;
}
#hero .is-glass .wm-part {
  -webkit-text-stroke: 0;
  background: none;
  animation: none;
}
.hero-glass { position: absolute; display: block; pointer-events: none; animation: wm-in 1.5s var(--ease-out) .25s both; }
#hero .hero-agency { animation: agency-in 1.6s var(--ease-out) .7s both; }
@keyframes wm-in { from { opacity: 0; filter: blur(14px); } to { opacity: 1; filter: blur(0); } }
@keyframes agency-in { from { opacity: 0; letter-spacing: .9em; } to { opacity: 1; letter-spacing: .5em; } }

.x-fallback {
  position: absolute; inset: -14%; display: block;
  filter: drop-shadow(0 0 18px rgba(255, 42, 26, .9)) drop-shadow(0 0 44px rgba(255, 42, 26, .5));
  animation: x-spin 6s linear infinite;
}
.x-fallback svg, .x-static svg { width: 100%; height: 100%; display: block; }
.x-static {
  position: absolute; left: 50%; top: 50%; width: .9em; height: .9em; margin: -.45em 0 0 -.45em; display: block;
  filter: drop-shadow(0 0 18px rgba(255, 42, 26, .9)) drop-shadow(0 0 44px rgba(255, 42, 26, .5));
}
@keyframes x-spin { to { transform: perspective(600px) rotateY(360deg); } }

@media (max-width: 720px) {
  .wordmark { font-size: min(25vw, 26vh); }
}

.rm .hero-aura, .rm .ring-inner, .rm .hero-beam, .rm #hero .wm-part, .rm .hero-glass, .rm #hero .hero-agency, .rm .x-fallback { animation: none; }