/* Stryker Trading Academy — homepage motion layer (PREVIEW)
   Loaded only by index-motion.html. Kept in its own file so approving or
   discarding it is one line, not an archaeology exercise in style.css. */

/* Elements start hidden ONLY once the script has confirmed it is running.
   Without this gate, a JS failure would leave the whole page invisible —
   the one bug an animation layer must never be able to cause. */
.m-ready .m-rise,
.m-ready .m-stagger,
.m-ready .m-head,
.m-ready .m-card-rise { opacity: 0; }

.m-ready .m-rise {
  transform: translateY(22px);
  transition: opacity .7s cubic-bezier(.2,.8,.2,1),
              transform .7s cubic-bezier(.2,.8,.2,1);
}
.m-ready .m-rise.m-in { opacity: 1; transform: none; }

/* The chart card comes from slightly further, with a touch of scale, so it
   reads as arriving in front of the copy rather than beside it. */
.m-ready .m-card-rise {
  transform: translateY(34px) scale(.975);
  transition: opacity .9s cubic-bezier(.2,.8,.2,1) .28s,
              transform .9s cubic-bezier(.2,.8,.2,1) .28s;
}
.m-ready .m-card-rise.m-in { opacity: 1; transform: none; }

.m-ready .m-stagger {
  transform: translateY(20px);
  transition: opacity .6s ease, transform .6s cubic-bezier(.2,.8,.2,1);
}
.m-ready .m-stagger.m-in { opacity: 1; transform: none; }

.m-ready .m-head {
  transform: translateY(14px);
  transition: opacity .6s ease, transform .6s cubic-bezier(.2,.8,.2,1);
}
.m-ready .m-head.m-in { opacity: 1; transform: none; }

/* Header condense ---------------------------------------------------------- */
.site-nav, nav.site-nav {
  transition: padding .25s ease, background .25s ease, box-shadow .25s ease,
              backdrop-filter .25s ease;
}
.site-nav.m-condensed {
  padding-top: 10px; padding-bottom: 10px;
  background: rgba(5,5,6,.82);
  backdrop-filter: blur(10px);
  box-shadow: 0 1px 0 0 var(--line-soft), 0 8px 24px -12px rgba(0,0,0,.8);
}

/* Magnetic button ---------------------------------------------------------- */
.m-magnetic { transition: transform .18s cubic-bezier(.2,.8,.2,1),
                          box-shadow .25s ease; }

/* Continuous life ---------------------------------------------------------- */
/* The page felt frozen once entrances finished. These are deliberately slow
   and low-amplitude: on a page people load repeatedly, anything faster stops
   being atmosphere and becomes an irritation. */
@keyframes m-drift {
  0%,100% { transform: translate3d(0,0,0); }
  50%     { transform: translate3d(0,-14px,0); }
}
.m-ready .hero-glow       { animation: m-drift 13s ease-in-out infinite; }
.m-ready .hero-glow-indigo{ animation: m-drift 17s ease-in-out infinite reverse; }

/* A slow sheen across the accent word in the headline. One pass every 9s. */
@keyframes m-sheen { 0% { background-position: -160% 0; }
                     55%,100% { background-position: 260% 0; } }
