/* ============================================================
   Trading Challenge — Ambient Motion Atmosphere
   "Module-native" self-sustaining micro-motions.
   ------------------------------------------------------------
   Design law for this file:
     · Every cycle >= 2.5s (most 2.8–22s)
     · Displacement / scale amplitude <= ~5px  (logo scale 1.02 ≈ 0.6px)
     · Opacity delta <= 0.15
     · Physics easing only: cubic-bezier(.25,.46,.45,.94) / ease-in-out
     · Animations use the INDIVIDUAL transform props (translate / scale /
       rotate) so they composite with — and never clobber — the existing
       hover `transform:` states already in the pages.
     · Foreground stays still; only decorative satellites breathe.
   All motion is disabled under prefers-reduced-motion (bottom of file).
   ============================================================ */

/* ---- shared timing function ---- */
:root { --amb-ease: cubic-bezier(.25, .46, .45, .94); }

/* ------------------------------------------------------------
   MODULE 1 · Brand logo (standalone mark)  → "heartbeat" scale
   Header logo only. Footer logo is left absolutely static
   (it is the page's grounding anchor).  Amplitude 1.0→1.02
   on a ~30px mark ≈ 0.6px — felt, not seen.  Cycle 2.8s.
   ------------------------------------------------------------ */
@keyframes amb-heartbeat { 0%, 100% { scale: 1; } 50% { scale: 1.02; } }

header .logo .mark,
header .logo .mark .logo-img,
.card .brand img {            /* login / register share the same idea */
  animation: amb-heartbeat 2.8s var(--amb-ease) infinite;
  transform-origin: center;
}
header .logo:hover .mark { animation-play-state: paused; }  /* yield to hover */

/* ------------------------------------------------------------
   MODULE 2 · Section eyebrow accent line (.tcm-eyebrow i)
   Treated as a purely-decorative divider → ultra-slow opacity
   cycle inside a tight band (0.68 ↔ 0.82, delta 0.14). Cycle 4s.
   ------------------------------------------------------------ */
@keyframes amb-line-breathe { 0%, 100% { opacity: .68; } 50% { opacity: .82; } }

.tcm-eyebrow i { animation: amb-line-breathe 4s ease-in-out infinite; }

/* ------------------------------------------------------------
   MODULE 3 · Decorative graphics / abstract background blobs
   (.tcm-ambient ::before/::after — the big blurred light pools)
   Very slow micro-float + sub-degree rotate. They are heavily
   blurred, so a few px of drift is subconscious only. The two
   blobs run on offset cycles (18s / 22s) so they never beat in
   sync — that's what kills the "static template" tell.
   ------------------------------------------------------------ */
@keyframes amb-pool-a {
  0%, 100% { translate: 0 0; rotate: 0deg; }
  50%      { translate: -4px 3px; rotate: 1deg; }
}
@keyframes amb-pool-b {
  0%, 100% { translate: 0 0; rotate: 0deg; }
  50%      { translate: 4px -3px; rotate: -1deg; }
}
.tcm-ambient::before { animation: amb-pool-a 18s ease-in-out infinite; }
.tcm-ambient::after  { animation: amb-pool-b 22s ease-in-out infinite; }

/* ------------------------------------------------------------
   MODULE 4 · Feature / product / stat card icons
   (.tcm-ic, .feat-ic, .cc-ic — the decorative medallions).
   The cards themselves stay locked; only the icon satellites
   micro-float (±3px, cycle 3.5s). nth-of-type stagger so a row
   of four reads as one gentle, organic group rather than a
   marching line. Uses `translate` → hover `transform: scale()`
   still fires untouched.
   ------------------------------------------------------------ */
@keyframes amb-float { 0%, 100% { translate: 0 0; } 50% { translate: 0 -3px; } }

.tcm-ic,
.feat-ic,
.cc-ic {
  animation: amb-float 3.5s var(--amb-ease) infinite;
}
/* organic stagger within a grid — keeps it from looking mechanical */
.feat-card:nth-of-type(2) .feat-ic,
.comp-card:nth-of-type(2) .cc-ic { animation-delay: -.9s; }
.feat-card:nth-of-type(3) .feat-ic,
.comp-card:nth-of-type(3) .cc-ic { animation-delay: -1.8s; }
.feat-card:nth-of-type(4) .feat-ic,
.comp-card:nth-of-type(4) .cc-ic { animation-delay: -2.6s; }

/* ------------------------------------------------------------
   GLOBAL · Footer / copyright = no motion at all (anchor).
   Navbar = no ambient motion. Both honoured by omission.
   Reduced-motion users get a fully still page.
   ------------------------------------------------------------ */
@media (prefers-reduced-motion: reduce) {
  header .logo .mark,
  header .logo .mark .logo-img,
  .card .brand img,
  .tcm-eyebrow i,
  .tcm-ambient::before,
  .tcm-ambient::after,
  .tcm-ic, .feat-ic, .cc-ic { animation: none !important; }
}

/* Pause decorative work outside the rendering area or in background tabs. */
.tc-motion-paused,
.tc-motion-paused::before,
.tc-motion-paused::after,
.tc-motion-paused *,
.tc-motion-paused *::before,
.tc-motion-paused *::after,
.tc-page-hidden,
.tc-page-hidden::before,
.tc-page-hidden::after,
.tc-page-hidden *,
.tc-page-hidden *::before,
.tc-page-hidden *::after {
  animation-play-state: paused !important;
}
