/* Homepage-only hardware components.  They intentionally use simple HTML and
   CSS rather than video, canvas, or a particle engine, keeping the motion
   light enough for phones while the existing real hardware photo adds depth. */
.signature-hero .wave-field {
  contain: layout paint;
}

.signature-hero .floating-chips {
  position: absolute;
  inset: 0;
  overflow: hidden;
  perspective: 1100px;
  perspective-origin: 62% 46%;
  transform-style: preserve-3d;
}

.signature-hero .floating-chip {
  --chip-size: 11.5rem;
  position: absolute;
  display: grid;
  place-items: center;
  width: var(--chip-size);
  aspect-ratio: 1 / .82;
  padding: 1.15rem;
  overflow: visible;
  color: rgba(214, 242, 255, .87);
  border: 1px solid rgba(183, 230, 255, .56);
  border-radius: .85rem;
  background:
    linear-gradient(135deg, rgba(244, 253, 255, .3) 0 2%, transparent 2% 96%, rgba(91, 173, 219, .18) 96%),
    linear-gradient(142deg, #0a141c 0%, #25333d 26%, #071017 57%, #18242d 100%);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, .33),
    inset 0 0 0 2px rgba(3, 10, 16, .6),
    inset 0 -12px 28px rgba(0, 0, 0, .42),
    0 16px 34px rgba(0, 0, 0, .32),
    0 0 28px rgba(71, 184, 246, .14);
  transform: translate3d(0, 0, 0) rotate(-11deg);
  transform-style: preserve-3d;
  backface-visibility: hidden;
  will-change: transform;
}

/* The central die gives each component a physical circuit-board surface. */
.signature-hero .floating-chip i {
  position: absolute;
  inset: 1.05rem;
  display: block;
  border: 1px solid rgba(175, 228, 255, .42);
  border-radius: .42rem;
  background:
    linear-gradient(90deg, transparent 49%, rgba(105, 204, 255, .26) 50%, transparent 51%) center / 1.5rem 100%,
    linear-gradient(0deg, transparent 49%, rgba(105, 204, 255, .22) 50%, transparent 51%) center / 100% 1.5rem,
    linear-gradient(145deg, #0d1a23 0%, #263640 42%, #0a1219 100%);
  box-shadow:
    inset 0 0 0 3px rgba(0, 0, 0, .32),
    inset 0 0 22px rgba(46, 152, 207, .19),
    0 0 12px rgba(101, 214, 255, .12);
}

/* Brushed contact rails are made with a repeating gradient, rather than extra
   DOM nodes or images, and stay static while the chip drifts. */
.signature-hero .floating-chip::before,
.signature-hero .floating-chip::after {
  content: "";
  position: absolute;
  pointer-events: none;
  opacity: .92;
  background: repeating-linear-gradient(90deg, #85939b 0 .3rem, #151e24 .3rem .56rem);
}

.signature-hero .floating-chip::before {
  right: .8rem;
  left: .8rem;
  top: -.48rem;
  height: .43rem;
  border-radius: .12rem .12rem 0 0;
}

.signature-hero .floating-chip::after {
  top: .8rem;
  bottom: .8rem;
  left: -.48rem;
  width: .43rem;
  border-radius: .12rem 0 0 .12rem;
  transform: rotate(90deg) translateX(-100%);
  transform-origin: top left;
}

.signature-hero .floating-chip b {
  position: relative;
  z-index: 1;
  max-width: 70%;
  padding: .28rem .45rem;
  border: 1px solid rgba(192, 238, 255, .28);
  border-radius: .2rem;
  color: rgba(229, 248, 255, .8);
  background: rgba(2, 9, 14, .5);
  font-family: "Arial Narrow", "Aptos", sans-serif;
  font-size: .55rem;
  font-weight: 800;
  letter-spacing: .15em;
  text-align: center;
  text-shadow: 0 0 8px rgba(108, 209, 255, .55);
}

.signature-hero .floating-chip--main {
  --chip-size: clamp(12.5rem, 20vw, 19rem);
  top: 16%;
  right: 7%;
  opacity: .88;
  animation: ace-main-chip-drift 20s ease-in-out infinite alternate;
}

.signature-hero .floating-chip--memory {
  --chip-size: clamp(7.75rem, 11vw, 11rem);
  right: 33%;
  bottom: 13%;
  opacity: .68;
  transform: rotate(17deg);
  animation: ace-memory-chip-drift 24s ease-in-out infinite alternate;
}

.signature-hero .floating-chip--logic {
  --chip-size: clamp(6.5rem, 10vw, 9rem);
  top: 14%;
  left: 47%;
  opacity: .58;
  transform: rotate(-23deg);
  animation: ace-logic-chip-drift 27s ease-in-out infinite alternate;
}

.signature-hero .floating-chip--micro {
  --chip-size: clamp(5.5rem, 8vw, 7.5rem);
  right: 3%;
  bottom: 25%;
  opacity: .48;
  transform: rotate(28deg);
  animation: ace-micro-chip-drift 22s ease-in-out infinite alternate;
}

@keyframes ace-main-chip-drift {
  from { transform: translate3d(0, 0, -110px) rotateX(7deg) rotateY(-9deg) rotate(-11deg) scale(.91); }
  to { transform: translate3d(-3.2vw, 2.4vh, 125px) rotateX(-5deg) rotateY(8deg) rotate(-4deg) scale(1.16); }
}

@keyframes ace-memory-chip-drift {
  from { transform: translate3d(0, 0, -70px) rotateX(-6deg) rotateY(12deg) rotate(17deg) scale(.92); }
  to { transform: translate3d(2.6vw, -2.3vh, 105px) rotateX(5deg) rotateY(-9deg) rotate(10deg) scale(1.18); }
}

@keyframes ace-logic-chip-drift {
  from { transform: translate3d(0, 0, -80px) rotateX(5deg) rotateY(-12deg) rotate(-23deg) scale(.9); }
  to { transform: translate3d(-2vw, 2.6vh, 96px) rotateX(-6deg) rotateY(9deg) rotate(-16deg) scale(1.16); }
}

@keyframes ace-micro-chip-drift {
  from { transform: translate3d(0, 0, -65px) rotateX(-7deg) rotateY(10deg) rotate(28deg) scale(.88); }
  to { transform: translate3d(2.3vw, -2.7vh, 84px) rotateX(6deg) rotateY(-8deg) rotate(19deg) scale(1.15); }
}

@media (max-width: 750px) {
  .signature-hero .floating-chip--main {
    --chip-size: min(37vw, 12.5rem);
    top: 16%;
    right: -7%;
    opacity: .68;
    animation-duration: 26s;
  }

  .signature-hero .floating-chip--memory {
    --chip-size: 6rem;
    right: 61%;
    bottom: 17%;
    opacity: .48;
    animation-duration: 30s;
  }

  .signature-hero .floating-chip--logic,
  .signature-hero .floating-chip--micro {
    display: none;
  }
}

@media (prefers-reduced-motion: reduce) {
  .signature-hero .floating-chip { animation: none; }
}