/*
  MUTE motion layer
  ------------------------
  Kept separate from the visual system so animation stays easy to maintain.
  Motion is part of the final product experience and is enabled automatically.
*/

.hero {
  --copy-y: 0px;
  --copy-fade: 1;
  --visual-y: 0px;
  --visual-scale: 1;
  --card-x: 0px;
  --card-y: 0px;
  --card-turn: -2deg;
  --card-scale: 1;
  --orbit-one-turn: 0deg;
  --orbit-one-scale: 1;
  --orbit-two-turn: 0deg;
  --orbit-two-scale: 1;
  --note-one-x: 0px;
  --note-one-y: 0px;
  --note-two-x: 0px;
  --note-two-y: 0px;
  perspective: 1100px;
}

.hero-copy {
  transform: translate3d(0, var(--copy-y), 0);
  opacity: var(--copy-fade);
  will-change: transform, opacity;
}

.hero-visual {
  transform: translate3d(0, var(--visual-y), 0) scale(var(--visual-scale));
  transform-origin: 50% 42%;
  scale: 1;
  opacity: 1;
  will-change: transform, scale, opacity, filter;
}

body.motion-enabled .hero-visual {
  animation: hero-visual-arrive 1.15s cubic-bezier(.16, .84, .25, 1.12) both !important;
}

body.motion-enabled .hero-copy {
  animation: hero-copy-arrive .82s cubic-bezier(.2, .8, .25, 1) both !important;
}

.hero-visual .link-card {
  transform: translate3d(var(--card-x), var(--card-y), 70px)
    rotate(var(--card-turn)) scale(var(--card-scale));
  transform-origin: 50% 55%;
  will-change: transform;
  transition: border-color .35s ease, box-shadow .35s ease;
}

.hero-visual:hover .link-card {
  border-color: #48635d;
  box-shadow: 0 42px 100px #000b, 0 0 45px rgba(121, 239, 200, .05);
}

.hero-visual .orbit-one {
  transform: rotate(var(--orbit-one-turn)) scale(var(--orbit-one-scale));
  will-change: transform;
}

.hero-visual .orbit-two {
  transform: rotate(var(--orbit-two-turn)) scale(var(--orbit-two-scale));
  will-change: transform;
}

.hero-visual .note-one {
  transform: translate3d(var(--note-one-x), var(--note-one-y), 110px);
  will-change: transform, offset-distance;
}

.hero-visual .note-two {
  transform: translate3d(var(--note-two-x), var(--note-two-y), 100px);
  will-change: transform, offset-distance;
}

body.motion-enabled .hero-visual .note-one,
body.motion-enabled .hero-visual .note-two {
  inset: 0 auto auto 0;
  offset-path: circle(205px at 50% 50%);
  offset-anchor: center;
  offset-rotate: 0deg;
}

body.motion-enabled .hero-visual .note-one {
  offset-distance: 0%;
  animation: label-orbit-one 14s 1s linear infinite !important;
}

body.motion-enabled .hero-visual .note-two {
  offset-distance: 50%;
  animation: label-orbit-two 14s 1s linear infinite !important;
}

.hero-visual .link-code {
  text-shadow: 0 0 28px rgba(121, 239, 200, .08);
}

.connection-line span {
  position: relative;
  overflow: hidden;
}

.connection-line span::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, transparent 0%, #b8ffe7 48%, transparent 100%);
  transform: translateX(-115%);
}

body.motion-enabled .connection-line span::after {
  animation: signal-travel 3.2s ease-in-out infinite !important;
}

.reveal-item {
  opacity: 0;
  transform: translate3d(0, 28px, 0);
  transition: opacity .72s cubic-bezier(.2, .75, .25, 1),
    transform .72s cubic-bezier(.2, .75, .25, 1),
    border-color .25s ease;
  transition-delay: var(--reveal-delay, 0ms);
}

.reveal-item.is-revealed {
  opacity: 1;
  transform: translate3d(0, 0, 0);
}

/* The orbit contains readable labels. Keep their contrast stable while the
   container still participates in the scroll/translate reveal. */
.privacy-orbit.reveal-item { opacity: 1; }

body.motion-enabled .privacy-orbit.is-revealed i::after {
  animation: direct-connection 3.8s ease-in-out infinite !important;
}

/* Animated proof points */
.proof-grid {
  height: auto;
  min-height: 154px;
  gap: 14px;
  padding: 18px 0;
}

.proof-grid .proof-stat {
  min-width: 0;
  min-height: 116px;
  position: relative;
  isolation: isolate;
  overflow: hidden;
  justify-content: center;
  padding: 22px !important;
  border: 1px solid #22302d !important;
  border-radius: 11px;
  background: linear-gradient(145deg, rgba(18, 26, 27, .82), rgba(10, 15, 16, .92));
  transform: translateZ(0) scale(1);
  box-shadow: 0 10px 30px transparent;
  transition: transform .32s cubic-bezier(.2, .75, .25, 1),
    border-color .32s ease,
    box-shadow .32s ease,
    background-color .32s ease;
}

