/* Trust stats — see .trust-panel in hero.css for the outer reveal (iris
   wipe + scroll-tied background color) and scroll-story.js's updateTrust()
   for all the timing. Everything here is the panel's own content: a
   mask-reveal heading/subheading (each wrapped in an overflow-hidden
   .trust-mask, sliding up from fully hidden to settled — see .trust-mask
   below), then the 4 stats tilting/scaling in with their numbers counting
   up, staggered. */
.trust-glow {
  position: absolute;
  inset: 0;
  overflow: hidden;
  z-index: 0;
}

/* Three soft blurred blobs, all in the TDX color mark's own lavender fill
   (assets/icons/tdx-logo-color.svg), drifting slowly and independently —
   ambient motion that keeps running regardless of scroll, layered under
   the scroll-tied moves everything else in this panel makes. */
.trust-glow-blob {
  position: absolute;
  border-radius: 50%;
  filter: blur(80px);
  background: radial-gradient(circle, var(--color-logo-lavender), transparent 70%);
  will-change: transform;
}

.trust-glow-blob-1 {
  left: -10%;
  top: 8%;
  width: clamp(320px, 34vw, 620px);
  height: clamp(320px, 34vw, 620px);
  opacity: 0.4;
  animation: trust-drift-1 22s ease-in-out infinite;
}

.trust-glow-blob-2 {
  right: -8%;
  bottom: 4%;
  width: clamp(280px, 28vw, 520px);
  height: clamp(280px, 28vw, 520px);
  opacity: 0.3;
  animation: trust-drift-2 26s ease-in-out infinite;
}

.trust-glow-blob-3 {
  left: 38%;
  top: 44%;
  width: clamp(240px, 24vw, 460px);
  height: clamp(240px, 24vw, 460px);
  opacity: 0.22;
  animation: trust-drift-3 30s ease-in-out infinite;
}

@keyframes trust-drift-1 {
  0%, 100% { transform: translate(0, 0) scale(1); }
  50% { transform: translate(4%, 6%) scale(1.12); }
}

@keyframes trust-drift-2 {
  0%, 100% { transform: translate(0, 0) scale(1); }
  50% { transform: translate(-5%, -4%) scale(1.08); }
}

@keyframes trust-drift-3 {
  0%, 100% { transform: translate(-50%, -50%) scale(1); }
  50% { transform: translate(-46%, -54%) scale(1.15); }
}

.trust-inner {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  gap: clamp(48px, 8vh, 96px);
  width: 100%;
}

.trust-intro {
  max-width: 900px;
  display: flex;
  flex-direction: column;
}

/* The reveal itself: each line's own overflow-hidden window, with the text
   inside starting pushed fully below it (translateY 100%) and sliding up
   to rest (0%) as scroll-story.js's headingT advances — a mask reveal
   instead of a plain opacity fade, so the text looks like it's being
   uncovered rather than just materializing. */
.trust-mask {
  overflow: hidden;
}

.trust-heading,
.trust-subheading {
  transform: translateY(100%);
  will-change: transform;
}

.trust-heading {
  font-family: var(--font-ar);
  font-weight: 800;
  font-size: clamp(28px, 4.2vw, 52px);
  line-height: 1.4;
  color: var(--color-text);
}

.trust-subheading {
  margin-top: 16px;
  font-family: var(--font-ar-secondary);
  font-weight: 600;
  font-size: clamp(16px, 1.6vw, 22px);
  color: var(--color-text);
}

.trust-stats {
  display: flex;
  flex-wrap: wrap;
  border: 1px solid rgba(255, 255, 255, 0.28);
  border-radius: 24px;
  overflow: hidden;
}

/* Tilt-scale entrance (set by scroll-story.js's updateTrust()) instead of a
   plain slide-up — each card settles from slightly small, rotated and
   translated to its resting flat/full-size state. transform-origin low so
   the tilt reads as the card "landing" rather than spinning in place. */
.trust-stat {
  flex: 1 1 220px;
  padding: clamp(24px, 3vh, 36px) clamp(20px, 2.6vw, 34px);
  border-inline-start: 1px solid rgba(255, 255, 255, 0.28);
  opacity: 0;
  transform-origin: 50% 100%;
  will-change: opacity, transform;
}

.trust-stat:first-child {
  border-inline-start: none;
}

.trust-stat-number {
  display: block;
  font-family: var(--font-en);
  font-weight: 800;
  font-size: clamp(34px, 4.2vw, 56px);
  color: var(--color-text);
  line-height: 1;
  direction: ltr;
}

.trust-stat-label {
  display: block;
  margin-top: 12px;
  padding-top: 12px;
  border-top: 1px solid rgba(255, 255, 255, 0.28);
  font-family: var(--font-ar);
  font-size: clamp(13px, 1.1vw, 16px);
  color: var(--color-text);
}

@media (max-width: 760px) {
  .trust-stats {
    border-radius: 20px;
  }

  .trust-stat {
    flex: 1 1 50%;
    border-inline-start: 1px solid rgba(255, 255, 255, 0.28);
  }

  .trust-stat:nth-child(odd) {
    border-inline-start: none;
  }

  .trust-stat:nth-child(n + 3) {
    border-top: 1px solid rgba(255, 255, 255, 0.28);
  }
}