.m-ready .hero-copy h1 em {
  background: linear-gradient(100deg,
    var(--bull) 0%, var(--bull) 38%,
    #7ef2c4 48%, var(--bull) 58%, var(--bull) 100%);
  background-size: 260% 100%;
  -webkit-background-clip: text; background-clip: text;
  color: transparent;
  animation: m-sheen 9s ease-in-out infinite;
}

/* The live pair badge on the chart card pulses like a connected feed. */
@keyframes m-pulse { 0%,100% { opacity: .35; } 50% { opacity: 1; } }
.m-ready .chart-dots span:first-child {
  background: var(--bull);
  animation: m-pulse 2.2s ease-in-out infinite;
}

/* Feature cards lift on hover — the clearest signal that a surface is real. */
.m-ready .feature-card {
  transition: transform .3s cubic-bezier(.2,.8,.2,1),
              border-color .3s ease, box-shadow .3s ease;
}
.m-ready .feature-card:hover {
  transform: translateY(-5px);
  border-color: var(--teal-dim);
  box-shadow: 0 18px 40px -22px rgba(0,0,0,.9);
}

/* Motion here carries no information the layout does not already convey, so
   it goes entirely rather than being merely shortened. */
@media (prefers-reduced-motion: reduce) {
  .m-ready .m-rise, .m-ready .m-stagger,
  .m-ready .m-head, .m-ready .m-card-rise {
    opacity: 1 !important; transform: none !important; transition: none !important;
  }
  .m-ready .hero-glow, .m-ready .hero-glow-indigo,
  .m-ready .hero-copy h1 em, .m-ready .chart-dots span:first-child {
    animation: none !important;
  }
  .m-ready .hero-copy h1 em { color: var(--bull); }
  .m-ready .feature-card { transition: none; }
}

/* ============================================================================
   MOTION LAYER 2 — the visible tier
   ============================================================================ */

/* Live price on the chart card ---------------------------------------------- */
.m-price-wrap {
  display: flex; align-items: baseline; gap: 10px;
  margin-left: auto; padding-right: 12px;
  font-family: var(--font-mono, monospace);
}
#m-price { font-size: 15px; font-weight: 700; transition: color .2s ease; }
#m-change { font-size: 11.5px; }
#m-price.up, #m-change.up { color: #03c988; }
#m-price.down, #m-change.down { color: #e5484d; }
/* Flash on tick — the cue traders actually read on a live board. */
@keyframes m-tick-flash { 0% { background: rgba(255,255,255,.16); }
                          100% { background: transparent; } }
#m-price.m-tick { animation: m-tick-flash .45s ease-out; border-radius: 3px; }

/* Rotating headline word ----------------------------------------------------- */
.m-rotate { display: inline-block; transition: opacity .35s ease, transform .35s ease; }
.m-rotate.m-out { opacity: 0; transform: translateY(-12px); }
@keyframes m-word-in { from { opacity: 0; transform: translateY(14px); }
                       to   { opacity: 1; transform: none; } }
.m-rotate.m-in-word { animation: m-word-in .45s cubic-bezier(.2,.8,.2,1); }

/* Candle rain ---------------------------------------------------------------- */
.m-canvas {
  position: absolute; inset: 0; z-index: 0;
  pointer-events: none;
  /* Fades out toward the copy so it never competes with the headline —
     atmosphere behind the message, not on top of it. */
  -webkit-mask-image: linear-gradient(to bottom, #000 0%, #000 55%, transparent 92%);
          mask-image: linear-gradient(to bottom, #000 0%, #000 55%, transparent 92%);
}
.hero { position: relative; }
.hero-copy, .chart-card { position: relative; z-index: 2; }

/* Cursor spotlight ----------------------------------------------------------- */
.m-spot {
  position: absolute; top: 0; left: 0;
  width: 520px; height: 520px; border-radius: 50%;
  background: radial-gradient(circle, rgba(0,173,181,.10) 0%, transparent 68%);
  pointer-events: none; z-index: 1; opacity: 0;
  transition: opacity .4s ease;
}

/* Scroll progress ------------------------------------------------------------ */
.m-progress {
  position: fixed; top: 0; left: 0; right: 0; height: 2px; z-index: 9998;
  background: linear-gradient(90deg, var(--teal), var(--bull));
  transform: scaleX(0); transform-origin: 0 50%;
}

/* Card tilt ------------------------------------------------------------------ */
.m-tilt {
  transition: transform .35s cubic-bezier(.2,.8,.2,1),
              border-color .3s ease, box-shadow .3s ease;
  transform-style: preserve-3d;
}
.m-tilt:hover { border-color: var(--teal-dim);
                box-shadow: 0 24px 50px -26px rgba(0,0,0,.95); }

@media (max-width: 900px) {
  /* The canvas and spotlight cost frames on a phone and read as noise on a
     small screen. */
  .m-canvas, .m-spot { display: none; }
  .m-price-wrap { padding-right: 4px; }
  #m-price { font-size: 13px; }
}

@media (prefers-reduced-motion: reduce) {
  .m-canvas, .m-spot, .m-progress { display: none !important; }
  #m-price.m-tick { animation: none !important; }
  .m-rotate { transition: none !important; }
  .m-tilt { transition: none !important; transform: none !important; }
}