.proof-grid .proof-stat::before {
  content: "";
  position: absolute;
  z-index: -1;
  width: 150px;
  height: 150px;
  right: -55px;
  top: -70px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(121, 239, 200, .32), rgba(121, 239, 200, 0) 68%);
  opacity: 0;
  transform: scale(.55);
  transition: opacity .38s ease, transform .45s cubic-bezier(.2, .75, .25, 1);
  filter: blur(4px);
}

.proof-grid .proof-stat:hover {
  z-index: 2;
  transform: translateY(-6px) scale(1.055);
  border-color: rgba(121, 239, 200, .48) !important;
  box-shadow: 0 18px 44px rgba(0, 0, 0, .38),
    0 0 34px rgba(121, 239, 200, .12),
    inset 0 0 24px rgba(121, 239, 200, .035);
}

.proof-grid .proof-stat:hover::before {
  opacity: 1;
  transform: scale(1.2);
}

.proof-grid .proof-stat:hover .stat-number {
  color: #aaffdf;
  text-shadow: 0 0 22px rgba(121, 239, 200, .32);
}

.proof-grid .stat-number {
  position: relative;
  font-variant-numeric: tabular-nums;
  transform-origin: left center;
  transition: color .3s ease, text-shadow .3s ease;
}

body.motion-enabled .proof-grid .stat-number.is-counting {
  animation: stat-pop .72s cubic-bezier(.2, .8, .25, 1) both !important;
}

/* Animated how-it-works cards */
.step-grid article {
  isolation: isolate;
  overflow: hidden;
  transform: translateZ(0) scale(1);
  box-shadow: 0 12px 34px transparent;
  transition: opacity .72s cubic-bezier(.2, .75, .25, 1),
    transform .34s cubic-bezier(.2, .75, .25, 1),
    border-color .34s ease,
    box-shadow .34s ease,
    background-color .34s ease;
}

.step-grid article::before {
  content: "";
  position: absolute;
  z-index: -1;
  width: 230px;
  height: 230px;
  right: -90px;
  top: -105px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(121, 239, 200, .3), rgba(121, 239, 200, 0) 69%);
  opacity: 0;
  transform: scale(.5);
  transition: opacity .4s ease, transform .48s cubic-bezier(.2, .75, .25, 1);
  filter: blur(5px);
}

.step-grid article:hover {
  z-index: 2;
  transform: translateY(-8px) scale(1.035);
  border-color: rgba(121, 239, 200, .5);
  background: linear-gradient(145deg, rgba(20, 31, 31, .98), rgba(13, 20, 21, .98));
  box-shadow: 0 22px 52px rgba(0, 0, 0, .4),
    0 0 38px rgba(121, 239, 200, .13),
    inset 0 0 30px rgba(121, 239, 200, .04);
}

.step-grid article:hover::before {
  opacity: 1;
  transform: scale(1.18);
}

.step-grid article:hover .step-icon,
.step-grid article:hover .step-number {
  color: #aaffdf;
  text-shadow: 0 0 22px rgba(121, 239, 200, .34);
}

.step-grid .step-icon,
.step-grid .step-number {
  transition: color .3s ease, text-shadow .3s ease;
}

.step-grid .step-number {
  font-variant-numeric: tabular-nums;
  transform-origin: center;
}

body.motion-enabled .step-grid .step-number.is-counting {
  animation: stat-pop .72s cubic-bezier(.2, .8, .25, 1) both !important;
}

@keyframes hero-visual-arrive {
  0% { scale: .42; opacity: 0; filter: blur(14px); }
  62% { scale: 1.045; opacity: 1; filter: blur(0); }
  82% { scale: .985; }
  100% { scale: 1; opacity: 1; filter: blur(0); }
}

@keyframes hero-copy-arrive {
  0% { translate: 0 24px; opacity: 0; }
  100% { translate: 0 0; opacity: 1; }
}

@keyframes label-orbit-one {
  from { offset-distance: 0%; }
  to { offset-distance: 100%; }
}

@keyframes label-orbit-two {
  0% { offset-distance: 50%; }
  49.999% { offset-distance: 100%; }
  50% { offset-distance: 0%; }
  100% { offset-distance: 50%; }
}

@keyframes signal-travel {
  0%, 28% { transform: translateX(-115%); opacity: 0; }
  42% { opacity: .85; }
  72%, 100% { transform: translateX(115%); opacity: 0; }
}

@keyframes direct-connection {
  0%, 100% { left: 8%; opacity: .35; }
  50% { left: 88%; opacity: 1; }
}

@keyframes stat-pop {
  0% { scale: .62; opacity: .15; filter: blur(4px); }
  62% { scale: 1.11; opacity: 1; filter: blur(0); }
  100% { scale: 1; opacity: 1; filter: blur(0); }
}

@media (max-width: 900px) {
  .hero { perspective: none; }
  .hero-copy { opacity: 1; }
  .hero-visual .link-card { transform: translate3d(0, var(--card-y), 0) rotate(var(--card-turn)); }
  .proof-grid { gap: 10px; }
}

@media (max-width: 620px) {
  .hero-copy,
  .hero-visual,
  .hero-visual .link-card,
  .hero-visual .orbit-one,
  .hero-visual .orbit-two,
  .hero-visual .note-one,
  .hero-visual .note-two {
    transform: none;
  }

  .proof-grid .proof-stat {
    min-height: 104px;
    padding: 18px !important;
  }
}