/* Purposeful Canvas UI enhancements. Every effect has a readable CSS fallback. */

.canvasui-liquid-effect,
.canvasui-ripple-effect {
  position: absolute;
  inset: 0;
  overflow: hidden;
  pointer-events: none;
}

.canvasui-liquid-effect {
  z-index: 1;
  opacity: 0.72;
  mix-blend-mode: screen;
}

.canvasui-liquid-source,
.canvasui-liquid-output,
.canvasui-ripple-source,
.canvasui-ripple-output {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  pointer-events: none;
}

.canvasui-liquid-source,
.canvasui-ripple-source {
  opacity: 0;
}

.canvasui-liquid-output,
.canvasui-ripple-output {
  opacity: 0;
  transition: opacity 240ms ease;
}

.canvasui-liquid-effect.is-active .canvasui-liquid-output,
.canvasui-ripple-effect.is-active .canvasui-ripple-output {
  opacity: 1;
}

.hero-content,
.process > .section-intro,
.process > .process-list,
.process > .particle-scroll-surface {
  position: relative;
  z-index: 2;
}

.process {
  position: relative;
  overflow: hidden;
}

.canvasui-ripple-effect {
  z-index: 3;
  opacity: 0.78;
  mix-blend-mode: screen;
}

.particle-scroll-surface {
  position: relative;
  min-height: clamp(12rem, 22vw, 17rem);
  margin-top: clamp(3.5rem, 7vw, 6rem);
  overflow: hidden;
  border: 1px solid var(--line-strong);
  background: rgba(3, 31, 44, 0.7);
}

.particle-scroll-fallback,
.particle-scroll-content-inner {
  display: grid;
  min-height: 100%;
  align-content: center;
  justify-items: center;
  padding: 2rem var(--gutter);
  text-align: center;
}

.particle-scroll-fallback {
  position: absolute;
  z-index: 1;
  inset: 0;
  transition: opacity 300ms ease;
}

.particle-scroll-fallback .eyebrow,
.particle-scroll-content-inner .eyebrow {
  margin-bottom: 1rem;
  color: var(--gold);
}

.particle-scroll-fallback p,
.particle-scroll-content-inner p {
  margin: 0;
  font-family: var(--display);
  font-size: clamp(2rem, 4vw, 4rem);
  letter-spacing: -0.035em;
  line-height: 0.95;
}

.particle-scroll-fallback i,
.particle-scroll-content-inner i {
  color: var(--gold);
  font-family: var(--body);
  font-size: 0.55em;
  font-style: normal;
  vertical-align: 0.12em;
}

.particle-scroll-source,
.particle-scroll-content,
.particle-scroll-output {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}

.particle-scroll-source {
  z-index: 0;
  display: block;
  opacity: 0;
  pointer-events: none;
}

.particle-scroll-content {
  z-index: 0;
  overflow: hidden;
  opacity: 0;
  pointer-events: none;
}

.particle-scroll-content-inner {
  min-height: 220%;
}

.particle-scroll-output {
  z-index: 2;
  display: none;
  pointer-events: none;
}

.particle-scroll-surface.is-native .particle-scroll-fallback {
  opacity: 0;
}

.particle-scroll-surface.is-native .particle-scroll-output {
  display: block;
}

.particle-scroll-surface.is-fallback-active .particle-scroll-fallback p {
  position: relative;
}

.particle-scroll-surface.is-fallback-active .particle-word {
  display: inline-flex;
  white-space: nowrap;
}

.particle-scroll-surface.is-fallback-active .particle-symbol {
  color: var(--gold);
  font-family: var(--body);
  font-size: 0.55em;
  vertical-align: 0.12em;
}

.particle-scroll-surface.is-fallback-active .particle-char {
  display: inline-block;
  min-width: 0.02em;
  white-space: pre;
  will-change: transform, opacity;
  transform-origin: center;
}

.proof-card-mark {
  width: 4rem;
  height: 4rem;
  margin-bottom: 1.7rem;
  overflow: hidden;
  border: 1px solid var(--line-strong);
  border-radius: 1.05rem;
  background: rgba(255, 255, 255, 0.045);
}

.proof-card-mark .canvasui-glass-content {
  display: block;
  width: 100%;
  height: 100%;
}

.proof-card-mark img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.proof-card-mark .canvasui-glass-source,
.proof-card-mark .canvasui-glass-output {
  display: none;
}

.proof-card-mark.is-native .canvasui-glass-source,
.proof-card-mark.is-native .canvasui-glass-output {
  display: block;
}

@media (max-width: 800px) {
  .canvasui-liquid-effect {
    opacity: 0.54;
  }

  .canvasui-ripple-effect {
    opacity: 0.62;
  }

  .particle-scroll-surface {
    min-height: 11rem;
  }

  .proof-card-mark {
    width: 3.5rem;
    height: 3.5rem;
    margin-bottom: 1.4rem;
  }
}

@media (prefers-reduced-motion: reduce) {
  .canvasui-liquid-effect,
  .canvasui-ripple-effect,
  .particle-scroll-surface {
    display: none;
  }
}