/* Motion — MetaMask Card (spring + scroll-linked horizontal) */

:root {
  --motion: 1;
  --motion-speed: 0.55s;
  --motion-speed-slow: 0.75s;
  --spring-ease: cubic-bezier(0.4, 1.35, 0.5, 0.97);
  --spring-ease-duration: calc(var(--motion) * 0.5s);
  --ease-out-expo: cubic-bezier(0.16, 1, 0.3, 1);
}

@media (prefers-reduced-motion: reduce) {
  :root {
    --motion: 0;
    --motion-speed: 0.01ms;
    --motion-speed-slow: 0.01ms;
    --spring-ease-duration: 0.01ms;
  }
}

/* —— Load: nav —— */
body.is-loading .nav-pill {
  opacity: 0;
  transform: translate3d(0, calc(-100% - 2.4rem), 0);
}

body.is-ready .nav-pill {
  animation: header-build-up 0.9s var(--spring-ease) forwards;
  animation-delay: 0.08s;
}

@keyframes header-build-up {
  from {
    opacity: 0;
    transform: translate3d(0, calc(-100% - 2.4rem), 0);
  }
  to {
    opacity: 1;
    transform: translateZ(0);
  }
}

/* —— Hero: mask reveal (from metamask.io keyframes) —— */
body.is-loading .hero__line {
  opacity: 0;
}

body.is-ready .hero__line--1 {
  animation: mm-headline-mask-1 1.15s var(--spring-ease) forwards;
  animation-delay: 0.12s;
}

body.is-ready .hero__line--2 {
  animation: mm-headline-mask-2 1.15s var(--spring-ease) forwards;
  animation-delay: 0.2s;
}

body.is-ready .hero__line--3 {
  animation: mm-headline-mask-3 1.15s var(--spring-ease) forwards;
  animation-delay: 0.28s;
}

@keyframes mm-headline-mask-1 {
  from {
    opacity: 0.35;
    clip-path: inset(0 100% 0 0);
  }
  to {
    opacity: 1;
    clip-path: inset(0 0 0 0);
  }
}

@keyframes mm-headline-mask-2 {
  from {
    opacity: 0.35;
    clip-path: inset(0 0 0 100%);
  }
  to {
    opacity: 1;
    clip-path: inset(0 0 0 0);
  }
}

@keyframes mm-headline-mask-3 {
  from {
    opacity: 0.35;
    clip-path: inset(100% 0 0 0);
  }
  to {
    opacity: 1;
    clip-path: inset(0 0 0 0);
  }
}

body.is-ready .hero__media--enter {
  animation: hero-media-enter 1.1s var(--spring-ease) forwards;
  animation-delay: 0.18s;
}

body.is-ready .hero__shape--enter {
  animation: hero-shape-enter 1s var(--spring-ease) forwards;
  animation-delay: 0.22s;
}

@keyframes hero-media-enter {
  from {
    opacity: 0;
    transform: translate3d(0, 3rem, 0) scale(0.94);
  }
  to {
    opacity: 1;
    transform: translateZ(0) scale(1);
  }
}

@keyframes hero-shape-enter {
  from {
    opacity: 0;
    transform: translate3d(0, 2rem, 0);
  }
  to {
    opacity: 1;
    transform: translateZ(0);
  }
}

@media (min-width: 900px) {
  body.is-ready .hero__shape--enter {
    animation-name: hero-shape-enter-desk;
  }

  .hero__shape {
    transform: translate3d(-1cm, 1cm, 0);
  }
}

@keyframes hero-shape-enter-desk {
  from {
    opacity: 0;
    transform: translate3d(-1cm, calc(2rem + 1cm), 0);
  }
  to {
    opacity: 1;
    transform: translate3d(-1cm, 1cm, 0);
  }
}

.hero__float-wrap {
  animation: hero-float 5s ease-in-out infinite;
}

body.is-scrolling .hero__float-wrap,
body.is-scrolling .metal__float {
  animation-play-state: paused;
}

@keyframes hero-float {
  0%,
  100% {
    transform: translate3d(0, 0, 0);
  }
  50% {
    transform: translate3d(0, -0.8rem, 0);
  }
}

