/* Scoped glass and pointer-tilt treatment for the i-XALL difference cards. */
.difference-grid {
  perspective: 1200px;
}

.difference-card {
  --tilt-x: 0deg;
  --tilt-y: 0deg;
  --glow-x: 50%;
  --glow-y: 50%;
  isolation: isolate;
  overflow: hidden;
  transform-style: preserve-3d;
  background:
    linear-gradient(145deg, rgba(255, 255, 255, .9), rgba(245, 249, 255, .64));
  border-color: rgba(255, 255, 255, .88);
  box-shadow:
    0 20px 48px rgba(20, 35, 60, .08),
    inset 0 1px 0 rgba(255, 255, 255, .92),
    inset 0 -1px 0 rgba(120, 139, 170, .08);
  -webkit-backdrop-filter: blur(18px) saturate(125%);
  backdrop-filter: blur(18px) saturate(125%);
  transition:
    opacity .65s ease,
    transform .28s cubic-bezier(.2, .8, .2, 1),
    border-color .28s ease,
    box-shadow .28s ease;
  will-change: transform;
}

.difference-card::before,
.difference-card::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
}

.difference-card::before {
  background: radial-gradient(
    circle at var(--glow-x) var(--glow-y),
    rgba(91, 211, 225, .24),
    rgba(117, 84, 255, .1) 25%,
    transparent 57%
  );
  opacity: 0;
  transition: opacity .28s ease;
}

.difference-card::after {
  background: linear-gradient(
    115deg,
    rgba(255, 255, 255, .58),
    transparent 32%,
    transparent 70%,
    rgba(213, 244, 251, .2)
  );
}

.difference-card .icon-chip,
.difference-card h3,
.difference-card p {
  position: relative;
  z-index: 1;
  transition: transform .28s cubic-bezier(.2, .8, .2, 1);
}

.difference-card > span,
.difference-card small {
  z-index: 1;
}

.difference-card.is-tilting {
  transform:
    perspective(900px)
    rotateX(var(--tilt-x))
    rotateY(var(--tilt-y))
    translateY(-5px)
    scale(1.012);
  border-color: rgba(125, 111, 255, .34);
  box-shadow:
    0 28px 62px rgba(28, 43, 74, .14),
    0 10px 30px rgba(90, 83, 255, .07),
    inset 0 1px 0 rgba(255, 255, 255, .96);
}

.difference-card.is-tilting::before {
  opacity: 1;
}

.difference-card.is-tilting .icon-chip {
  transform: translateZ(22px);
}

.difference-card.is-tilting h3 {
  transform: translateZ(14px);
}

.difference-card.is-tilting p {
  transform: translateZ(8px);
}

@media (hover: none), (pointer: coarse), (prefers-reduced-motion: reduce) {
  .difference-card,
  .difference-card.is-tilting,
  .difference-card .icon-chip,
  .difference-card h3,
  .difference-card p {
    transform: none !important;
  }

  .difference-card::before {
    display: none;
  }
}