/* ===========================================================================
   motion-word.css — 3D "MOTION / EDITING" word that replaces the coverflow
   slider in the hero of /courses/motion-graphics-and-editing-with-ai.
   Pairs with motion-word.js. Mounted inside the existing .hero-band, which
   already handles the full-bleed margins.
   ========================================================================== */
.mw {
  /* HUVA palette only */
  --mw-face: #1200ff;   /* front of the letters (CTA blue) */
  --mw-deep: #0a0a0a;   /* back of the extrusion (HUVA black) */
  --mw-shadow: #e9ef00; /* hard drop shadow (HUVA lime) */
  position: relative;
  margin: 0;                 /* .hero-band supplies spacing + full bleed */
  height: clamp(160px, 36vh, 400px);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  user-select: none;
  -webkit-user-select: none;
  -webkit-tap-highlight-color: transparent;
  touch-action: pan-y;
}
.mw-word {
  position: relative;
  z-index: 1;
  display: flex;
  white-space: nowrap;
  font-family: 'Noto Sans Armenian', sans-serif;
  font-stretch: expanded;
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: -.02em;
  line-height: .8;
  font-size: min(14vw, 25vh); /* JS shrinks further if the word is too wide */
}
.mw-char {
  position: relative;
  display: inline-block;
  color: transparent;         /* the layers carry the visible glyph */
  will-change: transform;
}
.mw-ghost {
  position: absolute;
  left: 0;
  top: 0;
  will-change: transform;
}
.mw-ghost::before { content: attr(data-char); }

@media (max-width: 900px) {
  .mw { height: clamp(130px, 28vh, 280px); }
  .mw-word { font-size: min(16vw, 20vh); }
}