/* —— Scroll reveal (плавное появление при скролле) —— */
.reveal {
  opacity: 0;
  transform: translate3d(0, 1.6rem, 0) scale(0.985);
  filter: blur(8px);
  transition:
    opacity 1.05s var(--ease-out-expo),
    transform 1.05s var(--ease-out-expo),
    filter 1.15s var(--ease-out-expo);
  transition-delay: var(--reveal-delay, 0s);
  will-change: opacity, transform, filter;
}

.reveal.is-in {
  opacity: 1;
  transform: translate3d(0, 0, 0) scale(1);
  filter: blur(0);
  will-change: auto;
}

.reveal--delay {
  --reveal-delay: 0.14s;
}

.reveal--scale {
  transform: translate3d(0, 1.4rem, 0) scale(0.94);
}

.reveal--scale.is-in {
  transform: translate3d(0, 0, 0) scale(1);
}

@media (max-width: 767px) {
  .reveal {
    filter: none;
    transform: translate3d(0, 1.2rem, 0) scale(0.99);
  }

  .reveal.is-in {
    transform: translateZ(0) scale(1);
  }
}

/* —— FAQ —— */
.faq.is-in .faq__heading {
  opacity: 1;
  transform: translateZ(0);
}

/* —— Scroll progress dots (hidden on clone) —— */
.scroll-dots--features {
  display: none !important;
}

.scroll-dots {
  display: flex;
  gap: 8px;
  width: fit-content;
  margin: 28px auto 0;
  padding: 14px 18px;
  background: var(--white);
  border-radius: 999px;
  box-shadow: 0 4px 24px rgba(1, 51, 48, 0.1);
  transition:
    transform var(--spring-ease-duration) var(--spring-ease),
    opacity 0.35s var(--spring-ease),
    visibility 0.35s;
}

.scroll-dots.is-hidden {
  opacity: 0;
  visibility: hidden;
  transform: translateY(8px) scale(0.96);
  pointer-events: none;
}

.scroll-dots.is-scroll-hidden:not(.is-hidden) {
  opacity: 0;
  visibility: hidden;
  transform: translateX(calc(108% + var(--pad))) scale(0);
  pointer-events: none;
}

.scroll-dots__btn {
  position: relative;
  overflow: hidden;
  flex-shrink: 0;
  width: 8px;
  height: 8px;
  padding: 0;
  border: none;
  border-radius: 999px;
  background: #c8ceda;
  cursor: pointer;
  transition:
    width var(--spring-ease-duration) var(--spring-ease),
    background 0.25s;
}

.scroll-dots__fill {
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: var(--green-dark);
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform 0.15s linear;
}

.scroll-dots__btn.is-active {
  width: 32px;
  background: #e9edf6;
}

.scroll-dots__btn.is-active .scroll-dots__fill {
  transform: scaleX(var(--dot-progress, 1));
}

/* ========== Pricing entrance (scrollY timeline — см. TRANSITION_AUDIT.md) ========== */
.pricing {
  --p-sheet-y: 0;
  --p-sheet: 0;
  --p-intro: 0;
  --p-card-0: 0;
  --p-card-1: 0;
  --p-plan-0: 0;
  --p-plan-1: 0;
  --p-table: 0;
  --p-note: 0;
}

.pricing:not(.pricing--active) .pricing__sheet {
  pointer-events: none;
}

.pricing__sheet {
  opacity: var(--p-sheet);
  transform: translate3d(0, calc((1 - var(--p-sheet-y, var(--p-sheet))) * 2rem), 0)
    scale(calc(0.96 + var(--p-sheet) * 0.04));
  backface-visibility: hidden;
  transform-style: flat;
}

.pricing__sheet.cut-corner-tr {
  --corner-cut: 2.8rem;
}

.pricing__intro.pricing__col {
  opacity: var(--p-intro);
  transform: translate3d(0, calc((1 - var(--p-intro)) * 1.2rem), 0);
  filter: blur(calc((1 - var(--p-intro)) * 6px));
}

.pricing__plan.pricing__col {
  opacity: 1;
  transform: none;
}

.pricing__card-stage {
  display: flex;
  align-items: flex-end;
  justify-content: center;
  width: 100%;
  min-height: 12.8rem;
  margin-bottom: 0.6rem;
}

