/*
  R.3.D Method interaction and motion polish
  Created: 2026-07-12
  Scope: transition performance, keyboard focus, accessible targets, and reduced motion.
  This layer intentionally does not change the site's layout, palette, type, or content.
*/

:root {
  --r3d-polish-fast: 150ms;
  --r3d-polish-medium: 280ms;
  --r3d-polish-carousel: 480ms;
  --r3d-polish-ease: cubic-bezier(0.22, 1, 0.36, 1);
  --r3d-polish-focus: rgba(211, 188, 255, 0.96);
}

/*
  The compiled base bundle applies transition: all to every element. Reset only
  transition properties here, then opt the real interactive elements back in.
  The independently built Track Record section keeps its own motion system.
*/
#root *:not(.r3d-proof, .r3d-proof *) {
  transition-property: none;
}

#root .navBar {
  transition: transform var(--r3d-polish-medium) var(--r3d-polish-ease) !important;
}

#root [data-r3d-control] {
  -webkit-tap-highlight-color: transparent;
  touch-action: manipulation;
  transition:
    opacity var(--r3d-polish-fast) ease,
    color var(--r3d-polish-fast) ease,
    background-color var(--r3d-polish-fast) ease,
    border-color var(--r3d-polish-fast) ease,
    box-shadow var(--r3d-polish-fast) ease,
    filter var(--r3d-polish-fast) ease,
    scale var(--r3d-polish-fast) var(--r3d-polish-ease),
    transform var(--r3d-polish-fast) var(--r3d-polish-ease) !important;
}

#root [data-r3d-control="pressable"]:active {
  filter: brightness(0.94);
}

#root [data-r3d-control]:focus-visible,
#root [data-r3d-carousel]:focus-visible,
#root .contact-section :is(input, textarea, button, a):focus-visible {
  outline: 0.2rem solid var(--r3d-polish-focus) !important;
  outline-offset: 0.3rem !important;
}

#root .navbar-menu ul li {
  transition: opacity var(--r3d-polish-fast) ease !important;
}

#root .social-media-icon-container,
#root .mobile-menu .social-media-icon-container {
  transition:
    box-shadow var(--r3d-polish-fast) ease,
    filter var(--r3d-polish-fast) ease,
    scale var(--r3d-polish-fast) var(--r3d-polish-ease),
    transform var(--r3d-polish-fast) var(--r3d-polish-ease) !important;
}

#insta-container-mobile {
  background: radial-gradient(circle at 30% 30%, #feda75, #fa7e1e, #d62976, #962fbf, #4f5bd5);
}

#telegram-container-mobile {
  background: linear-gradient(135deg, #37aee2, #1d92d6);
}

#discord-container-mobile {
  background: linear-gradient(135deg, #5865f2, #36393f);
}

#root .packs-section .pack-card-image {
  transition: transform 700ms var(--r3d-polish-ease) !important;
}

#root .packs-section .pack-card-content {
  transition:
    transform 560ms var(--r3d-polish-ease),
    opacity 260ms ease !important;
}

#root .packs-section .pack-card-wrap-content,
#root .free-trial-container .free-trial-button,
#root .contact-section .contact-form button {
  transition:
    scale var(--r3d-polish-fast) var(--r3d-polish-ease),
    filter var(--r3d-polish-fast) ease,
    box-shadow var(--r3d-polish-fast) ease !important;
}

#root .backtest-section .back-icon img {
  transition:
    scale var(--r3d-polish-fast) var(--r3d-polish-ease),
    filter var(--r3d-polish-fast) ease !important;
}

#root .r3d-student-section #r3d-student-section .slide {
  transition:
    transform var(--r3d-polish-carousel) var(--r3d-polish-ease),
    opacity 320ms ease,
    filter 320ms ease !important;
}

#root .r3d-student-section #r3d-student-section .slide:is(.left, .center, .right) {
  will-change: transform, opacity;
}

#root .r3d-student-section #r3d-student-section .slide.hidden {
  pointer-events: none !important;
  will-change: auto;
}

#root .backtest-section .video-slide {
  transition:
    transform var(--r3d-polish-carousel) var(--r3d-polish-ease),
    opacity 320ms ease,
    filter 320ms ease !important;
}

#root .backtest-section .video-slide:is(.video-left, .video-center, .video-right) {
  will-change: transform, opacity;
}

#root .backtest-section .video-slide.video-hidden {
  pointer-events: none !important;
  will-change: auto;
}

/* Replace the bundled long-distance mount translations with short, layout-safe reveals. */
#root :is(.about-section, .contact-section, .backtest-section) .sc-bwzfXH {
  animation: none !important;
  opacity: 1 !important;
  transform: none !important;
}

#root .contact-section .contact-form form button,
#root .contact-section .contact-us-second-part a {
  align-items: center;
  box-sizing: border-box;
  min-height: 4.4rem;
}

#root .contact-section .contact-us-second-part a {
  display: inline-flex;
  padding-block: 0.35rem;
}

.r3d-polish-sr-only {
  block-size: 1px !important;
  clip: rect(0 0 0 0) !important;
  clip-path: inset(50%) !important;
  inline-size: 1px !important;
  margin: -1px !important;
  overflow: hidden !important;
  padding: 0 !important;
  position: absolute !important;
  white-space: nowrap !important;
}

@media only screen and (max-width: 768px),
  only screen and (max-width: 1024px) and (max-height: 520px) and (orientation: landscape) {
  #root .mobile-menu-container-visible {
    animation-duration: 140ms !important;
    animation-timing-function: ease-out !important;
  }

  #root .mobile-menu-visible {
    animation-duration: 210ms !important;
    animation-timing-function: var(--r3d-polish-ease) !important;
  }

  #root .mobile-menu [data-r3d-control],
  #root #menu-icon[data-r3d-control],
  #root .r3d-student-section :is(.backtest-button, .voice-over-button) {
    min-height: 4.4rem;
    min-width: 4.4rem;
  }
}

@media (prefers-reduced-motion: reduce) {
  #root [data-r3d-control],
  #root [data-r3d-carousel],
  #root .navBar,
  #root .packs-section .pack-card-image,
  #root .packs-section .pack-card-content,
  #root .r3d-student-section #r3d-student-section .slide,
  #root .backtest-section .video-slide,
  #root .backtest-section .back-icon img,
  #root .mobile-menu-container-visible,
  #root .mobile-menu-visible {
    animation: none !important;
    scroll-behavior: auto !important;
    transition: none !important;
  }
}