.pricing__card-visual {
  transform-origin: 50% 100%;
  opacity: 0;
  pointer-events: none;
}

.pricing__card-visual[data-pricing-card="virtual"] {
  opacity: var(--p-card-0);
  transform: translate3d(0, calc((1 - var(--p-card-0)) * 2.6rem), 0)
    rotate(calc(6deg * (1 - var(--p-card-0))))
    scale(calc(0.92 + var(--p-card-0) * 0.08));
  pointer-events: auto;
}

.pricing__card-visual[data-pricing-card="metal"] {
  opacity: var(--p-card-1);
  transform: translate3d(0, calc((1 - var(--p-card-1)) * 2.8rem), 0)
    rotate(calc(-5deg * (1 - var(--p-card-1))))
    scale(calc(0.92 + var(--p-card-1) * 0.08));
  pointer-events: auto;
}

.pricing__head .pricing__plan:nth-child(2) .pricing__tier,
.pricing__head .pricing__plan:nth-child(2) .pricing__tag,
.pricing__head .pricing__plan:nth-child(2) .btn {
  --p-plan: var(--p-plan-0);
}

.pricing__head .pricing__plan:nth-child(3) .pricing__tier,
.pricing__head .pricing__plan:nth-child(3) .pricing__tag,
.pricing__head .pricing__plan:nth-child(3) .btn {
  --p-plan: var(--p-plan-1);
}

.pricing__plan .pricing__tier,
.pricing__plan .pricing__tag,
.pricing__plan .btn {
  opacity: var(--p-plan);
  transform: translate3d(0, calc((1 - var(--p-plan)) * 1rem), 0);
}

.pricing__table .pricing__group,
.pricing__table .pricing__row:not(.pricing__row--head) {
  opacity: var(--row-p, 0);
  transform: translate3d(0, calc((1 - var(--row-p, 0)) * 0.8rem), 0);
}

.pricing__note {
  opacity: var(--p-note);
  transform: translate3d(0, calc((1 - var(--p-note)) * 1rem), 0);
}

.pricing--done .pricing__sheet {
  pointer-events: auto;
}

/* —— FAQ —— */
.faq__item summary::after {
  transition: opacity 0.25s ease, transform 0.35s var(--spring-ease);
}

.faq__item[open] summary::after {
  transform: scale(1.05);
}

.faq__item[open] p {
  animation: faq-open 0.45s var(--spring-ease);
}

@keyframes faq-open {
  from {
    opacity: 0;
    transform: translate3d(0, -0.4rem, 0);
  }
  to {
    opacity: 1;
    transform: translateZ(0);
  }
}

.metal__float {
  animation: metal-float 6s ease-in-out infinite;
}

@keyframes metal-float {
  0%,
  100% {
    transform: translate3d(0, 0, 0) rotate(-2deg);
  }
  50% {
    transform: translate3d(0, -1rem, 0) rotate(2deg);
  }
}

@media (prefers-reduced-motion: reduce) {
  .pricing__sheet,
  .pricing__intro.pricing__col,
  .pricing__card-visual,
  .pricing__plan .pricing__tier,
  .pricing__plan .pricing__tag,
  .pricing__plan .btn,
  .pricing__note,
  .pricing__table .pricing__group,
  .pricing__table .pricing__row:not(.pricing__row--head) {
    opacity: 1 !important;
    transform: none !important;
    pointer-events: auto !important;
  }

  .hero__float-wrap,
  .metal__float,
  body.is-ready .hero__line--1,
  body.is-ready .hero__line--2,
  body.is-ready .hero__line--3,
  body.is-ready .hero__media--enter,
  body.is-ready .hero__shape--enter {
    animation: none !important;
  }

  .hero__line,
  .hero__media--enter,
  .reveal,
  .fcard {
    opacity: 1 !important;
    transform: none !important;
    filter: none !important;
    clip-path: none !important;
  }

  .pricing__intro.pricing__col {
    filter: none !important;
  }

  .hero__shape--enter {
    opacity: 1 !important;
    clip-path: none !important;
  }
}

@media (prefers-reduced-motion: reduce) and (min-width: 900px) {
  .hero__shape,
  .hero__shape--enter {
    transform: translate3d(-1cm, 1cm, 0) !important;
  }
}